Log in

View Full Version : smooth moving div


xxlfm
05-12-2007, 06:00 PM
Hi, this is my 1st post.

I want some effect like in http://www.gucci.com/us/us-english/us/fall-winter-07/preview/mens/, making whole div smooth moving left and right.

SO I start with the following code:

<SCRIPT>
function move (id, x, y) {
if (ns4) obj = document.layers[id];
if (ie4) obj = document.all[id].style;
obj.xpos = parseInt(obj.left) + parseInt(x);
obj.ypos = parseInt(obj.top) + parseInt(y);
obj.left = obj.xpos;
obj.top = obj.ypos;
}
</SCRIPT>
<a href="javascript:move('divMove',-20,0)">Left</a> |
<a href="javascript:move('divMove',20,0)">Right</a> |
<a href="javascript:move('divMove',0,-20)">Up</a> |
<a href="javascript:move('divMove',0,20)">Down</a>
<DIV ID="divMove" STYLE="
position:relative;
left:25px; top:10px;
width:30px; height:30px;
clip:rect(0px 30px 30px 0px);
background-color:red; layer-background-color:red;">
</DIV>


The div can move left and right suddenly, so I check some code about making moving smooth, so here I have:

<SCRIPT>
function slidex (id, x) {
step = 5;
if (ns4) obj = document.layers[id];
if (ie4) obj = document.all[id].style;
obj.xpos = parseInt(obj.left);
if (Math.abs(obj.xpos - x) > step) {
if (x < 0) step = - step;
obj.xpos += step;
obj.left = obj.xpos;
setTimeout("slidex('" + id + "'," + x + ")", 30);
}
}
</SCRIPT>
<a href="javascript:slidex('divSlide',-200)">Go Left</a> |
<a href="javascript:slidex('divSlide',100)">Go Right</a>
<DIV ID="divSlide" STYLE="
position:relative;
left:25px; top:10px;
width:30px; height:30px;
clip:rect(0px 30px 30px 0px);
background-color:red; layer-background-color:red;">
</DIV>


but it won't continusly move, I guess the condition is wrong and I have to somehow keep tracking the changing style.left. Ajax?

I spent quite few hours and am pulling my hair, and hope someone will enlighten me on this issue.

Thanks in advance!
xxlfm
05-13-2007, 01:45 PM
to be more specific, I have a page at http://stylefashions.ca/prototype/runway.php

by clicking go left and go right links, the div moves, but how can I make it move smooth?
xxlfm
05-13-2007, 03:54 PM
I think I got 1st step working!



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html><head><title>Smooth Move</title>
<script type="text/javascript">
<!--
var the_timeout;
function move()
{
var the_style = getStyleObject("myDiv");
if (the_style) {

var start = parseInt(the_style.left);
var end = start + 200;
moveDiv(end, 200);
}

}

function moveDiv(end, x)
{
// get the stylesheet
//
var the_style = getStyleObject("myDiv");
if (the_style)
{
// get the current coordinate and add 5
//
var current_left = parseInt(the_style.left);
var new_left = current_left + 5;

// set the left property of the DIV, add px at the
// end unless this is NN4
//
if (document.layers)
{
the_style.left = new_left;
}
else
{
the_style.left = new_left + "px";
}

// if we haven't gone to far, call moveDiv() again in a bit
//
if (new_left < end)
{
//alert (the_style.left + "sd" + new_left);
the_timeout = setTimeout('moveDiv(' + end + ',' + x + ');',10);
}
}
}


function getStyleObject(objectId) {
// cross-browser function to get an object's style object given its
if(document.getElementById && document.getElementById(objectId)) {
// W3C DOM
return document.getElementById(objectId).style;
} else if (document.all && document.all(objectId)) {
// MSIE 4 DOM
return document.all(objectId).style;
} else if (document.layers && document.layers[objectId]) {
// NN 4 DOM.. note: this won't find nested layers
return document.layers[objectId];
} else {
return false;
}
} // getStyleObject


// -->
</script>
</head>
<body>
<div id = "myDiv" style="position:absolute; top:150px; left:100px;"><img src="runway/7.gif">
</div>
<br>
<a href="#" onClick="the_timeout=setTimeout('move();',100); return false;">start moving!</a> <br>
<a href="#" onClick="clearTimeout(the_timeout); return false;">stop wandering</a>
</body>
</html>


:) please see http://stylefashions.ca/prototype/moving.htm
jscheuer1
05-13-2007, 04:15 PM
Give this a shot:


<script type="text/javascript">
/* SmoothSlide Element by Id - as first seen in:
* http//www.dynamicdrive.com/forums &#169; by
* John Davenport Scheuer - username:jscheuer1
* This notice must remain for leagal use */
function slidex (id, x){
slidex.obj=document.layers? document.layers[id] : document.all? document.all[id].style : document.getElementById? document.getElementById(id).style : null;
if(slidex.obj&&!slidex.going){
slidex.x=x<0? -1 : 1;
slidex.xa=x*slidex.x;
slidex.going=1;
slidex.doit();
}
}
slidex.px=document.layers? '' : 'px';
slidex.doit=function() {
slidex.obj.left = parseInt(slidex.obj.left) + slidex.x*slidex.speed + slidex.px;
if(slidex.xa>0){
slidex.xa-=slidex.speed;
setTimeout("slidex.doit()", slidex.xa<5*slidex.speed? 30 : slidex.xa<10*slidex.speed? 20 : 15);
}
else
slidex.going=0;
}
//Configure speed here (1-5). Note: the x in calls for slidex(id, x) should be evenly divisible by the speed value:
slidex.speed=4;

</script>
xxlfm
05-13-2007, 04:48 PM
Thanks John!

That's very cool and concise, working great!

I might come back with some other questions!

Thanks again! This is a great forum!
jscheuer1
05-13-2007, 04:57 PM
Ooops, I made a typo (now fixed in the above) when I updated the above to configure the speed. If you still have:


slidex.obj.left = parseInt(slidex.obj.left) + slidex.x*4 + slidex.px;

It should be:


slidex.obj.left = parseInt(slidex.obj.left) + slidex.x*slidex.speed + slidex.px;
xxlfm
05-13-2007, 05:14 PM
Thanks for that, I got it!

Your code is so great! using object and if else inline...

I have 2 more things to worry:

1. disable Go Rright when the whole div left is already at leftmost.
2. when I move right overflow, the scrol bar will let me move to right, but when I move left, the scroll bar is at the begining of left, is it possible to make it move as well so I can darg the scroll bar to see left?

Please see at http://stylefashions.ca/prototype/seamless.php, still some work to do.
xxlfm
05-14-2007, 07:09 PM
what I have now...

http://stylefashions.ca/prototype/seamless.php, still want to enable the window scroll bar to change accordingly.