move div using javascript

Question

I have a div and I am trying to move it right and left on page load using js to create a shaking movement.

My code:

    <script type="text/javascript">
        obj = document.getElementById('hs');            
        obj.style.position='relative';  
        function goRight(){             
            obj.style.right = 10px;
            window.setTimeout(goLeft, 100);
        }
        function goLeft(){
            obj.style.left = 10px;
            window.setTimeout(goRight, 100);
        }
        window.onload =goRight;
    </script>

But it doesn't work. The id of my div is hs.

The html is:

            <div id="hs">
        <h1>hs</h1>
        <hr>
    </div><

have a look at setTimeout and setInterval. You'll want to put some delay in there or this won't work. — James Montagne
– James Montagne, Commented Oct 29, 2013 at 20:21
You could refer to this: stackoverflow.com/questions/8041857/… — Mike B
– Mike B, Commented Oct 29, 2013 at 20:23

dezman · Accepted Answer · 2013-10-29 20:29:19Z

4

Here you go

obj = document.getElementById('hs');
obj.style.position='relative'; 

function shake(interval) {
    obj.style.right = '10px';
    setTimeout(function(){
        obj.style.right = '0px';
    }, interval);
}

setInterval(function(){
    shake(500);
}, 1000)

Your main issue was that after both the right and left values were set, you weren't changing anything anymore, it was static at left: 10px; right: 10px; you have to keep changing one of those values instead.

answered Oct 29, 2013 at 20:29

dezman

19.6k13 gold badges58 silver badges92 bronze badges

Sign up to request clarification or add additional context in comments.

11 Comments

Rakim Over a year ago

it makes perfect sense the way you implemented it. although there is still no progress...

dezman Over a year ago

what do you mean there is no progress?

Rakim Over a year ago

it did not work. I might try it on another element in my html and see if the problem is somewhere else

Rakim Over a year ago

I did. And I can see it works... I don't get what is wrong with it.. the div I just created for testing doesn't work either..

dezman Over a year ago

you probably need to wrap your code in $(document).ready(function(){...}) Do you get any errors in the console?

|

Smeegs · Accepted Answer · 2013-10-29 20:28:56Z

1

I don't know if this is the main problem, but you need to make the 10px into a string.

obj.style.right = '10px';

for both right and left.

answered Oct 29, 2013 at 20:28

Smeegs

9,2346 gold badges46 silver badges79 bronze badges

Collectives™ on Stack Overflow

move div using javascript

2 Answers 2

11 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

11 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related