Css et javascripts ?

Signaler
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005
-
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005
-
Bonjour,

Je recherche une piste privilégiée CSS, sinon en javascript (mais là je suis une grosse bille).

J'ai plusieurs styles pour mon site, et je voudrais changer le comportement de mes pages (en fait de mon menu, et des styles).

Suivant le style, j'ai les menus affichés verticalement et les sous-menus apparaissants :



Menu1

-->Sous-Menu1

-->Sous-Menu2

Menu2

-->etc...

et les styles affichés horizontalement, mais masqués :

Styles :

-->Style1-->Style2-->Style3



Je n'arrive pas du tout à inverser la tendance (comprendre afficher les
menus horizontalement, et masqués et les styles verticalemnent et
affichés).



Donc si vous avez des éléments de réponses, ou peut-être tout simplement comment changer de fichier.js suivant le css désiré ?



Je suis preneur pour toute idée

TofMan

7 réponses

Messages postés
822
Date d'inscription
vendredi 25 mai 2001
Statut
Modérateur
Dernière intervention
1 août 2014

Bonjour,


il faut pour cela que tu mettes tes menus dans des listes à puces. CSS possède une propriété nommée "display" qui va te permettre de jongler entre un affichage de type liste, de type block ou inline, c'est à dire sur la même ligne.


Ce que je te conseille c'est soit de modifier "à la volée" tes propriétés CSS en javascript, soit de créer une feuille de style pour chacun des styles. (ce qui est à mon avis plus intéressant).


Plus de renseignements sont disponible dans cet article publié sur OpenWeb : http://www.openweb.eu.org/articles/presentations_alternatives/

tch@o..

orion
http://jimmy.perret.free.fr
http://blogs.developpeur.org/orion/
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005

Salut OriOn,

Merci pour ta réponse, et le lien OpenWeb, que je connais et utilise déjà.

Je dois avouer que j'utilise déjà les différents blocks CSS dans mes différents styles. Mais j'utilise en plus le .js pour permettre le mouseover. Mon souci c'est que ça me permet de faire exactement ce que je veux sur 1 style, mais si je change de style, he bien, ma foi, ce qu'il doit se passer, se passe...
En fait, je voudrais tout "bêtement" masquer/afficher différentes parties de ma page suivant le CSS défini. Je voulais également le rendre possible soit au clic souris, soit au Mouseover. Et comment définir un style statique par dessus ?

Le "Tout bêtement" c'était la théorie, quand j'ai terminé ma 1ère feuille de style, qui se comportait exactement de la façon escomptée, je suis passé à la 2nde pour en arriver au bon résultat aussi. Le problème, c'est que je touche toujours au .js pour ce que je cherche...

Ou alors comment me débarasser du js ?
Messages postés
822
Date d'inscription
vendredi 25 mai 2001
Statut
Modérateur
Dernière intervention
1 août 2014

Te débarasser du JS ne me semble pas possible vu ce que tu cherches à faire.

En revanche pour afficher certains blocs de type "div" par exemple (l'exemple le plus courant), il te faut à nouveau utiliser la propriété display.

Par exemple :

<script type="text/javascript">
function afficher(div) {
if (document.getElementById(div).style.display=='none')
document.getElementById(div).style.display='inline';
else
document.getElementById(div).style.display='none';
}
</script>

Tu n'as ensuite plus qu'à appeller ta fonction et de déclarer ton div "caché" de cette manière là : style="display: none".

Voilà, je ne sais pas si j'ai bien tout compris à ton problème.

Mon exemple est disponible en ligne directement sur http://www.akro-net.org en cliquant sur le lien "Les clients IRC" qui se trouve dans le menu de gauche.

Hésites pas à me fournir un exemple disponible en ligne pour que je puisse "visualiser" le problème.

tch@o..

orion
http://jimmy.perret.free.fr
http://blogs.developpeur.org/orion/
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005

En fait, j'arrive très bien à afficher/masquer un
sur un style.
Je le masque au clic souris ou au MouseOver, c'est pas le problème.
Là où je coince royalement, c'est de changer le comportement de ma page en changeant le style, dans la mesure où je cherche à modifier les effets javascripts en changeant de style.

Avec style1.css :
1/ j'affiche les menus et sous-menus en "block"
2/ je masque les styles disponibles, ils s'affichent au clic souris "inline"

Avec style2.css :
1/ j'affiche les menus, les sous-menus sont masqués et "inline" apparaissent au mouseover.
2/ j'affiche les styles disponibles "block"

Avec style3.css :
Tout afficher sans rien masquer, pas d'effest js.

J'espère que c'est plus clair pour toi, en espérant que oui, comme ça tu pourras me venir en aide héhé.

De mon côté, je vais voir ton lien, en espérant que cela m'aidera. En tout cas je te tiens au courant.

TofMan
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005

Donc, l'exemple que tu me donnes c'est ce que je fais aujourd'hui en partie sur 1 feuille de style.



Ma question repose en fait sur la possibilité d'adapter un comportement js en fonction d'un css défini.

En CSS, il me semble pas pouvoir définir le comportement du js, par
contre en js, je peux peut-être modifier les comportements suivant le
css choisi, non ?

Et dans ce cas, comment faire ?

Pour l'instant j'utilise un switcher de style en .js, je peux
l'utiliser pour définir des actions à mener suivant le CSS activé ?
Messages postés
822
Date d'inscription
vendredi 25 mai 2001
Statut
Modérateur
Dernière intervention
1 août 2014

Ce que tu peux faire c'est activer tel ou tel fonctionnalité via JS en testant par exemple le nom du style css en cours d'exécution..

Je vois pas trop ce que tu cherches à faire en faites :/

tch@o..

orion
http://jimmy.perret.free.fr
http://blogs.developpeur.org/orion/
Messages postés
5
Date d'inscription
mardi 8 avril 2003
Statut
Membre
Dernière intervention
16 septembre 2005

Pour résumer à la simplicité absolue, disons que je veux un fichier css
sans aucun effet javascript, et un deuxième fichier css avec des
javascripts.



Donc tester le fichier css activé, et activer ou non le programme JS.



Dans ce cas-là comment ça se teste ?



Deuxième question, si l'utilisateur utilise Mozilla Ffox et change de
css via l'extension stylesheet choser, est-ce que le javascript saura
l'interpréter ?



TofMan