[Atspulgs]

Hi,

I'm trying to write a script to animate the expanding of my div onclick.
I've managed to do this with simply doing it with simple recursive timeouts.
However, the page is dynamically generated basing on database results so the simplest way i thought of doing this was by making an object in js. All would be good except for inability to get a recursion working within the objects reach and with setTimeout();

Any help would be appreciated since im new to js and DOM.

The Div family.

<div id="outerPost">
					<div id="postTitle" onclick="(new slider(this)).slide();">
						<h2 class="title"><?php echo $row['title']; ?></h2>
						<h2 class="feed"><?php echo $row['name']; ?></h2>
					</div>
					<div id="content" style="display: none;">
						<h2><?php echo formatDate($row['last_update']).$row['username']; ?></h2>
						<p><?php echo $row['content']; ?></p>
					</div>
				</div>

The Script itself.

function slider(element)
{
	//Constants
	this.SPEED = 5;
	this.DISP_NONE = "none";
	this.DISP_BLOCK = "block";
	//Parameters
	this.colapsable = element.parentNode.childNodes[3];
	this.display = this.colapsable.style.display;
	this.width = this.colapsable.style.width;
	this.height = this.colapsable.style.height;
	element.parentNode.childNodes[3].style.display = this.DISP_BLOCK;
	this.chSize = this.colapsable.clientHeight;
	this.cwSize = this.colapsable.clientWidth;
	element.parentNode.childNodes[3].style.display = this.DISP_NONE;
	this.i = 1;
	this.j = 1;
	this.wInterval = (this.cwSize-1)/20; 
	this.hInterval = (this.chSize-1)/20;
	//Methods
	this.slide = slide;
	this.down = down;
	this.up = up;
	//Width manipulation was dropped.
}
function slide()
{
	if(this.display == this.DISP_NONE)
	{
		
		this.colapsable.style.display = "block";
		this.colapsable.style.height = this.i+"px";
		this.down();
		document.getElementById("test").innerHTML = "Element id = "+this.colapsable.parentNode.childNodes[1].childNodes[1].innerHTML+"</br>Display = "+this.display
													+"<br/>PreferedWidth = "+this.cwSize+"<br/>PreferedHeight = "+this.chSize+"<br/>Width Interval = "
													+this.wInterval+"<br/>Height Interval = "+this.hInterval+"<br/>Width = "+this.width
													+"<br/>Height = "+this.colapsable.style.height;
	}
	else if(this.display == this.DISP_BLOCK)
	{
		document.getElementById("test").innerHTML = "Element id = "+this.colapsable.parentNode.childNodes[1].childNodes[1].innerHTML+"</br>Display = "+this.display
													+"<br/>PreferedWidth = "+this.cwSize+"<br/>PreferedHeight = "+this.chSize+"<br/>Width Interval = "
													+this.wInterval+"<br/>Height Interval = "+this.hInterval+"<br/>Width = "+this.width
													+"<br/>Height = "+this.colapsable.style.height;
		this.colapsable.style.display = "none";
	}
}
//assumes that the height is already set to desired startign height.
function down()
{
	this.colapsable.style.height = (this.i+=this.hInterval)+"px";
	if(this.chSize > this.i+this.hInterval)
		var t = setTimeout('this.down()',this.SPEED);
}
function up()
{

}

Heres the error description i was given by google chrome extension for js.

TypeError: Cannot read property 'style' of undefined [http://localhost/page/scripts/display.js:51]

Note that many parameters are there just for the troubleshooting purposes.

Any extra code you need from me for you to be able to help, ask.

Edited: I had forgotten that i was still trying to find a work around to setTimeout so had deleted it before i copied the code, ive added the bit in to whatever i thought should work but didnt.
Added an error description.

This post has been edited by Atspulgs: 04 July 2011 - 02:57 AM

[Atspulgs]

never mind lads. Took me some more time but eventually i managed to solve the issue.
If anyone having similar issues, do what i did: pick up a javascript book and start learning, its not just some pesky scripting language lol

Heres the code that worked for me.

var array = new Array();
var lastOpen = -1;
function cor(el,i)
{
	if(!array[i])
		array[i] = new slider(el);
	if(lastOpen != -1 && lastOpen != i && array[lastOpen].used == 0 && array[lastOpen].colapsable.style.display == "block")
		array[lastOpen].slide();
	if(array[i].used == 0)
		array[i].slide();
	if(array[i].colapsable.style.display == "block")
		lastOpen = i;
	else if(array[i].colapsable.style.display == "none")
		lastOpen = -1;
}

function slider(element)
{
	this.used = 0;
	//Constants
	this.SPEED = 5;
	this.DISP_NONE = "none";
	this.DISP_BLOCK = "block";
	//Parameters
	this.colapsable = element.parentNode.childNodes[3];
	this.display = this.colapsable.style.display;
	element.parentNode.childNodes[3].style.display = this.DISP_BLOCK;
	this.chSize = this.colapsable.clientHeight;
	element.parentNode.childNodes[3].style.display = this.DISP_NONE;
	this.i = 1;
	this.hInterval = (this.chSize-1)/20;
	//Methods
	this.slide = slide;
	this.down = down;
	this.up = up;
	//Width manipulation was dropped.
}
function slide()
{
	this.used = 1;
	if(this.display == this.DISP_NONE)
	{
		
		this.colapsable.style.display = "block";
		this.display = this.DISP_BLOCK;
		this.colapsable.style.height = this.i+"px";
		this.down(this);
	}
	else if(this.display == this.DISP_BLOCK)
		this.up(this);
}
//assumes that the height is already set to desired startign height.
function down(slider)
{
	slider.colapsable.style.height = (slider.i+=slider.hInterval)+"px";
	if(slider.chSize > slider.i+slider.hInterval)
		var t = setTimeout(function(){down(slider);},slider.SPEED);
	else slider.used = 0;
}
function up(slider)
{
	slider.colapsable.style.height = (slider.i-=slider.hInterval)+"px";
	if(1 < slider.i+slider.hInterval)
		var t = setTimeout(function(){up(slider);},slider.SPEED);
	else if(1 >= slider.i+slider.hInterval)
	{
		slider.colapsable.style.height = "1px";
		slider.i = 1;
		slider.display = slider.DISP_NONE;
		slider.colapsable.style.display = "none";
		slider.used = 0;
	}
}

And this is how you use it

<div id="postTitle" onclick="cor(this,i)">

Anyone using this, please note that this script assumes that theres another div parallel to the trigger. Modify this.

this.colapsable = element.parentNode.childNodes[3];

If this script doesnt satisfy your need, look into jquerry
Also size changes for the sides could be done rather easaly implementing couple of extra methods/functions in a similar manner.

In addition to have text fade in and out (all of it not line by line)
You modify code to look like this

function slider(element)
{
	this.used = 0;
	//Constants
	this.SPEED = 5;
	this.DISP_NONE = "none";
	this.DISP_BLOCK = "block";
	//Parameters
	this.colapsable = element.parentNode.childNodes[3];
	this.display = this.colapsable.style.display;
	element.parentNode.childNodes[3].style.display = this.DISP_BLOCK;
	this.chSize = this.colapsable.clientHeight;
	element.parentNode.childNodes[3].style.display = this.DISP_NONE;
	this.i = 1;
	this.cIn = 2;
	this.cCount = 255;
	this.hInterval = (this.chSize-1)/20;
	//Methods
	this.slide = slide;
	this.down = down;
	this.up = up;
	//Width manipulation was dropped.
}
function slide()
{
	this.used = 1;
	if(this.display == this.DISP_NONE)
	{
		
		this.colapsable.style.display = "block";
		this.display = this.DISP_BLOCK;
		this.colapsable.style.height = this.i+"px";
		this.cIn = 2;
		this.cCount = 255;
		this.colapsable.style.color = "rgb("+this.cCount+","+this.cCount+","+this.cCount+")";
		this.down(this);
	}
	else if(this.display == this.DISP_BLOCK)
	{
		this.cIn = 2;
		this.cCount = 15;
		this.up(this);
	}
}
//assumes that the height is already set to desired startign height.
function down(slider)
{
	slider.colapsable.style.height = (slider.i+=slider.hInterval)+"px";
	slider.colapsable.style.color = "rgb("+(slider.cCount-=slider.cIn)+","+(slider.cCount-=slider.cIn)+","+(slider.cCount-=slider.cIn)+")";
	slider.cIn+=0.5;
	if(slider.chSize > slider.i+slider.hInterval)
		var t = setTimeout(function(){down(slider);},slider.SPEED);
	else slider.used = 0;
}
function up(slider)
{
	slider.colapsable.style.height = (slider.i-=slider.hInterval)+"px";
	slider.colapsable.style.color = "rgb("+(slider.cCount+=slider.cIn)+","+(slider.cCount+=slider.cIn)+","+(slider.cCount+=slider.cIn)+")";
	slider.cIn+=0.5;
	if(1 < slider.i+slider.hInterval)
		var t = setTimeout(function(){up(slider);},slider.SPEED);
	else if(1 >= slider.i+slider.hInterval)
	{
		slider.colapsable.style.height = "1px";
		slider.i = 1;
		slider.display = slider.DISP_NONE;
		slider.colapsable.style.display = "none";
		slider.used = 0;
	}
}

This post has been edited by Atspulgs: 05 July 2011 - 03:41 AM