...

View Full Version : Resolved [SOLVED] Loading a css file based on browser being used



kberry
07-16-2011, 01:50 AM
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?


<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.

low tech
07-16-2011, 02:35 AM
Hi

Try this. It worked for me in IE8

LT



<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>

kberry
07-16-2011, 02:45 AM
Thanks! That did it. I guess I'll have to get used to document.write a bit more.

low tech
07-16-2011, 03:03 AM
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:)

kberry
07-16-2011, 03:20 AM
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.

ansong
07-16-2011, 03:33 AM
nike heels (http://www.nikehighheels2011.com)



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum