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/dynamici...chcontent2.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:

PHP Code:


<?php

$sol =$_GET['sol'];



if ($sol == "1") {

echo '<BODY onLoad="expandcontent(this, \'sc1\');">';

}



else

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

Code:

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

Code:

<BODY onLoad="expandcontent(this, \'sc1\');window.scrollTo(0,600);">

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

**jscheuer1** · 03-01-2007, 05:15 PM

Code:

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:

Code:

<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):

Code:

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

**aka Robbie** · 03-02-2007, 11:53 AM

Originally Posted by jscheuer1

Code:

<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:

Code:

<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?

**jscheuer1** · 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.

For the time being my test page can be found here:
http://www.metadigm.co.uk/partners/w...index_test.php

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

**jscheuer1** · 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

Originally Posted by jscheuer1

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

**jscheuer1** · 03-02-2007, 04:31 PM

Your example page looks about the same in FF, IE and Opera and this is the body tag:

Code:

<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:
http://www.metadigm.co.uk/partners/w...index_test.php

First variable:
http://www.metadigm.co.uk/partners/w...test.php?sol=8

Second variable:
http://www.metadigm.co.uk/partners/w...test.php?sol=9

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:

PHP Code:


<?php

$sol =$_GET['sol'];



if ($sol == "8") {

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

}



else

if ($sol == "9") {

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

}



else

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

?>

Hope that helps

Thread: Open and jump to hidden div

Thread Tools

Search Thread

Open and jump to hidden div

Bookmarks

Bookmarks

Posting Permissions