Member Avatar for ErlendHL

Hi! I am trying to make an element shake, and I have tried to make a function in JavaScript, but it won't work.
Here is the test page, used only for testing. It is the Genious test div that I want to shake. Here is the code:

function Shake(Pow){
    setTimeout("Shake(3);",100);
    var co = 1;
    switch(co){
        case 1:
             document.getElementById('genious').style.left-=Math.random()*Pow;
            break;
        case 2:
            document.getElementById('genious').style.left+=Math.random()*Pow;
            break;
        case 3:
            document.getElementById('genious').style.top-=Math.random()*Pow;
            break;
        case 4:
            document.getElementById('genious').style.top+=Math.random()*Pow;
            break;
    }
    if(co<4){
        co++;
    }else{
        co = 1;
    }
}

This is how I start it all:

<body onload="Shake(3);">

I get this notice in firebug:
Error in parsing value for 'left'. Declaration dropped.

So please take a overlook and tell me what I have done wrong! Thanks!

  • 1 Contributor
  • 1 Reply
  • 152 Views
  • 6 Hours Discussion Span
  • Latest Post Latest Post by ErlendHL
Member Avatar for ErlendHL

Now it sort of works. Current code:

function Shake(Pow){
                setTimeout("Shake(3);",100);
                var co = 1;
                var xcoor = document.getElementById('genious').style.left.replace('px','');
                var ycoor = document.getElementById('genious').style.top.replace('px','');
                switch(co){
                    case 1:
                        document.getElementById('genious').style.left=(xcoor-Math.random()*Pow)+"px";
                        break;
                    case 2:
                        document.getElementById('genious').style.left=(xcoor+Math.random()*Pow)+"px";
                        break;
                    case 3:
                        document.getElementById('genious').style.top=(ycoor-Math.random()*Pow)+"px";
                        break;
                    case 4:
                        document.getElementById('genious').style.top=(ycoor+Math.random()*Pow)+"px";
                        break;
                }
                if(co<4){
                    co++;
                }else{
                    co = 1;
                }
            }

The problem now is: The div seems unaffected by its "left", and the "left" just decreases, which means that co always is 1...

EDIT: Now I changed the style of 'genious' to position:asolute, and it now sort of works, the only thing is to change co.. why won't that work?

EDIT2: Aww I did not see. var co = 1 is the problem.
So now this is solved. Sorry for posting! lol

Edited by ErlendHL because: Solved!
Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.