Discussion :

[sub_zero]

Bonjour,

Je viens vous demander de l'aide pour un problème de présentation (background et couleur de texte), lié à Ajax

J'ai une page avec un containeur qui contient 5 div pour simuler un système de navigation, qui, en fait, permet d'injecter un fragment de texte dans le cadre situé en dessous.

Les 5 div servent de boutons : on clique sur une div, ce qui affiche le texte correspondant en dessous.

Au chargement de la page, il y a un effet hover en CSS qui fonctionne correctement : en survolant une des 5 divs, son background et sa couleur de texte changent.

Ensuite si on clique sur une div, elle change de couleur (background et texte) pour montrer que c'est la sélection courante. Je suis alors obligé d'indiquer par code que les autres div ne changent pas de couleur (car sinon, en cliquant sur une div, puis une autre, toutes les divs cliquées auraient alors changé de couleur ... alors qu'il n'y a, bien sûr, qu'une seule sélection).

Le problème, c'est qu'une fois que j'ai changé les styles (background et color) des divs via JavaScript, l'effet hover ne fonctionne plus : au survol les divs ne changent plus de couleur !
J'ai essayé de surcharger l'effet hover CSS par le même effet hover en JavaScript dans ma fonction (ci-dessous), mais ça ne fonctionne pas.

Est-ce que quelqu'un connaîtrait une solution ?


code (appel de fonction pour une des div), permettant de changer la couleur de la div cliquée et de réaffecter aux autres div leur couleur de départ :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
function actif(id) {
	switch (id) {
		case 'cadre_orange':
			document.getElementById(id).style.color='D8D8D8';
			document.getElementById(id).style.backgroundColor='#FFCC00';
			var cadre_r = document.getElementById("cadre_realisations").getElementsByTagName("div");
			for (var i=0;i<cadre_r.length;i++) {
				if(cadre_r[i].id != id) {
					cadre_r[i].style.color = '#FFCC00';
					cadre_r[i].style.backgroundColor = '#D8D8D8';	
				}
			}
			break;
....

[SpaceFrog]

Tu es sur que le code html retourné par l'ajax a bein les bonnes class ?
Comment le code retourné est il inséré dans la page ?

[sub_zero]

Je ne pense pas que cela soit lié, mais voici le code qui insère le texte dans la page :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
$(document).ready(function () {  
 var proj;
$("a.load_orange")
  .click(function() {
	proj = "Texte a insérer"
	document.getElementById('cadre_bas').innerHTML = proj;
	actif('cadre_orange');
    return false;
  });
...
});

le code CSS qui permet le changement au survol :

Code css :

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

1
2
3
4
#cadre_orange:hover {
	background-color: #FFCC00;
	color:white;
}

le code HTML (non valide w3C, car j'ai mis la DIV à l'intérieur de la balise <a>) :

Code html :

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

1
2
3
<a href="developpement-vba.html" class="load_orange" id="orange">
	<div id="cadre_orange">Orange</div>
</a>

[sub_zero]

Bon j'ai trouvé un moyen, mais en partie.

J'ai surchargé l'effet hover CSS qui ne fonctionnait plus dans la page ajax, en rajoutant des instructions JavaScript dans la fonction, et produisant le même effet de survol :

Code :

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

1
2
3
4
5
6
7
8
9
10
11
12
13
 
case 'cadre_orange':
	document.getElementById(id).style.color='#FFFFFF';
	document.getElementById(id).style.backgroundColor='#FFCC00';
	var cadre_r = document.getElementById("cadre_realisations").getElementsByTagName("div");
	for (var i=0;i<cadre_r.length;i++) {
		if(cadre_r[i].id != id) {
			cadre_r[i].style.color = '#FFCC00';
			cadre_r[i].style.backgroundColor = '#D8D8D8';
			cadre_r[i].onmouseover = function() { this.style.background = '#FFCC00'; this.style.color = '#FFFFFF';};
			cadre_r[i].onmouseout = function() { this.style.background = '#D8D8D8'; this.style.color = '#FFCC00'};}
		}
		break;

L'effet de survol refonctionne, mais par contre maintenant quand je clique sur une première div, elle se colorie comme attendu, mais ensuite si je clique sur une autre div, elle ne se colorie plus : l'effet hover prend le dessus !

[sub_zero]

Je pense qu'il faudrait que je rendre le lien inactif après avoir cliqué dessus, mais comment faire ?

[javatwister]

return false?

Entre nous, laisse tomber le hover et le lien et gère tes changements de couleurs uniquement avec JS; tu as vu que ton <a><div></div></a> n'était pas logique mais il y a aussi la question de ce lien vide...

[sub_zero]

En fait je pensais garder le hover pour prendre en compte le petit % d'utilisateurs ayant désactivé JavaScript ...
Le code n'est pas terminé : Ceux-la je les redirige vers une page au lieu d'afficher le fragment Ajax ...

[sub_zero]

Bon problème résolu en annulant l'effet hover du div une fois cliqué, via JavaScript :

Code :

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

id_div.onmouseover = function() { return false; };

Et pareil pour l'événement onmouseout ...