2 replies [Last post]
Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

I want to change a couple of class styles for IE5 if the window is smaller than a certain size. This is what I've got so far:

	function getBrowserWidth(){
		if (window.innerWidth){
			return window.innerWidth;}	
		else if (document.documentElement && document.documentElement.clientWidth != 0){
			return document.documentElement.clientWidth;	}
		else if (document.body){return document.body.clientWidth;}		
			return 0;
	}

function getElementsByClass(searchClass,node,tag) {
	var classElements = new Array();
	if ( node == null )
		node = document;
	if ( tag == null )
		tag = '*';
	var els = node.getElementsByTagName(tag);
	var elsLen = els.length;
	var pattern = new RegExp("(^|\\s)"+searchClass+"(\\s|$)");
	for (i = 0, j = 0; i < elsLen; i++) {
		if ( pattern.test(els[i].className) ) {
			classElements[j] = els[i];
			j++;
		}
	}
	return classElements;
}

function windowSize(){
	var iWidth = getBrowserWidth();
	var greyouter = getElementsByClassName('grey-outer',document,'div');
	var innerfirst = getElementsByClassName('first',document,'div');
	if (iWidth < 750){
		greyouter.style.width = '27%';
		innerfirst.style.margin-right = '1.5%';
	}
}

function addEvent( obj, type, fn ){ 
	if (obj.addEventListener){ 
   		obj.addEventListener( type, fn, false );
	}
	else if (obj.attachEvent){ 
   		obj["e"+type+fn] = fn; 
   		obj[type+fn] = function(){ obj["e"+type+fn]( window.event ); } 
   		obj.attachEvent( "on"+type, obj[type+fn] ); 
	} 
} 

addEvent(window, 'load', windowSize);
addEvent(window, 'resize', windowSize);

This is cobbled together from these two scripts: http://particletree.com/features/dynamic-resolution-dependent-layouts/ and http://www.dustindiaz.com/getelementsbyclass (still in CSS Naked mode).

Obviously it's not working, and me being as crap as I am with JS, I don't really know why not.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference

Tags:
Tony
Tony's picture
Offline
Moderator
Brisbane
Last seen: 1 week 2 days ago
Brisbane
Timezone: GMT+10
Joined: 2003-03-12
Posts: 5344
Points: 2965

Changing class styles for IE5

Hi Tyssen,
There may be other issues but something that jumped out at me was the function
function getElementsByClass(searchClass,node,tag)
is being called with
var greyouter = getElementsByClassName('grey-outer',document,'div');
Note: "Name"

Hope that helps

Tyssen
Tyssen's picture
Offline
Moderator
Brisbane
Last seen: 7 years 32 weeks ago
Brisbane
Timezone: GMT+10
Joined: 2004-05-01
Posts: 8201
Points: 1386

Changing class styles for IE5

Having the right function name would help :oops: but there must be something else wrong too.

How to get help
Post a link. If you can't post a link, jsFiddle it.
My blog | My older articles | CSS Reference