Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

How to display browser specific HTML?

I'm trying to find a way to display one link to an IE user and another link to all other browsers using javascript or conditional comments (or whatever it takes).

Basically...

//pseudo code
<!--[if IE]>
    <a href"ie-only.html">click here!</a>
<!--[else]>
    <a href"all-other-browsers.html">click here!</a>
<![endif]-->

I don't think this is possible with conditional comment tags (which only work in internet explorer). Plus I don't think there is an "else" statement.

Is there a way to do this with javascript? Please help! Thanks!

like image 251
Andrew Avatar asked Apr 10 '09 20:04

Andrew


2 Answers

One way that I've figured out how to do it:

Get the javascript code from http://www.quirksmode.org/js/detect.html and put it in the <head> tag.

Then in your <body> tag use:

<script type="text/javascript">
<!--
if (BrowserDetect.browser == 'Explorer') {
    document.write('<a href="#">Explorer</a>');
} else {
    document.write('<a href="#">Other Browsers</a>');
}
// -->
</script>

Not sure if this is the most simple way to do it but it got the job done.

like image 88
Andrew Avatar answered Sep 22 '22 07:09

Andrew


Add this to your header :

<script src="http://github.com/rafaelp/css_browser_selector/raw/master/css_browser_selector.js" type="text/javascript"></script>

Then whatever you want to your .css page :

/* Chrome Only */
.chrome embed {
    display: none;
}

/* Firefox Only */
.gecko video {
    display: none;
}

Source : http://rafael.adm.br/css_browser_selector/

Available Browser Codes [browser]:

ie - Internet Explorer (All versions)
ie8 - Internet Explorer 8.x
ie7 - Internet Explorer 7.x
ie6 - Internet Explorer 6.x
ie5 - Internet Explorer 5.x
gecko - Mozilla, Firefox (all versions), Camino
ff2 - Firefox 2
ff3 - Firefox 3
ff3_5 - Firefox 3.5
ff3_6 - Firefox 3.6 new
opera - Opera (All versions)
opera8 - Opera 8.x
opera9 - Opera 9.x
opera10 - Opera 10.x
konqueror - Konqueror
webkit or safari - Safari, NetNewsWire, OmniWeb, Shiira, Google Chrome
safari3 - Safari 3.x
chrome - Google Chrome
iron - SRWare Iron
like image 35
Nato Boram Avatar answered Sep 24 '22 07:09

Nato Boram