jQuery $('#mydiv').css('top','500'); not working

Question

Hello, I have this:

<div id="mydiv"></div>

With:

#mydiv{ position:relative; }

When I execute:

$('#mydiv').css('top','500');

Is not working, I'm not getting errors at all.

Basically what I need to do is move (not animate) that DIV 500px up, is there any other way to do it?

Answer 1

As far as I know, the '$' doesn't mean anything in a jQuery selection string. If you're trying to find the div with the id 'mydiv', use:

$('#mydiv').css('top', '500');

Answer 2

Try

$('#mydiv').css('top','500');

Note the pound sign (#) preceding the ID. You're using the dollar sign ($).

Answer 3

Telling it to set top: to 500px is going to move it down 500px from the relative position, not go up. You should be using a negative number, -500px for instance.

Answer 4

couple of things 1. you have a typo it should be #mydiv and not $mydiv (in the js part) 2. check with firebug if the element is being changed after the command is being executed.

Thanks

Answer 5

You need to have #myDiv as the jQuery selector: $("#myDiv")

And, if I remember right, your div container (parent) needs to be:

position: relative;

and your "#myDiv" needs to be:

position: absolute;

Answer 6

Are you sure jQuery is working? Also, make sure it isn't being loaded more than once.

Answer 7

Check if Jquery is loading in firebug. For testing also add an alert to make sure
$(function(){
alert('Jquery is loading');
});

If Jquery is loading, try this $('#mydiv').css({'top':'500px'});

Answer 8

In the CSS, after seting position: absolute; try to set "top:0px;". It may help.

Answer 9

Moving it 500 px up:

First get the current position (this one is relative to the parent)

var topPosition = $('#mydiv').position().top;

Then move it

$('#mydiv').css('top',(topPosition - 500) + 'px');