PDA

Click to See Complete Forum and Search --> : i need an explanation for this script....plz!

ka2
06-22-2004, 08:12 AM
please explain to me what every parameter in the script will produce and do...I'm a newbie, so I need help :p

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html>
<head>
<title>Scrolling Text</title>
<style type="text/css">
body {width:100%; height:100%; margin:0px; overflow:hidden;}
#up {position:absolute; left:460px; top:52px; cursor:pointer;}
#down {position:absolute; left:460px; top:322px; cursor:pointer;}
#cont {position:relative; left:150px; top:50px; width:300px; height:300px; border:1px solid #006699; overflow:hidden;}
#text {position:absolute; left:0px; top:0px; width:290px; font-family:tahoma,arial,helvetica,sans-serif; font-size:12px; text-align:justify; padding:5px;}
</style>
<script type="text/javascript">
/*
Script made by Martial Boissonneault © 2001-2002 http://getElementById.com/
This script may be used and changed freely as long as this msg is intact
Visit http://getElementById.com/ for more free scripts and tutorials.
*/
timerID = null;

function ScrollUp(speed){
if(document.getElementById){
if(parseInt(txt.style.top) < 0){
txt.style.top = parseInt(txt.style.top) + speed + "px";
}
timerID = setTimeout("ScrollUp("+speed+")",30)
}
}

function ScrollDown(speed){
if(document.getElementById){
if(parseInt(txt.style.top) > cnt.offsetHeight - txt.offsetHeight){
txt.style.top = parseInt(txt.style.top) - speed + "px";
}
timerID = setTimeout("ScrollDown("+speed+")",30)
}
}

function ScrollStop(){
if(document.getElementById){
clearTimeout(timerID);
}
}

function ScrollInit() {
if (document.getElementById) {
cnt = document.getElementById("cont");
txt = document.getElementById("text");
txt.style.top = 0;
}
}


</script>
</head>
<body onload="ScrollInit();">
<img src="up_over.gif" style="display:none;">
<img src="down_over.gif" style="display:none;">
<img id="up" src="up_out.gif" width="22" height="26" border="0" alt="" name="b1" onmouseover="ScrollUp(5); this.src='up_over.gif';" onmouseout="ScrollStop(); this.src='up_out.gif'" />
<img id="down" src="down_out.gif" width="22" height="26" border="0" alt="" name="b2" onmouseover="ScrollDown(5); this.src='down_over.gif'" onmouseout="ScrollStop(); this.src='down_out.gif'"/>

<div id="cont">
<div id="text">
<b>Title</b><br/>
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
<br/><br/>
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
<br/><br/>
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
<br/><br/>
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
<br/><br/>
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1.
This is my page1. This is my page1. This is my page1. This is my page1 END.
</div>
</div>

</body>
</html>
ka2
06-22-2004, 08:14 AM
oops...the smileys in the script should not be there... the correct information there is "cursor: pointer".
David Harrison
06-22-2004, 12:44 PM
There are 3 languages in there, HTML, CSS and JavaScript. You can't learn them all simultaneously.

I suggest that you get a book that deals with HTML and CSS ("Elizabeth Castrow's HTML for the World Wide Web with XHTML and CSS" is very good). Then you'll probably be able to work out what the JavaScript does when you have a better grasp on the basics. If not, come back and ask again.

By just glancing I would say that the script is scrolling the content in the id="text" div atg, by moving it "speed" pixels every 30 milliseconds.