[RESOLVED] Javascript is not detecting the "display" setting

[Krik]

Well this has me stumped. I hope this isn't to complicated to follow.

First here's the code (modified to show the problem only and keep it short)

function GetCurrentObj() {

var alldivs = document.body.getElementsByTagName('div');

for (var d = 0; d < alldivs.length; d++) {

	if ((alldivs[d].getAttribute('data-type') == 'content') && (alldivs[d].style.display != 'none')) {

		alert(alldivs[d].style.display);

		var currentobj = alldivs[d].getAttribute('id');
	}
}

return currentobj;
}

As you can tell by the code, I am trying to find the div that is currently being displayed. It then returns the currently displayed div where another function then makes a new array, in a global array, with the same name as the div. This functions has to figure out what div is displayed so other functions know where to store settings for tabs/divs or where to retrieve settings upon a return to the tab/div.

If you haven't guessed this system is for handling large sets of data, and this function is for several pages. So it has to figure out on its own which div is currently being displayed, without any external input.

The problem only occurs when the page first loads, that function can not see what div has a display != 'none' (I have also tried display == 'block', display == 'static', ect) . If I run this function that alert (which is there for debugging) will give me a blank alert for each div that has a "data-type" attribute value of "content" in the page.

All the tabs but the primary tab have their "display" set to "none" and to be sure I have checked the other divs "display" settings using firebug.

Now once I click a tab it all works fine, I can even return to the first tab and have it work fine. It is just after the page is loaded this function can't tell which div is currently visible.

Any thoughts?

[Krik]

Hmm, interesting experiment.

I replaced my alert with this is in my previous code sample.

var allstyle = '';
	for(x in alldivs[d].style) {
		allstyle += alldivs[d].style[x];
	}
	alert(allstyle);

I figured if style is an object I can handle it like an array and see what is in the "style" object. And it output some of the functions from the javascript engine.

But by running that I noticed it also finds inline CSS properties so by adding "display: none;" to the inline style it works. But I prefer not having style inline.

So I am still looking for a solution if anyone knows of one.

[johanafm]

You are moving into some troubles here if you need support for IE, but I believe this function should do the trick. It gives you a style object for the element's computed style (based off both CSS and inline style attribute).

// oElm is the element you want to check
// pseudo is for any pseudoclass such as :active and :focus
function getPortableComputedStyle(oElm, pseudo){
	var strValue = "";
	// standard
	if (oElm.getComputedStyle)
		return oElm.getComputedStyle(pseudo);
	// others
	if(document.defaultView && document.defaultView.getComputedStyle){
		return document.defaultView.getComputedStyle(oElm, pseudo);
	}
	// ie
	else if(oElm.currentStyle){
		return oElm.currentStyle;
	}
}

The style object's properties can be access with style['attribute']

[Krik]

I will have to play around with that.

Unfortunately, the project is for a client that uses only IE, they wouldn't even know that there are other browsers options. But that code gives me an idea on a different direction that I can pursue that I hadn't thought about.

I'll let you know how it works out. Thanks

[cretaceous]

its not because the first run of code is happening on page load, whereas it should run after the page load is finished, is it?

[Krik]

No cretaceous, it is a sub function. It is only runs if another function requests it. And all those function only run on a user event; tab click, setting changes, ect.

[Krik]

Here is the solution I went with

function GetStyle(elm, cssproperty){
	if (elm.currentStyle){
		return elm.currentStyle[cssproperty];
	}
	else if (document.defaultView && document.defaultView.getComputedStyle) {
		return document.defaultView.getComputedStyle(elm, "")[cssproperty];
	}
	else {
		return elm.style[cssproperty];
	}
}

I must admit for the complexity of the issue I am glad the solution worked out to be a nice clean piece of code.

Thanks johanafm pointing me in the right direction