Archief - JS: Bug in IE

Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
P

P@(3

Legacy Member
Dit is mijn testvoorbeeldhttp://users.pandora.be/giovannim/Javascript/Test/

In FF werkt deze zoals het zou moeten: alle vlakken verschijnen op het scherm. In IE verschijnen staan 2 balken er al van in het begin wat dus niet zou mogen zijn.

JS-file
Code: 
// JavaScript Document


function index()
	{

	
	kader = document.createElement("div")
	kader.setAttribute("id","kader")
	kader.style.backgroundColor = "#A6EDE7"
	kader.style.width = "0px"
	kader.style.height = "500px"
	kader.style.position = "absolute"
	kader.style.top = "150px"
	kader.style.left = "200px"
	kader.style.zIndex = "0"
	
	document.getElementById("body").appendChild(kader)

	
	
	
	header = document.createElement("div")
	header.setAttribute("id","header")
	header.style.backgroundColor = "#FFCC00";
	header.style.width = "900px"
	header.style.height = "0px"
	header.style.position = "absolute"
	header.style.left = "200px"
	header.style.top = "0px"
	header.style.zIndex = "1"
	
	
	document.getElementById("body").appendChild(header)
	

	menu = document.createElement("div")
	menu.setAttribute("id","menu")
	menu.style.backgroundColor = "#EDEDED";
	menu.style.width = "0px"
	menu.style.height = "300px"
	menu.style.position = "absolute"
	menu.style.left = "220px"
	menu.style.top = "200px"
	menu.style.zIndex = "2"
	
	
	document.getElementById("body").appendChild(menu)
	
	submenu1 = document.createElement("div")
	submenu1.setAttribute("id","submenu1")
	submenu1.style.backgroundColor = "#EDEDED";
	submenu1.style.width = "180px"
	submenu1.style.height = "0px"
	submenu1.style.position = "absolute"
	submenu1.style.left = "200px"
	submenu1.style.top = "150px"
	submenu1.style.zIndex = "2"
	
	
	document.getElementById("body").appendChild(submenu1)
	
	
		submenu2 = document.createElement("div")
	submenu2.setAttribute("id","submenu2")
	submenu2.style.backgroundColor = "#EDEDED";
	submenu2.style.width = "180px"
	submenu2.style.height = "0px"
	submenu2.style.position = "absolute"
	submenu2.style.left = "380px"
	submenu2.style.top = "150px"
	submenu2.style.zIndex = "3"
	
	
	document.getElementById("body").appendChild(submenu2)
	
	
		submenu3 = document.createElement("div")
	submenu3.setAttribute("id","submenu3")
	submenu3.style.backgroundColor = "#EDEDED";
	submenu3.style.width = "180px"
	submenu3.style.height = "0px"
	submenu3.style.position = "absolute"
	submenu3.style.left = "560px"
	submenu3.style.top = "150px"
	submenu3.style.zIndex = "3"
	
	
	document.getElementById("body").appendChild(submenu3)
	
	
		submenu4 = document.createElement("div")
	submenu4.setAttribute("id","submenu4")
	submenu4.style.backgroundColor = "#EDEDED";
	submenu4.style.width = "180px"
	submenu4.style.height = "0px"
	submenu4.style.position = "absolute"
	submenu4.style.left = "740px"
	submenu4.style.top = "150px"
	submenu4.style.zIndex = "3"
	
	
	document.getElementById("body").appendChild(submenu4)
	
	
		submenu5 = document.createElement("div")
	submenu5.setAttribute("id","submenu5")
	submenu5.style.backgroundColor = "#EDEDED";
	submenu5.style.width = "180px"
	submenu5.style.height = "0px"
	submenu5.style.position = "absolute"
	submenu5.style.left = "920px"
	submenu5.style.top = "150px"
	submenu5.style.zIndex = "3"
	
	
	document.getElementById("body").appendChild(submenu5)
	
	
	inhoud = document.createElement("div")
	inhoud.setAttribute("id","inhoud")
	inhoud.style.backgroundColor = "#EDEDED";
	inhoud.style.width = "650px"
	inhoud.style.height = "0px"
	inhoud.style.position = "absolute"
	inhoud.style.left = "400px"
	inhoud.style.top = "200px"
	inhoud.style.zIndex = "4"
	
	
	document.getElementById("body").appendChild(inhoud)
	
	
	
	
	vergroot(1,'150px',10,'header')
	
	setTimeout("vergroot(2,'900px',30,'kader')",1000)
	setTimeout("vergroot(2,'150px',25,'menu')",2000)
	setTimeout("vergroot(1,'30px',10,'submenu1')",3000)
	setTimeout("vergroot(1,'30px',10,'submenu2')",3500)
	setTimeout("vergroot(1,'30px',10,'submenu3')",4000)
	setTimeout("vergroot(1,'30px',10,'submenu4')",4500)
	setTimeout("vergroot(1,'30px',10,'submenu5')",5000)
	setTimeout("vergroot(1,'400px',20,'inhoud')",5500)
	}

	
	
function vergroot(kant,hoeveel,stap,id)
	{

		if(kant == 1)
			{
			voorlopig = document.getElementById(id).style.height
				
				if(voorlopig == hoeveel)
				{
				
				}
				else
				{
				
					voorlopig = voorlopig.substr(0,voorlopig.length-2)
					voorlopig = parseInt(voorlopig)
					voorlopig+=stap
		
					document.getElementById(id).style.height = "" +voorlopig + "px"		
					
					kant1 = kant
					hoeveel1 = hoeveel
					stap1 = stap
					id1 = id
					
					setTimeout("vergroot(kant1,hoeveel1,stap1,id1)",15)
			
				}
		}
		else
		{
			
			voorlopig = document.getElementById(id).style.width
			
				if(voorlopig == hoeveel)
				{
				
				}
				else
				{
				
					voorlopig = voorlopig.substr(0,voorlopig.length-2)
					voorlopig = parseInt(voorlopig)
					voorlopig+=stap
		
					document.getElementById(id).style.width = "" +voorlopig + "px"
				
				
					kant1 = kant
					hoeveel1 = hoeveel
					stap1 = stap
					id1 = id
					
					setTimeout("vergroot(kant1,hoeveel1,stap1,id1)",15)
				}
		
		
		}
	}

index.htm

Code: 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>Untitled Document</title>
	<script type="text/javascript" src="functions.js"></script>

</head>

<body id="body" onload="index()">


</body>
</html>

nu is mijn vraag weet er soms iemand hoe dit opgelost kan worden? Ik ben bijna zeker dat dit aan een code ligt die niet crossbrowser is, maar ik weet niet welke.

Dank bij voorbaat
G

Goldrusher

Legacy Member
Ik heb IE (weliswaar 7) en dat werkt hier perfect. Niks in het begin, en dan achtereenvolgens de vlakken (geel, blauw, een witte, de menustukjes, en nog een witte)
P

P@(3

Legacy Member
Ah,mss dat IE 7 dit dan gelijk ondersteund als FF. Maarja tzal ook moeten werken in IE 6.?? als ik wil ontwikkelen voor iedereen
s

servi

Legacy Member
Wat jij voorhebt is bij mijn weten niet op te lossen in IE. de reden waarom het niet in IE werkt is omdat het inherent is aan de manier waarop IE6- pagina's interpreteert. Als jij een bewerking wil doen op een div (of elk ander soort element uit de DOCtree), dan moet die div gedefinieerd zijn vanaf de initialisatie van de pagina. Dat is op jouw pagina niet het geval, jij genereert ze dynamisch, maar je kan die dynamische gegenereerde divs niet aanspreken in IE, omdat IE ze gewoon niet kent.

Ik heb hetzelfde voorgehad met XSLTs op http://users.telenet.be/phlips/vooroudersXML/data.xml waarbij dus de dynamische gegenereerde elementen die ik aanroep in IE zogezegd niet bestaan, in Firefox daarentegen werkt het prima.

EDIT : de manier waarop ik het voor jouw zou aanpakken is om die divs die je hebt ze allemaal explicitiet al vermelden in je html maar ze gewoon nog tijdelijk onzichtbaar houden.

je verandert dus de html-code naar :
Code: 
<body id="body" onload="index()">
<div id="kader" style="display : none"></div>
<div id="menu" style="display : none"></div>
<div id="submenu1" style="display : none"></div>
<div id="submenu2" style="display : none"></div>
<div id="submenu3" style="display : none"></div>
<div id="submenu4" style="display : none"></div>
<div id="sumbenu5" style="display : none"></div>
<div id="inhoud" style="display : none"></div>

</body>

en dan pas je je Javascript-code zo aan dat je in plaats van nieuwe elementen aanmaakt je gewoon deze verborgen elementen tevoorschijn tovert.

Dit zal hoogstwaarschijnlijk wel werken in IE.
d

dJeez

Legacy Member
servi zei:
Wat jij voorhebt is bij mijn weten niet op te lossen in IE. de reden waarom het niet in IE werkt is omdat het inherent is aan de manier waarop IE6- pagina's interpreteert. Als jij een bewerking wil doen op een div (of elk ander soort element uit de DOCtree), dan moet die div gedefinieerd zijn vanaf de initialisatie van de pagina. Dat is op jouw pagina niet het geval, jij genereert ze dynamisch, maar je kan die dynamische gegenereerde divs niet aanspreken in IE, omdat IE ze gewoon niet kent.
Klik om te vergroten...
Sedert wanneer zou dat dan zijn? Dat moet perfect werken, ook in IE. Via DOM kan je zowel in IE als in Mozilla/Firefox (en andere DOM compliant browsers) op om 't even welk moment elementen dynamisch gaan toevoegen.

De bugfix staat op http://users.pandora.be/djeez/test. Het probleem was dat je dynamisch gecreëerde divs geen display waarde meekregen waardoor er enkele direct zichtbaar waren. Ik heb die nu per default op "none" gezet bij de definitie van uw divs en ze op "block" gezet (indien nodig) in uw vergroot functie. Works like a charm.

Aangepaste JS code
Het archief is een bevroren moment uit een vorige versie van dit forum, met andere regels en andere bazen. Deze posts weerspiegelen op geen enkele manier onze huidige ideeën, waarden of wereldbeelden en zijn op sommige plaatsen gecensureerd wegens ontoelaatbaar. Veel zijn in een andere tijdsgeest gemaakt, al dan niet ironisch - zoals in het ironische subforum Off-Topic - en zouden op dit moment niet meer gepost (mogen) worden. Toch bieden we dit archief nog graag aan als informatiedatabank en naslagwerk. Lees er hier meer over of start een gesprek met anderen.
Terug
Bovenaan