So close to menus in motion

artsapimp posted this at 17:32 — 10th February 2003.

Joined: Apr 2000

I am trying to create a function that sends the current div off the screen (left=700 for testing) and then move the next div onto the screen (left=200). I am very close but am falling short when trying to assign a value to a function (eval). Any help would be great appreciated.

&lt;script language='javascript'&gt;
var curActive = 'Sec0';
var nextActive;

function setActive(SecID){
	nextActive = SecID;
	LoopOffScreen(curActive);
}

function LoopOffScreen(SecID){
	if(parseInt(eval(SecID + '.style.left,10')) < 700){
		eval(SecID + '.style.left') = parseInt(eval(SecID + '.style.left,10')) + 1;
		setTimeout('LoopOffScreen(curActive);',1);
	} else {
		curActive = nextActive;
		LoopOnScreen(curActive);
	}
}

function LoopOnScreen(SecID){
	if(parseInt(SecID.style.left,10) < 200){
		SecID.style.left = parseInt(SecID.style.left,10) + 1;
		setTimeout('LoopOnScreen(curActive);',1);
	}
}
&lt;/script&gt;

Free Math Test
Fun Math Games

Mark Hensler posted this at 03:01 — 12th February 2003.

He has: 4,048 posts

Joined: Aug 2000

Alright. Took a little while, but did make a working script (tested on IE6). But it's not without bugs (go click happy to see what I mean).

<html>
<head>
<style type="text/css">
DIV.test {
    border: 1px solid #000000;
    height: 10px;
    text-align: center;
    width: 200;
}
</style>
&lt;script language='javascript' type="text/javascript"&gt;
var speed_x = 1;
var speed_t = 10;
var limit_left = -200;
var limit_right = 50;


function AdjustSpeed(position, direction)
{
    var left_side   = (position - limit_left);
    var right_side  = (limit_right - position);
    
    if (position == limit_right) {
        // reset speeds
        speed_x = 1;
        speed_t = 10;
    }
    else if (position == limit_left) {
        // reset speeds
        speed_x = 7;
        speed_t = 3;
    }
    else if (direction=='off' && (right_side <= 50)) {
        // [------|---]
        // accelerate <-
        
        if ((position % 2) == 1 || (position % 2) == -1) {
            speed_x = speed_x + 1;
        }
        else {
            speed_t = speed_t - 1;
            if (speed_t < 1) {
                speed_t = 1;
            }
        }
    }
    else if (direction=='on' && (right_side <= 50)) {
        // [------|---]
        // deccelerate ->
        
        if ((position % 2) == 1 || (position % 2) == -1) {
            speed_x = speed_x - 1;
            if (speed_x < 1) {
                speed_x = 1;
            }
        }
        else {
            speed_t = speed_t + 1;
        }
    }
}


function SlideOff(SecID)
{
    if (parseInt(SecID.style.left,10) > limit_left) {
        AdjustSpeed(parseInt(SecID.style.left, 10), 'off');
        
    	SecID.style.left = parseInt(SecID.style.left, 10) - speed_x;
    	tmp = SecID;
    	setTimeout("SlideOff(tmp);", speed_t);
    }
    else if (parseInt(SecID.style.left,10) < limit_left) {
    	SecID.style.left = limit_left;
    	setTimeout("SlideOff(tmp);", speed_t);
    }
    else {
        //alert("Done.\nspeed_x: " + speed_x + "\nspeed_t: " + speed_t);
    }
}

function SlideOn(SecID)
{
    if (parseInt(SecID.style.left,10) < limit_right) {
        AdjustSpeed(parseInt(SecID.style.left, 10), 'on');
        
    	SecID.style.left = parseInt(SecID.style.left, 10) + speed_x;
    	tmp = SecID;
    	setTimeout("SlideOn(tmp)", speed_t);
    }
    else if (parseInt(SecID.style.left,10) > limit_right) {
    	SecID.style.left = limit_right;
    	setTimeout("SlideOn(tmp)", speed_t);
    }
    else {
        //alert("Done.\nspeed_x: " + speed_x + "\nspeed_t: " + speed_t);
    }
}
&lt;/script&gt;
</head>
<body>

<a href="javascript:SlideOff(Sec0)">hide section 0</a><br>
<a href="javascript:SlideOn(Sec0)">show section 0</a><br>
<br>
<a href="javascript:SlideOff(Sec1)">hide section 1</a><br>
<a href="javascript:SlideOn(Sec1)">show section 1</a><br>
<br>
<a href="javascript:SlideOff(Sec2)">hide section 2</a><br>
<a href="javascript:SlideOn(Sec2)">show section 2</a><br>
<br>

<div name="Sec0" id="Sec0" class="test" style="position: absolute; left: 50; top: 200;">
This is section 0.
</div>
<div name="Sec1" id="Sec1" class="test" style="position: absolute; left: 50; top: 225;">
This is section 1.
</div>
<div name="Sec2" id="Sec2" class="test" style="position: absolute; left: 50; top: 250;">
This is section 2.
</div>

</body>
</html>

Mark Hensler
If there is no answer on Google, then there is no question.

Abhishek Reddy posted this at 03:50 — 12th February 2003.

He has: 3,348 posts

Joined: Jul 2001

What value are you passing on as SecID?

Also eval(SecID + '.style.left,10') doesn't make sense to me... what're are you trying to achieve with that?

[edit]Meh, scratch that. Mark beat me to it. :)[/edit]

artsapimp posted this at 16:19 — 12th February 2003.

They have: 330 posts

Joined: Apr 2000

Thank you (both of you). I know you said it has bugs, but that was fun to watch.

I will try to incorporate your work with mine and see if I can make it work. Thanks.

I don't have it done yet so anyone with any suggestions please post them, I'm sure I'll need the help.

Free Math Test
Fun Math Games

Mark Hensler posted this at 18:34 — 12th February 2003.

He has: 4,048 posts

Joined: Aug 2000

Well, by bugs... when I clicked rappidly, the divs would sometimes pause, or not slide to the very end.

Anyway, I hope that helped.

artsapimp posted this at 18:51 — 12th February 2003.

They have: 330 posts

Joined: Apr 2000

Yes, I got the bugs dancing a little between the divs which is what was fun to watch.

Thank you again for your help.

Mark Hensler posted this at 20:08 — 12th February 2003.

He has: 4,048 posts

Joined: Aug 2000

lol, well I'm glad you enjoyed it.

artsapimp posted this at 20:21 — 12th February 2003.

They have: 330 posts

Joined: Apr 2000

Here's where my problems are right now...

My first line of code within the javascript tag generates an error...

var curActive = Sec0;

'
Further down the page Sec0 is a div. The error states 'Sec0' is undefined

Error #2
My code says that .style is not an object. Your example has the same exact lines of code, why is it an object on yours?

Mine:
SecID.style.left = parseInt(SecID.style.left,10) + 1;

Yours:
SecID.style.left = parseInt(SecID.style.left, 10) - speed_x;

What am I missing?

Free Math Test
Fun Math Games

artsapimp posted this at 20:23 — 12th February 2003.

They have: 330 posts

Joined: Apr 2000

Sorry if this makes the page too big, but here's my entire page if that helps.

<html>
<head>
&lt;script language='javascript'&gt;
var curActive = Sec0;
var nextActive;

function setActive(SecID){
	nextActive = SecID;
	LoopOffScreen(Sec0);
}

function LoopOffScreen(SecID){
	if(parseInt(SecID.style.left,10) < 700){
		SecID.style.left = parseInt(SecID.style.left,10) + 1;
		setTimeout('LoopOffScreen(curActive);',1);
	} else {
		curActive = nextActive;
		LoopOnScreen(curActive);
	}
}

function LoopOnScreen(SecID){
	if(parseInt(SecID.style.left,10) < 200){
		SecID.style.left = parseInt(SecID.style.left,10) + 1;
		setTimeout('LoopOnScreen(curActive);',1);
	}
}
&lt;/script&gt;
</head>
<body>
<div id='Sec0' style='position: absolute; left: 200; top: 10;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td>0</td>
	</tr>
	</table></div>
<div id='Sec1' style='position: absolute; left: 0; top: 40;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td>1</td>
	</tr>
	</table></div>
<div id='Sec2' style='position: absolute; left: 0; top: 70;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td>2</td>
	</tr>
	</table></div>
<div id='Sec3' style='position: absolute; left: 0; top: 100;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td>3</td>
	</tr>
	</table></div>
<div id='Sec4' style='position: absolute; left: 0; top: 130;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td>4</td>
	</tr>
	</table></div>
<div id='SecControls' style='position: absolute; left: 5; top: 10;'><table width='50' cellpadding='0' cellspacing='0' border='1'>
	<tr>
		<td><a href='#' onClick='setActive(Sec2)'>Run</a></td>
	</tr>
	</table></div>
</body>
</html>

Free Math Test
Fun Math Games

Mark Hensler posted this at 21:02 — 12th February 2003.

He has: 4,048 posts

Joined: Aug 2000

Alright, with IE6, I only had to make 2 changes and I saw some movement...

FIND:
<body>
REPLACE:
<body onLoad="curActive=Sec0;">


FIND:
<td><a href='#' onClick='setActive(Sec2)'>Run</a></td>
REPLACE:
<td><a href='javascript:setActive(Sec2)'>Run</a></td>

Mark Hensler
If there is no answer on Google, then there is no question.

artsapimp posted this at 21:24 — 12th February 2003.

They have: 330 posts

Joined: Apr 2000

You did it! Using IE5 I only had to change the onLoad and that fixed it.

Thank you VERY much!!!!