Question

In the following code snippet:

var scr_h = $(document).height();
var scr_w = $(document).width();
var logo = {                                                             
    width   :   (scr_w*.25),                                              
    img     :   document.createElement('img'),                           
    src     :   'images/static/mk_vc.png'                                
};  
$(logo.img).attr('src', logo.src);                                       
$('#logo').append(logo.img);                                             
$('#logo').css({                                                         
    'margin-top'    :   scr_h*.15+'px',                                       
    'width'         :   logo.width+'px',
    'left'          :   (scr_w/2)-(logo.width/2)+'px' //this doesn't always work...
}); 
alert($('#logo').css('left'));        

Sometimes the alert comes back with “auto” instead of the correct number. It usually happens if the page is refreshed (though a ctrl+refresh will usually fix the issue). I tried rendering the page via php and attaching a ?randomnumber=$randomnumber parameter to the JavaScript call, but it didn’t help, which means it’s not a caching issue of some sort.

It also seems to happen in all browsers. My client has a Mac, and has tried with Chrome and Safari, and I have Linux and have tried it in Chrome and Firefox.

Any thoughts at all? The rest of the JavaScript functions fine, regardless as to whether that particular line renders properly. The margin-top and width css also always functions. It appears to be only the left that gives issues.

I tried changing the order to render “left” first, but that also did not help, though the other two attributes were still just fine.

The full script can be seen at http://meenakhalili.turnleftllc.com/scripts/js/dev/mk.js, with the site at meenakhalili.turnleftllc.com. Try refreshing a few times. You’ll see the problem.

Answer 1

Chchrist answered this question last night in the comments. Setting the calculation to occur after the onload event of the image fixed the problem.

I’m posting this for now, but would love to give credit where it’s due!