Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    May 2007
    Location
    http://www.webdevforumz.com/
    Posts
    7
    Thanks
    0
    Thanked 0 Times in 0 Posts

    Slide up and down

    I want to make a code so that when I click on a word (Show news)it makes a box slide down, and when its down the link changes to (hide news) and when clicked, it slides back up again, how is this possible?

    DregondRahl

  • #2
    Senior Coder
    Join Date
    Aug 2002
    Location
    UK
    Posts
    2,789
    Thanks
    2
    Thanked 14 Times in 14 Posts
    Here's a basic example

    PHP Code:
    <HTML>
    <
    HEAD>
    <
    TITLE>Document Title</TITLE>

    <
    script type="text/javascript">
    // Jeff
    // www.huntingground.freeserve.co.uk

    upStep=50
    downStep
    =30
    showOnLoad
    =// 0 = no, 1 = yes
    centerDisplay=// center display horizontally; 0 = no, 1 = yes
    displayStopPos=70 // top position layer scrolls down to in relation to page top (zero)

    scrollTimer=null

    function initScrollDiv(){
    contDiv=document.getElementById("container")

    if(
    centerDisplay==1){
    wWidth=document.body.clientWidth
    cWidth
    =contDiv.offsetWidth
    contDiv
    .style.left=(wWidth-cWidth)/2
    }

    cHeight=contDiv.offsetHeight
    contDiv
    .style.top=contDiv.offsetTop-cHeight

    defPos
    =parseInt(contDiv.style.top)
    topPos=defPos
    stopPos
    =displayStopPos

    dir
    =0

    if(showOnLoad==1){
    scrollDiv(0)
    }

    }

    function 
    scrollDiv(n){
    dir=n
    clearTimeout
    (scrollTimer)
    scrollTimer=setTimeout("scrollDiv("+n+")",50)

    if(
    dir==0){
    topPos+=downStep

    if(topPos>stopPos-downStep){
    topPos=stopPos
    clearTimeout
    (scrollTimer)
    document.getElementById("show_new").innerHTML="Hide News"
    document.getElementById("show_new").onclick=function(){
    scrollDiv(1)
    }

    }


    }
    else{
    topPos-=upStep

    if(topPos<(defPos+upStep)) {
    topPos=defPos
    clearTimeout
    (scrollTimer)
    document.getElementById("show_new").innerHTML="Show News"
    document.getElementById("show_new").onclick=function(){
    scrollDiv(0)
    }

    }

    }

    contDiv.style.top=topPos+"px"
    }

    // add onload="initScrollDiv()" to the opening BODY tag

    </script>

    </HEAD>
    <BODY onload="initScrollDiv()">

    <a href="#null" id="show_new"  onclick="scrollDiv(0)">Show News</a>

    <DIV id="container" style="position:absolute;left=100;top:0;width:400px;height:200px;background:#9f9573">

    Contents

    </DIV>

    </BODY>
    </HTML> 
    The silent one.

    The most dangerous thing in the world is an idea.
    The most dangerous person in the world is the one with an idea.


  •  

    Posting Permissions

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