Connecting Tech Pros Worldwide Forums | Help | Site Map
bytes > topic > javascript > answers

Div Scroll on MouseOver

Newbie
  
Join Date: Oct 2007
Posts: 27
#1: Apr 7 '08
Hi,

I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.How can i achieve this?

It would be very nice of you if you can provide a link to the article or blog where solution is provided to my problem.

Thanks in advance,
Saad Alam

Expert
  
Join Date: Nov 2006
Posts: 392
#2: Apr 7 '08

re: Div Scroll on MouseOver

Quote:

Originally Posted by Saad Alam

I am using a menu inside a div tag. What i want to do is to add scroll buttons (up and down ) along side div which move the div up and down on mouse over.

If that can be done it would likely have to be done with an iFrame instead of a div tag. As far as I know div tags do not use scroll bars. IFrame tags will have scroll bars any time their content is longer or wider than the the dimensions of the iFrame.

You would have to check the DOM references to see if there are any attributes you can set to modify the scroll position.
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,136
#3: Apr 7 '08

re: Div Scroll on MouseOver

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <script type="text/javascript">
  3.     var scrolling = null;
  4.  
  5.     function scroll_up() {
  6.         var d = document.getElementById('scroller');
  7.  
  8.         d.scrollTop = d.scrollTop - 5;
  9.  
  10.         scrolling = window.setTimeout(function() {
  11.             scroll_up();
  12.         }, 100);
  13.     }
  14.  
  15.     function scroll_down() {
  16.         var d = document.getElementById('scroller');
  17.  
  18.         d.scrollTop = d.scrollTop + 5;
  19.  
  20.         scrolling = window.setTimeout(function() {
  21.             scroll_down();
  22.         }, 100);
  23.     }
  24.  
  25.     function stop_scroll() {
  26.         window.clearTimeout(scrolling);
  27.     }
  28.     </script>
  29.     <body>
  30.         <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
  31.         <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
  32.             Hi,
  33.  
  34.             I am using a menu inside a div tag.
  35.             What i want to do is to add scroll buttons
  36.             (up and down ) along side div which move
  37.             the div up and down on mouse over.
  38.             How can i achieve this?
  39.  
  40.             It would be very nice of you if you can
  41.             provide a link to the article or blog
  42.             where solution is provided to my problem.
  43.  
  44.             Thanks in advance,
  45.             Saad Alam
  46.         </div>
  47.         <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
  48.     </body>
  49. </html>
  50.  
kind regards
Newbie
  
Join Date: Oct 2007
Posts: 27
#4: Apr 8 '08

re: Div Scroll on MouseOver

Quote:

Originally Posted by gits

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <script type="text/javascript">
  3.     var scrolling = null;
  4.  
  5.     function scroll_up() {
  6.         var d = document.getElementById('scroller');
  7.  
  8.         d.scrollTop = d.scrollTop - 5;
  9.  
  10.         scrolling = window.setTimeout(function() {
  11.             scroll_up();
  12.         }, 100);
  13.     }
  14.  
  15.     function scroll_down() {
  16.         var d = document.getElementById('scroller');
  17.  
  18.         d.scrollTop = d.scrollTop + 5;
  19.  
  20.         scrolling = window.setTimeout(function() {
  21.             scroll_down();
  22.         }, 100);
  23.     }
  24.  
  25.     function stop_scroll() {
  26.         window.clearTimeout(scrolling);
  27.     }
  28.     </script>
  29.     <body>
  30.         <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
  31.         <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
  32.             Hi,
  33.  
  34.             I am using a menu inside a div tag.
  35.             What i want to do is to add scroll buttons
  36.             (up and down ) along side div which move
  37.             the div up and down on mouse over.
  38.             How can i achieve this?
  39.  
  40.             It would be very nice of you if you can
  41.             provide a link to the article or blog
  42.             where solution is provided to my problem.
  43.  
  44.             Thanks in advance,
  45.             Saad Alam
  46.         </div>
  47.         <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
  48.     </body>
  49. </html>
  50.  
kind regards

Thank you so much gits.
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,136
#5: Apr 8 '08

re: Div Scroll on MouseOver

no problem ;) ... thats why this forum is here :) ... post back to the forum in case you have more questions ...

kind regards
Newbie
  
Join Date: May 2009
Posts: 3
#6: May 29 '09

re: Div Scroll on MouseOver

Is there any way to be able to be aware of when the div content "bottom" has been reached so that I can hide the "DOWN" button, and same for top? Is there javascript that can tell when a certain element of the div (last line, a spacer image) is on the screen and then report this state back so I can then hide the "DOWN" button? THANKS!
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#7: May 30 '09

re: Div Scroll on MouseOver

The top is easy: if it's 0, it's at the top. For the bottom, check that it's equal to the scrollHeight.
Newbie
  
Join Date: May 2009
Posts: 3
#8: May 30 '09

re: Div Scroll on MouseOver

That makes sense. Thanks.

One thing (a big one!) -- I'm enough of a novice that I'm not sure what syntax I need to read the scrollHeight and have an IF statement (I'm guessing) to then change the element's display property. Anyone want to hook a self-taught novice up?

And while we're at it, the effect I'd really like to have is one without an explicit up and down "button" but instead for scrolling to work like this:

http://deluxe-menu.com/scrollable-submenus-sample.html
(hover over Samples I and you'll see it "smart scroll").

Any help is appreciated. Thanks.
acoder's Avatar
Site Moderator
  
Join Date: Nov 2006
Location: UK
Posts: 14,581
#9: May 31 '09

re: Div Scroll on MouseOver

Add an ID to the 'link', e.g.
Expand|Select|Wrap|Line Numbers
  1. <div id="scrollup" style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
and then add a little snippet to the scroll_up() function:
Expand|Select|Wrap|Line Numbers
  1. if (d.scrollTop == 0) {
  2.     document.getElementById("scrollup").style.display = "none";
  3. else {
  4. ...
In scroll_down(), it'd be:
Expand|Select|Wrap|Line Numbers
  1. if (d.scrollTop == d.scrollHeight) {
  2.     document.getElementById("scrolldown").style.display = "none";
  3.  
Of course, you'd need to add code to display them again.

However, you mention that you want "smart" scrolling. For that you'd need to see the mouse position within the div. If it's below a certain point, start scrolling. Once it goes above that point, scroll back up.
Newbie
  
Join Date: May 2009
Posts: 3
#10: Jun 1 '09

re: Div Scroll on MouseOver

Quote:

Originally Posted by acoder View Post

Add an ID to the 'link', e.g.

Expand|Select|Wrap|Line Numbers
  1. <div id="scrollup" style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
and then add a little snippet to the scroll_up() function:
Expand|Select|Wrap|Line Numbers
  1. if (d.scrollTop == 0) {
  2.     document.getElementById("scrollup").style.display = "none";
  3. else {
  4. ...
In scroll_down(), it'd be:
Expand|Select|Wrap|Line Numbers
  1. if (d.scrollTop == d.scrollHeight) {
  2.     document.getElementById("scrolldown").style.display = "none";
  3.  
Of course, you'd need to add code to display them again.

However, you mention that you want "smart" scrolling. For that you'd need to see the mouse position within the div. If it's below a certain point, start scrolling. Once it goes above that point, scroll back up.

GREAT! I'm gonna try it. Mil Gracias.
Newbie
  
Join Date: Sep 2009
Location: Los Angeles, CA
Posts: 1
#11: Sep 16 '09

re: Div Scroll on MouseOver

edit: never mind! figured it out! crisis begets creativity :D

Hi, thank you for posting this code. I was able to implement it and get it to work. Is there a way to have more than one instance of this on a page? I have three separate divs with text in them on one page that I would like to have scroll like this.

I'm sorry if this is has an obvious answer, but I'm a javascript newbie. Thanks in advance for any help!

Quote:

Originally Posted by gits View Post

hi ...

you might play with the div's overflow style-property ... have a look at the following simple example ... that scrolls a div when moving the mouse over custom scroll-controls:

Expand|Select|Wrap|Line Numbers
  1. <html>
  2.     <script type="text/javascript">
  3.     var scrolling = null;
  4.  
  5.     function scroll_up() {
  6.         var d = document.getElementById('scroller');
  7.  
  8.         d.scrollTop = d.scrollTop - 5;
  9.  
  10.         scrolling = window.setTimeout(function() {
  11.             scroll_up();
  12.         }, 100);
  13.     }
  14.  
  15.     function scroll_down() {
  16.         var d = document.getElementById('scroller');
  17.  
  18.         d.scrollTop = d.scrollTop + 5;
  19.  
  20.         scrolling = window.setTimeout(function() {
  21.             scroll_down();
  22.         }, 100);
  23.     }
  24.  
  25.     function stop_scroll() {
  26.         window.clearTimeout(scrolling);
  27.     }
  28.     </script>
  29.     <body>
  30.         <div style="color:red;" onmouseover="scroll_up();" onmouseout="stop_scroll();"> scroll up </div>
  31.         <div id="scroller" style="width:100px; height:70px; overflow:hidden;">
  32.             Hi,
  33.  
  34.             I am using a menu inside a div tag.
  35.             What i want to do is to add scroll buttons
  36.             (up and down ) along side div which move
  37.             the div up and down on mouse over.
  38.             How can i achieve this?
  39.  
  40.             It would be very nice of you if you can
  41.             provide a link to the article or blog
  42.             where solution is provided to my problem.
  43.  
  44.             Thanks in advance,
  45.             Saad Alam
  46.         </div>
  47.         <div style="color:blue;" onmouseover="scroll_down();" onmouseout="stop_scroll();"> scroll down </div>
  48.     </body>
  49. </html>
  50.  
kind regards
gits's Avatar
Moderator
  
Join Date: May 2007
Location: Munich, Germany
Posts: 4,136
#12: Sep 17 '09

re: Div Scroll on MouseOver

just adapt the scroll_up() and scroll_down() methods with a parameter that allows you to retrieve the corresponding 'instance' ... you might pass the id of the node and use it in the functions ... and don't forget to update the onmouseover-calls :)

kind regards
Reply

« previous question | next question »

Similar JavaScript / Ajax / DHTML bytes

/bytes/development

/bytes/it

Forums
Visit our community forums for general discussions and latest on Bytes

Our staff and community areas have moved to bytes.com/forums/

/bytes/about

We are a network of experts and professionals in IT and software development that help one another with answers to tough questions and share insights. Get the best answers to your questions from over 226,471 network members.

dev questions:
algorithms | asp | asp.net | c/c++ | coldfusion | c# | flash | html/css | java | javascript |
mobile dev | .net | perl | php | python | ruby | software dev | vb.net | visual basic | xml
it questions:
access | apache | careers | db2 | iis | macosx | mysql | networking | oracle | postgresql | sql server | unix | windows

About Bytes | Copyright 1995-2009 BYTES. All rights Reserved