Discussion :

[castelcerf]

Bonjour tout le monde ^^...
Alors je vous expose mon petit problème.

J'utilise jquery et j'ai fait un menu dynamique depliant. Bref classique. Quand on clique sur un element cela change la couleur de fond de cet élément. Mais je ne suis que débutant en javascript et php...

Pour cela j'avais fait ce code la:

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
 
//COLOR ARRIERE PLAN MENU:
	function colormenu(elementthis,idmenu){	
	//variable i est egal à l'id de la rubrique
	var i=idmenu;
	//si la variable window de nom la value de i est indefini
		if (window[i]==undefined){
			window[i]=1;
		}		
		if (window[i]==1){
		elementthis.style.backgroundColor="#dedfe3";
		(window[i])++;
		}
		else{
		elementthis.style.backgroundColor="";
		(window[i])--;
		}
 
	}
        function colorssmenu(elementthis,idssmenu){		
	var y=idssmenu;	
	        if (window[y]==undefined){
		window[y]=1;
		}		
		if (window[y]==1){
		elementthis.style.backgroundColor="#d3d3d3";
		(window[y])++;
		}
		else{
		elementthis.style.backgroundColor="";
		(window[y])--;
		}
 
	}

Qui marchait très bien.. seulment voila le client à changer d'avis et veux désormais qu'une partie du menu soit déjà deplié. Donc je me suis executé mais forcement mon code ne marche plus quand on clique sur l'element deplié la couleur change dans le mauvais sens.

Je me demandais donc si il etait possible en javascript ou en jquey de definir une variable en fonction de la condition background-color.

Un truc du style if id_menu background-color = #XXX
Alors id id_menu background-color = #YYY

Voici le code qui depli mon menu:

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
 
 
	$(document).ready(function(){
	   $('.menu').css('cursor','pointer').click(function(){
		   $(this).next().slideToggle('slow');
		});
	});
	$(document).ready(function(){
	   $('.ssmenu_depliant').css('cursor','pointer').click(function(){
		   $(this).next().slideToggle('slow');
		});
	});
 
// Code faisant se deplier la rubrique du menu a l'arrivée sur le site
	$(window).load(function(){
		$('#ssmenu3').slideToggle('fast');
		$('#menuarticles9').slideToggle('slow');
		$('#menu3').css('background-color','#dedfe3');
		$('#ssmenudepliant9').css('background-color','#d3d3d3');
	});

Sinon j'envisage aussi une variable Php qui definirais le code couleur mais alors ca depasse mes compétences.. car il faudrait de nouveau faire un tableaux pour créer une variable par élement du menu... Puis l'intégré dans jquey ...

bref argh Ca m'énerve car cela ne paraît pas très dur et devrais être dans mes cordes.. mais je bloque complètement....

Si quelqun pouvais m'aider ou m'aiguiller dans mes recherches .. Merci d'avance.

[supersnail]

Bonjour,
le code de l'évènement "click" sur ton menu est où?

[danielhagnoul]

Bonsoir.

J'ignore pourquoi, mais jQuery renvoie un rgb(255,255,255) au lieu d'un "ffffff" !

Il y a donc un problème de conversion. J'ai trouvé cette solution sur l'internet :

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
 
// Un truc du style if id_menu background-color = #XXX
// Alors id id_menu background-color = #YYY
// Exemple
var rgbString = $("body").css("backgroundColor");
 
// http://stackoverflow.com/questions/638948/background-color-hex-to-js-variable-jquery
var parts = rgbString.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/);
 
delete(parts[0]);
 
for (var i = 1; i <= 3; ++i) {
        parts[i] = parseInt(parts[i]).toString(16);
        if (parts[i].length == 1) parts[i] = '0' + parts[i];
}
 
var hexString = parts.join('');
 
if (hexString == "ffffff") {
    $("body").css("backgroundColor", "#cccccc");
}

Si notre expert en RegExp : Spacefrog voit ceci, il nous ferra certainement quelque chose de plus simple !

[EDIT]
Je viens de trouver une solution plus élégante sur http://groups.google.com/group/jquer...36781009?pli=1 :

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
 
// Un truc du style if id_menu background-color = #XXX
// Alors id id_menu background-color = #YYY
// Exemple
 
function rgbToHex(rgb) { 
    var rgbvals = /rgb\((.+),(.+),(.+)\)/i.exec(rgb); 
    var rval = parseInt(rgbvals[1]); 
    var gval = parseInt(rgbvals[2]); 
    var bval = parseInt(rgbvals[3]); 
    return '#' + ( 
        rval.toString(16) + 
        gval.toString(16) + 
        bval.toString(16) 
    ).toUpperCase(); 
} 
 
if (rgbToHex($("body").css("backgroundColor")) == "#FFFFFF") {
    $("body").css("backgroundColor", "#cccccc");
}

[castelcerf]

Merci beaucoup daniel; C'est exactement ce qu'il me fallait.
Et je vois qu'on peux donc utiliser des conditions dans jquery ! merveilleux je m'en servirai pour d'autre truc surement ^^...

[castelcerf]

Question au niveau de ma syntaxe:

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
$(document).ready(function(){
	   $('.ssmenu_depliant').css('cursor','pointer').click(function(){
 
			if (rgbToHex($(this).prev()[0].css("backgroundColor")) == "#d3d3d4") {
				$(this).css("backgroundColor", "#d3d3d3");
			}
			else {
				$(this).css("backgroundColor", "#C2C2C2");
			}
 
		});
	});

if (rgbToHex($(this).prev()[0].. correspond bien à l'enfant de ssmenudepliant?

Mais dans le cas la les (this) qui se trouvent dans le if ; il correspondent à qui ? à ssmenudepliant ? Ou à l'enfant de ssmenudepliant.

[danielhagnoul]

Bonsoir.

Il y a beaucoup de sélecteurs différents dans jQuery. Pour apprendre, je vous conseille de travailler avec l'extension Firebug de Firefox et de vous servir de l'instruction console.log() ce qui vous permettra de voir de quoi il s'agit. C'est ce que j'ai fait pour apprendre et c'est ce que je fais encore souvent. Exemple :

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
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
 
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="fr">
<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <meta name="Author" content="Daniel Hagnoul" />
    <title>Page type</title>
    <script type="text/javascript" src="../lib/jquery-1.3.2.min.js"></script>
    <script type="text/javascript">
        $(document).ready(function(){
 
            $("#divDeuxID").click(function(){
                console.log("this = " + this);
                console.log("this.id = " + this.id);
                console.log("$(this) = " + $(this));
                console.log("$(this)[0] = " + $(this)[0]);
 
                console.log("$(this).prev() = " + $(this).prev());
                console.log("$(this).prev()[0] = " + $(this).prev()[0]);
                console.log("$(this).prev()[0].id = " + $(this).prev()[0].id);
 
                console.log("$(this).next() = " + $(this).next());
                console.log("$(this).next()[0] = " + $(this).next()[0]);
                console.log("$(this).next()[0].id = " + $(this).next()[0].id);
            });
 
            $("#divUnID").click(function(){
                console.log("this = " + this);
                console.log("this.id = " + this.id);
                console.log("$(this) = " + $(this));
                console.log("$(this)[0] = " + $(this)[0]);
 
                console.log("$(this).children() = " + $(this).children());
                console.log("$(this).children().length = " + $(this).children().length);
                console.log("$(this).children()[0] = " + $(this).children()[0]);
                console.log("$(this).children()[0].id = " + $(this).children()[0].id);
            });
 
        });
    </script>
</head>
<body>
    <ol>
        <li>Cliquez sur la divsion 2 : bord rouge !</li>
        <li>Examinez les résultats puis cliquez sur le bouton "Effacer" de la console</li>
        <li>Cliquez sur la divsion 1 : bord bleu !</li>
    </ol>
    <div id="divUnID" style="border:2px solid blue; margin:12px; padding:6px;">
        <p id="div1p1">
            Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce tincidunt pulvinar elit. Maecenas nec risus vitae felis suscipit scelerisque. Suspendisse placerat lorem ut nisl. Sed sit amet quam sit amet elit tempus eleifend. Aliquam posuere egestas elit.
        </p>
        <p id="div1p2">
            Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis.
        </p>
    </div>
    <div id="divDeuxID" style="border:2px solid red; margin:12px; padding:6px;">
        <p id="div2p1">
            Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus.
        </p>
    </div>
    <div id="divTroisID" style="border:2px solid green; margin:12px; padding:6px;">
        <p id="div3p1">
            Aliquam erat volutpat. Phasellus cursus tempor augue. Morbi eu nisi et mi interdum lobortis. Nullam faucibus, enim quis ultricies imperdiet, ante leo lacinia nisi, vitae malesuada enim orci id dolor. Maecenas volutpat porta turpis.
        </p>
        <p id="div3p2">
            Vestibulum ac nisl sit amet odio lobortis pellentesque. Quisque eu nisl. In ipsum metus, congue in, porta non, luctus ac, dolor. Ut suscipit, metus id blandit scelerisque, dolor nunc varius velit, sit amet feugiat magna neque ut lorem. Ut ut lacus.
        </p>
    </div>
</body>
</html>