Massive Script Trouble

Hi there everyone, I’m working on a little script here that’s working with the DOM and essentially hiding a DIV element via margin-left, and when a button that is viewable on the page is clicked the div element slides out.

I’m assuming that my script will probably seem inefficient to everyone, or maybe not I’m really not sure. All I know is that it works on FF and Safari on my Mac, and it does not work on IE and possibly not on FF in Windows.

A link to it is currently at: [url]http://www.iammitch.com/alex[/url]
*click the about link (the film strip that says about at the top)

here is the script:

[code=php]
var aboutBox =
{
init: function() {
button = document.getElementById(“navabout”); //Button to trigger animation
div = document.getElementById(“aboutBox”); //Sliding element
divWidth = parseInt(div.offsetWidth); //Width of actual sliding element
div.style.marginLeft = (-divWidth) + “px”; //In order to hide element, just make its margin negative of it’s width (hides offscreen)
button.addEventListener(“click”, aboutBox.clickListener, false); //Add listener to button to trigger animation
},

clickListener: function() {
if(parseInt(div.style.marginLeft) == (-divWidth)) { //If the DIV is completely hidden
aboutBox.slideOut(div, divWidth); //Slide it out…
} else if (parseInt(div.style.marginLeft) == 0){ // if the DIV is completely visible
aboutBox.slideIn(div, divWidth); //Slide it in…
}
},

slideOut: function(element, distance) { //move is amount of pixels to move per loop, distance is how much area we still need to cover
var move = Math.round(distance/2);
var distance = distance – move;
if(parseInt(element.style.marginLeft) < 1) { //if the margin is still less than visible, loop again
var moveTimer = setTimeout(function() { aboutBox.slideOut(element, distance) }, 1000/32);
}
element.style.marginLeft = (parseInt(element.style.marginLeft) + move) + “px”; //apply movement
},

slideIn: function(element, distance) {
var move = Math.floor((-distance)/2);
var distance = distance + move;

if(parseInt(element.style.marginLeft) > (-divWidth)) {
var moveTimer = setTimeout(function() { aboutBox.slideIn(element, distance) }, 1000/32);
}
element.style.marginLeft = (parseInt(element.style.marginLeft) + move) + “px”;
}
}
[/code]

Now as I said, this whole thing may be chock-full of memory leaks, and inefficient code and such. If it is, then please tell me where it went wrong and what I should do.

I do understand code and terminology, I’m just not so on-par with all the ins and outs of efficiency, memory leaks, and the use of functions within objects.

I did however, not copy this from anywhere, all from my head.

Thanks.

Also in #JavaScript _↴