Closed Thread Icon

Topic awaiting preservation: I need a translater for that script... Pages that link to <a href="https://ozoneasylum.com/backlink?for=7895" title="Pages that link to Topic awaiting preservation: I need a translater for that script..." rel="nofollow" >Topic awaiting preservation: I need a translater for that script...\

 
Author Thread
kars10
Bipolar (III) Inmate

From: Europe
Insane since: Mar 2001

posted posted 10-22-2001 14:21

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

mjv
Bipolar (III) Inmate

From: Perth, Australia
Insane since: Aug 2000

posted posted 10-22-2001 15:02

Wow!
I like that script!
Although, i can't explain how it works. You wouldn't mind if i used it would you, kars?

It could look very interesting if i muck around with the css styles etc!

I Look forward to hearing from you!

-James-

mjv
Bipolar (III) Inmate

From: Perth, Australia
Insane since: Aug 2000

posted posted 10-22-2001 15:19

Kars: i just found http://www.codephobia.com/tutorials/view.php3?idnum=1
I thought it might help you understand ur code

Hope it helps

Dracusis
Maniac (V) Inmate

From: Brisbane, Australia
Insane since: Apr 2001

posted posted 10-22-2001 16:55

I like The Doc's Scroller Script better. It scores many more cool points in my book.

His other JS work is also very good: http://www.znippets.com (Dammit! I keep wanting to call them zniplets!)

DocOzone
Maniac (V) Lord Mad Scientist
Sovereign of all the lands Ozone and just beyond that little green line over there...

From: Stockholm, Sweden
Insane since: Mar 1994

posted posted 10-22-2001 21:54

Hah! I'd like to take this time to point out again, you *can* use "zniplets" if you want, I got both domain names, they mirror each other! Heh, just adding to my annual domain hosting charges, humm.te.dum!!!

Your pal, -doc-

« BackwardsOnwards »

Show Forum Drop Down Menu