Easy-Design.Net forum




Discussion générale Modification de css par js

Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/10/2010 à 14h53
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 :s (on se moque pas :heuu)

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>
 
 


swan_signature

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/10/2010 à 16h07
:yesss 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 :hum


swan_signature

Site web    
pegasetkc Membre non connecté

EDN Maitre-Sage

Rang

Avatar

Inscrit le : 15/04/2010 à 19h37

Messages: 1940

Le 23/10/2010 à 17h44
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
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/10/2010 à 17h52
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 ...


swan_signature

Site web    
gerald72 Membre non connecté

EDN Motivé(e)

Rang

Avatar

Inscrit le : 20/09/2009 à 12h24

Messages: 371

Le 23/10/2010 à 19h37
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..)
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/10/2010 à 21h12
Citation:
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>&nbsp; | &nbsp;<a class="small_link" href="javascript:setActiveStyleSheet('css2')">En 100%</a>&nbsp; | &nbsp;<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 ...


swan_signature

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 23/10/2010 à 23h13
C'est bon, j'ai trouvé le bon script ici :)

Cela fonctionne en locale, donc je mettrais à jour le thème WinVistaV2 à jour demain ^^


swan_signature

Site web    
Carl Johnson Membre non connecté

EDN Intéressé(e)

Rang

Avatar

Inscrit le : 04/11/2009 à 03h44

Messages: 94

Le 24/10/2010 à 00h50
Elle est géniale ta trouvaille Swan, ça va satisfaire beaucoup de monde(moi le premier) :ok
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 24/10/2010 à 12h58
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 ;)


swan_signature

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 24/10/2010 à 14h41
Maintenant que j'ai compris le principe de interchangeabilité des css, je vais aussi pouvoir essayer d'intégrer les accessibilité de lecture pour les mal-voyants...


swan_signature

Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 25/10/2010 à 11h04
Et voilà c'est fait ! Les accessibilités sont ajoutées ;)

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 ...


swan_signature

Site web    
infoking1 Membre non connecté

EDN Erudit(e)

Rang

Avatar

Inscrit le : 22/09/2009 à 12h10

Messages: 1244

Le 25/10/2010 à 13h06
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
--------------------------------------------------------------------------------
Site web    
Swan Membre non connecté

Administrateur

Rang

Avatar

Inscrit le : 01/08/2009 à 22h53

Messages: 8431

Le 25/10/2010 à 13h16
:heu C'est étrange, car je n'ai pas le soucis sous firefox ... Les caches ont été régénérés.

Quelqu'un d'autre l'as eu ce bin's?


swan_signature

Site web    
infoking1 Membre non connecté

EDN Erudit(e)

Rang

Avatar

Inscrit le : 22/09/2009 à 12h10

Messages: 1244

Le 25/10/2010 à 13h23
Et le "bin's " se produit à chaque changement de page (news=>download=>gallery etc..)

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
--------------------------------------------------------------------------------
Site web    
Répondre
Vous n'êtes pas autorisé à écrire dans cette catégorie