Page 1 of 2 12 LastLast
Results 1 to 10 of 11

Thread: Open and jump to hidden div

  1. #1
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default Open and jump to hidden div

    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.

  2. #2
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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?
    Last edited by aka Robbie; 03-01-2007 at 02:09 PM.

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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);">
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  4. #4
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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?

  5. #5
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    Which version of IE are you talking about?
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  6. #6
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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"

  7. #7
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

    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.
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  8. #8
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    Quote Originally Posted by jscheuer1 View Post
    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

  9. #9
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    30,495
    Thanks
    82
    Thanked 3,449 Times in 3,410 Posts
    Blog Entries
    12

    Default

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

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

  10. #10
    Join Date
    Dec 2006
    Posts
    34
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Default

    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

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •