[Résolu] Modifier la css quand JS est activé/désactivé...

Question

horse_pyro

25 Jun 2007 à 11:58

Bonjour à tous,

Suite au post http://forum.alsacreations.com/topic-2-26153-1-resoluValidation--une-feuille-de-style-dans-une-balise-noscript.html#copy, je cherche à faire quelque chose dans le même genre...

Je m'explique :

Lorsque l'utilisateur a désactivé javascript, cela modifie la disposition et l'affichage de mes pages car le menu passe d'un "menu déroulant" à un "menu déroulé"...

Pour pallier à cela, j'ai employé la technique suivante : j'ai mis ce no-script dans mon <head>, qui modifie la css de façon à ce que la version sans JS ressemble à celle avec JS.


<noscript>
<style type="text/css">

#filariane{
  margin-top:-274px;
} 

#zoneactive, #zoneactivemenu, #zoneactive2{
  margin-top:-225px;
} 
    
.menu { 
  text-align:left;
  padding-left:15px;
}

.ssmenu { 
  text-align:left;
  padding-left:45px;
}  

</style>
</noscript>

Cela fonctionne parfaitement, mais malheureusement, cela ne passe pas au validateur (xhtml 1.0 strict).

En fouinant sur AlsaC, j'ai trouvé le post cité ci-dessus, seulement, je n'arrive pas à mettre en oeuvre la solution qu'a utilisé axiles Smiley decu

... Et oui, je suis une grosse m**de en javascript... J'ai bien compris qu'il faut avoir une css prévue pour le cas ou JS est désactivé, et modifier la css avec JS s'il est activé... mais bon Smiley sweatdrop

Parmi les trucs qui me perturbent :
- j'ai non seulement des id à modifier, mais aussi des class ;
- à moins de modifier non pas les class et id, mais directement les attributs (margin-top et autres) dans le javascript... ;
- bien d'autres encore, mais ça doit être tellement idiot que je vais pas tout vous dire, sinon vous allez plus vouloir me parler Smiley langue

Voilà voilà, si quelqu'un pouvait éclairer ma lanterne, je lui en serais énormément reconnaissant...

Merci beaucoup,

Pierre
Modifié par horse_pyro (27 Jun 2007 - 09:37)

koala64

Modérateur

25 Jun 2007 à 13:37

Salut,

Il faut que tu procèdes à l'inverse. Smiley smile

En fait, la première chose à faire est de faire fonctionner/de faire la mise en page de ton site avec xhtml/css uniquement.

De là, via js, tu fais ce que tu veux. S'il y a besoin de modifier un style pour un menu déroulant, tu peux spécialiser le style de ton élément en ajoutant une classe css ou un id via js par exemple qui va planquer un bout de contenu, le bouger de place ou autre.

Dans cette optique, la balise noscript ne sert à rien. Smiley cligne

Modifié par koala64 (25 Jun 2007 - 13:50)

horse_pyro

25 Jun 2007 à 14:22

koala64 a écrit :

En fait, la première chose à faire est de faire fonctionner/de faire la mise en page de ton site avec xhtml/css uniquement.

Ok, ça c'est fait Smiley smile

(mais pas encore mis en ligne)

koala64 a écrit :

De là, via js, tu fais ce que tu veux. S'il y a besoin de modifier un style pour un menu déroulant, tu peux spécialiser le style de ton élément en ajoutant une classe css ou un id via js par exemple qui va planquer un bout de contenu, le bouger de place ou autre.

Euh... c'est là tout le problème...
Vaut il mieux ?
- faire une autre classe/id pour chaque élément à modifier (pour le cas où JS est activé) dans ma css, et changer la classe/id des éléments en question avec JS
- modifier les attributs de chaque élément par le biais de JS

Et surtout : comment faire pour implémenter la solution qui sera adoptée..?
Modifié par horse_pyro (25 Jun 2007 - 14:23)

koala64

Modérateur

25 Jun 2007 à 14:37

Je suppose que tout n'est pas à reprendre une fois la css établie donc m'est avis qu'il vaut mieux spécialiser plutôt que tout changer.

Après, il ne s'agit, par exemple, que d'ajouter une classe pour un élément ayant un id donné
(ou une classe sur un élément repéré par une classe... mais c'est plus compliqué -> voir ici pour l'ajout de plusieurs classes)
Modifié par koala64 (25 Jun 2007 - 15:05)

horse_pyro

25 Jun 2007 à 15:04

Ca a l'air pas mal de procéder comme ça, mais je comprend pas tout... faute de mieux, j'essaye de trouver une soluce plus simple (pour moi Smiley langue

)

Est ce que faire un truc comme cela pourrait marcher :
Prenons comme exemple ma classe "menu", et les éléments qui en font partie (menu1, menu2, ...)...

- j'ai la css de la classe "menu" qui est comme il faut quand JS est désactivé ;
- je crée la css de la classe "menujs", qui est comme il faut quand JS est activé ;
- je met dans mon html ceci, afin de modifier la classe des éléments de mon menu :


<script type="text/javascript">
document.getElementById('menu1').className = 'menujs'; 
document.getElementById('menu2').className = 'menujs'; 
...
</script>

... J'ai bon ? Je ne suis absolument pas sûr de la syntaxe, ni même du reste ! Smiley confus

Merci de ton aide en tout cas !

Pierre
Modifié par horse_pyro (25 Jun 2007 - 15:06)

koala64

Modérateur

25 Jun 2007 à 15:10

a écrit :
j'ai la css de la classe "menu"

L'id tu veux dire non ? Smiley ravi

a écrit :
J'ai bon ?

oui, ça représente le premier cas dont je te parlais. Smiley cligne

Après, tu n'es pas obligé de le mettre dans ton html directement ; dans un fichier externe, c'est préférable. Smiley smile

horse_pyro

25 Jun 2007 à 16:05

Re !

Bon, alors je ne dois pas faire comme il faut, parceque cela ne fonctionne pas du tout Smiley bawling

Je tente une autre approche : faire modifier les styles par JS directement... seulement, cela ne fonctionne pas non plus...

Le code de mon fichier "change.js" :


function change()
{
document.getElementById('filariane').style.marginTop = '-64px';
document.getElementById('menu1').style.paddingLeft = '0px';
document.getElementById('menu1').style.textAlign = 'right';
document.getElementById('menu2').style.paddingLeft = '0px';
document.getElementById('menu2').style.textAlign = 'right';
document.getElementById('menu3').style.paddingLeft = '0px';
document.getElementById('menu3').style.textAlign = 'right';
document.getElementById('menu4').style.paddingLeft = '0px';
document.getElementById('menu4').style.textAlign = 'right';
document.getElementById('ssmenu1').style.paddingLeft = '0px';
document.getElementById('ssmenu2').style.paddingLeft = '0px';
document.getElementById('ssmenu3').style.paddingLeft = '0px';
document.getElementById('ssmenu4').style.paddingLeft = '0px';
document.getElementById('info').style.marginTop = '-64px';
document.getElementById('zoneactive').style.marginTop = '-15px';
document.getElementById('zoneactive2').style.marginTop = '-15px';
document.getElementById('zoneactive3').style.marginTop = '-50px';
document.getElementById('zoneactivemenu').style.marginTop = '-15px';
}

Si je ne me trompe pas, c'est censé écraser les valeurs (dans la css) des padding-left, margin-top et autres text-align des éléments dont l'id est donnée, et les remplacer par ceux spécifiés... non ?

Je fais l'appel dans mon html comme ceci :
dans le head :


<script type="text/javascript" src="js/change.js"></script>

dans le body :

<script type="text/javascript">
change ();</script>

Qu'est-ce que je fais mal ? (parceque je dois forcément faire quelque chose de mal Smiley confus

)

Merci

Pierre (en mode aaaaahhh Smiley eek

comprend pas ! )
Modifié par horse_pyro (25 Jun 2007 - 16:06)

koala64

Modérateur

25 Jun 2007 à 16:10

a écrit :
faire modifier les styles par JS directement

A éviter ! Smiley cligne

Lorsque tu affectes des styles via JS, tu disperses les instructions de présentation (css + js) ce qui rend la maintenance plus difficile. Par ailleurs, les styles affectés par js ont un media all de base ce qui fait qu'un contenu caché pour l'écran peut aussi être caché pour l'impression alors que ça ne devrait pas être le cas.

Je te conseille plutôt de repasser par les classes, quitte à mettre ton code ici si ça ne marche pas.

horse_pyro

25 Jun 2007 à 16:24

Ok, va pour les classes ! Smiley smile

Est-ce que cela serait possible de me faire un piti exemple ? Cela m'aiderait à y voir plus clair...

Alors...

Dans ma page html, j'ai ceci :

<div id="filariane">gnagnagna blablabla</div>

dans ma css, la version qui va bien quand JS est désactivé :

#filariane{
  font-family:Arial; 
  margin-top:-274px;
  margin-left:200px; 
  float:left;
}

Et quand JS est activé, il faudrait que la margin-top soit de -64px à la place de -274px...

Pourrais tu me montrer comment faire, comme cela je ne t'embêterai plus à poster ce que je suppose être des inepsies, comme je l'ai fait depuis ce matin Smiley cligne

.

Merci énormément, tu vas peut-être m'éviter une cirse de nerfs Smiley ohwell

Pierre

koala64

Modérateur

25 Jun 2007 à 16:30

#filariane.maClasse {
    margin-top: -64px;
}

puis tu ajoutes, via js, la classe à l'élément ayant l'id souhaité.
Modifié par koala64 (25 Jun 2007 - 16:30)

horse_pyro

25 Jun 2007 à 16:40

Comme ça ?

<script type="text/javascript">
document.getElementById('filariane').className = 'maClasse';
</script>

Shinuza

25 Jun 2007 à 17:45

Bonjour,
tu peux faire plus simple, du ajoutes la classe du type .hasJS sur le body.

Et tu fais :

#filariane {
  font-family:Arial; 
  margin-top:-274px;
  margin-left:200px; 
  float:left;
}

.hasJS #filariane {
  margin-top:-64px;
}

On utilise ça ici, c'est Gatsu35 qui me l'a montré, et c'est très utile quand on veut faire du progressive Enchancement tout en conservant l'accessibilité

koala64

Modérateur

25 Jun 2007 à 18:26

a écrit :
tu peux faire plus simple, du ajoutes la classe du type .hasJS sur le body.

Ben le principe est le même... Après, il peut être intéressant, en effet, de l'affecter au body si on veut se laisser la possibilité de modifier n'importe quelle balise. Smiley cligne

Shinuza

25 Jun 2007 à 18:45

Niveau maintenance c'est autrement plus simple, il n'a qu'a modifier sa feuille de style, et non pas sa feuille de style ET le js.

De plus le traitement que je propose effectue une seule opération relativement légère sur le body, qui sera autrement moins longue (à l'utilisation et à la mise en place/application) que le fait de catcher chaque element un par un.

Enfin cette méthode permet de s'affranchir de la structure de la page, ce que ne fait pas l'autre méthode!

koala64

Modérateur

25 Jun 2007 à 20:00

Je n'ai pas dit le contraire ; on est d'accord.
C'est le principe de css -> toujours prendre au plus large pour spécialiser ensuite...
... mais la méthode est la même ; on ne fait qu'affecter une classe à un élément. Smiley smile

horse_pyro

26 Jun 2007 à 11:07

Salut à tous !

Merci pour toutes ces réponses, c'est sympa Smiley cligne

a écrit :

tu peux faire plus simple, du ajoutes la classe du type .hasJS sur le body.

Comme ceci ?


</head>

<body>

<script type="text/javascript">
document.getElementById('body').className='hasJS';
</script>

...le reste de mon body

Merci !

koala64

Modérateur

26 Jun 2007 à 11:10

Salut,

Le mieux serait peut-être de tester avant de poser la question non ? Smiley cligne

Ici, la réponse est non. body n'est pas un id mais plutôt... un tag. Je te laisse faire les recherches pour savoir comment le sélectionner. Smiley smile

horse_pyro

26 Jun 2007 à 11:26

Oui, pardon, j'ai été un peu trop "consommateur" sur ce coup là, je m'en excuse... Smiley confused

Je m'en vais googler de ce pas ! Smiley cligne

A tout bientôt !

horse_pyro

26 Jun 2007 à 11:36

Cela fonctionne, merci ! Smiley smile

Pour info pour ceux qui cherchent la même chose, voila comment sélectionner le body et lui ajouter une classe :

document.body.className='nouvelleclasse';

Je vais appliquer cette méthode aux autres éléments qui doivent être modifiés quand JS est activé... si j'ai un problème, je reposte... (je mettrai le sujet en [résolu] après...

Encore merci !

[edit : c'est tout bon ! Smiley biggrin

cool à mort, comme diraient les djeuns]
Modifié par horse_pyro (26 Jun 2007 - 11:44)

Sujet clos