hi guys,
I found this great script which scrolls a content over the window but I don't
know how it does this.
I tried to figure it out several times but this event stuff is new to me.
Can somebody explain it to me?
--page start----
<html>
<head>
<style>
#content {background:black;}
#data {font-family:Verdana; color:white}
#floater {background:black}
#scrollbox {background:#666699;}
#scrollup {background:#666699;}
#scrolldown {background:#666699;}
</style>
<title></title>
</head>
<script>
// variables
var mouseover = false;
var scrolldirection;
var scrollratio;
var theheartbeat, scrolling;
var menuOffsetTop = menuOffsetLeft = menuMaxHeight = 0;
var currentX = currentY = 0;
var whichIt = null;
// events
document.onmousedown = grabIt;
document.onmousemove = moveIt;
document.onmouseup = dropIt;
// switch direction scroller will move while pressing a button
function switchit(obj, cmd)
{
if (cmd == 'in')
{
mouseover = true;
if (obj.getAttribute('id') == "scrollup")
{
scrolldirection = -1;
}
else
{
scrolldirection = 1;
}
}
else
{
mouseover = false;
}
}
function scroll()
{
if (((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + scrolldirection) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += scrolldirection;
}
}
function heartBeat()
{
data.style.pixelTop = -1 * scrollratio * (scrollbox.style.pixelTop + menuOffsetTop - menuOffsetTop);
}
function grabIt(e) {
if (event.button == 1)
{
if (mouseover)
scrolling = window.setInterval("scroll();",1);
else
{
whichIt = event.srcElement;
while (whichIt.id.indexOf("scrollbox") == -1) {
whichIt = whichIt.parentElement;
if (whichIt == null) { return true; }
}
// whichIt.style.pixelLeft = whichIt.offsetLeft;
whichIt.style.pixelTop = whichIt.offsetTop;
currentX = (event.clientX + document.body.scrollLeft);
currentY = (event.clientY + document.body.scrollTop);
}
theheartbeat = window.setInterval("heartBeat()",1);
}
}
function moveIt(e) {
if (whichIt == null) { return false; }
newX = (event.clientX + document.body.scrollLeft);
newY = (event.clientY + document.body.scrollTop);
distanceX = (newX - currentX);
distanceY = (newY - currentY);
currentX = newX;
currentY = newY;
if (((scrollbox.style.pixelTop + menuOffsetTop + distanceY) >= menuOffsetTop) && ((scrollbox.style.pixelTop + menuOffsetTop + distanceY) <= (menuOffsetTop + menuMaxHeight - scrollbox.style.pixelHeight)))
{
scrollbox.style.pixelTop += distanceY;
}
event.returnValue = false;
return false;
}
function dropIt() {
clearInterval(scrolling);
clearInterval(theheartbeat);
whichIt = null;
}
function initScroll()
{
menuOffsetTop = floater.style.pixelTop;
menuMaxHeight = floater.style.pixelHeight;
getscrollinc();
}
function getscrollinc()
{
var contentinc;
var scrollerinc;
var contentHeight = data.offsetHeight;
var scrollerHeight = content.style.pixelHeight;
if (scrollerHeight < contentHeight)
{
contentinc = content.style.pixelHeight / contentHeight;
scrollerinc = floater.style.pixelHeight*contentinc;
scrollratio = contentHeight / floater.style.pixelHeight;
}
else
{
scrollerinc = floater.style.pixelHeight;
contentinc = 1;
}
scrollbox.style.height = scrollerinc;
}
</script>
<body bgcolor="#FFFFFF" onload="initScroll();">
<span ID="content" style="border:1px solid #000000;z-index:1;position:absolute;overflow:hidden;width:200;height:200;left:0;top:0;">
<div ID="data" style="z-index:1;position:absolute;width:200;">
<!-- start news -->
<p class="greet" align="center">
text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text,
text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text,
text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text,
text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text, text, text and some more text,
</p>
<!-- end news -->
</div>
</span>
<div ID="floater" style="position:absolute;z-index:1;left:210;top:15;width:11;height:170;">
<div ID="scrollbox" style="border:1px; solid #000000;z-index:1;position:absolute;left:0;top:0;width:11;height:170;" onmouseover="this.style.background='#333399';" onmouseout="this.style.background='#666699';"></div>
</div>
<span ID="scrollup" style="border:1px solid #000000;z-index:1;position:absolute;left:210;top:0;width:11;height:10;" onmouseover="switchit(this, 'in');this.style.background='#333399';" onmouseout="switchit(this, 'out');this.style.background='#666699';"><div></div></span>
<span ID="scrolldown" style="border:1px solid #000000;z-index:1;position:absolute;left:210;top:190;width:11;height:10;" onmouseover="switchit(this, 'in');this.style.background='#333399';" onmouseout="switchit(this, 'out');this.style.background='#666699';"><div></div></span>
</body>
</html>
---page end---
I copied that from a page one or two years ago. Unfortunatly, I don't have the email of
the dude who wrote it. Otherwise, I would ask him...
If you want to see what it does, you can copy that part and insert it over a blank
html.page.
kars10
every1 with psycho10esis raise my hand
posted 10-22-2001 14:21
