...

View Full Version : Gradually Scrolling in Div



Kwonnie
07-11-2011, 09:06 PM
This is my first javascript code ever and I need a bit of help. :[
Also, forgive the goofy styling for the nested divs; I couldn't figure out how to get them to align horizontally without wrapping =\.

Essentially, I want the links to gradually scroll the containing div to the specified element's position. I wrote this in a roundabout manner for the sake of learning but I'll clean it up once I can get the function to work which... simply will not. Help?


<html>
<head><title></title>

<script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">

var i = scroll_clipper.pageXOffset;
function moveToGreen() {
while (i<slide2.offsetLeft) {
i++;
scroll_clipper.pageXOffset++;
setTimeout('moveToGreen()',100);
}
}

</script>

</head>
<body>

<a href="javascript:moveToGreen()">Green</a>
<div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;"

id="slide2"></div>

</div>

</body>
</html>

Kwonnie
07-11-2011, 10:44 PM
Played with the code some more and got it to go from one frame to another, but it won't go gradually... anybody?


<html>
<head><title></title>

<script type="text/javascript" src="http://kwonnie.comxa.com/js/jquery-1.2.6.min.js"></script>

<script type="text/javascript">
var i = 0;
function moveToGreen() {
while (i<slide2.offsetLeft) {
scroll_clipper.scrollLeft+=1;
i++;
setTimeout('moveToGreen()',100);
}
}

function moveToRed() {
while (i>slide1.offsetLeft) {
scroll_clipper.scrollLeft-=1;
i--;
setTimeout('moveToRed()',100);
}
}

</script>

</head>
<body>

<a href="javascript:moveToRed()">Red</a><a href="javascript:moveToGreen()">Green</a>
<div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" id="slide2"></div>

</div>

</body>
</html>

Old Pedant
07-12-2011, 01:09 AM
More than a little curious as to (a) why you are including jQuery library but then not using jQuery and (b) what browser this works with. I would think that only MSIE would support using element id's as if they were page scope global variables.

Kwonnie
07-12-2011, 01:21 AM
I took out a lot of extra code for the sake of keeping it to the essentials in my post and I guess I forgot to remove that. And changing the while loops to if statements seems to work partially. With that said, I've only tested it in Firefox so far.

vwphillips
07-12-2011, 12:09 PM
consider


<html>
<head><title></title>


<script type="text/javascript">

function move(id) {
clearTimeout(move.to);
var obj=document.getElementById(id);
var slide=document.getElementById('scroll_clipper');
var lft=parseInt(slide.style.left)
if (lft!=-obj.offsetLeft) {
slide.style.left=lft+(lft>-obj.offsetLeft?-1:1)+'px';
move.to=setTimeout(function(){ move(id); },20);
}
}

</script>

</head>
<body>

<a href="javascript:move('slide1');">Red</a><a href="javascript:move('slide2');">Green</a>
<div style="position:relative;width: 600px; height: 250px;overflow:hidden;" >
<div id="scroll_clipper" style="position:absolute;left:0px;top:0px;width:10000px;" >
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: 0px;" id="slide2"></div>
</div>
</div>

</body>
</html>

Old Pedant
07-12-2011, 09:19 PM
Or, making minimum changes to your original code:


<html>
<head><title></title>

<script type="text/javascript">
var i = 0;
function moveToGreen() {
if (i < document.getElementById("slide2").offsetLeft) {
document.getElementById("scroll_clipper").scrollLeft+=1;
i++;
var t = setTimeout(moveToGreen,10);
}
}

function moveToRed() {
if (i > document.getElementById("slide1").offsetLeft) {
document.getElementById("scroll_clipper").scrollLeft-=1;
i--;
var t = setTimeout(moveToRed,10);
}
}

</script>

</head>
<body>

<a href="javascript:moveToRed()">Red</a><a href="javascript:moveToGreen()">Green</a>
<div style="width: 600px; height: 250px; overflow-y: hidden; overflow-x: hidden;" id="scroll_clipper">
<div style="width: 600px; height: 250px; background: red; float: left;" id="slide1"></div>
<div style="width: 600px; height: 250px; background: green; float: left; position: relative; top: -250px; left: 600px;" id="slide2"></div>
</div>

</body>
</html>

Points to make:
(1) You can't refer to objects by their bare id's. Except in MSIE. *SOMETIMES* it works in FF, but you will get a warning message if you use Firebug, for example, and often it won't work. Learn to use document.getElementById( ).

(2) You were using a WHILE loop. Meaning that you were running through all the movement and EACH TIME through the loop you were setting off another timeout to do the whole sequence 100 ms later. You should *NOT* combine WHILE loops with setTimeout, as a general rule. I simply changed your WHILE to IF.



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum