display:none has not enough time to render in Firefox

[theKeyper]

Hi Guys,

I have a page that is broken up into sections. When you click the 'next' button, the current section is set to display:none and the next section is set to display:block. The code is as follows:

	document.getElementById('form_section_'+sectionnum).style['display'] = 'none';
	//alert('stuff');
	if(direction=='next')
	{
		sectionnum=(sectionnum+1);
	} else if(direction=='prev')
	{
		sectionnum=(sectionnum-1);
	}
	document.getElementById('form_section_'+sectionnum).style['display'] = 'block';

This works great in IE, however in firefox I get a large blank whitespace underneath the new section. It looks as if the display:none is just making it invisible instead of not rendering it at all.

Here comes the weird bit. When I un-comment that "alert('stuff');" it works fine! I can only assume that firefox needs a bit of time to render the display:none correctly?

Thanks for any Ideas.

Regards,

Keyper

 

[jemminger]

any chance this section you are hiding is a table row? if so, you need to set display to "table-row", not "block" for firefox. i can't remember if this is a firefox bug, or if it is actually proper behavior per the w3c spec.


-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[Kendel]

Hi,

If the alert work for you, try to pause the script for the a second see if it will work:

document.getElementById('form_section_'+sectionnum).style['display'] = 'none';
    [b]pause(1000);[/b]
    if(direction=='next')
    {
        sectionnum=(sectionnum+1);
    } else if(direction=='prev')
    {
        sectionnum=(sectionnum-1);
    }
    document.getElementById('form_section_'+sectionnum).style['display'] = 'block';



function pause(numberMillis) {
        var now = new Date();
        var exitTime = now.getTime() + numberMillis;
        while (true) {
            now = new Date();
            if (now.getTime() > exitTime)
                return;
        }
}

 

[Kendel]

If 1 second is not long enough, do a 2 seconds.

 

[LFI]

Curiously, I have sometimes found that spawning a thread has made things work in situations such as this. I.e.,

document.getElementById('form_section_'+sectionnum).style['display'] = 'none';
    if(direction=='next')
    {
        sectionnum=(sectionnum+1);
    } else if(direction=='prev')
    {
        sectionnum=(sectionnum-1);
    }
    [b]setTimeout("[/b]document.getElementById('form_section_[b]"[/b]+sectionnum+[b]"'[/b]).style['display'] = 'block';[b]", 0);[/b]

Give it a shot. I'm not sure why this works for me when I encounter situations such as this, but I've encountered it enough to know to try it out when I need it! (P.S., notice what I did with the sectionnum variable when putting it in the setTimeout function).

Good luck.

--Dave

 

[theKeyper]

Thank you for your replies

Jemminger: yes, table-row is the w3c spec, and no, IE does not handle it correctly. However, the section that I am hiding is a Div box, and I believe it is a timing issue as I have duplicated the problem with nearly empty div boxes and the problem is not there.

Kendel & Dave, I will try the methods you described & get back to you in a sec.

-Keyper

 

[theKeyper]

Thanks alot Dave. That worked well. Got a quick flicker happening in gecko engines (ff, moz, nn) but IE still works sweet and it hasn't broken on Safari either, so ROCK ON!

Note to Kendel: Pause did not seem to work. I tried 5 secs and the problem was still there. After 6 secs I gota popup saying the script is running slowly, and once I clicked OK, it worked. But I believe that was due to the popup, not the wait.

Thanks for input guys.

-Keyper

The Key is more powerful than the Sword.

 

[BillyRayPreachersSon]

After 6 secs I gota popup saying the script is running slowly, and once I clicked OK, it worked. But I believe that was due to the popup, not the wait.

Nope - it will have been due to the wait, and the way the pause function is built.

You cannot reliably, and arbitrarily, pause execution in JS without tying up a CPU - which is what that code does. It goes into tight loop, which is why you saw that error.

Hope this helps,
Dan


[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]