<div id="container"> <div id="layer"> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The code supports the capability to hide or swap images when the end is reached.</p>
<p>Content repeated for your scrolling pleasure :)</p> <p>This example demonstrates vertical scrolling using mouseover links. Scroll speed is adjustable.</p> <p>Mouse down on the arrows to see the speed double. Original speed resumes on mouseup.</p> <p>The code supports the capability to hide or swap images when the end is reached.</p> </div> </div>
wrathyimp
Member
62 Points
166 Posts
MouseOver Scrolling
Mar 15, 2011 05:56 AM|LINK
Hi,
I am looking for a script to have a mouserover vertical scrolling for my divs to scroll down and up, similar to dyn-web.com , but its licensed.
So any one can support me with alternate.
Thanks
asteranup
All-Star
30184 Points
4906 Posts
Re: MouseOver Scrolling
Mar 15, 2011 08:26 AM|LINK
Hi,
Try this code-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <script type="text/javascript"> var div, scrollTop, scrollID, direction; function scroll() { if (direction > 150) { if (scrollTop != 0) scrollTop--; } else { if (scrollTop != (div.scrollHeight - 300)) scrollTop++; } div.scrollTop = scrollTop; scrollID = setTimeout("scroll()", 10); } window.onload = function() { div = document.getElementById("containerDiv"); scrollTop = div.scrollTop; }; </script> </head> <body> <br /> <br /> <div style="border: solid 1px red; float: left"> <div id="containerDiv" style="height: 300px; width: 200px; overflow: auto;" onmousemove="direction=event.clientY - div.offsetTop;" onmouseout="clearTimeout(scrollID)" onmouseover="direction=event.clientY - div.offsetTop; scroll()"> dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content </div> </div> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
cool_cupid_j...
Participant
1741 Points
354 Posts
Re: MouseOver Scrolling
Mar 15, 2011 09:04 AM|LINK
Robert
wrathyimp
Member
62 Points
166 Posts
Re: MouseOver Scrolling
Mar 15, 2011 09:44 AM|LINK
Thanks man,
This is great, but i need a mouseover on the up - down arrows, not the mouserover on the conent itself.
Any way to limit it to a up-arrow & Down arrow (any gifs).
Also its too automatic, as no control on pause and scrollbar select for manual scrolling (like holding the scrollbar, and moving up or down)
But great code.
wrathyimp
Member
62 Points
166 Posts
Re: MouseOver Scrolling
Mar 15, 2011 09:58 AM|LINK
Cool_cupid,
Didnt work, seems something missing...
class for container, and size of the div, as this code is expanding like normal page.
cool_cupid_j...
Participant
1741 Points
354 Posts
Re: MouseOver Scrolling
Mar 15, 2011 10:26 AM|LINK
HI,
http://dyn-web.com/code/scroll/demos.php
I refered this link
and downloaded by clicking download file in
More Information
and it is working for me u to try the same..
there are
dw_event.js
dw_scroll.js
dw_scrollbar.js
scroll_controls.js
html_att_ev.js
script file which is required to Work..
hope it was useful..
try downloading it..
Robert
wrathyimp
Member
62 Points
166 Posts
Re: MouseOver Scrolling
Mar 15, 2011 10:29 AM|LINK
Cool_cupid,
I already tried it, and also posted it, in my request, it DEMO (need license).
Was looking for alternative to it.
Thanks any ways.
cool_cupid_j...
Participant
1741 Points
354 Posts
Re: MouseOver Scrolling
Mar 15, 2011 10:35 AM|LINK
U can use Marquee
http://www.javascriptkit.com/howto/cscroll2.shtml
try this link
Robert
asteranup
All-Star
30184 Points
4906 Posts
Re: MouseOver Scrolling
Mar 15, 2011 11:03 AM|LINK
OK,
Check this out-
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Untitled Page</title> <script type="text/javascript"> var div, scrollTop, scrollID, direction, imgDirection, scrollID1; function scroll() { if (direction > 150) { if (scrollTop != 0) scrollTop--; } else { if (scrollTop != (div.scrollHeight - 300)) scrollTop++; } div.scrollTop = scrollTop; scrollID = setTimeout("scroll()", 10); } window.onload = function() { div = document.getElementById("containerDiv"); div1 = document.getElementById("Div1"); scrollTop = div.scrollTop; }; function scrollOnImage() { if (imgDirection ==1 ) { if (scrollTop != 0) scrollTop--; } else if (imgDirection == 2) { if (scrollTop != (div1.scrollHeight - 300)) scrollTop++; } div1.scrollTop = scrollTop; scrollID1 = setTimeout("scrollOnImage()", 10); } </script> </head> <body> <br /> <br /> <div style="border: solid 1px red; float: left"> <div id="containerDiv" style="height: 300px; width: 200px; overflow: auto;" onmousemove="direction=event.clientY - div.offsetTop;" onmouseout="clearTimeout(scrollID)" onmouseover="direction=event.clientY - div.offsetTop; scroll()"> dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content </div> <br /> </div> <div style="border: solid 1px red; float: left"> <div id="Div1" style="height: 300px; width: 200px; overflow: auto;" > dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content dummy content </div> </div> <div style="border: solid 1px red; float: left"> <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/upDownArrow.png" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=1; scrollOnImage()" /><br /><br /> <img src="http://www.easyvoyage.co.uk/base/imgs/default/esv/meh/downUpArrow.png" onmouseout="clearTimeout(scrollID1)" onmouseover="imgDirection=2; scrollOnImage()" /> </div> </body> </html>Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog
wrathyimp
Member
62 Points
166 Posts
Re: MouseOver Scrolling
Mar 15, 2011 11:26 AM|LINK
Anup,
The second div is what i needed, but i cant get teh down-arrow at the bottom of the div, after i add height similar to the second content div (Div1).
If I try to remove the first div(containerDiv), the whole scroll doesnt works.
Sorry, just a basic html developer here!!!