artsapimp — Wed, 12 Feb 2003 21:24:24 +0000

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

Thank you VERY much!!!!

Mark Hensler — Wed, 12 Feb 2003 21:02:51 +0000

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>

artsapimp — Wed, 12 Feb 2003 20:23:10 +0000

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>

artsapimp — Wed, 12 Feb 2003 20:21:50 +0000

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?

Mark Hensler — Wed, 12 Feb 2003 20:08:53 +0000

lol, well I'm glad you enjoyed it.

artsapimp — Wed, 12 Feb 2003 18:51:57 +0000

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 — Wed, 12 Feb 2003 18:34:39 +0000

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 — Wed, 12 Feb 2003 16:19:19 +0000

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.

Abhishek Reddy — Wed, 12 Feb 2003 03:50:31 +0000

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]

Mark Hensler — Wed, 12 Feb 2003 03:01:03 +0000

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>