Super bug dans la gestion du DOM sous MSIE ?

Question

~~supprimé~~

11 Jan 2007 à 12:15

Hello à tous !

Hé bien ... Voilà. Lassé de voir des nuanciers javascript utilisant la méthode document.write pour insérer le contenu, j'ai développé ma propre solution en utilisant la création d'éléments via le DOM (via document.createElement() et autres).

Seulement, j'ai un souci de taille ! Les nuanciers s'affichent très bien sous Firefox, Opera et Safari, mais pas sous MSIE 6/7 Smiley ohwell

MSIE souffrirait-il d'un énorme bug dans la création d'élément, ou ai-je fait une erreur de programmation ?

Voici le code (dumoins celle pour les nuances de gris) ECMAScript du nuancier :


function DrawPalette(sContainerID, sPrefix, bGreyScale, iOStep, iMStep, iIStep, iColorWidth, iColorHeight)
{
	var outer, middle, inner;
	var oPaletteInfos = new Object();
	
	oPaletteInfos.rows = 0;
	oPaletteInfos.cols = 0; 
	oPaletteInfos.tonesPerColor = 0;
	
	var oNuancier = document.createElement('div');  
	
	var oPalette = document.createElement('table');
/*	oPalette.setAttribute('style','background-color: #fff; border: 1px solid #999;');
	oPalette.setAttribute('cellspacing','0');*/
	
	oPalette.style.backgroundColor = '#fff';
	oPalette.border = '1px solid #999';
	oPalette.cellSpacing = 0;
	
	if(bGreyScale == true)
	{
	
		// FF and others
	/*	oNuancier.setAttribute('id',sPrefix+'PaletteGS');
		oNuancier.setAttribute('style','width: 256px; margin-top: 1Opx;');*/
		// MSIE
		oPalette.id = sPrefix+'PaletteGS';
		oPalette.style.marginTop = 10+'px';
		oPalette.style.width = 256+'px';
		
		var oPaletteRow = document.createElement('tr');
		
		for (outer = 0; outer < 256; outer++)
		{	 
			var oPaletteRowCell = document.createElement('td');
		/*	oPaletteRowCell.setAttribute('style','margin: 0; padding: 0; height: 16px; width: 1px; cursor: pointer; background-color: rgb('+outer+','+outer+','+outer+');');	
			oPaletteRowCell.setAttribute('onmouseover','setHex(this,true,"'+sPrefix+'");');
			oPaletteRowCell.setAttribute('onclick','setHex(this,true,"'+sPrefix+'");');*/	
			
			/*		 MSIE >_<		*/
			oPaletteRowCell.style.padding = 0;
			oPaletteRowCell.style.height = 16+'px';
			oPaletteRowCell.style.width = 1+'px';
			oPaletteRowCell.style.backgroundColor = 'rgb('+outer+','+outer+','+outer+')';
			oPaletteRowCell.onmouseover = 'setHex(this,true,"'+sPrefix+'");';
			oPaletteRowCell.onclick = 'setHex(this,true,"'+sPrefix+'");';
			oPaletteRowCell.innerText = '&nbsp;';
			
			oPaletteRow.appendChild(oPaletteRowCell);
		}
		oPalette.appendChild(oPaletteRow);
	}
        else
        {
                   // ici la palette en couleurs
        }
        oNuancier.appendChild(oPalette);
	$id(sContainerID).appendChild(oNuancier);
}

PS : $id() est un raccourci maison créé pour document.getElementById()
Modifié par Ladytron (11 Jan 2007 - 13:41)

Julien Royer

11 Jan 2007 à 12:19

Bonjour à toi aussi.

Te serait-il possible d'isoler le problème pour voir exactement quelle partie du code ne fonctionne pas ? Ce serait bien plus facile pour nous, et c'est en général une très bonne méthode pour progresser.
Modifié par Eldebaran (11 Jan 2007 - 12:19)

chmel

11 Jan 2007 à 12:42

BONJOUR,
Petite erreur d'inatention sans doute :

	oPalette.[#red]style.[/#]border = '1px solid #999';

Une class avec le style géré dans une feuille externe serait mieux et via DOM, il serait également mieux d'éviter les on(machin chose) , mais c'est déja pas mal Smiley cligne

Modifié par chmel (11 Jan 2007 - 12:54)

~~supprimé~~

11 Jan 2007 à 13:46

@Chmel :
Ouaip, je sais bien, je ne fais de la mise en page QUE via CSS, normalement ^^ Mais là, en l'occurence, c'était une solution de facilité (pour un projet dans ma boîte, aux délais serrés).

@Eldebaran :
(Désolé d'avoir omis le "bonjour" Smiley cligne

Je suis pourtant habitué du forum, je l'ai rajouté)

Quelle partie du code serait susceptible de ne pas fonctionner sur IE ? Je soupçonne fortement les appels à createElement() ou appendChild(), mais je n'en suis pas certain Smiley confus

Avec d'ignobles document.write(), ça marche (mais je ne veux pas entendre parler de cette méthode).

Julien Royer

11 Jan 2007 à 13:55

Ladytron a écrit :
Quelle partie du code serait susceptible de ne pas fonctionner sur IE ? Je soupçonne fortement les appels à createElement() ou appendChild(), mais je n'en suis pas certain

Ce sont des méthodes qui sont plutôt bien supportées par IE.

Quant à savoir quelle partie du code ne fonctionne pas, c'est plutôt facile pour toi, non ? Il suffit a priori d'isoler les instructions que tu soupçonnes de poser problème et de les tester sous IE.

Par contre, attention, je ne crois pas qu'il soit une bonne idée d'attribuer une chaîne de caractères à "onmouseover", "onclick", ... Il faut utiliser des fonctions.
Modifié par Eldebaran (11 Jan 2007 - 13:55)

~~supprimé~~

11 Jan 2007 à 14:02

Eldebaran a écrit :
Par contre, attention, je ne crois pas qu'il soit une bonne idée d'attribuer une chaîne de caractères à "onmouseover", "onclick", ... Il faut utiliser des fonctions.

Je partage cet avis, j'ai utilisé par souci de délais Smiley smile

Je vais tenter d'isoler les éléments "fautifs" du non-affichage ...

chmel

11 Jan 2007 à 23:17

Ladytron a écrit :
Je partage cet avis, j'ai utilisé par souci de délais

Je vais tenter d'isoler les éléments "fautifs" du non-affichage ...

Rebonjour,
C'est peut-être ça ton bug :


mon_element.setAttribute("style","color:red;width:200px;");
// IE reconnait plutôt ceci :
mon_element.style.setAttribute("cssText","color:red;width:200px;");

Modifié par chmel (11 Jan 2007 - 23:21)

~~supprimé~~

12 Jan 2007 à 00:12

Non, aucune amélioration !

J'ai néanmoins une piste ... J'ai vu, sur différents blogs traitant du DOM, que MSIE n'autorisait pas les scripts à ajouter des enfants aux enfants d'un parent via appendChild() ...

Donc en gros, il faudrait que je passe par innerHTML ... Mais bon, mettre du code HTML dans du javascript ... C'est "beurk" ! Smiley rolleyes

Julien Royer

12 Jan 2007 à 00:17

Ladytron a écrit :
J'ai néanmoins une piste ... J'ai vu, sur différents blogs traitant du DOM, que MSIE n'autorisait pas les scripts à ajouter des enfants aux enfants d'un parent via appendChild() ...

Ca ne me dit rien. As-tu des exemples ?

~~supprimé~~

12 Jan 2007 à 00:59

Hélas non ! Aucun exemple particulier n'était d'ailleurs fourni avec l'explication Smiley ohwell

J'ai dû faire une erreur dans mon script, en tout cas, mais je n'ai pas pu déterminer où.

C'est pas grave, je vais reprendre tout depuis zéro. Mon script étant (de base) lent (créer 3000 éléments ou plus, c'est "long") et m'inspirer de ce tutoriel, beaucoup plus intéressant et rapide, et le modifier à ma sauce.

Merci quand même Smiley lol

coucou

12 Jan 2007 à 16:12

Bonjour
as tu essayé ce genre


		element = document.createElement("MaBalise");
 		var style = document.createAttribute("style");
                 element.setAttributeNode(style);
 		element.style.backgroundColor="#123456";

car ça ça marche aussi sur IE

Julien Royer

12 Jan 2007 à 16:24

coucou a écrit :
as tu essayé ce genre


		element = document.createElement("MaBalise");
 		var style = document.createAttribute("style");
                 element.setAttributeNode(style);
 		element.style.backgroundColor="#123456";

car ça ça marche aussi sur IE

Ce n'est pas du tout nécessaire de faire ça. L'attribut "style" est défini par défaut (d'ailleurs, c'est plus qu'un attribut), et supporté par tous les navigateurs modernes.

coucou

12 Jan 2007 à 16:45

au fait, Julien, pourquoi as tu changé de nom sur le forum ?

Julien Royer

12 Jan 2007 à 16:50

coucou a écrit :
au fait, Julien, pourquoi as tu changé de nom sur le forum ?

Pour enfin assumer ma véritable identité. Smiley cligne

Si tu veux en discuter, on en parle dans le bar.

sfresnel

12 Jan 2007 à 19:46

Je n'ai pas vu la raison exacte pour laquelle ta palette ne s'affiche pas, mais je te propose une autre solution (minimaliste):


<html>
<head>
<style>
.container {
  border: 1px solid black;
  width: 258px;
  padding: 0px;
  overflow: hidden;
}
.nospace {
height: 16px;
width: 1px;
margin: 0;
padding: 0px;
border-width: 0px;
float: left;
}
</style>
<script>

function DrawPalette(sContainerID, sPrefix, bGreyScale, iOStep, iMStep, iIStep, iColorWidth, iColorHeight)
{
  var container = document.createElement ( "div" );
  container.className = "container";
	for (outer = 0; outer < 256; outer++)
	{
	  var nospace = document.createElement ( "div" );
	  nospace.className = "nospace";
	  nospace.style.backgroundColor = nospace.color = "rgb("+outer+","+outer+","+outer+")";
	  nospace.onclick = function (event) {
      event=event||window.event;
      event.source=event.source||event.target||event.srcElement;
      alert(event.source.color);
    }
    container.appendChild ( nospace );
	}
	sContainerID.appendChild (container);
}

</script>
</head>
<body>
<a href="javascript:DrawPalette ( document.getElementById ( 'test' ), '', true )">test</a>
<div id="test"></div>
</body>
</html>

~~supprimé~~

12 Jan 2007 à 21:22

Cela fonctionne très bien, grand merci !

Sauf sur sIDContainer.appendChild() n'était pas correct car sIDContainer est une chaîne et non un objet du DOM.

Enfin bref, je retourne à l'assaut de mon nuancier Smiley cligne

Merci encore !

Sujet clos