costom scrollbar on scrollable div script

imogeen

06-21-2008, 11:39 AM

Hello everyone.

I'm using this scrollable div javascript. The div has fixed dimension in which lager content can be scrolled.

Scrollable div script
<html>
<head>
<title>Fun Scroll</title>
<style type="text/css">
#divTest{width:150px;height:200px;overflow:auto}
</style>
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("divTest").scrollTop = strPos;
document.getElementById("divTest").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("divTest").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
</head>
<body>
<div id="divTest" onscroll="SetDivPosition()">
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
ERIC 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
</div>
</body>
</html>

You can see it work here: http://www.greyburn.net/scroll.php

The problem is that the script uses the standard browser scrollbar, INSTEAD of this i want text (links) to scroll the content of this div. Eventually i would like it to look like this: http://www.greyburn.net/tag1.php (This is an iframe, so i can't use this script because i need to use a div this time.)

I know there are scrollable div script out there that use links (or custom scrollbars) to scroll the content. The reason why i need to use this scrollable div script is that it remembers the scrolling position, and not one of the other script's that i've found do this..

Now if i could only enhance the script to use text links to scroll the div's content, instead of this standard scrollbar.

Hope some of you can help me :)
xm

vwphillips

06-21-2008, 02:13 PM

<html>
<head>
<title>Fun Scroll</title>
<style type="text/css">
#divTest{width:150px;height:200px;overflow:auto}
</style>
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("divTest").scrollTop = strPos;
document.getElementById("divTest").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("divTest").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcScroll(zxcid,zxcud,zxcspd){
zxcspd=zxcspd||1;
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.to) zxcobj.to=null;
clearTimeout(zxcobj.to);
zxcobj.scrollTop=zxcobj.scrollTop+zxcud;
zxcud*=zxcspd;
zxcobj.to=setTimeout( function(){ zxcScroll(zxcid,zxcud,zxcspd); },100);
}

function zxcStop(zxcid){
clearTimeout(document.getElementById(zxcid).to);
}
/*]]>*/
</script> </head>
<body>
<input type="button" name="" value="Scroll Up" onmousedown="zxcScroll('divTest',1,1.2);" onmouseup="zxcStop('divTest');"/>
<input type="button" name="" value="Scroll Down" onmousedown="zxcScroll('divTest',-1,1.2);" onmouseup="zxcStop('divTest');" />

<div id="divTest" onscroll="SetDivPosition()">
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
ERIC 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
</div>
</body>
</html>

imogeen

06-21-2008, 10:33 PM

Wow, great work! Thanks! Two questions though.

1) The div still shows the scrollbar, can it be hidden?
2) Can the buttons be text with a mouse-over effect, so i don't have to click the link, just hover over it? (like this: http://www.greyburn.net/tag1.php)

Really appreciate your help dude :)

imogeen

06-22-2008, 09:28 AM

vwphillips

06-22-2008, 09:41 AM

<html>
<head>
<title>Fun Scroll</title>
<style type="text/css">
#divTest{width:150px;height:200px;overflow:hidden}
</style>
<script type="text/javascript">
window.onload = function(){
var strCook = document.cookie;
if(strCook.indexOf("!~")!=0){
var intS = strCook.indexOf("!~");
var intE = strCook.indexOf("~!");
var strPos = strCook.substring(intS+2,intE);
document.getElementById("divTest").scrollTop = strPos;
document.getElementById("divTest").scrollTop = strPos;
}
}
function SetDivPosition(){
var intY = document.getElementById("divTest").scrollTop;
document.title = intY;
document.cookie = "yPos=!~" + intY + "~!";
}
</script>
<script language="JavaScript" type="text/javascript">
/*<![CDATA[*/

function zxcScroll(zxcid,zxcud,zxcspd){
zxcspd=zxcspd||1;
var zxcobj=document.getElementById(zxcid);
if (!zxcobj.to) zxcobj.to=null;
clearTimeout(zxcobj.to);
zxcobj.scrollTop=zxcobj.scrollTop+zxcud;
zxcud*=zxcspd;
zxcobj.to=setTimeout( function(){ zxcScroll(zxcid,zxcud,zxcspd); },100);
}

function zxcStop(zxcid){
clearTimeout(document.getElementById(zxcid).to);
}
/*]]>*/
</script> </head>
<body>
<input type="button" name="" value="Scroll Up" onmouseover="zxcScroll('divTest',1,1.2);" onmouseout="zxcStop('divTest');"/>
<input type="button" name="" value="Scroll Down" onmouseover="zxcScroll('divTest',-1,1.2);" onmouseout="zxcStop('divTest');" />

<div id="divTest" onscroll="SetDivPosition()">
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
ERIC 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
1 1 1 1 1 1 1 1 1 
</div>
</body>
</html>

imogeen

06-22-2008, 10:16 AM

yes! thanks so much :)

(i made the buttons text links, so i can use it now)

xm