incompatibilité backgroundcolor sous IE8

**zenico64** · 15/11/2010, 16h32

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 :

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
//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 :

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

selectionner_jour('1292972400');

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

**Watilin** · 15/11/2010, 18h58

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

**zenico64** · 16/11/2010, 08h21

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 :

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

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

**SpaceFrog** · 16/11/2010, 08h35

Code :

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

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

**zenico64** · 16/11/2010, 09h24

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..

**SpaceFrog** · 16/11/2010, 09h30

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

**zenico64** · 16/11/2010, 09h46

Bien sûr!

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
<!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

**Bovino** · 16/11/2010, 10h00

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.

**zenico64** · 16/11/2010, 10h05

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>?

**zenico64** · 16/11/2010, 14h43

ça ne marche toujours pas en rajoutant des <span> dans les td..

**scourjean** · 16/11/2010, 14h49

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 ?

**zenico64** · 16/11/2010, 15h10

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.

**scourjean** · 16/11/2010, 15h37

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

**Bovino** · 16/11/2010, 15h42

Oui, ou plus simplement, crées une fonction getByClass, par 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
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();
	}
};

**zenico64** · 16/11/2010, 16h21

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

**SpaceFrog** · 16/11/2010, 16h38

ben, c'est surtout que getElementsByClass n'existe pas nativement en javascript

**Bovino** · 16/11/2010, 16h38

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

)

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

**zenico64** · 16/11/2010, 16h55

Envoyé par Bovino

Code :

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

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...

**Bovino** · 16/11/2010, 16h58

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 !

**zenico64** · 16/11/2010, 17h07

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?

incompatibilité backgroundcolor sous IE8

JavaScript

Discussions similaires

Partager

Partager