Tuesday, November 2, 2010

Setting styles based on browser settings

When you are designing for the net, you always have to keep in mind that different browsers display things differently. Sometimes a slight change may be needed according to what browser you are viewing the page in. When I run across this instance, I sometimes use a browser detection script to let me know which browser I am using. Below is a link to the Browser Detection script that I usually use. It's open source and a great script for doing a number of tasks.

http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js

Let's say you wanted a simple display somewhere to let users know what browser they are using. It's not entirely useful in this respect, but this will give you an idea of what you can do with the script.
Note: The beginning and ending script tags have been removed. You will need them for this to work in your html file. If you are new to javascript, read more here: 
http://www.w3.org/TR/REC-html40/interact/scripts.html#h-18.1

First off, we embed the script in our html page using the external script. The second part is a very common "if" statement. This statement allows us to basically ask a question using script.

if(BrowserDetect.browser=="Firefox")

Are we using firefox?

if(BrowserDetect.browser=="Firefox"){document.write("Your browser is"+BrowserDetect.browser)}

The second part of the script is what actually does the action. document.write is the javascript method for displaying text strings. You could place anything here, but in this instance I've decided to display text from a string. Using the browser detect class, we can add styling dependent on what browser you are using. This applies to other browsers as well by changing the if statement. 
if(BrowserDetect.browser=="Chrome")
This example checks against Google Chrome. If you look at the script here, you will see the available browsers:
http://caseygovero.com/CaseysSite/Scripts/Browser_Detect.js
Try it out for yourself. It will display a message if your in firefox, but not in any other browser. I'm sure you guys can use your imagination and find a use for the script!

1 comment:

  1. Social media content marketing, with the correct social media marketing strategy and campaign monitoring system, may result in more search traffic, better SEO, healthier consumer interaction, and greater brand loyalty. Social media marketing services are a type of internet marketing that makes use of various social media networks. To be effective in your marketing efforts, you must develop a plan outlining who your target audience is, how to discover their preferences, and what strategies to use to reach them.

    ReplyDelete