JavaScript Made Easy: Free JavaScripts Tutorials Example Code

Metachecker.net

|

FontsMadeEasy.com

|

RankChecker.net

Learn Java Script Today

|

Over 5000 Free Fonts

|

|

Javascript Forum

|

Other Javascript Resources

|

JavaScript Basics

Inserting Javascript

Complete Tutorial

Advance DHTML Tutorial



DHTML Script - ScrollText		[View Sample]

This script makes you scroll you text manually, up or down at different speeds. This script now also checks how far it can scroll and can't be scrolled longer then to "the bottom". Updated with a small fix for a bug that happened when someone tried to mouseover the links before the script had loaded.


Insert into <HEAD>
<style type="text/css"> #divUp{position:absolute; left:170; top:190} #divDown{position:absolute; left:170; top:380} #divCont{position:absolute; width:300; height:150; overflow:hidden; top:220; left:170; clip:rect(0,300,150,0); visibility:hidden} #divText{position:absolute; top:0; left:0} </style> <script type="text/javascript" language="JavaScript"> /****************************************************************************** Copyright (C) 1999 Thomas Brattli This script is made by and copyrighted to Thomas Brattli at www.bratta.com Visit for more great scripts. This may be used freely as long as this msg is intact! I will also appriciate any links you could give me. ****************************************************************************/ //Default browsercheck, added to all scripts! function checkBrowser(){ this.ver=navigator.appVersion this.dom=document.getElementById?1:0 this.ie5=(this.ver.indexOf("MSIE 5")>-1 && this.dom)?1:0; this.ie4=(document.all && !this.dom)?1:0; this.ns5=(this.dom && parseInt(this.ver) >= 5) ?1:0; this.ns4=(document.layers && !this.dom)?1:0; this.bw=(this.ie5 \|\| this.ie4 \|\| this.ns4 \|\| this.ns5) return this } bw=new checkBrowser() /************* You set the width and height of the divs inside the style tag, you only have to change the divCont, Remeber to set the clip the same as the width and height. You can remove the divUp and divDown layers if you want. This script should also work if you make the divCont position:relative. Then you should be able to place this inside a table or something. Just remember that Netscape crash very easily with relative positioned divs and tables. Updated with a fix for error if moving over layer before pageload. **************/ //If you want it to move faster you can set this lower: var speed=50 //Sets variables to keep track of what's happening var loop, timer //Object constructor function makeObj(obj,nest){ nest=(!nest) ? '':'document.'+nest+'.' this.el=bw.dom?document.getElementById(obj):bw.ie4?document.all[obj]:bw.ns4?eval(nest+'document.'+obj):0; this.css=bw.dom?document.getElementById(obj).style:bw.ie4?document.all[obj].style:bw.ns4?eval(nest+'document.'+obj):0; this.scrollHeight=bw.ns4?this.css.document.height:this.el.offsetHeight this.clipHeight=bw.ns4?this.css.clip.height:this.el.offsetHeight this.up=goUp;this.down=goDown; this.moveIt=moveIt; this.x; this.y; this.obj = obj + "Object" eval(this.obj + "=this") return this } function moveIt(x,y){ this.x=x;this.y=y this.css.left=this.x this.css.top=this.y } //Makes the object go up function goDown(move){ if(this.y>-this.scrollHeight+oCont.clipHeight){ this.moveIt(0,this.y-move) if(loop) setTimeout(this.obj+".down("+move+")",speed) } } //Makes the object go down function goUp(move){ if(this.y<0){ this.moveIt(0,this.y-move) if(loop) setTimeout(this.obj+".up("+move+")",speed) } } //Calls the scrolling functions. Also checks whether the page is loaded or not. function scroll(speed){ if(loaded){ loop=true; if(speed>0) oScroll.down(speed) else oScroll.up(speed) } } //Stops the scrolling (called on mouseout) function noScroll(){ loop=false if(timer) clearTimeout(timer) } //Makes the object var loaded; function scrollInit(){ oCont=new makeObj('divCont') oScroll=new makeObj('divText','divCont') oScroll.moveIt(0,0) oCont.css.visibility='visible' loaded=true; } //Call the init on page load onload=scrollInit; </script>

Insert into <BODY>
<div id="divUp"> <a href="#" onmouseover="scroll(-2)" onmouseout="noScroll()">[slow]</a> <a href="#" onmouseover="scroll(-7)" onmouseout="noScroll()">[medium]</a> <a href="#" onmouseover="scroll(-10)" onmouseout="noScroll()">[fast]</a> </div> <div id="divDown"> <a href="#" onmouseover="scroll(2)" onmouseout="noScroll()">[slow]</a> <a href="#" onmouseover="scroll(7)" onmouseout="noScroll()">[medium]</a> <a href="#" onmouseover="scroll(10)" onmouseout="noScroll()">[fast]</a> </div> <div id="divCont"> <div id="divText"> <p>News: <br> www.bratta.com/dhtml - Have you ever experienced DHTML is now updated with more script, demos and how to's then ever. Visit now! Also added: The DHTML Scriptomania, a new and better interface to browser the scripts, demos and how to's.</p> <p> test text test text test text test text test text test text<br><br> test text test text test text test text test text test text<br> test text test text test text test text test text test text<br> test text test text test text test text test text test text<br> test text test text test text test text test text test text<br></p> <p> test text test text test text test text test text test text<br> test text test text test text test text test text test text<br> test text test text test text test text test text test text<br><br> test text test text test text test text test text test text<br> test text test text test text test text test text test text - END</p> </div> </div> YOUR REGULAR BODY CONTENT GOES IN HERE

Other Options