View Full Version : Open and jump to hidden div

aka Robbie
03-01-2007, 09:58 AM
1) Script Title: Switch Content Script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex17/switchcontent2.htm

3) Describe problem: I have the above script with the initial state set to close. What I am after is that depending on the URL the relevant div is opened and the page jumps to that div.

I placed the following at the top of the page which worked for opening the divs:
$sol =$_GET['sol'];

if ($sol == "1") {
echo '<BODY onLoad="expandcontent(this, \'sc1\');">';

echo '<BODY>';

However placing the classic #sc1 in the URL for the relevant anchor point hasn't worked.

aka Robbie
03-01-2007, 11:12 AM
I have found that adding
window.scrollTo(0,600) in the onload event works.

Well it works in FF, but not IE.

With IE the window.scrollTo is fine by itself. The expandcontent doesn't work in the onload. And neither work when combined as
<BODY onLoad="expandcontent(this, \'sc1\');window.scrollTo(0,600);">

Any ideas of how to get this to work in IE?

03-01-2007, 05:15 PM
expandcontent(this, \'sc1\')

Looks bad to me. The this keyword is normally meant to refer to the element being clicked. Here it refers to the body. It should be replaced by a reference to the element that normally would be clicked to display sc1.

From the demo, addition red:

<div class="headers"><img id="ac1" src="minus.gif" class="showstate" onClick="expandcontent(this, 'sc1')" />What is JavaScript?</div>
<div id="sc1" class="switchcontent">
JavaScript is a scripting language ori . . .

and then (without escaping for PHP):

<body onload="expandcontent(document.getElementById('ac1'), 'sc1');window.scrollTo(0,600);">

aka Robbie
03-02-2007, 11:53 AM
<body onload="expandcontent(document.getElementById('ac1'), 'sc1');window.scrollTo(0,600);">

Cheers. That got me very close to what I was looking for.

Unfortunately if a user refreshed the page then that would toggle the state that it was in. Also if the user visits another page and then comes back the div would be in the opposite state to which it was last in.

My solution was in the onload to have all the divs open and then close the redundent ones depending on the variable.

So my onload is now:
<BODY onLoad="sweeptoggle(\'expand\');expandcontent(document.getElementById(\'ac2\'), \'sc2\');window.scrollTo(0,800);">

Whilst I can get it to work in FF, it's still not working in IE:(

Any ideas of how to get this to work in IE?

03-02-2007, 03:14 PM
Which version of IE are you talking about?

aka Robbie
03-02-2007, 03:39 PM
The one I predict my end user will be using ;)

It works in all versions of FF - from FF0.8 through to GP3.0b
It works in all version of NS - from 6.2 to 8.1.2
It does not work in any version of Opera
It does not work in any version of IE - though at the moment though it would be nice to get it to work in 6+

That was some extensive cross browser testing. :eek:

For the time being my test page can be found here:

The variables to add are "sol=8" and "sol=9"

03-02-2007, 04:01 PM
OK, what part doesn't work? Does the content expand but the page not scroll? Is there an error given? Does the rest of the script work? Is the generated source as expected in the problem browsers?

A link to the problem page would probably help in figuring this out.

aka Robbie
03-02-2007, 04:20 PM
A link to the problem page would probably help in figuring this out.

N.B my previous reply ;)

No errors to report
Source fine
Altering state of divs does not work on its own
Scrolling does work on its own
Altering state nor scrolling work when placed together

03-02-2007, 04:31 PM
Your example page looks about the same in FF, IE and Opera and this is the body tag:

<BODY onmousemove="closesubnav(event);" onLoad="highlight();">

I realize I probably am supposed to click on something to see the problem but, what?

aka Robbie
03-02-2007, 04:54 PM
Normal page:

First variable:

Second variable:

The normal page should open and the two divs at the bottom containing the products should be closed with just the categories showing. There is also to be no scrolling of the page.

The first variable opens the first hidden div under the "Web & URL Filtering" category and the other div under the "Endpoint Security" category is closed. The page should scroll so the open product listing is in view.

The second variable opens the second hidden div under the "Endpoint Security" category and the other div under the "Web & URL Filtering" category is closed. Once again the page should scroll so the open product listing is in view.

The php in the index_test.php controlling the variables is now:
$sol =$_GET['sol'];

if ($sol == "8") {
echo '<BODY onmousemove="closesubnav(event);" onLoad="sweeptoggle(\'expand\');scroll(0,800);expandcontent(document.getElementById(\'ac2\'), \'sc2\');highlight();">';

if ($sol == "9") {
echo '<BODY onmousemove="closesubnav(event);" onLoad="sweeptoggle(\'expand\');scroll(0,900);expandcontent(document.getElementById(\'ac1\'), \'sc1\');highlight();">';

echo '<BODY onmousemove="closesubnav(event);" onLoad="highlight();">';

Hope that helps ;)

03-02-2007, 06:49 PM
In Opera, the onload event is simply not registering or is being overwritten by another script and is reported as null. You can tell this by pasting:


into the address bar and hitting enter.

In IE 7 the trouble is less clear. The first time I tried, the page never loaded fully, that prevents the onload event from firing. The next time it did load but the event apparently did not fire. If I pasted:


into the address bar and hit enter (which fires the event rather than displaying it as in the Opera test), it did work as expected.

These kind of results make me suspect that the HTML code of the page isn't valid and that the browser is having trouble with it. I checked, and sure enough, there were quite a number of errors.

Fixing these may or may not take care of the problem though. Other possibilities include script conflicts (I see you have quite a number of scripts for the page) and/or an inability in a given browser to respond as expected to the code that the server is throwing at it. I cannot tell by looking at the source if there is other PHP generated content or not but, if there is, that could play a role.

One approach to trouble shooting this would be to take everything away except what you are trying to get to work. If there is still a problem at that point, the solution should be obvious. If it does work, add things back one at a time until it breaks. At that point the cause should also become obvious.


More often than not, the page simply never fully loads in IE 7. There are some images that keep loading - perhaps a preload or slide show script - that keep IE 7 from registering the loaded state.