Scrollable content script II - all directions

**Immi** · 03-28-2008, 11:29 PM

1) CODE TITLE: Scrollable content script II - all directions

2) AUTHOR NAME/NOTES: Immi

3) DESCRIPTION: This is a modification of the "Scrollable content script II" in the category "Dynamic Content". This script allows you to scroll a content left, right or up, down.

4) URL TO CODE:

HTML Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<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>

Please visit my homepage: http://www.pleitegeier96.de
Immi

**Immi** · 03-30-2008, 07:01 PM

If someone needs an example: http://www.pleitegeier96.de/scrollall.html
You can put in any content you like and position the arrow pictures (not shown in the html) where you want them to be.
Immi

**Nile** · 03-30-2008, 08:13 PM

I guess its ok, I like it.
But I ask you, how hard was it to edit the script?

**Immi** · 04-01-2008, 12:08 PM

Why are you asking? For me it was quite hard to edit, because I don't have much knowligde of Javascript. I just tried to help people who want to have basicly a script that scrolls in all 4 directions. It could be used like the browser scrollbars.
Immi

Thread: Scrollable content script II - all directions

Thread Tools

Search Thread

Scrollable content script II - all directions

Example

The Following User Says Thank You to Nile For This Useful Post:

Re Nile

Bookmarks

Bookmarks

Posting Permissions