Animer mon menu en jQuerry ?

Bonjour, j'ai fait une sorte de menu/sélecteur tridimensionnel qui lors d'un clique sur un lien, actualise un div qui est à coté. (Oui je sais, cay pas bien pour les bookmark )Le div "actif" est symbolise par une classe "actif".
Ben le mieu c'est d'aller voir : http://bioslord.homelinux.com/selecteur/
(Y allez pas tous en même temps c'est on serveur perso vieux de 9 ans )

Et avec tout ça je voudrais le jQuerrysé , il faudrai donc déplacer la classe 'actif' lors du clique, mais je suis pas vraiment au top avec jQuery.

Cependant, il y a un problème, en effet, j'ai deux class sur la même balise ! les element du debut et de fin si vous regardez mon lien, ils sont arrondi ! donc il y une class 'first' et 'last' + la class 'actif' et ça, le w3c validator me dit que j'ai pas le droit alors que pourtant j'ai deja vu ça .

Mes question sont donc: comment déplacer la classe actif et comment empecher ce probleme de classe en double ?

Merci

Edit: comment ça ce fait que la fonction preview du forum a disparu ? (a moins que y en n'est jamais eu ?)
Modifié par bioslord (13 Jul 2010 - 20:51)

Salut,

bioslord a écrit :
Cependant, il y a un problème, en effet, j'ai deux class sur la meême balise ! les element du debut et de fin si vous regardez mon lieu sont arrondi !

Chez moi c'est arrondi uniquement sous Safari, et encore seulement le 'last'.

bioslord a écrit :
donc il y une class 'first' et 'last' + la class 'actif' et ça, le w3c validator me dit que j'ai pas le droit

Deux classes sur un même élément c'est parfaitement valide. Que te dis exactement le validateur ?

bioslord a écrit :
comment déplacer la classe actif

Tu peux remplacer la ligne :

$("a").click(function(){ // on selectionne tous les liens et on définit une action quand on clique dessus

...par...

var lis = $('#leftmenu li'); // récupération des lis du menu dans une variable
lis
    .find('a') // on selectionne tous les liens des lis
    .click(function(){ // et on définit une action quand on clique dessus
        lis.removeClass('actif'); // suppresion de la classe actif sur toutes les lis
        $(this).parent().addClass('actif'); // ajout de la classe actif sur la li contenant le lien cliqué

bioslord a écrit :
comment ça ce fait que la fonction preview du forum a disparu ? (a moins que y en n'est jamais eu ?)

Elle est bien là lors de la création du message, mais pas à l'édition (je crois).

Merci des reponses

marcv a écrit :
Chez moi c'est arrondi uniquement sous Safari, et encore seulement le 'last'.

C'est normal, j'ai utilisé simplement border-radius (et pas moz-border-radius et webkit-border-radius, actif n'a pas d'arrondi.)

marcv a écrit :
Deux classes sur un même élément c'est parfaitement valide. Que te dis exactement le validateur ?

Voila:

Line 18, Column 25: Duplicate attribute class.
<li class="actif" class="first"><a href="tuto/last_tuto">Tutorial n°9</a></li>

Peut parce que c'est sur un li ? Et en plus le seconde classe n'est pas interprété, elle est simplement ignoré.
EDIT: en regroupant le classe comme ça : class="actif first" c'est OK


J'ai remplacé le JS, la classe se déplace correctement. Mais elle est mise après la classe existante 'normal' donc la classe normal est prio et ça n'affiche pas l'image. (ça fait : class="normal actif" ) il faudrait remplacer la classe existante pour avoir simplement class="actif" .

marcv a écrit :
Elle est bien là lors de la création du message, mais pas à l'édition (je crois).

Enfaite je crois que c'est l'inverse
EDIT2: A ba non... étrange.
Modifié par bioslord (13 Jul 2010 - 20:50)

Bonjour,

hum
en adaptant son code je dirai

var lis = $('#leftmenu li'); // récupération des lis du menu dans une variable 
lis 
    .find('a') // on selectionne tous les liens des lis 
    .click(function(){ // et on définit une action quand on clique dessus 
        lis.removeClass('actif'); // suppresion de la classe actif sur toutes les lis 
        $(this).parent().removeClass('normal'); // suppression de la classe normal au li contenant le lien cliqué  
        $(this).parent().addClass('actif'); // ajout de la classe actif sur la li contenant le lien cliqué

Modifié par mathieu1004 (13 Jul 2010 - 22:02)

J'ai donc ressayer les deux code, et j'en conclu que:

- Avec le code de marcv la class s'ajoute, n' annulant pas les autre, donc quand je clique sur un lien je me retrouve avec class="class-par-default actif" et avec ceci le style css s'additionne, se qui fait que l'image actif se retrouve sous le background de défini par la class par défaut (normal, first, actif)

- Avec le code de mathieu1004 , la class est bien remplacé par actif, mais seulement sur les li avec une class normal, pas sur les last et first (et la l'image est en dessous du background) mais quand on clique sur un autre lien, la class normal ne revient pas puisqu'on la remplacé par actif.

Alors je vois pas trop comment m'en sortir, il faudrait que la class normal revienne, mais aussi qu'on puissent l'enlever sur last et first Ce qui devient compliqué. Ou alors abandonné mon idée de li arrondi en début et fin

Comment faire pour que la class normal revienne quand on clique sur un autre lien ?

bioslord a écrit :
la classe se déplace correctement. Mais elle est mise après la classe existante 'normal' donc la classe normal est prio

Aucune classe n'est prioritaire sur une autre, l'ordre dans lequel elles sont spécifiées en html n'a aucune incidence sur les CSS. Si les propriétés de .normal l'emportent sur les propriétés de .actif, c'est simplement parce qu'elles sont situées après dans ta feuille de style.

bioslord a écrit :
- Avec le code de mathieu1004 , la class est bien remplacé par actif, mais seulement sur les li avec une class normal, pas sur les last et first (et la l'image est en dessous du background) mais quand on clique sur un autre lien, la class normal ne revient pas puisqu'on la remplacé par actif.

Tu pourrais bien faire comme ça :

var lis = $('#leftmenu li'); // récupération des lis du menu dans une variable  
lis  
    .find('a') // on selectionne tous les liens des lis  
    .click(function(){
		lis.filter('.actif') // La li active actuellement
			.removeClass('actif')
			.addClass('normal');
        $(this).parent()    // La li du lien cliqué
			.removeClass('normal')
			.addClass('actif');

Mais honnêtement, ça me paraît un peu lourdaud...
Je pense que tu te compliques la vie dès le départ avec cette histoire de <li class="normal">. En effet, si une li est considérée comme "normale", elle n'a (presque "par définition") pas besoin d'une classe. Tu pourrais donc à mon avis oublier cette classe, tes <li class="normal"> devenant de simples <li>.

Dans ta css tu aurais donc désormais :

#leftmenu li {
width:235px; 
height:45px; 
border-top:1px solid #DFDFDF; 
border-left:1px solid #E4E4E4; 
background:#fff; 
} 
 
#leftmenu li.first { 
/*width:235px; >> Inutile car hérite de li */
/*height:45px; >> Inutile car hérite de li */
/*background:#fff; >> Inutile car hérite de li */
/*border-top:1px solid #DFDFDF; >> Inutile car hérite de li */
/*border-left: 1px solid #E4E4E4; >> Inutile car hérite de li */ 
border-radius:7px 0px 0px 0px; 
} 
 
#leftmenu li.last {
/*width:235px; >> Inutile car hérite de li */
/*height:45px; >> Inutile car hérite de li */
/*background:#fff; >> Inutile car hérite de li */
/*border-top:1px solid #DFDFDF; >> Inutile car hérite de li */
/*border-left: 1px solid #E4E4E4; >> Inutile car hérite de li */ 
border-bottom:1px solid #DFDFDF; 
border-radius:0px 0px 0px 7px; 
} 
 
#leftmenu li.actif { 
width:auto; /* Rajouté pour annuler l'héritage de li */
height:44px; 
border:0; /* Rajouté pour annuler l'héritage de li */
background:url('img/bglist.png') no-repeat;
}

Le code javascript n'aurait pas besoin de changement (par rapport à ma première proposition)

Merci

C'est celui la que je cherchais depuis le debut

width:auto;

Effectivement ça marche bien, mais il faut que je revois la taille de mon image pour les bordures

Merci a tous