PDA

View Full Version : Web background determined by which browser you're using



BrightStarPro
03-08-2010, 03:31 AM
Hi everyone,

I haven't been able to find anykind of script to do what I'm looking for specifically. I'm looking to load a different background based on which browser someone uses to view my website (someone using Firefox would see a background that's different than someone using Internet Explorer for example). I'm assuming a javascript code for browser detection would play a roll in this somehow, but thus far I haven't had much luck. Any have any suggestions?

Thanks in advance

jscheuer1
03-08-2010, 04:58 AM
There is a very easy way to distinguish between IE and everything else:


<style type="text/css">
body {
background-image: url(allelse.gif);
}
</style>
<!--[if IE]>
<style type="text/css">
body {
background-image: url(ie.gif);
}
</style>
<![endif]-->

No javascript required. For the rest of them we have the navigator object and its various properties, as well as various quirks that can be detected. These all (as far as I know) require javascript and many can be spoofed, but generally aren't, and I suppose that even if they were, it wouldn't be that big of a deal for something as innocent as this. See:

http://www.dynamicdrive.com/dynamicindex9/browsersniffer.htm

Also check this on Google:

http://www.google.com/search?client=opera&rls=en&q=browser+detection+javascript&sourceid=opera&ie=utf-8&oe=utf-8

Here's one way to detect several popular browsers while setting a background image for each:


<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {
background-image: url(allelse.gif); /* image for all those not detected */
}
</style>
<!--[if IE]>
<style type="text/css">
body {
background-image: url(ie.gif); /* IE image */
}
</style>
<![endif]-->
<script type="text/javascript">
(function(){
var browser = '';
if(/Google/i.test(navigator.vendor)){
browser = 'chrome.gif'; //Chrome image
}
else if(/Apple/i.test(navigator.vendor)){
browser = 'safari.gif'; //Safari image
}
else if(window.opera){
browser = 'opera.gif'; //Opera image
}
else if(typeof document.documentElement.style.MozBinding === 'string'){
browser = 'mozilla.gif' //Firefox and other Mozilla based browsers image
}
if(browser !== ''){
document.write('<style type="text/css">body { background-image: url(' + browser + '); } <\/style>');
}
})();
</script>
</head>
<body>

</body>
</html>

traq
03-08-2010, 04:59 AM
You could try jQuery (http://www.tutorialspoint.com/jquery/jquery-utilities.htm). Keep in mind that the useragent can be faked, confused, and/or missing, so it's not generally reliable - but since you're only talking about a background image, I don't see that being a problem. :D

John beat me to it

BrightStarPro
03-08-2010, 08:58 AM
Thanks John. That worked perfectly!