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/u.../preview/mens/, making whole div smooth moving left and right.

SO I start with the following code:

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:

Code:

<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!

Code:

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

Code:

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

Code:

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

It should be:

Code:

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.

Thread: smooth moving div

Thread Tools

Search Thread

smooth moving div

to be more specific

I think I got 1step working!

Great!

Bookmarks

Bookmarks

Posting Permissions