Animation problem…

Alright, in the script below I am basically working out a little script here, that makes certain 10px by 10px div elements clickable.

Now, when you click on an element any element (they are all inline) after the one clicked will zoom away first to make space for the element that is going to open up (because it was clicked) into a 150px by 150px box.

The only problem is, is that the animation is just not working the way I had hoped…..at all.

Here’s the codes.

[code=html]
<ul id=”content”>
<li id=”home”>
<div id=”homeDiv”>Home</div>
</li>
<li id=”about”>
<div id=”aboutDiv”>About</div>
</li>
<li id=”prices”>
<div id=”priceDiv”>Prices</div>
</li>
<li id=”contact”>
<div id=”contactDiv”>Contact</div>
</li>
</ul>
[/code]

Here’s the CSS…

[code=html]
.opened {
border: 1px solid #000000;
display: inline;
width: 150px;
height: 150px;
float: left;
margin-right: 10px;
overflow: hidden;
}

.closed {
border: 1px solid #000000;
display: inline;
width: 10px;
height: 10px;
float: left;
margin-right: 10px;
overflow: hidden;
}

.moved {
border: 1px solid #000000;
display: inline;
float: left;
width: 10px;
height: 10px;
margin-right: 10px;
overflow: hidden;
}
[/code]

and the tricky guy….the JavaScript….

[CODE]
var finality =
{
init: function()
{
finality.list = document.getElementById(“content”);
finality.lis = document.getElementsByTagName(“li”);
finality.divs = document.getElementsByTagName(“div”);

finality.homeDiv = document.getElementById(“homeDiv”);
finality.aboutDiv = document.getElementById(“aboutDiv”);
finality.priceDiv = document.getElementById(“priceDiv”);
finality.contactDiv = document.getElementById(“contactDiv”);

finality.frameRate = 32;
finality.acceleration = 2;
finality.threshold = 0.5;
finality.originMargin = 10;
finality.targetMargin = 150;
finality.margin = finality.originMargin – finality.threshold;

for(var i = 0; i < finality.divs.length; i++){
finality.divs[i].setAttribute(“class”, “closed”);
finality.divs[i].divIndex = i;
finality.divs[i].addEventListener(‘click’, finality.openDiv, false);
}
},

openDiv: function(event)
{
var theDiv = this;

for(var i = 0; i < finality.divs.length; i++){
if(theDiv != finality.divs[i]) {
finality.divs[i].setAttribute(“class”, “closed”);
}
}

var divIndex = theDiv.divIndex;
var divArray = finality.divs;

if(divIndex < divArray.length – 1) {
for(var i = divArray.length – 1; i > divIndex; i–){
finality.moveDivIndex = i;
finality.moveDiv(i);
divArray[i].setAttribute(“style”, “margin-left: 0px;”);
divArray[i].setAttribute(“class”, “moved”);
}
}

theDiv.setAttribute(“class”, “opened”);
theDiv.addEventListener(‘click’, finality.closeDiv, false);

},

closeDiv: function(event)
{
var theDiv = this;

theDiv.setAttribute(“class”, “closed”);
theDiv.removeEventListener(‘click’, finality.closeDiv, false);
},

moveDiv: function()
{
var theIndex = finality.moveDivIndex;
var movingDiv = finality.divs[theIndex];

setTimeout(function() {
finality.margin += (finality.margin – finality.originMargin) / finality.acceleration;
if(finality.margin <= finality.targetMargin) {
movingDiv.style.marginLeft = Math.round(finality.margin) + “px”;
}
}, 1000 / finality.frameRate);
}
};
[/CODE]

I know it’s all a little lengthy, but I would appreciate some help.

I’m pretty sure I went about a few things up there in an odd way, feel free to ask question about anything, I’m sure there’s plenty of unneeded codes that I threw in there during the initial coding.

Thank you for your responses!

-Viajero

Also in #JavaScript _↴