CODEWITHSUNDEEP
javascriptjquerycss
dclowd9901
dclowd9901

Reputation: 6836

jQuery .css(): is there an intrinsic delay in a property's application to an element?

I am applying CSS changes to elements live in a jQuery plugin I wrote. I do some arithmetic utilizing the sizing of containing elements, and I keep getting inconsistent values that seems like it stems from a race condition.

Here's the code:

    $.each( $marquee.find('li'), function(){

        console.log('li count');

        var $li = $(this);

        $li.css({
            display: 'inline'
        });
    });

    var sectionWidth = $marquee.outerWidth();
    var containerWidth = $wrappingDiv.width();

    console.log( sectionWidth );
    console.log( containerWidth );

The values reported in the console logs vary wildly on page refreshes, and I can't figure out why. Any insight into this, and any way to make it work consistently?

Edit: I set up a JSFiddle scenario, but as I suspected (because JSFiddle's shell handles rendering differently than an actual browser), it doesn't replicate the scenario above. Not sure what use it will be to diagnosis, but here's the link.

http://jsfiddle.net/BJedD/27/

Addendum This appears to be happening solely in Webkit browsers.

Upvotes: 1

Views: 167

Answers (1)

Sandeep
Sandeep

Reputation: 819

Do this after $(window).load(function(){//Your code}) instead of $(document).ready(function(){//Your code}). I have tried this in your jsFiddle and it works (consistent results).

Upvotes: 1

Related Questions