...

View Full Version : Slide up and down



dregondrahl
06-07-2007, 12:32 PM
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

Mr J
06-07-2007, 02:23 PM
Here's a basic example


<HTML>
<HEAD>
<TITLE>Document Title</TITLE>

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

upStep=50
downStep=30
showOnLoad=0 // 0 = no, 1 = yes
centerDisplay=1 // 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>



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum