scrolling with jquery

debbieau1
debbieau1 used Ask the Experts™
on
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">
Comment
Watch Question

Do more with

Expert Office
EXPERT OFFICE® is a registered trademark of EXPERTS EXCHANGE®
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

     });
Whoops, that closing tag was outside the code, try this:

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

Success in ‘20 With a Profitable Pricing Strategy

Do you wonder if your IT business is truly profitable or if you should raise your prices? Learn how to calculate your overhead burden using our free interactive tool and use it to determine the right price for your IT services. Start calculating Now!

Author

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

Author

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

Do more with

Expert Office
Submit tech questions to Ask the Experts™ at any time to receive solutions, advice, and new ideas from leading industry professionals.

Start 7-Day Free Trial