changing style on class using getElementsByClassName

Question

tserva 0 Newbie Poster

14 Years Ago

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>

javascript

2 Contributors
6 Replies
6K Views
4 Days Discussion Span
Latest Post 14 Years Ago Latest Post by tserva

All 6 Replies

essential 84 Posting Shark

14 Years Ago

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 84 Posting Shark

14 Years Ago

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 — if you want to make it, cross-platform.

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

tserva 0 Newbie Poster · Answer 1 · 2009-04-27T21:23:47+00:00

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

I really appreciate your help on this.

tserva

tserva 0 Newbie Poster · Answer 2 · 2009-04-28T01:23:04+00:00

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?

tserva 0 Newbie Poster · Answer 3 · 2009-04-28T01:33:48+00:00

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);
};

tserva 0 Newbie Poster · Answer 4 · 2009-04-28T22:20:20+00:00

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>

changing style on class using getElementsByClassName

Recommended Answers Collapse Answers

All 6 Replies

Recommended Answers