Load remote CSS file dynamically with jQuery

By Nobu | Published: December 30, 2009

These codes are for dynamic loading for remote CSS. It’s easy to load all CSS files from the beginning or just append link element (ref. Switch stylesheets with jQuery). But it rarely needs to load a file dynamically and wait until CSS file has been loaded completely.

test.html:

<html>
<head>
<title>css.html</title>
<script src="/jquery-1.3.2.js"></script>
<script>
$(document).ready(function()
{
     // if it's a local file just using $.get() should be fine
    $.getJSON('http://remote-server/css.php?callback=?', function(data){
        //$('head').append('<style>');
        //$('head > style:last').html(data); // it doesn't work on IE
        $('body').append('<style>' + data + '</style>');
        //  edit dom tree. these elements need new properties of stylesheet
        $('body').append('<div id="something-special"><h1>Hello World!</h1></div>');
    });
});
</script>
</head>
<body>
</body>
</html>

css.php:

<?php
ob_start();
?>
 
div#something-special h1 {
    color: red;
}
 
<?php
sleep(10); // it's for test
if (isset($_GET['callback'])) {
    $buf = ob_get_contents();
    ob_clean();
    echo filter_var($_GET['callback'], FILTER_SANITIZE_STRING), '(', json_encode($buf), ')';
}

This entry was posted in Tweak and tagged css, jquery, php. Bookmark the permalink. Trackbacks are closed, but you can post a comment.

Load remote CSS file dynamically with jQuery

Post a Comment

About

Search

Archives

Recent Posts