jQuery CSS doesn't work to set Top position

Question

enter image description here

Please give a look on the above screenshot of Chrome console. Though 1st line of jQuery code should change the "Top Position" of "#footer" DIV to 1426px, jQuery("#footer").position().top is showing as 1401 only. Its Top is expected to 1426, but shown as 1401. Please let me know if you understand its underlying causes.

Try with .offset(), to get the position relative to the document. — Danijel
– Danijel, Commented Jun 15, 2014 at 7:39
Footer position property was not set. After defining it to "absolute", it has been solved. — Wasim
– Wasim, Commented Jun 16, 2014 at 5:12

Wasim · Accepted Answer · 2014-06-16 05:27:52Z

1

It was solved! Explanation: The "position" CSS property of #footer element was not defined, so by default, it would become "static". To solve this issue, I had to change its "position" property to "absolute".

edited Jun 16, 2014 at 5:27

answered Jun 16, 2014 at 5:11

Wasim

1,17211 silver badges25 bronze badges

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

Comments

Amit Joki · Accepted Answer · 2014-06-15 07:17:58Z

0

.top only gives you number not unit. But top expects some unit px or em or %

So, do this:

jQuery('#footer').css("top", jQuery('#pager').position().top + 40 + "px");

answered Jun 15, 2014 at 7:17

Amit Joki

59.4k7 gold badges80 silver badges96 bronze badges

3 Comments

Wasim Over a year ago

No, it doesn't work for me. jQuery('#footer').css("top", $('#pager').position().top + "px") returns 1401px, though it is expected as 1426px.

Wasim Over a year ago

yes, I checked. Though it should be jQuery("#footer").css("top", (jQuery("#pager").position().top + 40) + "px"). If you give a look on 1st line of console screenshot, you can see it returns 'Style="top: 1426px;".

ndcweb Over a year ago

Doesn't have to specify 'px', jQuery set it by it self. The problem is elsewhere. @Agilox can you provide the code or demo for this?

Amin Jafari · Accepted Answer · 2014-06-15 08:17:56Z

0

try this one:

$top=jQuery('#pager').css('top');
if($top.match(/^-/g)){
    $top= '-'+parseInt($top.replace(/\D/g,''));
}
else{
    $top= parseInt($top.replace(/\D/g,''));
    }
$top=$top+40
jQuery('#footer').css("top",  $top + "px");

or if you position the #pager element by margins, you have to use $top=jQuery('#pager').css('margin-top');

answered Jun 15, 2014 at 8:17

Amin Jafari

7,2153 gold badges21 silver badges44 bronze badges

Collectives™ on Stack Overflow

jQuery CSS doesn't work to set Top position

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related