PDA

View Full Version : Div positions - Again!



SolStis
01-28-2010, 11:06 AM
var stopper;

if ((x-130)!=endpos)
{
var xpos=130;
Hi, im trying to create an effect where by a div moves gradually from one position to another, initially fast and then slowing as it progresses to its final position.

The code I have for this is as follows:


function up1() {
//get objects
objImgStrip = document.getElementById("str");
objDivStrip = document.getElementById("strip");
objImgMain = document.getElementById("theImage");
//Get End position
var totImg = (objImgStrip.height - 100)/130;
var endpos = -(totImg * 130);

var pos = objDivStrip.style.top;
var C=50;
var dx;
//Find next stopping position
stopper=pos-130;
var i=0;
while (x!=stopper)
{
//Find change in pixels to next div position
dx = (xpos/C);
//xpos - dx
xpos-=Math.round(dx);
//actual x position - dx
x-=Math.round(dx);
objDivStrip.style.top = x + "px";
i++;
}
imgID++;
objImgMain.src = "images/gallery/shower/"+imgID+".jpg";
}
else
{
return false;
}
}

The code just seems to freeze the browser when it executes so I'm not sure
whether or no this sort of animation is doable in JS.

Any help greatly appreciated

Cheers
:thumbsup:
Sol

randomuser773
01-28-2010, 06:00 PM
while (x!=stopper)
{
//Find change in pixels to next div position
dx = (xpos/C);
//xpos - dx
xpos-=Math.round(dx);
//actual x position - dx
x-=Math.round(dx);
objDivStrip.style.top = x + "px";
i++;
}
Animation has to be done at timed intervals using setTimeout or setInterval as appropriate. Setting positions in a loop has no visible effect until the loop ends.
Another potential problem is that your loop is decrementing x in such a way that it may never equal stopper, in which case the loop cannot end.

SolStis
01-28-2010, 08:48 PM
Thanks,

Ive revamped the code to make a separate function to move the div and then set a timeout to runthis function. Ive tried looping the timed running until the global var reaches a certain value but to no avail. Heres the code:


var x = 0;
var imgID = 1;
var xtot = 130;
var xrem=130;

function up1() {
//get objects
objImgStrip = document.getElementById("str");
objDivStrip = document.getElementById("strip");
objImgMain = document.getElementById("theImage");
//Get End position
var totImg = (objImgStrip.height - 100)/130;
var endpos = -(totImg * 130);
var pos = objDivStrip.style.top;
var C=1;
var dx;
var stopper;
if ((x-130)!=endpos)
{
//TRIED TO LOOP THIS UNTIL XREM=0 BUT DIDNT WORK
setTimeout(move(xrem,'up'),30);
}
else {
return false;
}
}
function move(remain,direction) {
objDivStrip = document.getElementById("strip");
var C=0;
var dx;
if (direction=='up') {
if (remain!=0) {
dx = Math.round(xrem/C);
if (dx==0){
dx=1;
}
xrem=xrem-dx;
x=x-dx;
objDivStrip.style.top = x + "px";
}
else {
xrem=130;
imgID++;
objImgMain.src = "images/gallery/shower/"+imgID+".jpg";
return 0;
}
}
else if (direction=='down') {
if (remain!=0) {
var dx = Math.round(xrem/C);
if (dx==0){
dx=1;
}
xrem+=dx;
x+=dx;
objDivStrip.style.top = x + "px";
}
else {
return 0;
}
}
}


Any ideas?

Thanks

Sol