Solved

DIV Layers Overlap Randomly in IE6

Posted on 2004-08-20
8
498 Views
Last Modified: 2008-02-01
Hi I need to fix a DIV layer overlapping problem. it works fine in Netscape Navigator Gecko, but not in IE 6. In IE6, the DIV layers overlap randomly. Here is the screenshot of an overlapping layer:

http://test.attendeeinteractive.com/shows/1.bmp

While the map is supposed to behave like this:

http://test.attendeeinteractive.com/shows/2.bmp

The page is here:

http://test.attendeeinteractive.com/shows/toolsuite/index.cfm?fuseaction=Locator.DisplaySearchExhibFloor

Inside the CSS file, the DIV class that controls the visibility of the layer is here:

div.rolloverexhib {font-size: 150%; left:300px; position:absolute; top:250px; visibility:hidden; z-index:2; color: #FF0000; background-color: #FFFFFF; border: 1px solid #FF0000;}

Below is the code, can you help find out why the layers overlap randomly in IE6?:

<cftry>
   <cfparam name="Attributes.Popup" type="string" default="No">

   <cfquery  name="GetExhibBooths" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
      SELECT ex_booth, ex_id, image_color, area_shape, area_coordinate, booth_status      
      FROM exhibitor_booths
      WHERE fl_active = 1  
   </cfquery>
     
   
   <cfoutput>
      <script type="text/javascript">
      <!--
            var NN4 = document.layers? true : false;
            var IE4 = document.all? true : false;
            var left;
            var top;

            function ExhibDetail(exid) {
            if (exid > 0) {
               <cfif IsDefined("Session.AdminPriv")>
                  aWindow = window.open("index.cfm?fuseaction=Exhibitors.EditExhibitor&popup=yes&NoLayout=Yes&ExhibitorID=" + exid, "wAISToolSuitePreview", "left=10,top=10,toolbar=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=600,height=700");
               <cfelse>
                        aWindow = window.open("index.cfm?fuseaction=Locator.PreviewExhibitor&popup=yes&NoLayout=Yes&ExhibitorID=" + exid, "wAISToolSuitePreview", "left=10,top=10,toolbar=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=600, height=500");
               </cfif>
                     aWindow.focus();
            }
            else
               alert("This booth is currently available.  Contact us to purchase this booth.");
            }
         
               function getObj(name) {
                 if (document.getElementById) {
                   return document.getElementById(name).style;
                   }
                 else if (document.all) {
                   return document.all[name].style;
                 }
                 else if (document.layers) {
                   return document.layers[name];
                 }
               }             
               
               function ShowLayer(thislayer) {
                     var MyObj = getObj(thislayer);
            MyObj.visibility = "visible";            
               }
               
               function HideLayer(thislayer) {
                     var MyObj = getObj(thislayer);
                     MyObj.visibility="hidden";            
               }

               function setMouseCoordinate(e) {
                     <cfif Browser EQ "Communicator" OR Browser EQ "Netscape6">
                         pxleft = e.pageX;
                         pxtop = e.pageY;
                     <cfelse>
                         pxleft = document.body.scrollLeft + event.clientX
                         pxtop = document.body.scrollTop + event.clientY
                     </cfif>
               }
               
               if (NN4)
                 document.captureEvents(Event.MOUSEMOVE);
                 document.onmousemove = setMouseCoordinate;

            function ExhibRequest(iBoothNo) {
            self.location.href="index.cfm?fuseaction=Communication.EditRequestInfo&RequestInfoType=EXHIBITOR&BoothNo=" + iBoothNo;
            }
         
      //-->
      </script>          
      <!--- Create the image map. --->
      <map id="ExhibFloorPlan" name="ExhibFloorPlan">
         <cfset iOpen = 0>
         <cfloop query="GetExhibBooths">
            <cfset iExhibID = ex_id>
            <cfset iBoothNo = ex_booth>
            <cfset iOpen = iOpen + 1>
            <cfif iExhibID gt 0>              
               <cfquery  name="GetExhibitor" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
                  SELECT ex_id, ex_name
                  FROM exhibitors
                  WHERE ex_id = #iExhibID#
               </cfquery>        
               <cfset sExhibName = GetExhibitor.ex_name>                      
            <cfelse>
               <cfset sExhibName = EXHIBITOR_OPEN_BOOTH>
            </cfif>
            <cfif iExhibID gt 0>
               <area shape="#area_shape#" coords="#area_coordinate#" title="#sExhibName#" alt="#sExhibName#" onclick="javascript:ExhibDetail(#iExhibID#);"  onmouseover="javascript:ShowLayer('layer#iExhibID#')" onmouseout="javascript:HideLayer('layer#iExhibID#')"  />
            <cfelse>
               <cfif Len(sExhibName) gt 0>
                  <area shape="#area_shape#" coords="#area_coordinate#" title="#sExhibName#" alt="#sExhibName#" onclick="javascript:ExhibRequest(#iBoothNo#);" onmouseover="javascript:ShowLayer('layer_#iOpen#')" onmouseout="javascript:HideLayer('layer_#iOpen#')"/>        
               </cfif>
            </cfif>            
         </cfloop>
      </map>                              
      <h2>#SEARCH_EXHIBITORS_FLOOR_PLAN_TITLE#</h2>
      <cfif IsDefined("Attributes.Message")>
         <p class="message">#Attributes.Message#</p>
      </cfif>
         <p>
         Use the exhibit floor to find the desired company.  Once you find a company of interest, double-click
         the image to view a detailed listing for this exhibitor.
         </p>  
      <cfset iOpen = 0>
      <cfloop query="GetExhibBooths">                    
         <cfset iBoothNo = ex_booth>
         <cfset iExhibID = ex_id>
         <cfset iOpen = iOpen + 1>
         <cfif iExhibID gt 0>              
            <cfquery  name="GetExhibitor" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
               SELECT ex_id, ex_name
               FROM exhibitors
               WHERE ex_id = #iExhibID#
            </cfquery>        
            <cfset sExhibName = GetExhibitor.ex_name>                      
         <cfelse>
            <cfset sExhibName = EXHIBITOR_OPEN_BOOTH>
         </cfif>
         
         <cfif iExhibID gt 0>
            <div id="layer#iExhibID#" class="rolloverexhib">      
               <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                    </div>      
         <cfelse>
            <cfif Len(sExhibName) gt 0>
               <div id="layer_#iOpen#" class="rolloverexhib">      
                  <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                  <cfif Len(EXHIBITOR_OPEN_BOOTH_CLICK_HERE) gt 0><br />#EXHIBITOR_OPEN_BOOTH_CLICK_HERE#</cfif>
                       </div>                    
            </cfif>
         </cfif>
      </cfloop>
     
      <img id="ImgFloorPlan" name="ImgFloorPlan" src="images/#EXHIBITOR_FLOOR_PLAN_IMAGE#" alt="Exhibition Floor Plan" usemap="##ExhibFloorPlan" class="floorplan" />          
   </cfoutput>
   
   <cfcatch type="Any">
      <p class="message">Unable to display the requested page at this time.</p>
   </cfcatch>

</cftry>
0
Comment
Question by:wei_chin
  • 4
  • 3
8 Comments
 
LVL 8

Expert Comment

by:trevorhartman
ID: 11856208
it looked right on my IE 6.  shouldn't only one div be displayed in that area at one time?  i don't understand how two would show up at the same time.
0
 

Author Comment

by:wei_chin
ID: 11856342
hi if you click on one of the squares (booths on the exhibit floor), and play around it for a while, then you will encounter this overlapping problem. thats why i said it overlaps randonly, so at first you wont see anything incorrect but after a while you will see what is shown like this:

http://test.attendeeinteractive.com/shows/1.bmp

while you are right, only one div (layer) is supposed to be displayed in that area at a time. my boss told me to write a function to "loop through" the document and "set the visible property of all div elements to False except for the one the mouse is currently hovering over". can this be done? how to write it? i have no clue...can you throw some ideas?
0
 
LVL 14

Accepted Solution

by:
ziffgone earned 125 total points
ID: 11857260
"my boss told me to write a function to "loop through" the document and "set the visible property of all div elements to False except for the one the mouse is currently hovering over". can this be done? how to write it? i have no clue...can you throw some ideas?"...

Not sure how the site works, but you could try this:

First add an "onmouseover" event to the div elements you want to show/hide:

       <cfif iExhibID gt 0>
            <div id="layer#iExhibID#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
               <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                  </div>      
         <cfelse>
            <cfif Len(sExhibName) gt 0>
               <div id="layer_#iOpen#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
                  <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                  <cfif Len(EXHIBITOR_OPEN_BOOTH_CLICK_HERE) gt 0><br />#EXHIBITOR_OPEN_BOOTH_CLICK_HERE#</cfif>
                     </div>  

Then add the hideOthers function to your javascript:

function hideOthers(xDiv){
       var docDivs = document.getElementsByTagName('div');
       
       for(i=0;i<docDivs.length;i++){
             if((docDivs[i].id.indexOf('layer') > -1) && (docDivs[i].id != xDiv)){
                  docDivs[i].style.display = 'none';
             }
       }
}

I've designed it so it will target any div element with the word "layer" anywhere in the id. This is so you can have other div elements that you wish to show all of the time and not have the function effect them. So you may have to add the word "layer" to all of the ids for the div elements you want effected.

Let me know if that works for you, or if there are any bugs to work out of the function.

Regards...
       
0
 

Author Comment

by:wei_chin
ID: 11858599
Hi, Thank you ZiffGone for the kind help! In your post, you said I "may have to add the word "layer" to all of the ids for the div elements [I] want effected". However, in this portion of the code:

         <cfif iExhibID gt 0>
            <div id="layer#iExhibID#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
               <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                    </div>      
         <cfelse>
                   <cfif Len(sExhibName) gt 0>
                  <div id="layer_#iOpen#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
                     <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                     <cfif Len(EXHIBITOR_OPEN_BOOTH_CLICK_HERE) gt 0><br />#EXHIBITOR_OPEN_BOOTH_CLICK_HERE#</cfif>
                    </div>
                  </cfif>              
         </cfif>

Hasn't the word "layer" already been added to the id elements I want affect, or is there any other place I missed?

Also, I changed the code according to your post, problem comes up when I clicked couple of the "booths" -- the area where the booth number is supposed to be shown in red, freezes. the area only shows the booth number etc for the lastest booth I clicked but as I roam my mouse over other booths, the booth number where I just clicked still stays. Would you take a look at my new code and see whats wrong with it? Thanks a million!!!

<!---
Name: dsp_SearchExhibFloor.cfm
Desc:  Displays a map of the exhibit floor attendees can search.
History:
   05.18.2004 - JED - Original Code
To-Do:  
--->

<cftry>
   <cfparam name="Attributes.Popup" type="string" default="No">

   <cfquery  name="GetExhibBooths" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
      SELECT ex_booth, ex_id, image_color, area_shape, area_coordinate, booth_status      
      FROM exhibitor_booths
      WHERE fl_active = 1  
   </cfquery>
     
   
   <cfoutput>
      <script type="text/javascript">
      <!--
            var NN4 = document.layers? true : false;
            var IE4 = document.all? true : false;
            var left;
            var top;

            function ExhibDetail(exid) {
            if (exid > 0) {
               <cfif IsDefined("Session.AdminPriv")>
                  aWindow = window.open("index.cfm?fuseaction=Exhibitors.EditExhibitor&popup=yes&NoLayout=Yes&ExhibitorID=" + exid, "wAISToolSuitePreview", "left=10,top=10,toolbar=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=600,height=700");
               <cfelse>
                        aWindow = window.open("index.cfm?fuseaction=Locator.PreviewExhibitor&popup=yes&NoLayout=Yes&ExhibitorID=" + exid, "wAISToolSuitePreview", "left=10,top=10,toolbar=0,directories=0,status=0,menubar=0,scrollbars=1,resizable=1,width=600, height=500");
               </cfif>
                     aWindow.focus();
            }
            else
               alert("This booth is currently available.  Contact us to purchase this booth.");
            }
         
               function getObj(name) {
                 if (document.getElementById) {
                   return document.getElementById(name).style;
                   }
                 else if (document.all) {
                   return document.all[name].style;
                 }
                   else if (document.layers) {
                   return document.layers[name];
                 }
               }             
               
               function ShowLayer(thislayer) {
                     var MyObj = getObj(thislayer);
            MyObj.visibility = "visible";            
               }
               
               function HideLayer(thislayer) {
                     var MyObj = getObj(thislayer);
                     MyObj.visibility="hidden";            
               }

               function setMouseCoordinate(e) {
                     <cfif Browser EQ "Communicator" OR Browser EQ "Netscape6">
                         pxleft = e.pageX;
                         pxtop = e.pageY;
                     <cfelse>
                         pxleft = document.body.scrollLeft + event.clientX
                         pxtop = document.body.scrollTop + event.clientY
                     </cfif>
               }
               
               if (NN4)
                 document.captureEvents(Event.MOUSEMOVE);
               document.onmousemove = setMouseCoordinate;

            function ExhibRequest(iBoothNo) {
            self.location.href="index.cfm?fuseaction=Communication.EditRequestInfo&RequestInfoType=EXHIBITOR&BoothNo=" + iBoothNo;
            }

            function hideOthers(xDiv){
                   var docDivs = document.getElementsByTagName('div');
                   
                   for(i=0;i<docDivs.length;i++){
                         if((docDivs[i].id.indexOf('layer') > -1) && (docDivs[i].id != xDiv)){
                              docDivs[i].style.display = 'none';
                         }
                   }
            }

         
      //-->
      </script>          
      <!--- Create the image map. --->
      <map id="ExhibFloorPlan" name="ExhibFloorPlan">
         <cfset iOpen = 0>
         <cfloop query="GetExhibBooths">
            <cfset iExhibID = ex_id>
            <cfset iBoothNo = ex_booth>
            <cfset iOpen = iOpen + 1>
            <cfif iExhibID gt 0>              
               <cfquery  name="GetExhibitor" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
                  SELECT ex_id, ex_name
                  FROM exhibitors
                  WHERE ex_id = #iExhibID#
               </cfquery>        
               <cfset sExhibName = GetExhibitor.ex_name>                      
            <cfelse>
               <cfset sExhibName = EXHIBITOR_OPEN_BOOTH>
            </cfif>
            <cfif iExhibID gt 0>
               <area shape="#area_shape#" coords="#area_coordinate#" title="#sExhibName#" alt="#sExhibName#" onclick="javascript:ExhibDetail(#iExhibID#);"  onmouseover="javascript:ShowLayer('layer#iExhibID#')" onmouseout="javascript:HideLayer('layer#iExhibID#')"  />
            <cfelse>
               <cfif Len(sExhibName) gt 0>
                  <area shape="#area_shape#" coords="#area_coordinate#" title="#sExhibName#" alt="#sExhibName#" onclick="javascript:ExhibRequest(#iBoothNo#);" onmouseover="javascript:ShowLayer('layer_#iOpen#')" onmouseout="javascript:HideLayer('layer_#iOpen#')"/>        
               </cfif>
            </cfif>            
         </cfloop>
      </map>                              
      <h2>#SEARCH_EXHIBITORS_FLOOR_PLAN_TITLE#</h2>
      <cfif IsDefined("Attributes.Message")>
         <p class="message">#Attributes.Message#</p>
      </cfif>
         <p>
         Use the exhibit floor to find the desired company.  Once you find a company of interest, double-click
         the image to view a detailed listing for this exhibitor.
         </p>  
      <cfset iOpen = 0>
      <cfloop query="GetExhibBooths">                    
         <cfset iBoothNo = ex_booth>
         <cfset iExhibID = ex_id>
         <cfset iOpen = iOpen + 1>
         <cfif iExhibID gt 0>              
            <cfquery  name="GetExhibitor" datasource=#AI_DATASOURCE# username=#AI_UID# password=#AI_PWD#>
               SELECT ex_id, ex_name
               FROM exhibitors
               WHERE ex_id = #iExhibID#
            </cfquery>        
            <cfset sExhibName = GetExhibitor.ex_name>                      
         <cfelse>
            <cfset sExhibName = EXHIBITOR_OPEN_BOOTH>
         </cfif>
         
         <cfif iExhibID gt 0>
            <div id="layer#iExhibID#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
               <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                    </div>      
         <cfelse>
                   <cfif Len(sExhibName) gt 0>
                  <div id="layer_#iOpen#" class="rolloverexhib" onmouseover="hideOthers(this.id);">      
                     <strong>#sExhibName#</strong>&nbsp;&nbsp;(#iBoothNo#)
                     <cfif Len(EXHIBITOR_OPEN_BOOTH_CLICK_HERE) gt 0><br />#EXHIBITOR_OPEN_BOOTH_CLICK_HERE#</cfif>
                    </div>
                  </cfif>              
         </cfif>
      </cfloop>
     
      <img id="ImgFloorPlan" name="ImgFloorPlan" src="images/#EXHIBITOR_FLOOR_PLAN_IMAGE#" alt="Exhibition Floor Plan" usemap="##ExhibFloorPlan" class="floorplan" />          
   </cfoutput>
   
   <cfcatch type="Any">
      <p class="message">Unable to display the requested page at this time.</p>
   </cfcatch>

</cftry>
0
Highfive Gives IT Their Time Back

Highfive is so simple that setting up every meeting room takes just minutes and every employee will be able to start or join a call from any room with ease. Never be called into a meeting just to get it started again. This is how video conferencing should work!

 
LVL 14

Expert Comment

by:ziffgone
ID: 11861993
Hi wei_chin, sorry it took me a while to get back. Day job...'nough said. To address you questions,

"However, in this portion of the code: ~~ Hasn't the word "layer" already been added to the id elements" -

- Yes it was, no problem here, I just wasn't sure if you had more div elements you wanted effected that may not have had the word "layer" in their id.

"Also, I changed the code according to your post, problem comes up when I clicked couple of the "booths" -- the area where the booth number is supposed to be shown in red, freezes. the area only shows the booth number etc for the lastest booth I clicked but as I roam my mouse over other booths, the booth number where I just clicked still stays. Would you take a look at my new code and see whats wrong with it? Thanks a million!!!" -

- wei_chin, I am in no way familiar with cold fusion programming, I'm sorry. I have no idea on how to test your code above, so I'm flying by the seat of my pants on this one. As far as the freezing instance, let's try this:

function hideAll(){
       var hideDivs = document.getElementsByTagName('div');
       
       for(i=0;i<hideDivs.length;i++){
                  hideDivs[i].style.display = 'none';
       }
}

Then add:     onmouseout="hideAll();"
to your <div> code just like we earlier added the onmouseover function.

I truly hope that helps, but as I have no way to test this, I can't be sure it will, nor can I be sure on what's truly happening.

Let me know if this helps.

Regards...
0
 

Author Comment

by:wei_chin
ID: 11862390
Hi, ZiffGone,

Thank you so much for all the kind help here. I found out the freezing booth information on top is caused by the pop-up window. So I let the main window to refresh automatically when I shut the pop-up windows off, and it works perfectly. The finished page is here:

http://test.attendeeinteractive.com/shows/toolsuite/index.cfm?fuseaction=Locator.DisplaySearchExhibFloor

and thank you so very much for the kind help without it I won't be able to do it.

Wei
0
 
LVL 14

Expert Comment

by:ziffgone
ID: 11866594
No problem wei_chin, it was a pleasure. And to know I've contributed to such a sophisticated site brings a little swelling to my ego. ;)


Take care...

Perry.
0
 

Author Comment

by:wei_chin
ID: 11868999
Hi, Perry,

You are a master of it and I admire you like I admire Michael Phelps... ;) One last question regarding the general programming of the code you wrote for me. Inside the function HideOthres(), the line:

var docDivs = document.getElementsByTagName('div');

Where do I find out this getElementsByTagName( ) and similar method for future references? Is it in a documentation somewhere?

Thank you!

Wei
0

Featured Post

How to run any project with ease

Manage projects of all sizes how you want. Great for personal to-do lists, project milestones, team priorities and launch plans.
- Combine task lists, docs, spreadsheets, and chat in one
- View and edit from mobile/offline
- Cut down on emails

Join & Write a Comment

JavaScript can be used in a browser to change parts of a webpage dynamically. It begins with the following pattern: If condition W is true, do thing X to target Y after event Z. Below are some tips and tricks to help you get started with JavaScript …
Boost your ability to deliver ambitious and competitive web apps by choosing the right JavaScript framework to best suit your project’s needs.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…

746 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now