asked on 5/16/2011

scrolling with jquery

I found this useful jquery scrolling code, but need to modify to allow for horizontal scrolling as well. It works great, but only for vertical scrolling.

$().ready(function() {
            var $scrollingDiv = $("#scrollingDiv");

            $(window).scroll(function(){
                  $scrollingDiv
                        .stop()
                        .animate({"marginTop": ($(window).scrollTop() + 30) + "px"}, "slow" );
            });
      });

Here is the CSS
<div id="scrollingDiv" style="float: left; width: 21%; padding: 0% 2% 2% 2%; margin-left: 4%; margin-top: 30px; border: 2px solid red; background-color: #ffeaea;white-space: nowrap">

JavaScript

Last Comment

debbieau1

5/16/2011

Gurvinder Pal Singh

5/16/2011

why dont you simply try this
http://api.jquery.com/scrollLeft/

jordanrynard

5/16/2011

It's really just the same thing:

$().ready(function() {
            var $scrollingDiv = $("#scrollingDiv");
 
            $(window).scroll(function(){                  
                  $scrollingDiv
                        .stop()
                        .animate({"marginTop": ($(window).scrollTop() + 30) + "px", "marginLeft": ($(window).scrollLeft() + 30) + "px"}, "slow" );                  
            });

Open in new window

});

ASKER CERTIFIED SOLUTION

jordanrynard

5/16/2011

THIS SOLUTION IS ONLY AVAILABLE TO MEMBERS.

View this solution by signing up for a free trial.

Members can start a 7-Day free trial and enjoy unlimited access to the platform.

See Pricing Options

Start Free Trial

debbieau1

5/16/2011

ASKER

thanks but I tried that, and it doesn't work I'm afraid. The vertical works both up and down, but not the horizontal.

I have a large canvas before the div. This has to be large I'm afraid. I'm not sure if this causing the problem. Below is all the css

<div style="float: left; width: 70%">
<canvas id="myCanvas" width="3000" height="1500">
</canvas>
</div>
<div id="scrollingDiv" style="float: left; width: 21%; padding: 0% 2% 2% 2%; margin-left: 4%; margin-top: 30px; border: 2px solid red; background-color: #ffffff;white-space: nowrap;">this should scroll
</div

jordanrynard

5/16/2011

I'm not sure what the exact intended result is, as all I can see is a div floating on the screen...

But does adding "position:absolute;" to the element #scrollingDiv perform in a way you want it to (using the jquery script I provided above/previously) -- or is this undesired?
I guess what I'm unclear about is whether or not you actually want that div floating beside the canvas element or not...

ex:

<div style="float: left; width: 70%">
<canvas id="myCanvas" width="3000" height="1500">
</canvas>
</div>
<div id="scrollingDiv" style="position:absolute; width: 21%; padding: 0% 2% 2% 2%; margin-left: 4%; margin-top: 30px; border: 2px solid red; background-color: #ffffff;white-space: nowrap;">this should scroll
</div>

Open in new window

debbieau1

5/16/2011

ASKER

That's what I needed Thanks. Thought I had tried that, but obviously didn't because yours worked.