margin-left undefined after setting with jQuery

Question

I am trying to set the margin of my wrapper dynamically. Here is my JavaScript code:

var w = window.innerWidth;
if (w > 800) {
    var margin = (w - 800) / 2;
    $('.ui-page').css('margin-left', margin);
    var output = $('.ui-page').css('margin-left');
    $('.ui-footer').css('margin-left', margin);
    $('.ui-header').css('margin-left', margin);
    alert(output);
}

But when I open the page, the alert says undefined !?

score 1 · Accepted Answer · edited May 23 '17 at 12:13

In addition to my previous answer, which shows it working, there is this fail-safe.. this is a different approach that must always work. I suspect your page is not loaded when the code is run:

http://jsfiddle.net/digitalextremist/xfVdL/1/

$( document ).ready( function() {
    var w = window.innerWidth;
    var maxWidth = 300    
    if ( w > maxWidth ) {
        var margin = (w - maxWidth) / 2;
        $('.ui-page').css('margin-left', margin);
        var output = $('.ui-page').css('margin-left');
        $('.ui-footer').css('margin-left', margin);
        $('.ui-header').css('margin-left', margin);
        alert( output );
    }
});

Or, if you use jQuery Mobile:

$( document ).on( 'pagebeforeshow', function( event ) {
    var w = window.innerWidth;
    var maxWidth = 300    
    if ( w > maxWidth ) {
        var margin = (w - maxWidth) / 2;
        $('.ui-page').css('margin-left', margin);
        var output = $('.ui-page').css('margin-left');
        $('.ui-footer').css('margin-left', margin);
        $('.ui-header').css('margin-left', margin);
        alert( output );
    }
});

It is critical that you let the page load first before testing sizes as you are doing.

What you are doing is correct, but jQuery and jQuery Mobile render the page in stages. To make sure you take your measurement of .ui-page at the right time, once everything is properly loaded by jQuery or jQuery Mobile, you need to make sure it all rendered first, which means you need to use $( document ).on( 'pagebeforeshow' ) for jQuery Mobile, or $( document ).ready() for jQuery itself. These make sure your code runs after the page is fully rendered. Before that, your measurements will be wrong! And before that, .ui-page might not even exist yet, if it is added by jQuery Mobile.

Here is more information for you:

Hey you're welcome. This is a common problem that catches the best of us off guard. — digitalextremist, Dec 08 '13 at 15:45
What do you mean by saying **critical**? What are you proposing me to do? I want the content to be centered, if the innerWidth is larger than 800px, so I am changing the margin-left according to the innerWidth. — elementzero23, Dec 08 '13 at 15:57
ok, thank you very much! I'm getting exactely what I want now! — elementzero23, Dec 08 '13 at 16:10
I've added links to my answer, which explain this further if you want to know more. I am very glad to help! — digitalextremist, Dec 08 '13 at 16:14

score 0 · Answer 2 · answered Dec 08 '13 at 15:26

0

Try setting the margin with a unit; something like:

$('.ui-page').css('margin-left', margin + 'px');

Also, you can use margin: 0 auto; to have your div's center themselves within the page. See MDN for some details.

answered Dec 08 '13 at 15:26

Ryan953

688
4
11

score 0 · Answer 3 · answered Dec 08 '13 at 15:32

It looks like your query for .ui-page is returning no elements.
Therefore, when trying to retrieve the margin-left property, it returns undefined.

Try checking whether whether .ui-page actually exists on the page.
A quick way to do this:

if ( $('.ui-page').length > 0 ) alert('.ui-page exists!');

score 0 · Answer 4 · answered Dec 08 '13 at 15:33

What version of jQuery are you using? And what browser?

Without changing your code really at all, it works fine under version 1.10.1

( It also works under every other version... on Chrome and Firefox )

See what I mean? http://jsfiddle.net/digitalextremist/xfVdL/

So, it does work... No "px" required.

margin-left undefined after setting with jQuery

4 Answers4