Discussion :

[Inkone]

Bonjour tous le monde !

voilà, je viens aujourd'hui sollicité vos connaissance en JQuery pour pouvoir m'aider à avancer dans un projet perso . je suis actuellement entrain de bosser sur un site pour m'exercer un peu et je rencontre quelque difficulté.
il s'agit d'un site dont la structure est une grosse liste du genre :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
 
<ul>
     <li>Titre
          <div>Contenu</div>
     </li>
     <li>Titre
          <div>Contenu</div>
     </li>
</ul>

j'ai rendu ça dynamique avec du code jquery pour donnée une sorte de menu accordéon. Mon design lui est assez simple, j'ai une photo pleine ecran en fond, ainsi qu'un cadre avec une couleur en background dans mes div pour mon contenu.
Le problème que je rencontre est que je souhaiterai que lors ce que l'on clique sur un titre (qui ce trouve entre des li, les div s'affiche mais également que l'image de fond de mon site, (qui ce trouve dans mon body en background=url() soit modifier. voici le code que j'ai fait :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
 
$(document).ready(function () {
 
	//Ma fonction pour changer l'image de fond						
	function changeBGImage(Image){
		if (document.body){
		document.body.style.backgroundImage = "url('IMG/"+Image+"')";
		}
	}						
 
     // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".menu ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".menu li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text(); 
        $(this).replaceWith('<a href="javascript:changeBGImage('image1.jpg')" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ; 
    } ) ; 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".menu li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } ); 
        } 
        // On empêche le navigateur de suivre le lien : 
        return false; 
    }); 
 
});

je pense que le gros du boulot est là, mais je bloque sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

 $(this).replaceWith('<a href="javascript:changeBGImage('image1.jpg')" title="Afficher le sous-menu">' + TexteSpan + '<\/a>') ;

Mes images sont rangés dans un dossier IMG à la racine de mon site et ce nome Image1.jpg Image2.jpg etc...

Quelqu'un aurait'il une idée pour que cela soit fonctionnel ?
Je vous remercie et bonne fin de semaine !

[boboss123]

salut,

ça n'irait pas mieux avec ça ?

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

$(this).replaceWith("<a href=\"javascript:changeBGImage(\"image1.jpg\")\" title=\"Afficher le sous-menu\">" + TexteSpan + "</a>") ;

tu n'as pas installé firebug (ça t'aurait mis en évidence le problème) ?

[Inkone]

Salut boboss123.
Effectivement c'est plus juste (je connais pas encore très bien le jquery et je m'embrouille un peu).

En fait (je l'ai surement mal formulé) je souhaiterai créer une sorte de boucle qui a chaque fois qu'il trouve un span (.menu li.toggleSubMenu span) ajoute une image différente dans le body{background-image:image;} (le tout lié à ma function js dans mon premier message).


Ça donne quelque chose comme ça :
Début boucle
Premier span = Lien1 = Image1.jpg dans le body
Deuxième span = Lien2 = Image2.jpg dans le body
Troisième span = Lien3 = Image3.jpg dans le body
...
Fin boucle

Pour que a chaque fois que je clique sur un titre qui est dans .menu li.toggleSubMenu span, il change l'image de fond avec différentes image (en fonction du lien bien sur, le lien1 = image1.jpg, 2eme lien = etc...)
voilà, je ne sais pas si ce genre de fonction est possible.

[zeb_panam]

Salut,

J'ai pas tout regardé (un peu la flemme ), mais déjà ta fonction de remplacement d'image tu peux l'écrire via jQuery (ça évite d'éventuels problèmes de compatibilité entre navigateurs) :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
 
// La ligne ci-dessous est un raccourci pour $(document).ready(function() {});
jQuery(function ($) {
//Ma fonction pour changer l'image de fond						
	function changeBGImage(Image){
		$("body").css({'background-image':'url(IMG/'+Image+')'});
	}
});

Et pour reprendre ce que disait boboss, tu devrait installer Firebug (ainsi que companion.js pour IE) pour débugger plus facilement et aussi WebDeveloper pour bosser plus facilement


[Edit] Bon en regardant vite fait, y'a un truc bizarre... Tu modifies à la volée les <span> des <li> portant la classe "toggleSubMenu" pour les remplacer par des <a>. Lors de ton replace, tu donnes comme lien sur tes balises <a> un href (avec action d'appeler la fonction "changeBGImage". Ce qui n'est pas très propre en passant Vaut mieux assigner les actions via jQuery tant qu'à faire).

Puis tu assignes (via jQuery pour le coup) à ces balises <a> une action sur click();
. Mais vu que tu définis un return false; jamais l'appel vers la fonction "changeBGImage" ne fonctionnera...

Enfin, si je ne me mélange pas les pinceaux moi aussi



[EDIT 2] Et en regardant encore un peu, tu n'as finalement pas besoin de ta fonction "changeBGImage". Il te suffit de faire ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
 
jQuery(function ($) {
    // On cache les sous-menus 
    // sauf celui qui porte la classe "open_at_load" : 
    $(".menu ul.subMenu:not('.open_at_load')").hide(); 
    // On sélectionne tous les items de liste portant la classe "toggleSubMenu" 
    // et on remplace l'élément span qu'ils contiennent par un lien : 
    $(".menu li.toggleSubMenu span").each( function () { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text();
        $(this).replaceWith("<a href='image1.jpg' title='Afficher le sous-menu'>"+TexteSpan+"</a>") ; 
    }); 
 
 
 
    // On modifie l'évènement "click" sur les liens dans les items de liste 
    // qui portent la classe "toggleSubMenu" : 
    $(".menu li.toggleSubMenu > a").click( function () { 
        // Si le sous-menu était déjà ouvert, on le referme : 
        if ($(this).next("ul.subMenu:visible").length != 0) { 
            $(this).next("ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") } ); 
        } 
        // Si le sous-menu est caché, on ferme les autres et on l'affiche : 
        else { 
            $(".menu ul.subMenu").slideUp("normal", function () { $(this).parent().removeClass("open") }); 
            $(this).next("ul.subMenu").slideDown("normal", function () { $(this).parent().addClass("open") } );
            // On récupère la valeur du href
            var mon_image = $(this).attr('href');
            $("body").css({'background-image':'url(IMG/'+mon_image+')'});
        }
        // On empêche le navigateur de suivre le lien
        return false; 
    });
});

PS : j'ai pas testé le code, et j'ai peut-être fait des erreurs d'inattention hein

[Inkone]

Sallut zeb_panam et merci beaucoup pour tes suggestion. Effectivement le code que j'ai présenter est vraiment très brouillons . je suis vraiment débutant en JS/JQuery et j'ai encore un peu de mal avec la syntaxe.
Cependant j'ai encore un petit probléme.
Lors ce que j'arrive sur mon site, j'ai la bonne image de fond, quand je clique sur une rubrique, cela modifie bien mon image (avec image1.jpg) mais quand je clique encore sur une autre, cela reste bloquer sur l'image de la première rubrique.
Je pense qu'il faut rajouter une fonction d'incrémentation au niveau du href='image1.jpg' sur

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
        var TexteSpan = $(this).text();
        $(this).replaceWith("<a href='image1.jpg' title='Afficher le sous-menu'>"+TexteSpan+"</a>") ; 
    });

j'ai pas mal regardé sur le net et j'ai pas trouver grand choses, à part cette petite fonction qui pourai peut être faire l'affaire

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
 
$("img").each(function(i){
   this.src = "test"   i   ".jpg";
 });

Résultat:

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

<img src="test0.jpg"/><img src="test1.jpg"/>

Pensez vous que ça pourai convenir pour pouvoir changer l'image du background sur le body en css a chaque fois que on clique sur un titre ?
Je vous remercie et bon weekend!

[zeb_panam]

Concrètement j'ai pas bien compris pourquoi tu avais besoin de remplacer les <span> par des <a> (du moins j'ai pas compris pourquoi ce n'était pas leur état par défaut), à moins que tu souhaitais juste automatiser le processus (dans ce cas je pense qu'en PHP c'était mieux, car calculé avant l'affichage de la page et si le javascript est désactivé le menu reste correctement balisé)…

Néanmoins pour ton histoire d'incrémentation, effectivement tu peux faire comme ça :

Code :

Sélectionner tout - Visualiser dans une fenêtre à part

1
2
3
4
5
6
 
$(".menu li.toggleSubMenu span").each( function (i) { 
        // On stocke le contenu du span : 
        var TexteSpan = $(this).text();
        $(this).replaceWith("<a href='image"+i+".jpg' title='Afficher le sous-menu'>"+TexteSpan+'</a>');
});

[Inkone]

Salut zeb_panam voilà c'est exactement ce que je cherchais. Cette petite fonction d'incrémentation fait fonctionner parfaitement ma page dommage que mon site soit en local et pas encore online pour vous montrer le résultat. mais tous fonctionne, c'est génial
Merci encore zeb_panam et merci à tous. Bonne fin de weekend.

[zeb_panam]

Pas de soucis, bonne fin de week-end à toi aussi