Hiding multiple Divs cross-browser problem

Collapse
X
Collapse
 
  • Page of 1
  • Time
  • Show
Clear All
new posts
Previous template Next
  • zenbob
    New Member
    • Nov 2007
    • 3
    #1

    Hiding multiple Divs cross-browser problem

    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:

    Code:
    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:

    Code:
    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.
    Tags: None
    • mrhoo
      Contributor
      • Jun 2006
      • 428
      #2
      oDiv[i].style.display == 'inline'

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

        Comment

        • zenbob
          New Member
          • Nov 2007
          • 3
          #3
          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:

          Code:
          <img src="thumbnail_1.jpg" onClick="closeAll(); displayDiv('div_1');">
          But, as mentioned, the closeAll() function is defeating me.

          Thanks.

            Comment

            • acoder
              Recognized Expert MVP
              • Nov 2006
              • 16032
              #4
              How about checking:
              Code:
              if (oDiv[i].style.display != 'none')

                Comment

                • Dasty
                  Recognized Expert New Member
                  • Nov 2007
                  • 101
                  #5
                  And correct typo:

                  Code:
                  for (var i = 0[U] ; [/U] i < oDiv.length; i++)
                  so "for" wont execute "i < oDiv.length" as init part

                    Comment

                    • acoder
                      Recognized Expert MVP
                      • Nov 2006
                      • 16032
                      #6
                      Originally posted by Dasty
                      And correct typo:

                      Code:
                      for (var i = 0[U] ; [/U] i < oDiv.length; i++)
                      Ha, good spot!

                        Comment

                        • zenbob
                          New Member
                          • Nov 2007
                          • 3
                          #7
                          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.

                          Code:
                          <input type="hidden" name="displayItem" id="displayItem" value="defaultDiv">
                          Then I wrote this function:

                          Code:
                          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:

                          Code:
                          <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.

                            Comment

                            • acoder
                              Recognized Expert MVP
                              • Nov 2006
                              • 16032
                              #8
                              Originally posted by 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.
                              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?

                                Comment

                                Previous template Next
                                Working...