debbieau1
asked on
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">
$().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">
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" );
});
});
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
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
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:
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>
ASKER
That's what I needed Thanks. Thought I had tried that, but obviously didn't because yours worked.
http://api.jquery.com/scrollLeft/