Discussion générale Modification de css par js
Bonjour à tous,
Je cherche un script qui me permettrait via un JS de faire une modification de css..
Je m'explique:
J'aimerais pouvoir offrir la possibilité de fournir des thèmes plus évolué dans leurs comportement.
Comme par exemple pouvoir passer un thème à 1000px en 100% en cliquant sur un bouton inclus dans le header d'un thème par exemple avec un cookie...
Or, je ne trouve pas de doc assez explicite, pour me lancer dans cette modification, et j'aurais souhaité un peu d'aide^^
Je suis douée en graphisme, mais en JS et php je suis une vrai bille (on se moque pas )
Edit: J'ai bien trouvé un article qui en traite partiellement, mais cela reviendrais à ce genre de codage, assez sommaire. Voir même celui-ci ...
J'ai même trouvé celui là :
Je cherche un script qui me permettrait via un JS de faire une modification de css..
Je m'explique:
J'aimerais pouvoir offrir la possibilité de fournir des thèmes plus évolué dans leurs comportement.
Comme par exemple pouvoir passer un thème à 1000px en 100% en cliquant sur un bouton inclus dans le header d'un thème par exemple avec un cookie...
Or, je ne trouve pas de doc assez explicite, pour me lancer dans cette modification, et j'aurais souhaité un peu d'aide^^
Je suis douée en graphisme, mais en JS et php je suis une vrai bille (on se moque pas )
Edit: J'ai bien trouvé un article qui en traite partiellement, mais cela reviendrais à ce genre de codage, assez sommaire. Voir même celui-ci ...
J'ai même trouvé celui là :
Code JAVASCRIPT :
1. <script> 2. function init() { 3. var eng = document.getElementById('english'); 4. var nl = document.getElementById('nederlands'); 5. eng.onclick = size(); 6. nl.onclick = size(); 7. } 8. 9. function size() { 10. this.className = 'large'; 11. this.style.width = '450px'; 12. this.style.height = 'auto'; 13. var other = (this.id == 'nederlands') ? 'english' : 'nederlands'; 14. document.getElementById(other).className = 'small'; 15. document.getElementById(other).style.width = '150px'; 16. } 17. </script>
Je suis trop forte ( faut bien se jeter des fleurs de temps à autre loOol)
J'ai réussi grâce à ce site à faire ce que je voulais... (Visible sur le site démonstration sur le thème WinVista V2).
Reste à voir le cookie pour garder la préférence sur la session
J'ai réussi grâce à ce site à faire ce que je voulais... (Visible sur le site démonstration sur le thème WinVista V2).
Reste à voir le cookie pour garder la préférence sur la session
pas mal en effet par contre il faut faire les images en fonction de quelle taille ?
Citation made in pegasetkc : "Sauvez un arbre mangez un castor"
Depuis que je connais Saturnin mon humour ressemble a cela : j'ai un string dans l'array
Pour le background et les autres?
C'est le principe de base, rien qui ne change vraiment, puisque tu duplique juste le design.css en design1.css .. En changeant juste le witdh du global
Ensuite, c'est comme d'hab pour le codage ...
C'est le principe de base, rien qui ne change vraiment, puisque tu duplique juste le design.css en design1.css .. En changeant juste le witdh du global
Ensuite, c'est comme d'hab pour le codage ...
Super comme nouvelle.. Pour les thèmes que je créé, j'ai mis en général des colonnes à 250px. Au boulot sur les ordinateurs, les écrans ont une réso de 1024*768, et le forum devient difficile à lire.
Je pensais m'orienter vers un tutoriel pour oter les colonnes.
Je vais suivre ton post avec attention, (enfin si j'y comprends quelques chose..)
Je pensais m'orienter vers un tutoriel pour oter les colonnes.
Je vais suivre ton post avec attention, (enfin si j'y comprends quelques chose..)
Citation:
Pour la première partie c'est bon, j'ai capiche... Malheureusement après 4 heures de recherche, je n'ai compris qu'un chose sur les cookies..
Il faut impérativement cette partie :
Ensuite là ou ça coince pour moi :
Le soucis, c'est ou je la prends cette valeur ? Parce que si j'ai bien compris il faut lui attribuer la valeur d'un div ou d'une class ID seul soucis sur cette partie, c'est que le code que j'ai pour appeler le changement de desing est celui-ci:
Et que la partie code concerné est celle-ci:
Or il faudrait créer le cookies sur les liens "css1" et "css2" !! Et je vois pas comment faire !!!
Kona si tu peux m'aider à comprendre ...
Je vais suivre ton post avec attention, (enfin si j'y comprends quelques chose..)
Pour la première partie c'est bon, j'ai capiche... Malheureusement après 4 heures de recherche, je n'ai compris qu'un chose sur les cookies..
Il faut impérativement cette partie :
Code JAVASCRIPT :
//Envoi le cookie au client. function sendCookie(name, value) { var date = new Date(); date.setMonth(date.getMonth() + 1); //1 mois de validité. document.cookie = name + '=' + value + '; expires = ' + date.toGMTString() + '; path = "/"'; }
Ensuite là ou ça coince pour moi :
Code JAVASCRIPT :
//Récupère la valeur du cookie. function getCookieHeader(name) { start = document.cookie.indexOf(name + "=") if( start >= 0 ) { start += name.length + 1; end = document.cookie.indexOf(';', start); if( end < 0 ) end = document.cookie.length; return document.cookie.substring(start, end); } return 1; }
Le soucis, c'est ou je la prends cette valeur ? Parce que si j'ai bien compris il faut lui attribuer la valeur d'un div ou d'une class ID seul soucis sur cette partie, c'est que le code que j'ai pour appeler le changement de desing est celui-ci:
Code JAVASCRIPT :
<script type="text/javascript"> function setActiveStyleSheet(title) { var i, a, main; for(i=0; (a = document.getElementsByTagName("link")[i]); i++) { if(a.getAttribute("rel").indexOf("style") != -1 && a.getAttribute("title")) { a.disabled = true; if(a.getAttribute("title") == title) a.disabled = false; } } } </script>
Et que la partie code concerné est celle-ci:
Code TPL :
<div id="links"> <a class="small_link" href="javascript:setActiveStyleSheet('css1')">En 1000 px</a> | <a class="small_link" href="javascript:setActiveStyleSheet('css2')">En 100%</a> | <a class="small_link" href="{START_PAGE}" title="{L_INDEX}">{L_INDEX}</a> # START link_bread_crumb # <img src="{PATH_TO_ROOT}/templates/{THEME}/images/breadcrumb.png" alt="" class="valign_middle" /> <a class="small_link" href="{link_bread_crumb.URL}" title="{link_bread_crumb.TITLE}">{link_bread_crumb.TITLE}</a> # END link_bread_crumb # </div>
Or il faudrait créer le cookies sur les liens "css1" et "css2" !! Et je vois pas comment faire !!!
==> <==
Kona si tu peux m'aider à comprendre ...
Elle est géniale ta trouvaille Swan, ça va satisfaire beaucoup de monde(moi le premier)
Le site démo est à jour avec la modification sur le WinVista V2 ! Amusez vous à passez d'un lien à l'autre en changeant le 1000px par le 100% et vice versa
Carl le soucis, c'est que cette modification ne sera pas appliqué pour tous les thèmes, car tous les thèmes ne sont pas conçu de la même manière. D'où le fait que les thèmes CsN sont évolutifs...
Sur certains thèmes cette manipulation sera certainement applicable à d'autre thèmes. Mais j'avoue ne pas avoir testé la cinquantaine de thèmes existants
Carl le soucis, c'est que cette modification ne sera pas appliqué pour tous les thèmes, car tous les thèmes ne sont pas conçu de la même manière. D'où le fait que les thèmes CsN sont évolutifs...
Sur certains thèmes cette manipulation sera certainement applicable à d'autre thèmes. Mais j'avoue ne pas avoir testé la cinquantaine de thèmes existants
Vraiment sympa comme idée.
Et voilà c'est fait ! Les accessibilités sont ajoutées
Alors en cliquant sur l'icone "A":
*Fonctionne sur tout le site pour les messages principaux.
Alors en cliquant sur l'icone"-":
- Retour à 1000px font à 12px (mode normal). Sauvegarde de préférence avec un cookie...
Alors en cliquant sur l'icone"+":
- Passage à 100% font à 12px (mode plein écran). Sauvegarde de préférence avec un cookie...
Toujours sur le même thème, sur le site démo ^^
Le thème WinVista V2 sera dans les ressources dans la journée ...
Alors en cliquant sur l'icone "A":
- 1 clic = A en 100% font à 12px
- 2 clic = A+ en 100% font à 13px
- 3 clic = A++ en 100% font à 14px
- 4 clic = Vous revenez en position d'origine.
*Fonctionne sur tout le site pour les messages principaux.
Alors en cliquant sur l'icone"-":
- Retour à 1000px font à 12px (mode normal). Sauvegarde de préférence avec un cookie...
Alors en cliquant sur l'icone"+":
- Passage à 100% font à 12px (mode plein écran). Sauvegarde de préférence avec un cookie...
Toujours sur le même thème, sur le site démo ^^
Le thème WinVista V2 sera dans les ressources dans la journée ...
Il y a un souci d'affichage du thème WinVista2 sous Firefox, le thème devient tout blanc et sans application du css après 2 secondes d'affichage, il faut cliquer sur le - (passer en mode standard) pour retrouver tout le css, et après le passage de + à - est OK.
<p class="float_right"></p>Gérez vos comptes bancaires de façon simple et efficace avec BanqueManager
Téléchargement gratuit ici
--------------------------------------------------------------------------------
Et le "bin's " se produit à chaque changement de page (news=>download=>gallery etc..)
Edit : j'ai la version 3.6.11 de FF
Edit : j'ai la version 3.6.11 de FF
<p class="float_right"></p>Gérez vos comptes bancaires de façon simple et efficace avec BanqueManager
Téléchargement gratuit ici
--------------------------------------------------------------------------------
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie