CODEWITHSUNDEEP
javascript
Ru1138
Ru1138

Reputation: 173

Javascript animation is not running

I'm trying to create an animated menu that slides up and down. Unfortunately it's not working. I've checked the error console and there are no syntax errors. Here's my Javascript:

function showLayer() {
    var hiddenLayer = document.getElementById("mainmenu");
    var layerPosition = parseInt(hiddenLayer.style.bottom);
    if (layerPosition > 700) {
        hiddenLayer.style.bottom = (layerPosition + 5) + "px";
        setTimeout("showLayer()", 20);
    }
}

function hideLayer() {
    var hiddenLayer = document.getElementByID("mainmenu");
    hiddenLayer.style.bottom = "700px";
}

Here's the whole context:

<script type="text/javascript">
function showLayer() {
var hiddenLayer = document.getElementById("mainmenu");
var layerPosition = parseInt(hiddenLayer.style.bottom);
if (layerPosition > 700) {
hiddenLayer.style.bottom = (layerPosition + 5) + "px";
setTimeout("showLayer()", 20);
}
}
function hideLayer() {
var hiddenLayer = document.getElementByID("mainmenu");
hiddenLayer.style.bottom = "700px";
}
</script>

<style type="text/css">
div#mainmenu { position: absolute; bottom: 700px; left: 9px; width: 600px; 
height: 350px; border-style: solid; background-color: rgb(0, 0, 0) ; border-    
width: 3px; border-top-right-radius: 7px; border-top-left-radius: 7px; }
div#mainbutton { position: absolute; top: 674px; left: 12px; width: 28px;     
height: 28px; border-style: solid; border-color: rgb(255, 255, 255); border-width: 
1px; border-radius: 4px; }
div#mainbuttontext { position: absolute; top: 679px; left: 22px; color: rgb(255, 255, 
255); font-style: normal; font-size: 18px; font-family:"Arial"; }
</style>

<div id="mainbutton"></div>
<div id="mainmenu" onClick="showLayer('mainmenu')">&nbsp;</div>
<div id="mainbuttontext">F</div>
</body>

Upvotes: 2

Views: 116

Answers (1)

Alexandre Khoury
Alexandre Khoury

Reputation: 4022

I think I found your problem! It's something very strange and I can't explain it, but to get style in javascript, the css must be inline (to set a style it's not necessary).

So I modified your code by placing the css inline.

HTML :

<div id="mainmenu" style="position:absolute;bottom:100px;" onclick="showLayer('mainmenu');">Click me!</div>

<!--I wrote 100px just for the test, you can change it and modify the js-->

JS :

function showLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    var layerPosition=parseInt(hiddenLayer.style.bottom);
    if(layerPosition>50)
    {
        hiddenLayer.style.bottom=(layerPosition+5)+"px";
        setTimeout("showLayer()",20);
    }
}

function hideLayer()
{
    var hiddenLayer=document.getElementById("mainmenu");
    hiddenLayer.style.bottom="700px";
}

Fiddle : http://jsfiddle.net/8MWfV/

And here is a fiddle that shows that a not inline css doesn't works : http://jsfiddle.net/kfUrP/

Upvotes: 1

Related Questions