| Header |  |
|
See also Whats New Use onclick="scrollDiv(0)" to scroll the div down Use onclick="scrollDiv(1)" to scroll the div up You can add the onclick event to a link, button, div, td cell, image etc.
|
|
The basics of this effect is that a div is scrolled down and up the page.
The variable centerDisplay is used to center the div within the page, or you can state a left position in the divs style attributes.
With centerDisplay set to 0 the divs left attribute is used.
With centerDisplay set to 1 the display is centered
You can chose to have the div scroll down when the page has loaded by setting the variable showOnLoad to 1.
Setting this to zero means that the link or button will have to be clicked to show the div.
A button or link is used to recall the display simply by adding onclick="scrollDiv(0)" to that element
Adding onclick="scrollDiv(1)" to an element, such as an image, scrolls the div back up the page out of view
The contents of this display div can be just about anything you want.
The script uses the offsetHeight of the container div as the default stop position when the div is scrolled up, so the display is always fully hidden irrespective of how content you put in here.
You could add the height and overflow attributes to the div to create a fixed height.
| Header | |
|
See also Whats New Use onclick="scrollDiv(0)" to scroll the div down Use onclick="scrollDiv(1)" to scroll the div up You can add the onclick event to a link, button, div, td cell, image etc.
|
|
<HTML>
<HEAD>
<TITLE>Document Title</TITLE>
<script type="text/javascript">
// Jeff
// www.huntingground.freeserve.co.uk
upStep=50
downStep=30
showOnLoad=1 // 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)
downTimer=setTimeout("scrollDiv("+n+")",50)
if(dir==0){
topPos+=downStep
if(topPos>stopPos-downStep){
topPos=stopPos
clearTimeout(scrollTimer)
}
}
else{
topPos-=upStep
if(topPos<(defPos+upStep)) {
topPos=defPos
clearTimeout(scrollTimer)
}
}
contDiv.style.top=topPos
}
// add onload="initScrollDiv()" to the opening BODY tag
</script>
</HEAD>
<BODY onload="initScrollDiv()">
<button onclick="scrollDiv(0)">Show</button>
<DIV id="container" style="position:absolute;left=100;top:0;width:400px;background:#9f9573">
<table border="0" width="100%" height="350">
<tr>
<td align="center" width="380px">Header</td>
<td width="20px" height="20px"><img src="../main/down.jpg" onclick="scrollDiv(1)"></td>
</tr>
<tr>
<td colspan="2" valign="top" style="background-color:#f0ece0">
<center>Contents</center>
</td>
</tr>
</table>
</DIV>
</BODY>
</HTML>