I'm developing a horizontal layout wordpress theme for any photography portfolio site and used the code example within the publish "Calculate total width of Children with jQuery" which works, only after i refresh the page.

The jquery is within another file known as horizontal.js and it is being enqueued in the wordpress theme's functions.php file. The js will get the width of all of the list products within the posts, adds them up and puts the width on our bodies of single publish pages.

jQuery(document).ready(function($) {
    var width = 0;
    $('body.single .long li').each(function() {
        width += $(this).outerWidth( true );
    });
    $('body.single').css('width', width + 500);
});  

I've been reading through on the main difference between (window).load and (document).ready also it appears that things i have ought to be the best answer because I only want this function to complete once. I believe the issue is where I'm putting the js or it's interacting poorly with anther script or I have to delay the page loading before the script has fired, but I am unsure how you can look for these complaints.

The website is under development and also the link is http://www.laurendarling.com/2011website/photography/afterparty/ username: guest, password: guest. Should you click the outlined publish title within the side nav the page reloads and js puts the width on our bodies tag permitting the horizontal layout.

Appreciate the suggestions. I attempted while using load handler also it still did not work however I simply added a setTimeout and delay pills work in most browsers. This isn't ideal because the content exhibited improperly before the javascript started in and so i hid all of the photos except the first for any second after which went the script.

jQuery(document).ready(function($) {

    // gets all photos in a post
    var allpics = $('body.single .long li');

    // gets first photo in list
    var firstpic = $(allpics).first();

    // hides all photos in a post except the first photo
    $(allpics).not(firstpic).hide();

    // holds function for one second and then adds width to body tag
    setTimeout(function() {
        var w = 0;
        $('body.single .long li').each(function() {
            w += $(this).outerWidth();
        });
        w+=500;
        $('body.single').css('width', w + 'px');

        // fades in the all the photos after body width is added
        $('body.single .long li').fadeIn('500');

    }, 1000);
});

It might still look bad when the browser takes more than one second to load, so perhaps there's still a much better solution.