div overflow:auto; – > hover over img to scroll down and hover over img to scroll up.

@askfritzSep 18.2007

i’m looking for a javascript snippet that will allow me to take my div with an overflow: auto; to scroll up and down by a hover of the mouse on two different images representing the scroll up and scroll down.

any scripts or snippets that any of you guys know about?

thanks!

to post a comment

JavaScript

13 Comments(s) _↴

@harumphSep 18.2007 — #Here's one with different speeds:

[CODE]<SCRIPT LANGUAGE="JavaScript">
 <!-- Original:  Eddie Traversa ([email protected]) -->
 <!-- Web Site:  http://nirvana.media3.net -->
 
 function verScroll(dir, spd, loop) {
 loop = true;
 direction = "up";
 speed = 10;
 scrolltimer = null;
 if (document.layers) {
 var page = eval(document.contentLayer);
 }
 else {
 if (document.getElementById) {
 var page= eval("document.getElementById('contentLayer').style");
 }
 else {
 if (document.all) {
 var page = eval(document.all.contentLayer.style);
 }
 }
 }
 direction = dir;
 speed = parseInt(spd);
 var y_pos = parseInt(page.top);
 if (loop == true) {
 if (direction == "dn") {
 page.top = (y_pos - (speed));
 } else {
 if (direction == "up" && y_pos < 10) {
 page.top = (y_pos + (speed));
 } else {
 if (direction == "top") {
 page.top = 10;
 }
 }
 }
 scrolltimer = setTimeout("verScroll(direction,speed)", 1);
 }
 }
 function stopScroll() {
 loop = false;
 clearTimeout(scrolltimer);
 }
 //  End -->
 </script>[/CODE]

Then your div:

[CODE]<div id="contentLayer" style="position:absolute; width:300px; height:300px; z-index:1; left: 50px; top: 50px;overflow: auto;"> 
 <img src="image.jpg" width=2400 height=2400 border=0 alt="">
 Or text: blah blah blah blah blah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blahblah blah blah blah
 </div>[/CODE]

Then the controls: (you can use your images)

[CODE]
 <div id="scrollmenu" style="position:absolute;width:200px;height:30px;z-index:1; left:400px; top: 40px">
 <a href="#" onMouseOver="verScroll('up','25','true')" onMouseOut="stopScroll()"><<<</a> 
 <a href="#" onMouseOver="verScroll('up','5','true')" onMouseOut="stopScroll()"><<</a> 
 <a href="#" onMouseOver="verScroll('up','1','true')" onMouseOut="stopScroll()"><</a> |
 <a href="#" onMouseOver="verScroll('dn','1','true')" onMouseOut="stopScroll()">></a> 
 <a href="#" onMouseOver="verScroll('dn','5','true')" onMouseOut="stopScroll()">>></a> 
 <a href="#" onMouseOver="verScroll('dn','25','true')" onMouseOut="stopScroll()">>>></a>
 </div>
 [/CODE]

@askfritzauthorSep 18.2007 — #When I use that script. When I make the hover, I get this javascript error in FF:

Error in parsing value for property 'top'. Declaration dropped.
 URL.

The URL is on a pw protected server or I'd link you. Any idea what's wrong with that?

@askfritzauthorSep 18.2007 — #And I am positioned absolutely.

@harumphSep 19.2007 — #I don't know. Do you have debug on so you can see what line is breaking it?

I dropped what I gave you above into a page and it worked with no problem (IE & FF). Not sure why you're getting that error.

Anyone have any ideas?

@askfritzauthorSep 19.2007 — #So I got that to work, actually.

So that scrolls the whole div container up and down on the page. I was more so looking for a script that scrolls the scrollbar of the div down while maintaining its' position on the page.

Any ideas of modifications that can be made to this script?

@askfritzauthorSep 19.2007 — #A prime example on the main page:

http://cepedabaseball.com/

@harumphSep 19.2007 — #Actually, that's Flash. Try this:

[CODE]<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
 <html>
 <head>
 <title>Scroll</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <style type="text/css"> 

 #divUpControl{
 position:absolute;
 width:66px;
 left:721px;
 top:68px;
 z-index:1;
 text-align: right;
 height: 19px;
 } 
 #divDownControl{
 position:absolute;
 width:82px;
 left:706px;
 top:233px;
 z-index:1;
 text-align: right;
 height: 19px;
 } 
 #divContainer{position:absolute; width:702px; height:240px; overflow:hidden; top:30; left:10; clip:rect(0 705 240 0); visibility:visible} 
 #divContent{position:absolute; top:0; left:0} 
 </style>
 <script language="JavaScript">// begin absolutely positioned scrollable area object scripts 
 // Extension developed by David G. Miles 
 // Original Scrollable Area code developed by Thomas Brattli 
 function verifyCompatibleBrowser(){ 
 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 verifyCompatibleBrowser() 
 
 
 var speed=50 
 
 var loop, timer 
 
 function ConstructObject(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=MoveAreaUp;this.down=MoveAreaDown; 
 this.MoveArea=MoveArea; this.x; this.y; 
 this.obj = obj + "Object" 
 eval(this.obj + "=this") 
 return this 
 } 
 function MoveArea(x,y){ 
 this.x=x;this.y=y 
 this.css.left=this.x 
 this.css.top=this.y 
 } 
 
 function MoveAreaDown(move){ 
 if(this.y>-this.scrollHeight+objContainer.clipHeight){ 
 this.MoveArea(0,this.y-move) 
 if(loop) setTimeout(this.obj+".down("+move+")",speed) 
 } 
 } 
 function MoveAreaUp(move){ 
 if(this.y<0){ 
 this.MoveArea(0,this.y-move) 
 if(loop) setTimeout(this.obj+".up("+move+")",speed) 
 } 
 } 
 
 function PerformScroll(speed){ 
 if(initialised){ 
 loop=true; 
 if(speed>0) objScroller.down(speed) 
 else objScroller.up(speed) 
 } 
 } 
 
 function CeaseScroll(){ 
 loop=false 
 if(timer) clearTimeout(timer) 
 } 
 var initialised; 
 function InitialiseScrollableArea(){ 
 objContainer=new ConstructObject('divContainer') 
 objScroller=new ConstructObject('divContent','divContainer') 
 objScroller.MoveArea(0,0) 
 objContainer.css.visibility='visible' 
 initialised=true; 
 } 
 // end absolutely positioned scrollable area object scripts 
 
 </script>
 <title>Scrolling</title>
 <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
 <script language="JavaScript" type="text/JavaScript">
 <!--
 function MM_reloadPage(init) {  //reloads the window if Nav4 resized
 if (init==true) with (navigator) {if ((appName=="Netscape")&&(parseInt(appVersion)==4)) {
 document.MM_pgW=innerWidth; document.MM_pgH=innerHeight; onresize=MM_reloadPage; }}
 else if (innerWidth!=document.MM_pgW || innerHeight!=document.MM_pgH) location.reload();
 }
 MM_reloadPage(true);
 //-->
 </script>
 <script language="Javascript" type="text/javascript">
 window.moveTo (0,0)
 window.resizeTo(screen.width,screen.height)
 </script>
 
 </head>
 
 <body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0" onLoad="InitialiseScrollableArea()">
 </div> <div id="Layer1" style="position:absolute; width:99px; height:25px; z-index:1; left: 46px; top: 10px; overflow: visible;">
 <!-- begin absolutely positioned scrollable area object-->
 <div id="divDownControl"> <a href="javascript:;" onMouseOver="PerformScroll(20)" onMouseOut="CeaseScroll()">Down</a> 
 </div> 
 <div id="divUpControl"> <a href="javascript:;" onMouseOver="PerformScroll(-20)" onMouseOut="CeaseScroll()">Up</a> 
 </div>
 
   <div id="divContainer" style="overflow: auto; "> 
   <div id="divContent"><b>Scroll Area Content Start</b></p>
   <p>Blah dee Blah deeBlah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee  </p>
   <P>Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee </p><P>Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee </p><P>Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee </p><P>Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee Blah dee </p>
   <b>Scroll Area Content End</b> </div>
   </div>
   <!-- end absolutely positioned scrollable area object -->
   </div>
 </body>
 </html>[/CODE]

@harumphSep 19.2007 — #And, if you want to remove the scrollbar and just scroll the contents, replace this:

<div id="divContainer" style="overflow: auto;">

with this:

<div id="divContainer">

@da8iwrJun 24.2008 — #I know this is an old thread, but i have used this Javascript and it wont work with Fire Fox and XHTML 1.0.

I have uploaded 2 test files using the exact same code given above but with different headers

XHTML 1.0 (doesnt work in FF)

[URL]http://host.newworldhosting.co.uk/~wwwcarr/scrolltest.html[/URL]

HTML4.01 (Does work in FF)

[URL]http://host.newworldhosting.co.uk/~wwwcarr/scrolltest2.html[/URL]

Does anybody know why this could happening?

Many thanks

Ian

@da8iwrJun 24.2008 — #Fixed it (well a good friend of mine did)

function MoveArea(x,y){ 
 this.x=x;this.y=y 
 this.css.left=this.x 
 this.css.top=this.y 
 }

Needs to be

 
 function MoveArea(x,y){ 
 this.x=x;this.y=y 
 this.css.left=this.x + "px";
 this.css.top=this.y + "px"; 
 }

It now works in FireFox ?

@harumphJun 24.2008 — #Thanks. It's been while since I've looked at this one.

@da8iwrJun 24.2008 — #No Probs, it looks great on my clients site

[URL]http://host.newworldhosting.co.uk/~wwwcarr/index.php?option=com_content&view=article&id=5&Itemid=4[/URL]

Of course the content is being updated and built up to look right.

@duongtunglamJun 24.2008 — #Check my scripts in attach file. It's simple to know how-to-do. Summary the theory that is using: [B]scrollLeft and scrollRop properties to control the layer's content.[/B]

But after i pressed F5 (refresh), the code seem run not correctly.

I asked on this forum, but Admin delete my post. I don't know why he delete, I'm not spam. Not have much time to spam.

Hix hix.

[upl-file uuid=e91fd38f-246f-43d4-bfbf-f9c6941d2eeb size=25kB]scroll_layer.zip[/upl-file]

Also in #JavaScript _↴

Collaborate text box using jquery?suckerfish - menu open on load - stuck open for parent items JS form validation problem

Success!

Help @askfritz spread the word by sharing this article on Twitter...

Tweet This

div overflow:auto; – > hover over img to scroll down and hover over img to scroll up.

13 Comments(s) ↴

Also in #JavaScript ↴

Success!

The web is an endless sea of information. Don't miss the boat... Subscribe!

Social

Version

13 Comments(s) _↴

Also in #JavaScript _↴