Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 6 of 6
  1. #1
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts

    [SOLVED] Loading a css file based on browser being used

    Hi,

    I have some code that performs differently in Opera than it does in any other browser. So I have a stylesheet specifically for opera. Is there a way to do something like this, where I check the browser, and if it's not opera, then load the default sheet, otherwise load the opera-specific css?

    Code:
    <script>
     // Browser Detection Javascript
    // copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd
    
    // You have permission to copy and use this javascript provided that
    // the content of the script is not changed in any way.
    
    function whichBrowser() {
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("opera") != -1) return 'Opera';
    if (agt.indexOf("staroffice") != -1) return 'Star Office';
    if (agt.indexOf("webtv") != -1) return 'WebTV';
    if (agt.indexOf("beonex") != -1) return 'Beonex';
    if (agt.indexOf("chimera") != -1) return 'Chimera';
    if (agt.indexOf("netpositive") != -1) return 'NetPositive';
    if (agt.indexOf("phoenix") != -1) return 'Phoenix';
    if (agt.indexOf("firefox") != -1) return 'Firefox';
    if (agt.indexOf("safari") != -1) return 'Safari';
    if (agt.indexOf("skipstone") != -1) return 'SkipStone';
    if (agt.indexOf("msie") != -1) return 'Internet Explorer';
    if (agt.indexOf("netscape") != -1) return 'Netscape';
    if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
    if (agt.indexOf('\/') != -1) {
    if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
    return navigator.userAgent.substr(0,agt.indexOf('\/'));}
    else return 'Netscape';} else if (agt.indexOf(' ') != -1)
    return navigator.userAgent.substr(0,agt.indexOf(' '));
    else return navigator.userAgent;
    }
     
    if(whichBrowser() != 'Opera')
    {
    	<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css" rel="stylesheet" />
    }
    else
    {
    	<link type="text/css" href="jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.OPERA.css" rel="stylesheet" />
    }
    </script>
    As of this writing, that code seems to break my page, as if it doesn't like loading a sheet based on an if/else clause.
    Last edited by kberry; 07-16-2011 at 03:46 AM.

  • #2
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    884
    Thanks
    173
    Thanked 101 Times in 101 Posts
    Hi

    Try this. It worked for me in IE8

    LT


    Code:
    <script>
     // Browser Detection Javascript
    // copyright 1 February 2003, by Stephen Chapman, Felgall Pty Ltd
    
    // You have permission to copy and use this javascript provided that
    // the content of the script is not changed in any way.
    
    function whichBrowser() {
    var agt=navigator.userAgent.toLowerCase();
    if (agt.indexOf("opera") != -1) return 'Opera';
    if (agt.indexOf("staroffice") != -1) return 'Star Office';
    if (agt.indexOf("webtv") != -1) return 'WebTV';
    if (agt.indexOf("beonex") != -1) return 'Beonex';
    if (agt.indexOf("chimera") != -1) return 'Chimera';
    if (agt.indexOf("netpositive") != -1) return 'NetPositive';
    if (agt.indexOf("phoenix") != -1) return 'Phoenix';
    if (agt.indexOf("firefox") != -1) return 'Firefox';
    if (agt.indexOf("safari") != -1) return 'Safari';
    if (agt.indexOf("skipstone") != -1) return 'SkipStone';
    if (agt.indexOf("msie") != -1) return 'Internet Explorer';
    if (agt.indexOf("netscape") != -1) return 'Netscape';
    if (agt.indexOf("mozilla/5.0") != -1) return 'Mozilla';
    if (agt.indexOf('\/') != -1) {
    if (agt.substr(0,agt.indexOf('\/')) != 'mozilla') {
    return navigator.userAgent.substr(0,agt.indexOf('\/'));}
    else return 'Netscape';} else if (agt.indexOf(' ') != -1)
    return navigator.userAgent.substr(0,agt.indexOf(' '));
    else return navigator.userAgent;
    }
     
    if(whichBrowser() != 'Opera')
    {
    document.write(	"<link type='text/css' href='jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.css' rel='stylesheet' />");
    }
    else
    {
    document.write("<link type='text/css' href='jquery-ui-1.8.13.custom/css/custom-theme/jquery-ui-1.8.13.custom.OPERA.css' rel='stylesheet' />");
    }
    window.onload=whichBrowser;
    </script>

  • Users who have thanked low tech for this post:

    kberry (07-16-2011)

  • #3
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Thanks! That did it. I guess I'll have to get used to document.write a bit more.

  • #4
    Regular Coder low tech's Avatar
    Join Date
    Dec 2009
    Posts
    884
    Thanks
    173
    Thanked 101 Times in 101 Posts
    Hi Kberry

    As I understand it document.write is mainly used in situations where it can be used once on page load since it causes a page refesh otherwise.

    However, i'm just learning and as such what intrigues me is in your case what happens if JS is disabled within the broswer? What stylesheet would they get?

    Just a question out of interest really. Trying to visualise how that situation would/could/should be handled.

    LT

  • #5
    New Coder
    Join Date
    Jun 2011
    Posts
    80
    Thanks
    13
    Thanked 0 Times in 0 Posts
    Well in my case, if javascript is disabled, I re-direct the user to a page that tells them how to enable javascript. My site absolutely uses javascript, so if they have it disabled, they're SOL.

  • #6
    New to the CF scene
    Join Date
    Jul 2011
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    this shop online is good



  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •