SitePoint Sponsor

User Tag List

Results 1 to 3 of 3
  1. #1
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Scrolling OnMouseOver

    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!

    http://jsfiddle.net/s5mgX/727/

    Code:
    <!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. #2
    SitePoint Enthusiast cgCody's Avatar
    Join Date
    Jul 2012
    Location
    Arizona, US
    Posts
    29
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    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. #3
    SitePoint Zealot
    Join Date
    Oct 2006
    Posts
    155
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks very much for your help. I think I need to invest in a JQuery book after I've read through ASP.Net


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •