.css() doesn't get correct values at page load

Question

I am calling .css() function at page load with the following code:

$(function(){

var positionLeft = parseInt($(".wrapper").css("margin-left"))-50;
if (isNaN(positionLeft)){
    console.log(positionLeft);
}

$("#full-wrapper").css("margin-left",(positionLeft+"px").toString()); 

});

For some reason, the positionLeft is always NaN. If I use setInterval(fn,1), and ask for a positionLeft just 1ms later, the positionLeft is as expected. What is going on here?

Try wrapping it in a document.ready(). I think the result would be the same, but I'm not 100% on that. — bassxzero, Mar 22 '17 at 18:20
This appears to work. I thought $(function(){}) is the same as document.ready(). Strange — sanjihan, Mar 22 '17 at 18:23
But then again, var sw = $("#workarea-section").width(); is set to undefined, even if I use document.ready — sanjihan, Mar 22 '17 at 18:31
Check back if the `.wrapper` element has some `margin-left` in the CSS or not. That could be one reason for its not returning a number. — Rahul, Mar 22 '17 at 18:45
@sanjihan http://stackoverflow.com/questions/3259496/jquery-document-ready-vs-self-calling-anonymous-function — bassxzero, Mar 22 '17 at 19:24

Rahul · Answer 1 · 2017-03-22T18:50:08.950

I think you need to chop down that .toString() function in the end and make it just like below, as you don't really need toString() here—would work without it anyway:

$("#full-wrapper").css("margin-left", positionLeft+"px");

See it yourself:

$(function() {

  var positionLeft = parseInt($(".wrapper").css("margin-left")) - 50;
  if (isNaN(positionLeft)) {
    console.log(positionLeft);
  }

  $("#full-wrapper").css("margin-left", positionLeft + "px");

});

.wrapper {
  margin-left: 150px;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="wrapper">.wrapper</div>
<div id="full-wrapper">#full-wrapper</div>

score 0 · Answer 2 · edited May 23 '17 at 12:17

0

jQuery document.ready vs self calling anonymous function

Your self invoking function was a race condition and it looks like it won. Wrap your function in a document.ready() to ensure that the document is ready (initialized) before you try to access DOM element values.

edited May 23 '17 at 12:17

Community

1
1

answered Mar 22 '17 at 19:26

bassxzero

4,838
22
34

.css() doesn't get correct values at page load

2 Answers2