?
Solved

Problem with Z-Index

Posted on 2000-03-16
17
Medium Priority
?
1,351 Views
Last Modified: 2008-02-01
I have two layers, both contains two different tables. The first one actually holds the Menu Bar and it shows/hides different layers on "MouseOver/MouseOut". The Second Layer is at the bottom of the first Layer and it contains Activex Controls.

The problem is when the user bring the mouse on the top layer which in turns shows the Drop down menu.... the layer for drop down menu always comes behind the layer which contains activex control.That means the whole drop down menu is hidden behind the activex control. If I remove the activex control and put something else, it works fine.

Please help
Thanks
0
Comment
Question by:agarwal_rahul
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 5
  • 5
  • 3
  • +2
17 Comments
 
LVL 7

Expert Comment

by:nettrom
ID: 2627092
isn't the ActiveX control a plugin, meaning that it's always put on top of all other content, and therefore what you're trying to do cannot be done?

IIRC the same problem exists when you want to put content on top of say  Flash/Shockwave content.  you can't. :(
0
 
LVL 4

Author Comment

by:agarwal_rahul
ID: 2627252
so isnt there any solution, workaround ???
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2627316
This is interesting. Normally form fields get the highest zindex - so not you have found a workaround for that problem ;-)

Michel
0
Get real performance insights from real users

Key features:
- Total Pages Views and Load times
- Top Pages Viewed and Load Times
- Real Time Site Page Build Performance
- Users’ Browser and Platform Performance
- Geographic User Breakdown
- And more

 
LVL 19

Expert Comment

by:DreamMaster
ID: 2627319
no there's no solution, but it doesn't have to do with plugin's it has to do with objects, any object will be shown on top of other layers, no matter how high the z-index.

This goes for:

-Form fields (textbox, checkbox, texterea.etc..)
-Flash (like nettrom said)
-Active-X Controls
-Java Applets
-Quicktime stuff
-and there are more..

Max Davidse
The Kitchen Interactive
http://www.thekitchen.nl

Hope this helps!
0
 
LVL 10

Accepted Solution

by:
kollegov earned 1500 total points
ID: 2627489
Dream Master right, they always goes on-top, meanwhile some solution exists... Not quite elegant but....

put your control in
<DIV ID="ControlDiv" style="visibility:visible">
</div>

when you need to show pull down svitch visibility of this div to
hidden.

Here is function which will help you to switch div visibility by div ID
in browser independent manner..


function divVisibility(id,vis)
 {var chipname=allChips[id].named;
  if(document.all)
   {dddd=document.all[id].style;
    dddd.visibility = vis ? "visible":"hidden";
   }
  if(document.layers)
   {dddd=document[id];
    dddd.visibility = vis ? "show":"hide";
   }
 }

In case your pull-down covers control only partitionly, users can  notice that control was totally hidden, but in case must covers control completely, they even wouldn't notice this.  
One more alternative solution can be clipping of covered region , but in most cases this will act as control resizing to clipped size. Some controls in this case can hide completely themselves, instead of clipping.

0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2627565
kollegov > that is not the complete solution (and thanks for saying i'm right!) the problem would remain that the place that the control used would still be there, and it would still not allow anything to be placed over it. (i'm pretty sure of that)
What could be done however is not only make the div hidden...but also change it's height to "0"

Max.
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2627638
max&max strike again ;-)

Michel
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2627646
max&max??

what do You mean Michel?
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2627663
DreamMaster, this solution of course incomplete, as I mentioned in case of partitial overlap, all component will be hidden, instead of it's part.

But I previously tested this with
choice component, and hiding of div with choice work fine. hidden DIV with choice don't overlap divs above.
Actually Choice is the same kind of component, so we can hope other components will have the same behaviour.

Virtual_Max
0
 
LVL 75

Expert Comment

by:Michel Plungjan
ID: 2627686
Max Davidse & Max Kollegov

Michel
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2627719
oh ok...didn't know his name was Max too...welcome fellow Max....
0
 
LVL 19

Expert Comment

by:DreamMaster
ID: 2627729
oh and thanks for telling us we strike....lol...
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2631106
Opsss, I posted code, I got from my old script, it have specific line of my own code...
This one would be better:

function divVisibility(id,vis)
{if(document.all) {
   dddd=document.all[id].style;
   dddd.visibility = vis ? "visible":"hidden";
 }
 if(document.layers){
     dddd=document[id];
     dddd.visibility = vis ? "show":"hide";
 }
}
0
 
LVL 10

Expert Comment

by:kollegov
ID: 2631145
Complete example:
-------------------
<script>
function divVisibility(id,vis)
 {var dddd;
  if(document.all)
   {dddd=document.all[id].style;
    dddd.visibility = vis ? "visible" : "hidden";
   }
  if(document.layers)
   {dddd=document.layers[id];
    dddd.visibility = vis ? "show" : "hide";
   }
 }
</script>

<a href="javascript:void(0)"
onMouseOver="divVisibility('popup',true); divVisibility('eyesore',false); "
onMouseOut="divVisibility('popup',false); divVisibility('eyesore',true); ">
Try this</a>

<div id="popup"
 style="position:absolute;top:100;left:100;visibility:hidden; z-Index:2;">
 this is popup div<br>
 which goes over 'eyesore' one
</div>

<div id="eyesore"
 style="position:absolute;top:100;left:100;visibility:visible;z-Index:1;">
'eyesore' div
  <form>
    <select>
      <option>aaaaaaaaa
      <option>bbbbbbbbb
    </select>
  </form>
</div>
-----------------------

Tested with mie5+,  NN4.61 (win 32)
0
 
LVL 4

Author Comment

by:agarwal_rahul
ID: 2632293
Hi All,

Thanks a lot for helping me out.

Kollegov, I have to come back on ur answer.

I think hiding and showing the activex control is not a good solution as the users will be taking action using menus based on the information available in the activex controls. I think resizing will be a better solution.

Thanks
Rahul

0
 
LVL 4

Author Comment

by:agarwal_rahul
ID: 2632294
Hi All,

thanks everyone for helping me out...

Kollegov,

Hiding the controls is the not the solution as the users will be taking action using menus based on information available in the controls, so I have to think about it. I think the more better option will be to resize the control.

However, I will get back to u on ur answer.

Thanks
Rahul

0
 
LVL 10

Expert Comment

by:kollegov
ID: 2640461
When I did the similar thing I hide
control when menu expanded and show it back when menu collapsed.
In my case expanded menu covered select
completely, so users even don't notice
the field is temporary hidden.
0

Featured Post

Technology Partners: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Article by: DanRollins
This article describes a JavaScript program that creates a maze made of hexagonal cells.  In Part 2 (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/A_7850-Hex-Maze-Part-2.html), we'll extend the program by adding a depth-…
This article will give core knowledge of JavaScript and will head in to your first JavaScript program. I am Durvesh Naik and I am here to deal with this series of JavaScript. I will teach you JavaScript in part wise , as its quite boring to read big…
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…
Suggested Courses

777 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