By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
424,848 Members | 3,202 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 424,848 IT Pros & Developers. It's quick & easy.

having a div which scrolls with 2 images

mikek12004
100+
P: 200
I want in all my scrolling divs to remove the scroll bar-quite easy through css, so now how to scroll the contents? After some searching I have found the following code which works perfectly

Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <HTML> 
  4. <HEAD> 
  5. <TITLE>Document Title</TITLE> 
  6.  
  7. <script type="text/javascript"> 
  8. <!-- 
  9. defaultStep=1  
  10. step=defaultStep  
  11.  
  12. function scrollDivDown(id){ 
  13. clearTimeout(timerDown)  
  14. document.getElementById(id).scrollTop+=step  
  15. timerDown=setTimeout("scrollDivDown('"+id+"')",10) 
  16.  
  17. }  
  18.  
  19. function scrollDivUp(id){ 
  20. clearTimeout(timerUp) 
  21. document.getElementById(id).scrollTop-=step  
  22. timerUp=setTimeout("scrollDivUp('"+id+"')",10) 
  23. }  
  24.  
  25. timerDown=""  
  26. timerUp=""  
  27.  
  28. function stopMe(){ 
  29. clearTimeout(timerDown)  
  30. clearTimeout(timerUp) 
  31.  
  32. document.onmousemove=function(){stopMe()}  
  33.  
  34.  
  35. // --> 
  36. </script>   
  37. </HEAD> 
  38. <BODY> 
  39. <P></P> 
  40.  
  41. <div id="div1" style="width:200px; height:300px; overflow:hidden">  
  42. <b>LAYER CONTENTS</b>  
  43. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  44. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  45. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  46. <P>Some Text<P>SOME TEXT<P>Some Text<P>End  
  47. </div>  
  48. <P></P> 
  49.  
  50. <a href="#null" onMouseDown="scrollDivDown('div1')" onMouseUp="stopMe()">ScrollDown</a>   
  51. <a href="#null" onMouseDown="scrollDivUp('div1')"  onmouseup="stopMe()">Scroll Up</a>  
  52. <img src="images/arrowdown.gif" onMouseDown="scrollDivDown('div1')" onMouseUp="stopMe()"/>
  53. <img src="images/arrowup.gif" onMouseDown="scrollDivUp('div1')" onMouseUp="stopMe()"/>
  54. </BODY> 
  55. </HTML>  
  56.  
  57.  
However in this example the user must keep pressing the links/images to navigate, I want to do this by simply hovering the mouse above them (I tried simply changing the events but the it worked spartialy-when I place the mouse above the down link it goes down only once and not continiously )
any help? (Also note that I want to keep the structure of fuctions with arguments since in the same page I will have multiple divs)
Sep 24 '08 #1
Share this Question
Share on Google+
7 Replies


acoder
Expert Mod 15k+
P: 16,027
Use onmouseover instead of onmousedown.
Sep 26 '08 #2

mikek12004
100+
P: 200
I tried but still the same. What I want is when I get my mouse over the arrows to continiously scroll with mouseover it does only once and the n I have to mouse the pointer out of the image and then again in just to move a step. I found this code with 2 links Up and down with the mousedown and mouseup events which worked fine I raplaced the links with images but I cannot seem to get this work
Sep 29 '08 #3

acoder
Expert Mod 15k+
P: 16,027
The line
Expand|Select|Wrap|Line Numbers
  1. document.onmousemove=function(){stopMe()} 
is clearing the timeouts. Remove that line.
Sep 29 '08 #4

mikek12004
100+
P: 200
Pretty good! I replaced the events commented the line you told me and it works fine, I will place at the end of hte post, the entire code for others with the same problem. One other think I was wondering in this example is it possible for the mousewheel to be used to scroll the div?
Expand|Select|Wrap|Line Numbers
  1.  
  2.  
  3. <HTML> 
  4. <HEAD> 
  5. <TITLE>Document Title</TITLE> 
  6.  
  7. <script type="text/javascript"> 
  8. <!-- 
  9. defaultStep=1  
  10. step=defaultStep  
  11.  
  12. function scrollDivDown(id){ 
  13. clearTimeout(timerDown)  
  14. document.getElementById(id).scrollTop+=step  
  15. timerDown=setTimeout("scrollDivDown('"+id+"')",10) 
  16.  
  17. }  
  18.  
  19. function scrollDivUp(id){ 
  20. clearTimeout(timerUp) 
  21. document.getElementById(id).scrollTop-=step  
  22. timerUp=setTimeout("scrollDivUp('"+id+"')",10) 
  23. }  
  24.  
  25. timerDown=""  
  26. timerUp=""  
  27.  
  28. function stopMe(){ 
  29. clearTimeout(timerDown)  
  30. clearTimeout(timerUp) 
  31.  
  32. //for onclick events
  33. //document.onmousemove=function(){stopMe()}  
  34.  
  35.  
  36. // --> 
  37. </script>   
  38. </HEAD> 
  39. <BODY> 
  40. <P></P> 
  41.  
  42. <div id="div1" style="width:300px; height:300px; overflow:hidden">  
  43. <b>LAYER CONTENTS</b>  
  44. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  45. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  46. <P>Some Text<P>SOME TEXT<P>Some Text<P>SOME TEXT  
  47. <P>Some Text<P>SOME TEXT<P>Some Text<P>End  
  48. </div>  
  49. <img src="images/arrowdown.gif" onmouseover="scrollDivDown('div1')" onMouseOut="stopMe()"/>
  50. <img src="images/arrowup.gif" onmouseover="scrollDivUp('div1')" onMouseOut="stopMe()"/>
  51.  
  52. <div style="font-size:12px; margin-top:5px; width:300px; padding-left:2px">
  53. <img  style="padding-left:5px; padding-right:5px" src="http://image.allmusic.com/00/acg/pic100/drz000/z085/z08555fem4l.jpg" alt="JoAnn Falletta" width="50" height="100" align="left" class="alignleft"/>With thdgdfgdfgfdge opening of the 2008-09 Concert Season, conductor JoAnn Falletta is celebrating her 10th anniversary as music director of the Buffalo Philharmonic, an orchestra frequently shortlisted as one the best in the United States and which continues to thrive even as subscriptions are down elsewhere. Falletta's is a name also familiar from recordings; in just short of two decades she has managed to make more than 50 of them for labels such as Naxos, Koch, Delos, Albany, and others.
  54. <p>
  55. </p>
  56. </div>
  57.  
  58. </BODY> 
  59. </HTML>  
  60.  
  61.  
Sep 30 '08 #5

acoder
Expert Mod 15k+
P: 16,027
Support for mouse wheel scroll control is not very strong or consistent. You could have a play with this though to get you started.
Sep 30 '08 #6

mikek12004
100+
P: 200
Thanks for your post, I did have a look (not that I made much) more luck I had with the moo tools I found from that page they do have a custom event for mousewheel but it doesn't work for multiple divs on the same page...If someone has already made the wheel work, I would like to hear his opinion
Oct 7 '08 #7

acoder
Expert Mod 15k+
P: 16,027
I think you can use it with multiple divs on the same page if you have a look here.
Oct 7 '08 #8

Post your reply

Sign in to post your reply or Sign up for a free account.