OO question - settimeout object method?

[rravenn]

Here's the page.
In short, I wrote primitive panel sliding script, now i want to incapsulate it into an object. Of course it requires a lot of styling and bugfixes, it's just what I threw in quickly.

http://raven.is.rathercute.com/js/aaa.htm

the thing that concerns me is the way I call setTimeout.

                setTimeout('sl.slide('+i+')',30);

sl is a global variable storing the object, and of course, i want to get rid of it cause object is pointless with this kind of code.

even if I will get rid of the counter and use heights themselves to found the stage of the slide, it's all still blurred.
How do i set timeout for the object method?
If I try using 'slide' or 'this.slide' (in quotes) it doesn't work,
if i try anything without quotation marks and with () browsers just call function recursively to get the string.
if i add function name (this.slide) without ()-s, hoping that it will act as function pointer, IE says it misses "(" and Firefox just does nothing.

I see at least two possible workarounds, pass variable name to the constructor (definitely not good) and passing all the required stuff to slide as params, settimeouting it as 'Slider.prototype.slide('+this.p1+.... (not good).

Are there any right ways?

 

[jemminger]

you could have each Slider store a reference to itself in the window object:

function Slider(ip1,ip2)
{[b]
		self.id = self.id || 0;
		this.id = self.id++;
		window["slider-" + this.id] = this;
[/b]
		this.p1 = ip1;
		this.p2 = ip2;
		if (ip1 != null)
		{
				this.h = ip1.offsetHeight + ip2.offsetHeight;
		}
		else
		{
				this.h = 0;
		}
}



Slider.prototype.slide = function(i)
{
		h1 = this.h - Math.round(this.h*i/20);
		h2 = this.h - h1;
		this.p1.style.height = h1+'px';
		this.p2.style.height = h2+'px';
		i++;
		if (i <= 20)
		{
				setTimeout([b]'window["slider-'+this.id+'"][/b].slide('+i+')',30);
		}
		else
		{
				this.p2.className = 'activePanel';
		}
}
Slider.prototype.startSlide = function()
{
		this.p1.style.overflow = 'hidden';
		setTimeout([b]'window["slider-'+this.id+'"][/b].slide(1)',30);
}

function slidepanel()
{
		a = new Slider(document.getElementById('panel1'),document.getElementById('panel2'));
		a.startSlide();
}        

function slidepanel2()
{
		b = new Slider(document.getElementById('panel2'),document.getElementById('panel1'));
		b.startSlide();
}

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big

 

[rravenn]

bot much better than storing the id in the object
I actua;lly found a solution just now, it's osmething like this

pointer = this;
setTimeout(function () { pointer.slide(i); },30);

Thanks anyway.

 

[BillyRayPreachersSon]

rraven, just so you're aware... your solution is effectively identail to Jeff's solution. His is creating a global variable called "SliderX", where X is the slider ID, while yours is creating a global variable called "pointer".

Hope this helps,
Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[rravenn]

Nah, why?
This variable is declared inside the method, it's not global.
With it, object is self-contained and it doesn't need to know its ID

 

[BillyRayPreachersSon]

Unless you are specifying the "var" keyword before "pointer = this" (which you do not appear to be from the code posted above), then "pointer" WILL be a global variable.

Dan



[tt]Dan's Page [blue]@[/blue] Code Couch

http://www.codecouch.com/dan/

[/tt]

 

[rravenn]

wow, true, I didn't take that into account. Thanks.
Well, even if it IS global, object is self contained anyway.

 

[jemminger]

i'm not 100% happy with my solution anyway - rravenn's is a bit more elegant.

-jeff

http://www.jeffemminger.com

try { succeed(); } catch(E) { tryAgain(); } finally { rtfm(); }
i like your sleeves...they're real big