Rubby
05-03-2007, 10:16 PM
Hello,
I've been lurking on these forums for a while, but now I really need some help. A client I'm making a page for needs a div to scroll but doesn't want traditional scroll bars. I came up with some quick code for scrolling a paragraph inside a div by hovering over hyperlinks (now I can obviously make the scrollbar look however I want) and it works just fine in firefox but not at all in IE. I've been testing this with FF 2.0.0.3 and IE 6 as thats all I have at home so there may be issues with other browsers I don't know about.
You can take a look at the test page here (http://www.ajdstudios.com/main/scrolltest.html).
Keep in mind that I'm just going for functionality. Pretty CSS and real content will be added latter.
Here is the code so you can look it over.
Thanks so much.
<html>
<head>
<script type="text/javascript">
<!--
var timerObj = null;
var speed = 3;
var obj;
function scrollUp()
{
if(document.getElementById)
{
if(parseInt(obj.style.top) < 0)
{
obj.style.top = parseInt(obj.style.top) + speed + "px";
}
timerObj = setTimeout(scrollUp, 30);
}
}
function scrollDown()
{
if(document.getElementById)
{
if(parseInt(obj.style.top) > document.getElementById('stuff').offsetHeight - obj.offsetHeight)
{
obj.style.top = parseInt(obj.style.top) - speed + "px";
}
timerObj = setTimeout(scrollDown, 30);
}
}
function init()
{
if(document.getElementById)
{
obj = document.getElementById("pa");
obj.style.top = 0;
if(document.addEventListener)
{
obj.style.position = "relative";
}
}
}
function scrollStop()
{
if(document.getElementById)
{
clearTimeout(timerObj);
}
}
//-->
</script>
<style type="text/css">
#stuff
{
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid black;
position: absolute;
top: 400px;
left: 400px;
}
</style>
</head>
<body onLoad="init()">
<div id="stuff">
<p id="pa">stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah </p>
</div>
<a href="#" onMouseOver="scrollUp()" onMouseOut="scrollStop()">up</a>
<a href="#" onMouseOver="scrollDown()" onMouseOut="scrollStop()">down</a>
</body>
</html>
I've been lurking on these forums for a while, but now I really need some help. A client I'm making a page for needs a div to scroll but doesn't want traditional scroll bars. I came up with some quick code for scrolling a paragraph inside a div by hovering over hyperlinks (now I can obviously make the scrollbar look however I want) and it works just fine in firefox but not at all in IE. I've been testing this with FF 2.0.0.3 and IE 6 as thats all I have at home so there may be issues with other browsers I don't know about.
You can take a look at the test page here (http://www.ajdstudios.com/main/scrolltest.html).
Keep in mind that I'm just going for functionality. Pretty CSS and real content will be added latter.
Here is the code so you can look it over.
Thanks so much.
<html>
<head>
<script type="text/javascript">
<!--
var timerObj = null;
var speed = 3;
var obj;
function scrollUp()
{
if(document.getElementById)
{
if(parseInt(obj.style.top) < 0)
{
obj.style.top = parseInt(obj.style.top) + speed + "px";
}
timerObj = setTimeout(scrollUp, 30);
}
}
function scrollDown()
{
if(document.getElementById)
{
if(parseInt(obj.style.top) > document.getElementById('stuff').offsetHeight - obj.offsetHeight)
{
obj.style.top = parseInt(obj.style.top) - speed + "px";
}
timerObj = setTimeout(scrollDown, 30);
}
}
function init()
{
if(document.getElementById)
{
obj = document.getElementById("pa");
obj.style.top = 0;
if(document.addEventListener)
{
obj.style.position = "relative";
}
}
}
function scrollStop()
{
if(document.getElementById)
{
clearTimeout(timerObj);
}
}
//-->
</script>
<style type="text/css">
#stuff
{
width: 200px;
height: 100px;
overflow: hidden;
border: 1px solid black;
position: absolute;
top: 400px;
left: 400px;
}
</style>
</head>
<body onLoad="init()">
<div id="stuff">
<p id="pa">stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
stuff stuff stuff stuff stuff stuff
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah blah
blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah
blah blah blah blah blah blah blah blah </p>
</div>
<a href="#" onMouseOver="scrollUp()" onMouseOut="scrollStop()">up</a>
<a href="#" onMouseOver="scrollDown()" onMouseOut="scrollStop()">down</a>
</body>
</html>