How To Load A Css File Based On A Url Or Client?

I have two CSS files in my Sencha touch application. Lets call them A.css and B.css. Based on the URL I want the application to load different CSS. Lets say URL 1 is www.website.co

Solution 1:

You can use JavaScript Regex for this.

Very easy method:

// For www.website.com/#1if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

    // For www.website.com/#2if (/www.website.com\/#1/.test(window.location.href)) {
        /* Your Code Here For Loading Css */
    }

I hope this helps!!!

Solution 2:

You can use the follow JavaScript code to load CSS dynamically for your requirement:

if (window.location == "http://www.website.com/#1") {
     LoadCSS("A.css")
}
elseif(window.location == "http://www.website.com/#2") {
     LoadCSS("B.css")
}

functionLoadCSS(filename) {
     var fileref = document.createElement("link");
     fileref.setAttribute("rel", "stylesheet");
     fileref.setAttribute("type", "text/css");
     fileref.setAttribute("href", filename);
}

Solution 3:

Get hashtag value from URL and then depending on value change the link for CSS.

To get hashtag value:

$url = "www.website.com/#1";
$params = parse_url($url);

$value = $params['fragment'];

This will give you hashtag value, then depending on value link CSS file in header:

<?phpif ($value == 1) { ?><linkhref="A.css"rel="stylesheet"type="text/css" /><?php } else { ?><linkhref="B.css"rel="stylesheet"type="text/css" /><?php } ?>

Solution 4:

I assume you have one template available for 2 URLs. Loading CSS using JavaScript is a pretty bad practice because it's slow and it's giving the user a bad experience since nothing is initially styled.

Anyway you can use the append function to add the CSS to the head tag.

$('head')
  .append( $('<link rel="stylesheet" type="text/css" />')
  .attr('href', 'your_stylesheet_url') );

And for the URL itself simply use the JavaScript window.location like so:

if (window.location == "#1url") {
    // load the A.css using the append function like above
}