Optimizing JavaScript for use in IE

Hello everyone. Its is my understanding that IE doesn’t not support/like “getElementByClassName”. Currently I have a script that works very well in all browsers except IE. I have found some work around but I’m having trouble figuring out how to adapt my script to work in both “good” and “bad” browsers.

Basically this script is for pages that list products in a shopping area. There is a div with the class “listview” that contains extra info for products that we don’t want visible. When you click on the “view details” button it calls this script, cycles through all the “listview” divs to make sure they are all off and then turns on the one associated with the link that called the function. It works really well except for IE.

Unfortunately I cannot link to a live example as the site is not live and protected until its ready to go.

I would appreciate any tips or help on tweaking this so that it works in IE.

I have been sourcing this post:
http://www.webdeveloper.com/forum/showpost.php?p=938521&postcount=3


/* SHOPP DETAILS HIDE & REVEAL */

var prdctON = "null";

function toggleDetails(PRDCT){

	if(PRDCT != prdctON){
	
		var arr = document.getElementsByClassName('listview');
		for (i = 0; i < arr.length; i++) {
		   arr[i].style.display = 'none' ;
		}
	}
	
	// toggle	
	var el = document.getElementById(PRDCT + '-details');
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}	

	prdctON = PRDCT;

}

You can google for getElementByClassName to see user created substitutions.

For example, here is a getElementsByClassName from http://www.codingforums.com/archive/index.php/t-154727.html that tests quite well.

My only modification is to change \\b to (^|\\s) and (\\s|$) so that minus-signs within class names won’t trip it up.


if (!document.getElementsByClassName) {
    document.getElementsByClassName = function (cn) {
        var rx = new RegExp("(^|\\\\s)" + cn + "(\\\\s|$)"),
            allT = document.getElementsByTagName("*"),
            allCN = [],
            i = 0,
            a;
        while (a = allT[i++]) {
            if (a.className && a.className.indexOf(cn) + 1) {
                if (a.className===cn) {
                    allCN[allCN.length] = a;
                    continue;
                }
                rx.test(a.className) ? (allCN[allCN.length] = a) : 0;
            }
        }
        return allCN;
    }
}

Thanks ‘crmalibu’ for the reply. Unfortunately searching for ‘getElementsByClassName’ doesn’t work on the SitePoint site. It says the term is too common.

I found a solution although I can’t promise it works 100% with IE6.


/* SHOPP DETAILS HIDE & REVEAL */
// This code is for non-IE browsers

var prdctON = "null";

function toggleDetails(PRDCT){

 if(document.getElementsByClassName){
	if(PRDCT != prdctON){
	
		var arr = document.getElementsByClassName('listview');
		for (i = 0; i < arr.length; i++) {
		   arr[i].style.display = 'none' ;
		}
	}
	
	// toggle	
	var el = document.getElementById(PRDCT + '-details');
	if ( el.style.display != 'none' ) {
		el.style.display = 'none';
	}
	else {
		el.style.display = '';
	}	

	prdctON = PRDCT;
	
      } else {
//This code is for IE 
		i = 0;
		d = document.getElementsByTagName("div");
		while (element = d[i++]) {
		if (element.className == "listview") {
			   d[i].style.display = 'none' ;
			}
		}
		
		// toggle	
		var el = document.getElementById(PRDCT + '-details');
		if ( el.style.display != 'none' ) {
			el.style.display = 'none';
		}
		else {
			el.style.display = '';
		}	
	}
	

}