incompatibilité backgroundcolor sous IE8

Version imprimable

Bonjour,

J'ai un petit problème sous IE8(pour changer) sur mon site.

voici le site en question:http://calendrier.ventana-aerospace.fr
mdp : temp

Il faut sélectionner du personnel pour voir leurs agendas.

En effet, j'ai fais un agenda et j'essaye de faire en sorte que quand on click sur un jour, ça change la couleur de fond de toute une colonne.

Ce que j'ai fais marche sous ff3.6.12

Voici le code javascript qui fais ce que je veux faire:
Code:

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 //je mémorise la couleur et le nom de l'objet que je change lors de la selection var ancienne_couleur; var ancienne_date=""; //change la couleur d'arriere plan si selectionné ou déselectionné function selectionner_jour(date){ var objet_ancien = document.getElementsByName(ancienne_date); var objet_nouveau = document.getElementsByName(date); if(ancienne_date!="") for(var i=0;i<objet_ancien.length;i++) objet_ancien[i].style.backgroundColor = ancienne_couleur; if(date!=ancienne_date){ ancienne_couleur = objet_nouveau[0].style.backgroundColor; ancienne_date = date; for(var i=0;i<objet_nouveau.length;i++) objet_nouveau[i].style.backgroundColor = "aqua"; } else ancienne_date="";
voici un appel à la fonction:

Code:

selectionner_jour('1292972400');

Si quelqu'un a une idée sur ce qui ne va pas...

15/11/2010, 18h58
Watilin

Salut,

je ne vois aucune instruction à problème dans le bout de code que tu montres.
Dans le doute, remplace la valeur "aqua" par #00FFFF…

http://www.w3schools.com/css/css_colornames.asp

;)
16/11/2010, 08h21
zenico64

J'ai essayé de changer mais c'est toujours pareil.

Après l'évènement qui déclenche l'appelle à la fonction c'est un onmousedown sur un <td>

Code:

echo "<td name=\"".$date_parcouru."\" onmousedown=\"selectionner_jour('".$date_parcouru."');\" style=\"cursor:pointer;background-color:".((date("W",$date_parcouru)%2==0)?"Silver":"").";\">"
16/11/2010, 08h35
SpaceFrog

Code:

echo '<td name="'.$date_parcouru.'" onmousedown="selectionner_jour(\''.$date_parcouru.'\');" style="cursor:pointer;background-color:'.((date("W",$date_parcouru)%2==0)?"silver":"transparent").';">'
16/11/2010, 09h24
zenico64

Désolé mais je ne vois pas ce qui change :/

Après si c'est au niveau syntaxe que tu veux me corriger, ça marche sous firefox donc je pense pas que ce soit ça..
16/11/2010, 09h30
SpaceFrog

on peut voir le html généré ?

Bien sûr!

Code:

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
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
 
<head>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type" />
<link rel="stylesheet" media="screen" type="text/css" title="Design" href="design/design.css" />
<script type="text/javascript">
<!--
function PopupWindow(source, strWindowToOpen){
	var strWindowFeatures = "toolbar=no,resize=no,titlebar=no,";
	strWindowFeatures = strWindowFeatures + "menubar=no,width=413,height=299,maximize=null";
	window.open(strWindowToOpen, '', strWindowFeatures); 
} 
//je mémorise la couleur et le nom de l'objet que je change lors de la selection
var ancienne_couleur;
var ancienne_date="";
//change la couleur d'arriere plan si selectionné ou déselectionné
function selectionner_jour(date){
	var objet_ancien = document.getElementsByName(ancienne_date);
	var objet_nouveau = document.getElementsByName(date);
 
	if(ancienne_date!="")
		for(var i=0;i<objet_ancien.length;i++)
			objet_ancien[i].style.backgroundColor = ancienne_couleur;
	if(date!=ancienne_date){
		ancienne_couleur = objet_nouveau[0].style.backgroundColor;
		ancienne_date = date;
		for(var i=0;i<objet_nouveau.length;i++)
			objet_nouveau[i].style.backgroundColor = "#00FFFF";
	}
	else
		ancienne_date="";
}
-->
</script>
<body>
	<div id="personnes">
		<a href="index.php"><img src="design/retour.png" style="border:none;" alt="retour à l'acceuil"/></a>
		<h5>CIMB</h5><li >1</li><li >3</li><h5>GTA</h5><li >2</li>	</div>
 
	<div id="calendrier">
		<table>
		<td id="mois"><h3>November</h3><table><td name="1289862000" onmousedown="selectionner_jour('1289862000');" style="cursor:pointer;background-color:Silver;">Ma</td><td name="1289948400" onmousedown="selectionner_jour('1289948400');" style="cursor:pointer;background-color:Silver;">Me</td><td name="1290034800" onmousedown="selectionner_jour('1290034800');" style="cursor:pointer;background-color:Silver;">Je</td><td name="1290121200" onmousedown="selectionner_jour('1290121200');" style="cursor:pointer;background-color:Silver;">Ve</td></table></td>		</table>
 
	</div>
</body>

bon j'ai coupé le code quand même car il y a un <td> par jour et ce sur 3 mois et 3 personnes

Je remet même l'accès au site avec le mot de passe temp

16/11/2010, 10h00
Bovino

Ta structure HTML est mauvaise. Tes table n'ont pas de tr.
D'autre part, name n'est pas autorisé pour un td et est pour IE de type id, il ne doit donc pas commencer par un chiffre.
Enfin, modifier les styles d'une table de grande taille est déconseillé avec IE : cela oblige à faire des reflows ce qui est très lourd et du coup très lent.
16/11/2010, 10h05
zenico64

Ah en effet :s

Pour les <tr> c'est parce que j'ai fais un ajout des jours avec leurs deux premières lettres il n'y a pas longtemps et j'ai oublié de les y mettre.
La suite de la table en contient.

je modifie tout ça et je vous dis

[edit] : Un identifiant ne doit il pas être unique? Cela ne répond pas à mes besoins :/
Dois-je rajouter des <span name=""></spand> dans mes <td>?
16/11/2010, 14h43
zenico64

ça ne marche toujours pas en rajoutant des <span> dans les td.. :arf:
16/11/2010, 14h49
scourjean

Pourquoi tu ne mets pas plutôt des Id ça serait plus simple à tes TD ou SPAN comme tu veux, et au lieu de getElementsByName faire un getElementById ?
16/11/2010, 15h10
zenico64

parce que j'ai plusieurs fois le même name sur mes td ou span et un Id est unique.

getElementById ne permet de sélectionner qu'un seul élément.

pour sélectionner toute une colonne je sélectionne tous les td ayant pour attribut name="0562398400" par éxemple.
16/11/2010, 15h37
scourjean

Tu connais le framework javascript jQuery ? Si oui, utilises les classes

Oui, ou plus simplement, crées une fonction getByClass, par exemple :

Code:

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
var getByClass = function(conteneur,cl){
	if(typeof conteneur === 'string'){
		conteneur = document.getElementById(conteneur);
	}
	if(conteneur.getElementsByClassName){
		getByClass = function(conteneur,cl){
			if(typeof conteneur === 'string'){
				conteneur = document.getElementById(conteneur);
			}
			return conteneur.getElementsByClassName(cl);
		};
		return conteneur.getElementsByClassName(cl);
	}
	else{
		getByClass = function(conteneur,cl){
			if(typeof conteneur === 'string'){
				conteneur = _$(conteneur);
			}
			var tabElems = [], allElems = conteneur.getElementsByTagName('*'), allLength = allElems.length;
			while(allLength--){
				if(allElems[allLength].className.indexOf(cl)>-1){
					tabElems.push(allElems[allLength]);
				}
			}
			return tabElems.reverse();
		};
		var tabElems = [], allElems = conteneur.getElementsByTagName('*'), allLength = allElems.length;
		while(allLength--){
			if(allElems[allLength].className.indexOf(cl)>-1){
				tabElems.push(allElems[allLength]);
			}
		}
		return tabElems.reverse();
	}
};

16/11/2010, 16h21
zenico64

Arf j'ai du mal à comprendre à quoi sert la fonction que tu me propose :/

Qu'est ce que ça m'apporte de plus qu'un simple getElementsByClass?

Le conteneur c'est document?

cl c'est le nom de la classe?

Je ne connais pas le JQuery :s
16/11/2010, 16h38
SpaceFrog

ben, c'est surtout que getElementsByClass n'existe pas nativement en javascript
16/11/2010, 16h38
Bovino

Citation:

Envoyé par zenico64

Qu'est ce que ça m'apporte de plus qu'un simple getElementsByClass?

Le fait d'être cross-browser... (ce qui me semble assez utile :mrgreen:)

Oui, cl est la classe recherchée mais conteneur, c'est l'élément dans lequel tu recherches la classe (donc oui, ça peut être document, mais aussi un id ou un élément HTML ;)).

EDIT :
@Spaffy : si, pour les dernières versions des navigateurs, seul IE8 n'implémente pas getElementsByClassName ;)
16/11/2010, 16h55
zenico64
Citation:
Envoyé par Bovino

Code:

1 2 if(conteneur.getElementsByClassName){
Si tu me dis que getElementsByClassName n'est pas disponible sous IE8 ça ne risque pas de régler mon problème étant donné que je cherche a adapter mon code pour qu'il fonctionne sous IE8...
16/11/2010, 16h58
Bovino

Citation:

Envoyé par zenico64

Si tu me dis que getElementsByClassName n'est pas disponible sous IE8 ça ne risque pas de régler mon problème étant donné que je cherche a adapter mon code pour qu'il fonctionne sous IE8...

C'est bien pour ça qu'il y a un else ! :mrgreen:
16/11/2010, 17h07
zenico64

Arf ouais désolé...

Niveau utilisation il faut que j'appelle cette fonction qui va me retourner un cross-Browser (ou un tableau de cross-Browser) pour après l'utiliser pour faire par exemple tableau[1].style.backgroundcolor ?

Après j'ai mal compris ce qu'est un cross-Browser.. Un élément compatible sous tous les navigateurs?
16/11/2010, 17h09
SpaceFrog

cross = transversal
browser = navigateur ...

donc en gros oui fonctionnant sur tous les navigateurs

Merci Beaucoup ça marche!

j'ai ajouté ta fonction

j'ai changé le code javascript comme ceci:

Code:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
function selectionner_jour(date){
        //Ici j'utilise la fonction getByClass au lieu de getElementsByName
	var objet_ancien = getByClass(document, ancienne_date);
	var objet_nouveau = getByClass(document, date);
 
	if(ancienne_date!="")
		for(var i=0;i<objet_ancien.length;i++)
			objet_ancien[i].style.backgroundColor = ancienne_couleur;
	if(date!=ancienne_date){
		ancienne_couleur = objet_nouveau[0].style.backgroundColor;
		ancienne_date = date;
		for(var i=0;i<objet_nouveau.length;i++)
			objet_nouveau[i].style.backgroundColor = "#00FFFF";
	}
	else
		ancienne_date="";
}

Et j'ai remplacé les attribut name par des attributs class