[Résolu] Incompatibilité IE6/7 Dom et Javascript

Bonjour à tous,
J'essai desepérement de remplir un div avec d'autre div à l'aide d'une fonction JS et du DOM, mais cela ne marche pas.
Sous FF et opéra les div se crées bien mais sous ie7 rien ne se passe.

Fonction JS :

if(type==1) // Fullscreen
	{
	divHtml.innerHTML = '';
		var conteneur =  document.getElementById('dropzone');
		var fullScreenDiv = document.createElement("div");
		conteneur.appendChild(fullScreenDiv);
		fullScreenDiv.setAttribute("id","principal");
		fullScreenDiv.setAttribute("class","fullscreen");
		//var fullscreen = '<div class="fullscreen" id="principal"></div>';
		//divHtml.innerHTML = '';
		
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
		new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('principal', {onDrop:addProduct})
	}
	else if(type==2) // Horizontal
	{
	divHtml.innerHTML = '';
		var conteneur =  document.getElementById('dropzone');
		// Div fullscreen
		var fullScreenDiv = document.createElement("div");
		conteneur.appendChild(fullScreenDiv);
		fullScreenDiv.setAttribute("id","principal");
		fullScreenDiv.setAttribute("class","fullscreenH");
		//Div horizontal
		var horizontalDiv = document.createElement("div");
		conteneur.appendChild(horizontalDiv);
		horizontalDiv.setAttribute("id","bas");
		horizontalDiv.setAttribute("class","horizontal");
		//var horizontal = '<div class="fullscreenH" id="principal"></div><div class="horizontal" id="gauche"></div>';
		//divHtml.innerHTML = horizontal;
		
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
		new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('principal', {onDrop:addProduct})
		
		// Déclaration des entité glissable/deposable
		var products = document.getElementsByClassName('droppable');
		for (var i = 0; i < products.length; i++) {
			new Draggable(products[i].id, {ghosting:true, revert:true})	
		}
		Droppables.add('bas', {onDrop:addProduct})
	}

j'ai remarquer que si à la place de :

fullScreenDiv.setAttribute("class","fullscreen");

je mettais :

with(fullScreenDiv.style){background-color="#ffffff"}

J'arrivais à afficher 1 de mes modifications mais si j'applique cette astuce à mes autres modification celà ne marche plus


Bref c'est à ni rien comprendre

Peut être que je n'utilise pas les bonnes methode ?[/i][/i][/i]
Modifié par grunky (12 Oct 2007 - 09:23)

Pour les class, utilise la propriété className :

fullScreenDiv.className = 'fullscreen'

Ca peut peut-être jouer

Super ca à en effet régler une partie de mon problème.
Désormais lorsque je clic sur un lien quelque soit le navigateur , les modifications s'affiche bien.

Comme vous l'avez peut être remarquez dans mon code précédent , selon le cas , je déclare une ou plusieur zone "draggable" à l'aide de scriptaculous :

var products = document.getElementsByClassName('droppable');

		for (var i = 0; i < products.length; i++) {

			new Draggable(products[i].id, {ghosting:true, revert:true})	

		}

		Droppables.add('bas', {onDrop:addProduct})

Or sous IE dès qu'une modification est apportée (et donc que les zone draggables sont réinstanciés) je ne peux plus rien drag and droper, comme si aucune instance n'existait.
En revanche sur les autres navigateurs aucuns problèmes[/i]
Modifié par grunky (11 Oct 2007 - 11:52)

[quote=grunky]Super ca à en effet régler une partie de mon problème.
Désormais lorsque je clic sur un lien quelque soit le navigateur , les modifications s'affiche bien.