By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
460,043 Members | 1,144 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 460,043 IT Pros & Developers. It's quick & easy.

Hiding multiple Divs cross-browser problem

P: 3
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
  1. function closeAll() {
  2.    var oDiv = new Enumerator(document.body.getElementsByTagName("DIV"));
  3.  
  4.    for(oDiv.moveFirst(); !oDiv.atEnd(); oDiv.moveNext()) {
  5.       if (oDiv.item().style.display == 'inline') {
  6.          oDiv.item().style.display = 'none';
  7.       }
  8.    }
  9. }
  10.  
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
  1. function closeAll() {
  2.    var oDiv = document.getElementsByTagName("DIV");
  3.  
  4.    for (var i = 0, i < oDiv.length; i++) {
  5.       if (oDiv[i].style.display == 'inline') {
  6.          oDiv[i].style.display = 'none';
  7.       }
  8.    }
  9. }
  10.  
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.
Nov 28 '07 #1
Share this Question
Share on Google+
7 Replies


100+
P: 428
oDiv[i].style.display == 'inline'

Have you set some of your divs' style.display property to 'inline'?
Nov 29 '07 #2

P: 3
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
  1.  
  2. <img src="thumbnail_1.jpg" onClick="closeAll(); displayDiv('div_1');">
  3.  
  4.  
But, as mentioned, the closeAll() function is defeating me.

Thanks.
Nov 29 '07 #3

acoder
Expert Mod 15k+
P: 16,027
How about checking:
Expand|Select|Wrap|Line Numbers
  1. if (oDiv[i].style.display != 'none')
Nov 29 '07 #4

Dasty
Expert 100+
P: 101
And correct typo:

Expand|Select|Wrap|Line Numbers
  1. for (var i = 0 ;  i < oDiv.length; i++) 
so "for" wont execute "i < oDiv.length" as init part
Nov 29 '07 #5

acoder
Expert Mod 15k+
P: 16,027
And correct typo:

Expand|Select|Wrap|Line Numbers
  1. for (var i = 0 ;  i < oDiv.length; i++) 
Ha, good spot!
Nov 29 '07 #6

P: 3
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
  1. <input type="hidden" name="displayItem" id="displayItem" value="defaultDiv">
  2.  
Then I wrote this function:

Expand|Select|Wrap|Line Numbers
  1. function swapDivs(sDiv) {
  2.     var oDiv = document.getElementById('displayItem').value
  3.  
  4.     document.getElementById(oDiv).style.display = 'none';
  5.     document.getElementById(sDiv).style.display = 'inline';
  6.     document.getElementById('displayItem').value = sDiv
  7. }
  8.  
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
  1. <body onUnload = "document.getElementById('displayItem').value = 'defaultDiv';">
  2.  
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.
Nov 29 '07 #7

acoder
Expert Mod 15k+
P: 16,027
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.
Can you show the divs. Did you try checking that style.display is not equal to "none"? What line do you get the error on in IE?
Nov 30 '07 #8

Post your reply

Sign in to post your reply or Sign up for a free account.