How to download CSS file through JQuery


Tags: jquery,css

Problem :

  • Is it possible to download a CSS file through JQuery?
  • Also, I need a callback which will notify me that the file is downloaded. The file will not be downloaded if the file exists in the client machine.

Please help with sample code. Thanks.



Solution :

(function($) {
    $.get('/css/foobar/tooltips.css', function(data) {
        var style = document.createElement('style'),
            head  = document.getElementsByTagName('head')[0] || document.documentElemen;

        style.type = "text/css";
        style.textContent = style.text = data;

        head.appendChild(style, head.firstChild); 
    });
}(jQuery));

The above code would download the contents of tooltips.css. When the file is transfered, a new link node is created and the contents from tooltips.css are inserted. After that, the new node is appended into your document and all css rules will apply.

If you need/want to transfer many files dynamically, I would recommend a script like supplyJS


    CSS Howto..

    How to put some divs in a row?

    How to invert the anchoring inside a `
    ` to the bottom instead of the top?

    list-style-type no showing

    How to style Menu border/outline in JavaFX8 using CSS?

    Show Content if below specific width

    How to make a new DOM element to think it resides in a different domain with js and css

    How to convert 1 column records of dynamic table into hyperlink

    How to make multiple divs always fill out the whole browser size?

    CSS: How to get thumbnails into a horizontal line?

    how to indent jqgrid table?

    How to define variable with CSS value from HTML tag? [closed]

    How to do proportionate image gallery supporting both horizontal and vertical aspects?

    How to style Accelerator display text in JavaFX ContextMenu via CSS?

    How to set caption for youtube videos box in css?

    css how to prevent content from drifting underneath fixed position areas?

    How to make a moving dashed border with CSS?

    How do I maintain modularity with mixins?

    How to fit 25 divs inside one div when I have more than 25 child divs?

    Jquery: How to make the content showup below the navigation bar when the anchor link is clicked?

    Why are items showing up in my instead of [closed]

    How to position two divs on the absolute front of a page, but with one over the other? CSS

    How To Turn JS Objects To HTML And Style With CSS

    How to make text wrap when resizing in a inline div, without the div moving onto a new line first?

    How can I apply an external CSS class to a span created with dojo.create?

    How to shrink the menu when mouse hover on a link using jquery

    How to choose fontstacks

    How do you implement CSS without to have clear:both on float left and float right

    How to test a web designer on css layouts?

    how to use first child in my code?

    How to have video faded when paused - HTML