MouseOver Scrolling : The Official Microsoft ASP.NET Forums

<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>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

cool_cupid_j...

Participant

1741 Points

354 Posts

Re: MouseOver Scrolling

Mar 15, 2011 09:04 AM|LINK

Hi TRy  this



<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> 

<div id="scroll">
    <a class="up" href="#"><img src="images/up.gif" alt="" border="0" /></a>
    <a class="down" href="#"><img src="images/dn.gif" alt="" border="0" /></a>
</div>

<script type="text/javascript">

function init_dw_Scroll() {
    var wndo = new dw_scrollObj('container', 'layer');
    wndo.setUpScrollControls('scroll');
}

</script>

Regards,
Robert

Edited by cool_cupid_jny on Mar 15, 2011 09:15 AM

Reply

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.

Edited by wrathyimp on Mar 15, 2011 09:52 AM

Reply

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.

Reply

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..

Regards,
Robert

Reply

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.

Reply

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

Regards,
Robert

Reply

asteranup

All-Star

30184 Points

4906 Posts

Re: MouseOver Scrolling

Mar 15, 2011 11:03 AM|LINK

OK,

wrathyimp

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).

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>

Thanks & Regards
Anup Das Gupta
Mark as Answer if you feel so. Visit My Blog

Reply

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!!!

MouseOver Scrolling RSS

21 replies

wrathyimp