SitePoint Sponsor

User Tag List

Results 1 to 9 of 9

Thread: Sliding

  1. #1
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Sliding

    Hi,
    I wish to have areas on my site such as the input form for a reviewing system to be hidden when the page loads but a small text link or button to be shown and when clicked the form or hidden section scrolls or slides down below. Similar to the galleries sliding section on this page - CLICKY

    Please give me some ideas to how i can make a similar thing.

    Thanks

    Neil

  2. #2
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    421
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    thats done using javascript, not php. The full page content is loaded, then the section contained in the div is hidden probably during the body's onload event. Clicking the link triggers the links onclick event handler, which is captured by the function to expand / show the hidden content. The actual javascript code would be incredibly simple, something like

    Code:
    function ShowHide(LayerID, Toggle){
       document.getElementByID(LayerID).visible = Toggle
    }
    
    <body onload = ShowHide('HiddenDiv', False) >
    
    ...etc..
    
    <a href = "blah" onClick = ShowHide('HiddenDiv', True);>some link</a>
    something like that.

  3. #3
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Cheers i'll have a go

    I'll let you know how i get on.

    Thanks

    Neil

  4. #4
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I just found another way to do it which is very similar and works great but everytime i click the link to show or hide, the page viewing area moves to the top and you have to scroll back down to the area where the layer is. Anyway to stop the screen from jumping to the top of the page?

    Thanks

    Neil

  5. #5
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    421
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    assuming you're clicking a link, simply add return false; to the end of your function, or the link. eg:
    Code:
     
    function ShowHide(LayerID, Toggle){
       document.getElementByID(LayerID).visible = Toggle
       return false;
    }
    
    //OR
    
    <a href = "blah" onClick = ShowHide('HiddenDiv', True); return false;>some link</a>
    When adding this to the link it essentially tells the program not to respond to the click event, so make you place it last if necessary.

  6. #6
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    This is the code i am using. Where would i place "return false" in this:

    Code:
    <script type="text/javascript">
    function toggle( targetId ){
    if (document.getElementById){
    target = document.getElementById( targetId );
    if (target.style.display == "none"){
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
    }
    }
    </script>
    Then for the link to click:

    Code:
    <a href="#" onClick="toggle ('toggle') ">Link</a>
    Then for the hidden bits
    Code:
    <div id="toggle" style="display: none; padding-left: 10"></div>
    Thanks

    Neil

  7. #7
    SitePoint Evangelist
    Join Date
    Mar 2005
    Posts
    421
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Code:
    <script type="text/javascript">
    function toggle( targetId ){
    if (document.getElementById){
    target = document.getElementById( targetId );
    if (target.style.display == "none"){
    target.style.display = "";
    } else {
    target.style.display = "none";
    }
    }
    return false;
    }
    </script>
    or to put it in the link:

    Code:
    <a href="#" onClick="toggle ('toggle'); return false;">Link</a>
    i think that should work

    also note instead of using the display property of the style object, you could also use the visibility property, i'm not sure if they act any different though with regards to the surrounding page content.

  8. #8
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hey,
    I have got to a point in my site where i need to have two of these running on 1 page. How can i change the coding to make it so that two work seamlessly? Currently i have put 2 on but the two links both actiavte the same slider and the other slider cannot be opened?

    Also - is there anyway to make one that opens horizontally?

    Thanks

    Neil

  9. #9
    SitePoint Wizard rctneil's Avatar
    Join Date
    Jun 2005
    Posts
    1,891
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Please someone!

    Thanks

    Neil


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
  •