Chrome and jquery css not working properly

Question

I'm trying to create a dynamic element, apply some css on it from an external css file, and access the properties with jQuery. It works on Firefox but it does not on Chrome.

Here is an example :

CSS file (myFile.css):

.myClass {
    width : 200px;
    font-family : Verdana;
    font-size : 12px;
}

javascript code in a different file (myFile.js):

var title = $("<p/>").attr({id: "myId"}).addClass("myClass").appendTo(content);    
var titW = title.width();
var titFSize = parseInt(title.css("fontSize"));
var titFFamily = title.css("fontFamily");
console.log(titW, titFSize, titFFamily); // Firefox returns good values, Chrome does not

Any ideas? Thanks!

Works fine here: jsfiddle.net/nathan/jhky5. What does Chrome return for you? — Nathan
– Nathan, Commented Oct 5, 2011 at 12:23
I think the css file is not loading fast enough... If I use a setTimeout with a delay of 100ms, and try to get the properties again, it works. — gabitzish
– gabitzish, Commented Oct 5, 2011 at 13:12

Nathan · Accepted Answer · 2011-10-05 13:16:55Z

4

Ok, I've got the answer based on your comment. You need to enclose all your jQuery code in a DOMReady event.

jQuery(document).ready(function ($) {
    // jQuery code goes here
});

This ensures that the Document Object Model (DOM) will be fully ready before it runs.

The 100ms delay you mentioned in your comment isn't a good idea, because you don't know that the stylesheet will always load in 100ms.

answered Oct 5, 2011 at 13:16

Nathan

11.2k4 gold badges41 silver badges50 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Nathan Over a year ago

That's very strange. The DOM-ready event shouldn't fire until the CSS has loaded. Can you isolate the problem (write the smallest subset of your page which still causes the problem) then share it?

Collectives™ on Stack Overflow

Chrome and jquery css not working properly

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related