Discussion :

[Chichoulinet]

Bonjour,

Nous essayons de générer des cases en javascript pour représenter un sorte d'échiquier.

Nous avons écrit une fonction Javascript qui affiche une DIV pour chaque case en précisant sa position et sa taille.

Sous Firefox il n'y a aucun problème, toutes les DIV s'affiche, mais sous IE, il en affiche une partie, puis arrête l'affichage en plein milieu, alors qu'apparemment la boucle d'affichage est effectuée en entier (avec des images à la place des DIV, ça fonctionne, mais j'ai peur que ça soit plus lourd, de plus en mettant un compteur, il nous donne bien le nombre de DIV normalement affichées).

Voici mon code d'affichage, merci d'avance.

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
column = YMin - 2;
 
	for (caseHeight = 40; caseHeight < 560; caseHeight += 40)
	{
	    line = XMin - 2;
	    for (caseWidth = 40; caseWidth < 560; caseWidth += 40)
	    {
	        if ((line >= 0) && (column >= 0) && (line <= totalWidth) && (column <= totalHeight))
	            document.write('<div id="x'+line+'y'+column+'" style="position:fixed;top:'+caseHeight+'px;left:'+caseWidth+'px;width:40px;height:40px;border-width:1px;border-style:solid;border-color:Black;visibility:visible" />');
            else
				document.write('<div id="x'+line+'y'+column+'" style="position:fixed;top:'+caseHeight+'px;left:'+caseWidth+'px;width:40px;height:40px;border-width:1px;border-style:solid;border-color:Black;background-color: #CCCCCC;visibility:visible" />');           
            line++;
	    }
	    column++;
	 }
 
    document.write('<div id="visibleZone" style="position:fixed; top:120px; left:120px; width:358px; height:358px; border-width:2px; border-style:solid; border-color:Red; visibility:visible"/>');

PS : XMin et YMin servent juste pour calculer les bornes du damier, le if dans la boucle sert à afficher les cases en gris si elles dépassent de la zone de damier (d'où les totalWidth/totalHeight).
La dernière DIV est sensé être un carré rouge mais n'est pas affichée non plus sous IE

[julien.63]

salut
je n'ai pas testé mais souvent le document.write n'est pas recommandé pour inclure des éléments dans ta page. Tu peux par contre utiliser document.createElement('DIV') et ensuite lui attribuer ce qu'il faut (id, style,...)

[Chichoulinet]

Merci pour cette réponse, j'ai essayé
mais maintenant, je fait

Code :

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

1
2
3
4
5
6
7
8
9
10
11
myDiv = document.createElement("DIV");
				myDiv.style.top = caseHeight + "px";
				myDiv.style.left = caseWidth + "px";
				myDiv.style.width = "40px";
				myDiv.style.height = "40px";
				myDiv.style.visibility = "visible";
				myDiv.style.background= "url('Content/noir.jpg')";
				myDiv.style.border = "1px solid Black";
				myDiv.id = "x"+line+"y"+column;
 
				document.appendChild(myDiv);

à la place de

Code :

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

document.write('<div id="x'+line+'y'+column+'" style="position:fixed;top:'+caseHeight+'px;left:'+caseWidth+'px;width:40px;height:40px;border-width:1px;border-style:solid;border-color:Black;visibility:visible" />');

mais ça ne m'affiche rien.
Je pense que je n'utilise pas bien le appendChild, j'ai essayé aussi en faisan
document.body.appendChild(myDiv) mais j'ai une erreur comme quoi body n'a aucun paramêtres.
Comment doit-on faire alors pour afficher la DIV crée ?

Merci d'avance

[julien.63]

salut
en fait, il faut que tu précises sur quel élément tu veux ajouter ta div
par exemple le body de ta page comme ceci :

Code :

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

document.body.appendChild(myDiv);

ou bien un élément en particulier :

Code :

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

document.getElementById('container').appendChild(myDiv);

[Chichoulinet]

En fait le problème c'est que dans les 2 cas il ne veut pas mettre ma DIV.

dans le 1er cas j'ai l'erreur :
Erreur : document.body has no properties

dans le 2ème cas il me fait l'erreur
Erreur : document.getElementById("container") has no properties
(j'ai crée avant une DIV "container")

Pour info si ça peut aider à trouver une solution, cette fonction est appelé au chargement de mon javascript dans le head de mon html.

Merci

[Chichoulinet]

Merci beaucoup de ton aide,
En fait c'est bon j'ai modifié la façon dont j'initialise ma page et ça marche beaucoup mieux.

Par contre j'ai des évènements OnKeyDown qui fonctionnent sous Firefox mais pas sous IE.

Pour mes évènements je met juste dans mon body du html
onKeyDown="keyDown(event);"
et dans mon javascript j'ai ma fonction keyDown(e), où je fait un
e = e.which puis un switch sur le résultat

mais ça ne fonctionne que sous firefox....