jQuery to set width of body based on children width only works after reloading page (used in wordpress)

Question

I am creating a horizontal layout wordpress theme for a photography portfolio site and used the code example in the post "Calculate total width of Children with jQuery" which works, but only when I refresh the page.

The jquery is in a separate file called horizontal.js and is being enqueued from the wordpress theme's functions.php file. The js gets the width of all the list items in the posts, adds them up and puts the width on the body of single post 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 have been reading up on the difference between (window).load and (document).ready and it seems that what I have should be the best solution because I only want this function to execute once. I think the problem is where I am putting the js or it is interacting poorly with anther script or I need to delay the page loading until the script has fired, but I'm not sure how to check for these problems.

The site is under development and the link is http://www.laurendarling.com/2011website/photography/afterparty/ username: guest, password: guest. If you click on the highlighted post title in the side nav the page reloads and js puts the width on the body tag allowing the horizontal layout.

It's not clear what the problem is. The pages look fine; are the photographs supposed to be laid out horizontally or something? If so, that doesn't happen for me (Chrome) whether I reload the page or not. It does appear that the `` is getting its width set by that code, however. — Pointy, Apr 23 '11 at 14:22
I can't get Chrome's sometimes-worthless developer console to let me debug the code. I'd add some console.log calls or something to see what that script is picking up as the "outerWidth()" measurement of the elements, because that's clearly what the problem must be. You might also try binding this to the "load" handler (instead of "ready") to make sure all the images are ready (since that's really the important thing, and is probably why the code works sometimes upon page reload - the images would be cached at that point). — Pointy, Apr 23 '11 at 14:28

score 1 · Answer 1 · answered Apr 26 '11 at 18:47

Thank you for the suggestions. I tried using the load handler and it still didn't work but then I just added a setTimeout and it works in all browsers. This is not ideal since the content flashed incorrectly until the javascript kicked in so I hid all the photos except the first one for a second and then ran 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 could still look bad if the browser takes longer than one second to load, so maybe there is still a better solution.

score 0 · Answer 2 · answered Jan 17 '14 at 16:55

I know this is an old question, but I am using your code in a project I'm working on. I got the setTimeout to look good!

setTimeout(function() {

        $("#user-book-list").hide().css("margin", "-2px 0 0 0");

        var w = 0;

        $("#user-book-list li").each(function() {
            w += $(this).outerWidth();
        });

        w += 500;

        $("#user-book-list").css("width", w - 320 + "px");

        // fades in the all the photos after body width is added
        $("#user-book-list li").fadeIn("100");

        $("#user-book-list").css("margin", "2px 0 0 0").fadeIn("100");

}, 1000);

The margins on #user-book-list is to compensate for the custom (webkit) scrollbar popping in when the rest of the li items load. Of course, in other browsers the jump will be noticeable. The li items fade in more elegantly for me now.

Thanks for sharing your code!

jQuery to set width of body based on children width only works after reloading page (used in wordpress)

2 Answers2