tuna
09-15-2005, 04:55 AM
hey. I've only scripted a couple times, and only read through the first few chapters of any javabooks or tutorials.
I'm trying to use this "Scrollable content script" from Dynamic Drive more then once on my site, so I can have multiple text areas with scrollable text.
How can I do this? Of course I tried just posting it twice, but that didn't work. I read some comment about using the <body> onload function, but I don't understand it enough to implement it.
I also tried changing names, IDs, etc but none of it worked. Obviously I don't know what I'm doing.
What happens when I just paste it twice, is they both show up, but the scroll buttons from both scripts only control the first content area.
<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
iens7=document.all||document.getElementById
ns4=document.layers
//specify speed of scroll (greater=faster)
var speed=5
if (iens7){
document.write('<div id="container" style="position:relative;width:190px;height:200px;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:185px;left:0;top:0">')
}
</script>
<ilayer name="nscontainer" width=190 height=200 clip="0,0,190,200">
<layer name="nscontent" width=190 height=200 visibility=hidden>
<!--INSERT CONTENT HERE-->
<!--END CONTENT-->
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens7)
document.write('</div></div>')
</script>
<table width="190px"><td><p align="left">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
</table>
<script language="JavaScript1.2">
if (iens7){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (iens7&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (iens7&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function getcontent_height(){
if (iens7)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
Sorry for posting the whole script, but I don't know what part I have to change.
Thanks for any help!
I'm trying to use this "Scrollable content script" from Dynamic Drive more then once on my site, so I can have multiple text areas with scrollable text.
How can I do this? Of course I tried just posting it twice, but that didn't work. I read some comment about using the <body> onload function, but I don't understand it enough to implement it.
I also tried changing names, IDs, etc but none of it worked. Obviously I don't know what I'm doing.
What happens when I just paste it twice, is they both show up, but the scroll buttons from both scripts only control the first content area.
<script type="text/javascript">
/******************************************
* Scrollable content script II- © Dynamic Drive (www.dynamicdrive.com)
* Visit http://www.dynamicdrive.com/ for full source code
* This notice must stay intact for use
******************************************/
iens7=document.all||document.getElementById
ns4=document.layers
//specify speed of scroll (greater=faster)
var speed=5
if (iens7){
document.write('<div id="container" style="position:relative;width:190px;height:200px;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:185px;left:0;top:0">')
}
</script>
<ilayer name="nscontainer" width=190 height=200 clip="0,0,190,200">
<layer name="nscontent" width=190 height=200 visibility=hidden>
<!--INSERT CONTENT HERE-->
<!--END CONTENT-->
</layer>
</ilayer>
<script language="JavaScript1.2">
if (iens7)
document.write('</div></div>')
</script>
<table width="190px"><td><p align="left">
<a href="#" onMouseover="moveup()" onMouseout="clearTimeout(moveupvar)"><img src="up.gif" border=0></a> <a href="#" onMouseover="movedown()" onMouseout="clearTimeout(movedownvar)"><img src="down.gif" border=0></a></p></td>
</table>
<script language="JavaScript1.2">
if (iens7){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentheight=crossobj.clip.height
}
function movedown(){
if (iens7&&parseInt(crossobj.style.top)>=(contentheight*(-1)+100))
crossobj.style.top=parseInt(crossobj.style.top)-speed+"px"
else if (ns4&&crossobj.top>=(contentheight*(-1)+100))
crossobj.top-=speed
movedownvar=setTimeout("movedown()",20)
}
function moveup(){
if (iens7&&parseInt(crossobj.style.top)<=0)
crossobj.style.top=parseInt(crossobj.style.top)+speed+"px"
else if (ns4&&crossobj.top<=0)
crossobj.top+=speed
moveupvar=setTimeout("moveup()",20)
}
function getcontent_height(){
if (iens7)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
</script>
Sorry for posting the whole script, but I don't know what part I have to change.
Thanks for any help!