This does not work. Not sure what I am missing. Basically I want to toggle the none/block value in the style on the span class below based on the browser detection script.
Thanks in advance

var myBrowserVersion;
       myBrowserVersion = parseInt(BrowserDetect.version);
      //Detect if visitor is using Firefox 2 (less that version 3)
      //If so just use a mailto method to send email.
      //Otherwise use the abuse form
 
  

      if (BrowserDetect.browser == "Firefox"){ 
           //BrowserDetect.browser == "Firefox" && myBrowserVersion < 3
         var badBrowser = getElementsByClassName("bad-Browser"); 
         for(i = 0; i < badBrowser.length; i++) {
            badBrowser.style.display = "none";
            goodBrowser.style.display = "block";
            }

   }else {
        var goodBrowser = getElementsByClassName("good-Browser"); 
        for(i = 0; i < goodBrowser.length; i++) {
           badBrowser.style.display = "block";
           goodBrowser.style.display = "none";
           }

    }
<span class="abuse bad-Browser" style="display: none;"><a href="mailto:me@myemail.com?Subject=Report%20Comment%20Abuse:%20${cms.content.title}-${cms.content.id}&Body=Name:%20$util.encode.html($comment.name)%20Date:%20$comment.commentDate%20Comment:%20$util.encode.html($comment.comment)%20CommentID:%20$comment.commentID"class="timestamp">Report abuse</a></span>
            <span class="abuse good-Browser" style="display: block;"><a href="javascript:showdiv('comment${comment.commentID}Menu');" class="timestamp">Report Abuse</a> </span>

You may appy the following codes in your document(s). And it seems that you are working with Firefox here, so this code will only work if you are using any version of ff browser's--the rest will be ignored.

<?xml version="1.0" encoding="utf-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>
<script type="text/javascript">
// <![CDATA[

var badBrowser, goodBrowser, i, version, firefox, myBrowserVersion;

myBrowserVersion = /Firefox[\s\/](\d+\.\d+)/;

firefox = function() {
   if ( myBrowserVersion.test( navigator.userAgent )) {
   version = new Number( RegExp.$1 ); 
   badBrowser = ( version < 3 ) ? document.getElementsByTagName("span")["bad-Browser"] : document.getElementsByClassName("abuse bad-Browser");
   goodBrowser = ( version < 3 ) ? document.getElementsByTagName("span")["good-Browser"] : document.getElementsByClassName("abuse good-Browser");

// What about this for Loop?
// Where do you need it?
// I've currently set this off, since it's not necessary for the whole block.       for ( i = 0; i < badBrowser.length; i++ ) {
         if ( version < 3 ) { badBrowser.style.display = "none";
         goodBrowser.style.display = "block";
         } else {
badBrowser.style.display = "block";
         goodBrowser.style.display = "none";
         }
  //  }
   } return false;
};

window.onload = firefox;

// ]]>
</script>
</head>
<body>
<div id="content">
<span id="bad-Browser" class="abuse bad-Browser" style="display : none;"><a href="mailto:me@myemail.com?Subject=Report%20Comment%20Abuse:%20${cms.content.title}-${cms.content.id}&amp;Body=Name:%20$util.encode.html($comment.name)%20Date:%20comment.commentDate%20Comment:%20$util.encode.html($comment.comment)%20CommentID:%20$comment.commentID" class="timestamp">Report Abuse</a></span>
<span id="good-Browser" class="abuse good-Browser" style="display : block;"><a href="javascript:showdiv('comment${comment.commentID}Menu');"  class="timestamp">Report Abuse</a></span>
</div>
</body>
</html>

essential! Thank you. You make it look so easy. I have a lot to learn.

I really appreciate your help on this.

tserva

I am afraid I spoke too soon. I am getting this error: badBrowser.style is undefined
and I can not get the bad-browser to turn on and the other off by changing the criteria.
Any ideas?

Also, I forgot to include this JS which handles the BrowserDetect (first code block) and the getElementsByClassName (second code block). Lame -sorry

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = new RegExp("\\b" + ((tag !== "*")? tag : "[a-z]+") + "\\b", "i"),
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = "",
				xhtmlNamespace = "http://www.w3.org/1999/xhtml",
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
			}
			try	{
				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = [],
				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};
var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = new RegExp("\\b" + ((tag !== "*")? tag : "[a-z]+") + "\\b", "i"),
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = "",
				xhtmlNamespace = "http://www.w3.org/1999/xhtml",
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
			}
			try	{
				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = [],
				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};

Wow, That's quite a block! So how's everything now? And regarding about the first issue, the script the i've provided, will only work in FF based browsers, you'll have extend the block &#8212; if you want to make it, cross-platform.

This was my final solution.

<?xml version="1.0" encoding="utf-8"?><!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"   "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="Content-Style-Type" content="text/css" />
<meta http-equiv="Content-Script-Type" content="text/javascript" />
<title>JavaScript Demo</title>

<script type="text/javascript">
// <![CDATA[ 
// This detects the browser
// This and the next bit of JS is part of exiting code our site pulls anyway.
// It is not all needed for this page, but since I have it, I want to use it.
//I seperated them out for clarity

var BrowserDetect = {
	init: function () {
		this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
		this.version = this.searchVersion(navigator.userAgent)
			|| this.searchVersion(navigator.appVersion)
			|| "an unknown version";
		this.OS = this.searchString(this.dataOS) || "an unknown OS";
	},
	searchString: function (data) {
		for (var i=0;i<data.length;i++)	{
			var dataString = data[i].string;
			var dataProp = data[i].prop;
			this.versionSearchString = data[i].versionSearch || data[i].identity;
			if (dataString) {
				if (dataString.indexOf(data[i].subString) != -1)
					return data[i].identity;
			}
			else if (dataProp)
				return data[i].identity;
		}
	},
	searchVersion: function (dataString) {
		var index = dataString.indexOf(this.versionSearchString);
		if (index == -1) return;
		return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
	},
	dataBrowser: [
		{
			string: navigator.userAgent,
			subString: "Chrome",
			identity: "Chrome"
		},
		{ 	string: navigator.userAgent,
			subString: "OmniWeb",
			versionSearch: "OmniWeb/",
			identity: "OmniWeb"
		},
		{
			string: navigator.vendor,
			subString: "Apple",
			identity: "Safari",
			versionSearch: "Version"
		},
		{
			prop: window.opera,
			identity: "Opera"
		},
		{
			string: navigator.vendor,
			subString: "iCab",
			identity: "iCab"
		},
		{
			string: navigator.vendor,
			subString: "KDE",
			identity: "Konqueror"
		},
		{
			string: navigator.userAgent,
			subString: "Firefox",
			identity: "Firefox"
		},
		{
			string: navigator.vendor,
			subString: "Camino",
			identity: "Camino"
		},
		{		// for newer Netscapes (6+)
			string: navigator.userAgent,
			subString: "Netscape",
			identity: "Netscape"
		},
		{
			string: navigator.userAgent,
			subString: "MSIE",
			identity: "Explorer",
			versionSearch: "MSIE"
		},
		{
			string: navigator.userAgent,
			subString: "Gecko",
			identity: "Mozilla",
			versionSearch: "rv"
		},
		{ 		// for older Netscapes (4-)
			string: navigator.userAgent,
			subString: "Mozilla",
			identity: "Netscape",
			versionSearch: "Mozilla"
		}
	],
	dataOS : [
		{
			string: navigator.platform,
			subString: "Win",
			identity: "Windows"
		},
		{
			string: navigator.platform,
			subString: "Mac",
			identity: "Mac"
		},
		{
			   string: navigator.userAgent,
			   subString: "iPhone",
			   identity: "iPhone/iPod"
	    },
		{
			string: navigator.platform,
			subString: "Linux",
			identity: "Linux"
		}
	]

};
BrowserDetect.init();

// ]]>
</script>

<script type="text/javascript">
// <![CDATA[ 
// This parses the classname 
// This and the last bit of JS is part of exiting code our site pulls anyway.
// It is not all needed for this page, but since I have it, I want to use it.
//I seperated them out for clarity

var getElementsByClassName = function (className, tag, elm){
	if (document.getElementsByClassName) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var elements = elm.getElementsByClassName(className),
				nodeName = new RegExp("\\b" + ((tag !== "*")? tag : "[a-z]+") + "\\b", "i"),
				returnElements = [],
				current;
			for(var i=0, il=elements.length; i<il; i+=1){
				current = elements[i];
				if(nodeName.test(current.nodeName)) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	else if (document.evaluate) {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = "",
				xhtmlNamespace = "http://www.w3.org/1999/xhtml",
				namespaceResolver = (document.documentElement.namespaceURI === xhtmlNamespace)? xhtmlNamespace : null,
				returnElements = [],
				elements,
				node;
			for(var j=0, jl=classes.length; j<jl; j+=1){
				classesToCheck += "[contains(concat(' ', @class, ' '), ' " + classes[j] + " ')]";
			}
			try	{
				elements = document.evaluate(".//" + tag + classesToCheck, elm, namespaceResolver, 0, null);
			}
			catch (e) {
				elements = document.evaluate(".//" + tag + classesToCheck, elm, null, 0, null);
			}
			while ((node = elements.iterateNext())) {
				returnElements.push(node);
			}
			return returnElements;
		};
	}
	else {
		getElementsByClassName = function (className, tag, elm) {
			tag = tag || "*";
			elm = elm || document;
			var classes = className.split(" "),
				classesToCheck = [],
				elements = (tag === "*" && elm.all)? elm.all : elm.getElementsByTagName(tag),
				current,
				returnElements = [],
				match;
			for(var k=0, kl=classes.length; k<kl; k+=1){
				classesToCheck.push(new RegExp("(^|\\s)" + classes[k] + "(\\s|$)"));
			}
			for(var l=0, ll=elements.length; l<ll; l+=1){
				current = elements[l];
				match = false;
				for(var m=0, ml=classesToCheck.length; m<ml; m+=1){
					match = classesToCheck[m].test(current.className);
					if (!match) {
						break;
					}
				}
				if (match) {
					returnElements.push(current);
				}
			}
			return returnElements;
		};
	}
	return getElementsByClassName(className, tag, elm);
};

// ]]>
</script>


<STYLE type="text/css">
	   .bad-Browser, .good-Browser {display:block;}  
	
</style>
</head>
<body>
      <div id="content">
      <div class="abuse bad-Browser" ><a href="mailto:me@myemail.com?Subject=Report%20Comment%20Abuse:%20${cms.content.title}-${cms.content.id}&amp;Body=Name:%20$util.encode.html($comment.name)%20Date:%20comment.commentDate%20Comment:%20$util.encode.html($comment.comment)%20CommentID:%20$comment.commentID" class="timestamp">Report Abuse</a></div>
      <div class="abuse good-Browser" ><a href="javascript:showdiv('comment${comment.commentID}Menu');"  class="timestamp">Report Abuse</a></div>
      </div>








<script type="text/javascript">
// <![CDATA[ 

// This needs to come at the end of the page
      var myBrowserVersion;
       myBrowserVersion = parseInt(BrowserDetect.version);
      //Detect if visitor is using Firefox 2 (less that version 3)
      //If so just use a mailto method to send email.
      //Otherwise use the abuse form
 var badBrowser = getElementsByClassName("bad-Browser");  
 var goodBrowser = getElementsByClassName("good-Browser"); 
    alert(BrowserDetect.browser);
      if (BrowserDetect.browser == "Firefox" && myBrowserVersion < 3){  
           
         				for (i=0;i<badBrowser.length;i++) {
         				badBrowser[i].style.display = "none";
         				};
         				for (i=0;i<goodBrowser.length;i++) {
         				goodBrowser[i].style.display = "block";
         				};

         //badBrowser.style.display = "none";
         //goodBrowser.style.display = "block";
   }else {
   	         for (i=0;i<goodBrowser.length;i++) {
         				badBrowser[i].style.display = "block";
         				};
         				for (i=0;i<badBrowser.length;i++) {
         				goodBrowser[i].style.display = "none";
         				};
 
          // badBrowser.style.display = "block";
          //goodBrowser.style.display = "none";
    }
    
// ]]>
</script>



</body>
</html>
This article has been dead for over six months. Start a new discussion instead.