Expand/Collapse DIV stops page from loading completely

[ekwk]

Hi I'm running a website which utilizes Expand/Collapse DIV in it. However the page always stops loading midway if the "Hide/Show Instructions" on the page is clicked before all the images are loaded.

The URL is http://gamepath.xtynera.org//xpdni.html

Any idea how I can fix that?

[jscheuer1]

Sounds like the old IE href="javascript: 'bug/feature'. When you have like:

<a href="javascript:showHide('hiddenContent1');">

This tells the browser to execute this bit of javascript when the link is clicked. But it is still a link, and all links by default are a signal to the browser that, when they're clicked, it's time to start the process of unloading the page to prepare for the next page to get loaded. If the current page hasn't completed loading, and this is a normal link, the page would stop loading as the new page begins to be fetched.

Most browsers suspend this type of behavior when the href is javascript: something, but not IE. To avoid this bit of unpleasantness in IE, use this type of link for javascript onclick:

<a href="whatever" onclick="showHide('hiddenContent1');return false;">

Because the onclick event allows a return value, it may be set to false, thus preventing the browser from carrying out ts default behavior.

You notice that I put 'whatever' as the href. You can have just about anything there you want now, because it will not get executed. So, if you want to let your users know what will happen, you could still do:

<a href="javascript:showHide('hiddenContent1');" onclick="showHide('hiddenContent1');return false;">

Because the href will still show in the status bar on hover, or in whatever else the user's browser has to inform them of the link's href. But if a user has javascript disabled, this type of link, as well as the one you originally had, will do nothing. So you could use the opportunity to create an alternate result for the non-javascript user, like:

<a href="instruct_1.htm" onclick="showHide('hiddenContent1');return false;">

to take them to a page with the content that they might otherwise miss on it.

There could also still be other problems.

[pman]

Great post jscheuer1. Even after all this time with javascript, I'm learning something new everytime. Thanks for explaining it in details.

[ekwk]

Hi, sorry for the late reply. I went on a short holiday.

Thanks a lot for the solution!