ctoz Posted September 4, 2007 Share Posted September 4, 2007 The script below changes two styles on a bunch of elements, with a setTimeout... (thanks to Synook)function boxDC (display,color,current) {theLot = new Array ("b01","b03","b05","b09","b10"); box = document.getElementById(theLot[current]);box.style.display = display;box.style.color = color;if (current != theLot.length - 1) {current++;setTimeout("boxDC('" + display + "','" + color + "'," + current + ")",30);}} However, each of the elements in question has been positioned (relative positioning, varies with browser... ) so that its content coincides with and hides the content of another version underneath: <div class="section 81"><div class="shadow"><p>text text</p><p>text text</p><p>text text</p></div><div class="box" id="b01"><p id="L381">text text</p><p id="L281">text text</p><p id="L181">text text</p></div></div>basic CSS:.shadow {position:relative; z-index:54; color:#333330; }.box {position:relative; top:-3.0em; z-index:55; color:black; display:none } Now the problems (without getting to testing on Windows) are: Opera and Safari get the timing right, but ignore the positioning. Firefox honours the positioning, but looks like it's adding a zero to the timeout, it's so slow. I can re-jig the html to get rid of the relative positioning, 2 separate layers for 'boxes"and "shadows", but that'll entail much code duplication. Any suggestions? Link to comment Share on other sites More sharing options...
justsomeguy Posted September 4, 2007 Share Posted September 4, 2007 You need to show the part that executes the Javascript function, what values are you sending for the parameters? Also, for this:<div class="section 81">81 is not a valid class name for CSS, so that might be causing a problem somewhere, or at least something unexpected. Link to comment Share on other sites More sharing options...
ctoz Posted September 5, 2007 Author Share Posted September 5, 2007 Careless, the class is "section _81".The call is "boxDC('inline','black',0); return false".The logical thing would be to set the two divs "shadow" and "box" by position absolute within the relatively-positioned container "section _81" , but there was a reason which I don't recall for not doing this...Changing the css as above, getting rid of relative positioning, now makes Safari and Opera work just fine, but makes no difference at all to the speed of Firefox.I've checked the cache size, run it with no other apps up, still slow. There is currently one other script on the page which does three things with setTimeouts, and FF behaves normally with this. Reinstalled Firefox, no change.There are 64 "sections", FF takes 45 seconds to complete. Even with just 16 "sections" in the array, the pace is the same. It makes no difference whether the array is in or out of the function.Cheers. Link to comment Share on other sites More sharing options...
justsomeguy Posted September 5, 2007 Share Posted September 5, 2007 I don't see anything in the code you posted that would make Firefox take more then 30 milliseconds to run the function. This works fine in Firefox: <html> <head> <title>Test</title> <script type="text/javascript"> function boxDC (display,color,current) { theLot = new Array ("b01","b03","b05","b09","b10"); box = document.getElementById(theLot[current]); box.style.display = display; box.style.color = color; if (current != theLot.length - 1) { current++; setTimeout("boxDC('" + display + "','" + color + "'," + current + ")",30); } } </script> <style type="text/css"> .shadow {position:relative; z-index:54; color:#333330; } .box {position:relative; top:-3.0em; z-index:55; color:black; display:none } </style> </head> <body onload="boxDC('inline','black',0);"> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b01"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b03"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b05"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b09"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b10"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
ctoz Posted September 6, 2007 Author Share Posted September 6, 2007 I don't see anything in the code you posted that would make Firefox take more then 30 milliseconds to run the function. This works fine in Firefox:<html> <head> <title>Test</title> <script type="text/javascript"> function boxDC (display,color,current) { theLot = new Array ("b01","b03","b05","b09","b10"); box = document.getElementById(theLot[current]); box.style.display = display; box.style.color = color; if (current != theLot.length - 1) { current++; setTimeout("boxDC('" + display + "','" + color + "'," + current + ")",30); } } </script> <style type="text/css"> .shadow {position:relative; z-index:54; color:#333330; } .box {position:relative; top:-3.0em; z-index:55; color:black; display:none } </style> </head> <body onload="boxDC('inline','black',0);"> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b01"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b03"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b05"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b09"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> <div> <div class="shadow"> <p>text text</p> <p>text text</p> <p>text text</p> </div> <div class="box" id="b10"> <p id="L381">text text</p> <p id="L281">text text</p> <p id="L181">text text</p> </div> </div> </body></html> Link to comment Share on other sites More sharing options...
ctoz Posted September 6, 2007 Author Share Posted September 6, 2007 Thanks for taking the trouble to test. Maybe something in the rest of the css, i'll check. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.