Javascript browser detection (and then if IE activate script)

[MDGM]

Hi all,

I have some script which doesnt work at all in firefox or other browsers, and i was wondering how to make a browser checker script which checked if the user was using IE, and if they are, show the script. If not, write somthing else for example "Go to the gallery page to see our pictures". Im not very good with javascript but am good with html and css. below is a copy of the script which does not work in FF. Thanks!!!

<script language="JavaScript">
<!--
function random_content(){ //function name
var mycontent=new Array() //mycontent=arrey1
mycontent[0]='<a class="randomthumb" target="_blank" href="images/pics/previews/black forna PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/black[/URL] forna thumb.jpg" /></a>'
mycontent[1]='<a class="randomthumb" target="_blank" href="images/pics/previews/black lillies PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/http://grafax.co.uk/newtest/images/pics/thumbnails/black%20lillies%20thumb.jpg[/URL]" />'
mycontent[2]='<a class="randomthumb" target="_blank" href="images/pics/previews/blue shell PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/blue[/URL] shell thumb.jpg" />'
mycontent[3]='<a class="randomthumb" target="_blank" href="images/pics/previews/blue zoom PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/Blue[/URL] Zoom thumb.jpg" />'
mycontent[4]='<a class="randomthumb" target="_blank" href="images/pics/previews/brown abstract PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/brown[/URL] abstract thumb.jpg" />'
mycontent[5]='<a class="randomthumb" target="_blank" href="images/pics/previews/chrome forna PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/chrome[/URL] forna thumb.jpg" />'
mycontent[6]='<a class="randomthumb" target="_blank" href="images/pics/previews/dark dreams PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/dark[/URL] dreams thumb.jpg" />'
mycontent[7]='<a class="randomthumb" target="_blank" href="images/pics/previews/deco drop PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/deco[/URL] drop thumb.jpg" />'
mycontent[8]='<a class="randomthumb" target="_blank" href="images/pics/previews/deco smudge PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/deco[/URL] smudge thumb.jpg" />'
mycontent[9]='<a class="randomthumb" target="_blank" href="images/pics/previews/directional PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/directional[/URL] thumb.jpg" />'
mycontent[10]='<a class="randomthumb" target="_blank" href="images/pics/previews/downward shine PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/downward[/URL] shine thumb.jpg" />'
mycontent[11]='<a class="randomthumb" target="_blank" href="images/pics/previews/falling flower PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/falling[/URL] flower thumb.jpg" />'
mycontent[12]='<a class="randomthumb" target="_blank" href="images/pics/previews/glow frame PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/glow[/URL] frame  thumb.jpg" />'
mycontent[13]='<a class="randomthumb" target="_blank" href="images/pics/previews/glowing metropolis PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/glowing[/URL] metropolis thumb.jpg" />'
mycontent[14]='<a class="randomthumb" target="_blank" href="images/pics/previews/grey forna PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/grey[/URL] forna thumb.jpg" />'
mycontent[15]='<a class="randomthumb" target="_blank" href="images/pics/previews/hippie warp PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/hippie[/URL] warp thumb.jpg" />'
mycontent[16]='<a class="randomthumb" target="_blank" href="images/pics/previews/light beam PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/light[/URL] beam thumb.jpg" />'
mycontent[17]='<a class="randomthumb" target="_blank" href="images/pics/previews/lights PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/lights[/URL] thumb.jpg" />'
mycontent[18]='<a class="randomthumb" target="_blank" href="images/pics/previews/liquid metropolis PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/liquid[/URL] metropolis thumb.jpg" />'
mycontent[19]='<a class="randomthumb" target="_blank" href="images/pics/previews/liquified explosion PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/liquified[/URL] explosion thumb.jpg" />'
mycontent[20]='<a class="randomthumb" target="_blank" href="images/pics/previews/metallic crash PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/metallic[/URL] crash thumb.jpg" />'
mycontent[21]='<a class="randomthumb" target="_blank" href="images/pics/previews/pink shell PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/pink[/URL] shell thumb.jpg" />'
mycontent[22]='<a class="randomthumb" target="_blank" href="images/pics/previews/radius PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/radius[/URL] thumb.jpg" />'
mycontent[23]='<a class="randomthumb" target="_blank" href="images/pics/previews/rose smear PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/rose[/URL] smear thumb.jpg" />'
mycontent[24]='<a class="randomthumb" target="_blank" href="images/pics/previews/shockwave blast PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/shockwave[/URL] blast thumb.jpg" />'
mycontent[25]='<a class="randomthumb" target="_blank" href="images/pics/previews/shockwave focus PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/shockwave[/URL] focus thumb.jpg" />'
mycontent[26]='<a class="randomthumb" target="_blank" href="images/pics/previews/shockwave spotlight PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/shockwave[/URL] spotlight thumb.jpg" />'
mycontent[27]='<a class="randomthumb" target="_blank" href="images/pics/previews/surface PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/surface[/URL] thumb.jpg" />'
mycontent[28]='<a class="randomthumb" target="_blank" href="images/pics/previews/traveling light PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/traveling[/URL] light thumb.jpg" />'
mycontent[29]='<a class="randomthumb" target="_blank" href="images/pics/previews/trilight PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/trilight[/URL] thumb.jpg" />'
mycontent[30]='<a class="randomthumb" target="_blank" href="images/pics/previews/white forna PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/white[/URL] forna thumb.jpg" />'
mycontent[31]='<a class="randomthumb" target="_blank" href="images/pics/previews/yellow shell PREVIEW.jpg"><img src="[URL]http://grafax.co.uk/newtest/images/pics/thumbnails/yellow[/URL] shell thumb.jpg" />'
var num=Math.floor(Math.random()*mycontent.length) //random math
document.write(mycontent[num]) //write randomly chosen picture
}
random_content()
//-->
</script>

(also, if anybody has any idea how to make the script browser friendly please say! Thanks :D)

[iamthwee]

>I have some script which doesnt work at all in firefox or other browsers

Oooh, that sounds bad. What are you tryin to do?

[MattEvans]

Make sure that you call the script when the document has finished loading (that will mean that you will not be able to use document.write()) , otherwise make sure you don't use the XHTML doctype.

The XHTML doctype forbids document.write() because it messes with the output document tree during rendering.(http://www.w3.org/MarkUp/2004/xhtml-faq#docwrite)

If you're not using XHTML (you'll know if your not) it still pays to avoid using hacky Javascript methods to generate HTML elements during rendering. What you're doing (or perhaps the way you're doing it) would be better suited to a server side scripting language.

Personally, I would define a single array, containing only the unique identifier for each thumb and preview pair, for example:

<script language="JavaScript">
<!--
function random_content(prefix){

//build the array
var mycontent=new Array();
mycontent[0]='black forna';
mycontent[1]='black lillies';
mycontent[2]='blue shell';
//.. etc..

//choose the random identifier
var num=Math.floor(Math.random()*mycontent.length);
myname = mycontent[num];

//change the src / href of prefixed attributes according to the chosen identifier 
document.getElementById(prefix + "_hyperlink").href = "images/pics/previews/" + myname + " PREVIEW.jpg";
document.getElementById(prefix + "_image").src = "http://grafax.co.uk/newtest/images/p...umbnails/" + myname + " thumb.jpg";
}
-->
</script>

And then, you can create the object and invoke the randomness using markup as follows:

<body onload="random_content('random1');">
<!--your other markup here-->
<a id="random1_hyperlink" class="randomthumb" target="_blank">
<img id="random1_image" />
</a>
<!--your other markup here-->
</body>

A bit more manageable maybe? Post back if you have problems with that.

[aniseed]

You can check my comments on your other thread.
http://www.daniweb.com/techtalkforums/thread67804.html