Scrolling OnMouseOver

JavaScript
1

Hi there,

Okay so I’m just implementing a scrolling effect locally which will scroll down incrementaly when the button is moused-over (will be changing to onclick to make it compatible with mobile devices) but after copying across the code from the following link, it doesn’t want to play ball. I’m guessing I’m missing a declaration to include a JQuery library? I can’t see anything in the console which helps either…strange one!

<!DOCTYPE html>
<html>
<head>
<script type="text/javascript" src="../jquery-1.6.1.min.js"></script>
<script type="text/javascript">
var step = 25;
var scrolling = false;

// Wire up events for the 'scrollUp' link:
$("#scrollUp").bind("click", function(event) {
    event.preventDefault();
    // Animates the scrollTop property by the specified
    // step.
    $("#content").animate({
        scrollTop: "-=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("up");
}).bind("mouseout", function(event) {
    scrolling = false;
});


$("#scrollDown").bind("click", function(event) {
    event.preventDefault();
    $("#content").animate({
        scrollTop: "+=" + step + "px"
    });
}).bind("mouseover", function(event) {
    scrolling = true;
    scrollContent("down");
}).bind("mouseout", function(event) {
    scrolling = false;
});

function scrollContent(direction) {
    var amount = (direction === "up" ? "-=1px" : "+=1px");
    $("#content").animate({
        scrollTop: amount
    }, 1, function() {
        if (scrolling) {
            scrollContent(direction);
        }
    });
}
</script>
<style type="text/css">
#content {
    overflow:hidden;
    height: 70px; /*could be whatever*/
}
</style>
</head>
<body>
<a id="scrollUp" href="#">up</a>
<a id="scrollDown" href="#">down</a>

<div id="wrapper">
    <div id="content">

        <ul>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
            <li>some content here</li>
        </ul>

    </div>
</div>
</body>
</html>

Any ideas?

2

The script in the fiddle is being run onLoad, so you need to add that to your JS:
$(window).load(function(){
ALL YOUR JS HERE
});

3

Thanks very much for your help. I think I need to invest in a JQuery book after I’ve read through ASP.Net :lol: