PDA

View Full Version : Sliding Menus fix



howegraphics
01-22-2010, 12:06 PM
I virtually know no javascript, but have been trying to create some sliding menus. 4 Menus along the bottom of the screen that on mouse over, a sub menu slides up from them.

I managed to get them to work to slide up, but then when I put the code in to slide back down again it started spazzing out!

Can anyone help at all? Here's my javascript code.


<script type="text/javascript">

var curVisible;
var oldObject;
var pusher;
var pushBack;
var inMotion = false;

function reveal(obj) {

if(curVisible != null) {
oldObject = curVisible;
}

if(!inMotion) {
curVisible = obj;
pusher = -100;
pushBack = 40;
document.getElementById(obj).style.visibility = "visible";
document.getElementById(obj).style.bottom = pusher+"px";
animateOut();
animateIn();
}
}

function hide() {
animateIn();
}


function animateIn() {
if (pushBack > -100) {
inMotion = true;
pushBack -=4;
document.getElementById(oldObject).style.bottom = pushBack+"px";
setTimeout(animateIn, 20);
} else {
document.getElementById(oldObject).style.visibility = "hidden";
inMotion = false;
}
}


function animateOut() {

if(pusher < 40) {
inMotion = true;
pusher += 4;
document.getElementById(curVisible).style.bottom = pusher+"px";
setTimeout(animateOut, 20);
} else {
inMotion = false;
}
}

</script>

Thanks very much. Have tried loads, but just can't seem to get it to work. It's a lot more complicated than I first thought.

Dave

howegraphics
01-22-2010, 12:57 PM
it started spazzing out!

Sorry I just realised I wasn't very helpful in explaining what's happening.

When I role over the first menu for the first time, it works pretty much perfectly, however from then on if I role over another menu or the same one it just starts jumping all over the place. So it may jump to the top and then slide down or it will start doing the movement then jump about and just breaks down.

I just can't work out where the problem is although it only happens when I put the animateIn code there. It just seems to be getting confused as to what it's meant to be doing, and whether the menu is out or in.

Thanks very much for reading this. Really appreciated.

howegraphics
01-22-2010, 01:39 PM
OOOO Fixed It!!!!!!

Before I didn't have my order sorted out and never thought it was affect functionality, but just by putting a z-index on the sliding list so that it went behind the bottom menu it now works.

I'm guessing because maybe before because the list was getting between the mouse and the menu at the bottom so it then thought it wasn't mouse over any more or something like that? But now that it goes behind the whole bar at the bottom it works fine!!

Cheers anyway guys.