PDA

View Full Version : Scrollable content script II left-right solution



Immi
11-19-2007, 11:00 AM
1) Script Title: Scrollable content script II

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex11/scrollc2.htm

3) Describe problem: Hi, this is no problem or question but a solution of left-right script or even both. I thought it would be interesting for those who search for this:

left-right:

<html>
<head>
<meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>scroll</title>
</head>
<body>
<br>
<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
******************************************/
iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5
if (iens6){
document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;height:155px;left:0;top:0">')
}
</script><ilayer
name="nscontainer" width="175" height="160"
clip="0,0,175,160">
<layer name="nscontent" width="175"
height="160" visibility="hidden"><!--INSERT CONTENT HERE--></layer></ilayer>
<p><font
face="Arial" size="2">-</font><font
face="Arial" size="2">
DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font
face="Arial" size="2">- DOM stands for
Document Object Model</font></p>
<p><font
face="Arial" size="2">-</font><font
face="Arial" size="2">
DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font
face="Arial" size="2">- CSS allows for the
separation between
content
definition and formatting</font></p>
<p><font
face="Arial" size="2">- CSS stands for
Cascading style sheet</font></p>
<p><font
face="Arial" size="2">- </font><font
face="Arial" size="2"><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and
paste DHTML scripts</font></p>
<!--END CONTENT-->
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
<table width="175">
<tbody>
<tr>
<td>
<p align="right"><a
href="#" onmouseover="moveleft()"
onmouseout="clearTimeout(moveleftvar)"><img
src="up.gif" border="0"></a><a
href="#" onmouseover="moveright()"
onmouseout="clearTimeout(moverightvar)"><img
src="down.gif" border="0"></a></p>
</td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentwidth=crossobj.offsetWidth
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentwidth=crossobj.clip.width
}
function moveright(){
if (iens6&&parseInt(crossobj.style.left)>=(contentwidth*(-1)+100))
crossobj.style.left=parseInt(crossobj.style.left)-speed+"px"
else if (ns4&&crossobj.left>=(contentwidth*(-1)+100))
crossobj.left-=speed
moverightvar=setTimeout("moveright()",20)
}
function moveleft(){
if (iens6&&parseInt(crossobj.style.left)<=0)
crossobj.style.left=parseInt(crossobj.style.left)+speed+"px"
else if (ns4&&crossobj.left<=0)
crossobj.left+=speed
moveleftvar=setTimeout("moveleft()",20)
}
function getcontent_width(){
if (iens6)
contentwidth=crossobj.offsetWidth
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_width
</script>
</body>
</html>


left-right & up-down:

<html>
<head>
<meta
content="text/html; charset=ISO-8859-1"
http-equiv="content-type">
<title>scroll</title>
</head>
<body>
<br>
<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
******************************************/
iens6=document.all||document.getElementById
ns4=document.layers

//specify speed of scroll (greater=faster)
var speed=5
if (iens6){
document.write('<div id="container" style="position:relative;width:175px;height:160px;border:1px solid black;overflow:hidden">')
document.write('<div id="content" style="position:absolute;width:170px;height:155px;left:0;top:0">')
}
</script><ilayer
name="nscontainer" width="175" height="160"
clip="0,0,175,160">
<layer name="nscontent" width="175"
height="160" visibility="hidden"><!--INSERT CONTENT HERE--></layer></ilayer>
<p><font
face="Arial" size="2">-</font><font
face="Arial" size="2">
DHTML is the
combination of HTML, JavaScript, and CSS</font></p>
<p><font
face="Arial" size="2">- DOM stands for
Document Object Model</font></p>
<p><font
face="Arial" size="2">-</font><font
face="Arial" size="2">
DHTML allows
content on a page to change on the fly, without reloading the page</font></p>
<p><font
face="Arial" size="2">- CSS allows for the
separation between
content
definition and formatting</font></p>
<p><font
face="Arial" size="2">- CSS stands for
Cascading style sheet</font></p>
<p><font
face="Arial" size="2">- </font><font
face="Arial" size="2"><a
href="http://www.dynamicdrive.com">Dynamic
Drive</a> provides free, cut and
paste DHTML scripts</font></p>
<!--END CONTENT-->
<script language="JavaScript1.2">
if (iens6)
document.write('</div></div>')
</script>
<table width="175">
<tbody>
<tr>
<td>
<p align="right"><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><a
href="#" onmouseover="moveleft()"
onmouseout="clearTimeout(moveleftvar)"><img
src="up.gif" border="0"></a><a
href="#" onmouseover="moveright()"
onmouseout="clearTimeout(moverightvar)"><img
src="down.gif" border="0"></a></p>
</td>
</tr>
</tbody>
</table>
<script language="JavaScript1.2">
if (iens6){
var crossobj=document.getElementById? document.getElementById("content") : document.all.content
var contentwidth=crossobj.offsetWidth
var contentheight=crossobj.offsetHeight
}
else if (ns4){
var crossobj=document.nscontainer.document.nscontent
var contentwidth=crossobj.clip.width
var contentheight=crossobj.clip.height
}
function moveright(){
if (iens6&&parseInt(crossobj.style.left)>=(contentwidth*(-1)+100))
crossobj.style.left=parseInt(crossobj.style.left)-speed+"px"
else if (ns4&&crossobj.left>=(contentwidth*(-1)+100))
crossobj.left-=speed
moverightvar=setTimeout("moveright()",20)
}
function moveleft(){
if (iens6&&parseInt(crossobj.style.left)<=0)
crossobj.style.left=parseInt(crossobj.style.left)+speed+"px"
else if (ns4&&crossobj.left<=0)
crossobj.left+=speed
moveleftvar=setTimeout("moveleft()",20)
}
function movedown(){
if (iens6&&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 (iens6&&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_width(){
if (iens6)
contentwidth=crossobj.offsetWidth
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
function getcontent_height(){
if (iens6)
contentheight=crossobj.offsetHeight
else if (ns4)
document.nscontainer.document.nscontent.visibility="show"
}
window.onload=getcontent_height
window.onload=getcontent_width
</script>
</body>
</html>

Have fun with it!

Immi