Hiding multiple Divs cross-browser problem

zenbob

Greetings, and thanks in advance for considering my problem.

I am working in a basic .htm page, in which I want to close all displayed DIVs with one event. In IE, I find that this works:

Expand|Select|Wrap|Line Numbers

 
function closeAll() {

   var oDiv = new Enumerator(document.body.getElementsByTagName("DIV"));
 
   for(oDiv.moveFirst(); !oDiv.atEnd(); oDiv.moveNext()) {

      if (oDiv.item().style.display == 'inline') {

         oDiv.item().style.display = 'none';

      }

   }

}

However, in Firefox it does not. Please forgive me for not starting with Firefox, I work in an all-IE environment and this is my first foray in some time into the real world of cross-browser coding.

So, I tried the following for cross-browser efficacy:

Expand|Select|Wrap|Line Numbers

 
function closeAll() {

   var oDiv = document.getElementsByTagName("DIV");
 
   for (var i = 0, i < oDiv.length; i++) {

      if (oDiv[i].style.display == 'inline') {

         oDiv[i].style.display = 'none';

      }

   }

}

Now IE tells me an object is expected and FF does nothing at all, and I am clearly not clever enough to find my way. Any help you can provide would be very appreciated.

mrhoo

oDiv[i].style.display == 'inline'

Have you set some of your divs' style.display property to 'inline'?

zenbob

Quote:

Originally Posted by mrhoo

oDiv[i].style.display == 'inline'

Have you set some of your divs' style.display property to 'inline'?

Yes. There are numerous divs on the page, most of which are hidden when the page loads, but there is always at least one div displaying.

The page is a grid of thumbnail images. Clicking on one of the images "opens" the hidden div associated -- there is a larger image and relevant text and content associated with the thumbnail. Clicking on another image should close the first and open the second, etc. However, I wouldn't know which div had been recently opened, so my thought was to close all divs first and then open the requested div.

Something like this:

Expand|Select|Wrap|Line Numbers

<img src="thumbnail_1.jpg" onClick="closeAll(); displayDiv('div_1');">

But, as mentioned, the closeAll() function is defeating me.

Thanks.

acoder

How about checking:

Expand|Select|Wrap|Line Numbers

if (oDiv[i].style.display != 'none')

Dasty

And correct typo:

Expand|Select|Wrap|Line Numbers

for (var i = 0 ; i < oDiv.length; i++)

so "for" wont execute "i < oDiv.length" as init part

acoder

Quote:

Originally Posted by Dasty

And correct typo:

Expand|Select|Wrap|Line Numbers

for (var i = 0 ; i < oDiv.length; i++)

Ha, good spot!

zenbob

Thanks for the feedback. I did try the altered for syntax and fixed the typo. Still get an object expected error on IE and nothin' on FF.

However, in the interim I figured out a fix that does nothing for my knowledge regarding how to close all open divs in a cross-browser way. Since my issue was I didn't really know what div had been opened recently, I decided to approach the problem from that direction.

I created a hidden element on the page and prefilled it with the id for the default open div.

Expand|Select|Wrap|Line Numbers

 
<input type="hidden" name="displayItem" id="displayItem" value="defaultDiv">

Then I wrote this function:

Expand|Select|Wrap|Line Numbers

 
function swapDivs(sDiv) {

    var oDiv = document.getElementById('displayItem').value
 
    document.getElementById(oDiv).style.display = 'none';

    document.getElementById(sDiv).style.display = 'inline';

    document.getElementById('displayItem').value = sDiv

}

Worked pretty nifty, but I discovered that when I refreshed the page the last requested div displayed along with the defaultDiv, so I added this to the onUnload event of the page:

Expand|Select|Wrap|Line Numbers

 
<body onUnload = "document.getElementById('displayItem').value = 'defaultDiv';">

I seem to be set, in terms of being able to move forward. However, I am still curious as to how one might close all open divs in a cross-browser way. If anyone is still willing to guide me, I'd be very pleased to try out your suggestions.

Thanks again.