jQuery appending a CSS and running a function?

Question

I am trying to append a CSS file to the current HTML page like this:

    var css = jQuery("<link>");
    css.attr({
      rel:  "stylesheet",
      type: "text/css",
      href: "http://domain.com/chron/css/jquery.gritter.css"
    });
    $("head").append(css);

Once the css file has been downloaded, I want to call a particular function. I thought I would just put the function call after the $('head').append(css); line but am not sure if this will guarantee that the css file will first be downloaded before calling the function. Can someone please tell me how to do this?

Legend · Accepted Answer · 2011-02-20 03:46:47Z

4

How about retrieving via AJAX and placing it in a STYLE element:

$.ajax( {
    url: 'http://domain.com/chron/css/jquery.gritter.css'
    dataType: 'text'
    success: function( data )
    {
        $( '<style>' )
            .attr( 'type', 'text/css' )
            .text( data )
            .appendTo( 'head' );

        yourFunction();
    }
} );

edited Feb 20, 2011 at 3:46

Legend

118k125 gold badges287 silver badges409 bronze badges

answered Feb 20, 2011 at 3:41

JAAulde

19.5k5 gold badges56 silver badges65 bronze badges

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

2 Comments

Legend Over a year ago

@Yi Jang: But are there any cross-domain solutions anyways? I am not even sure if that restriction has been lifted.

Yi Jiang Over a year ago

@Legend There are usually no way the restriction can be lifted - CORS exists, but that's only for recent browsers and only if the server explicitly allows this; JSONP isn't going to fly here simply because this isn't JSON.

Tokimon · Accepted Answer · 2011-02-20 05:35:47Z

0

Well. The tag should have a attribute named complete, that is set to true when it is loaded. You could test it every 50 milliseconds if you want or perhaps onload would work.

E.g.

var css = jQuery("<link>");
css.attr({
  rel:  "stylesheet",
  type: "text/css",
  href: "http://domain.com/chron/css/jquery.gritter.css"
})
.load(function() { /* callback */ });
$("head").append(css);

//As i have no idea whether the onload event
//works on link elements or not, try this instead:
setTimeout(function(){
    if(!css.complete)
    { setTimeout(arguments.callee, 50); }
    else
    { /* callback */ }
}, 50);

edited Feb 20, 2011 at 5:35

answered Feb 20, 2011 at 5:30

Tokimon

4,1921 gold badge22 silver badges27 bronze badges

2 Comments

JAAulde Over a year ago

I don't think LINKs have a 'complete' property. At least not in all browsers.

Tokimon Over a year ago

@JAAulde: Yeah you might be right. And they probably don't have onload either :( so i guess the only solution left is to style a certain element, and then test if the element have gotten that style every 50 ms :(

Collectives™ on Stack Overflow

jQuery appending a CSS and running a function?

2 Answers 2

2 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related