Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 3 of 3
  1. #1
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Problem with z-index

    Hello,

    I have a form with some text field and with some comboboxes. I added a tooltip info to the form with the following css style:

    Code:

    #ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}

    The div using this css should be on the top but in case of comboboxes it is under the box. In case of textfield and normal texts it works fine just the combobox hides its area.

    Any idea?

    Thanks!

  • #2
    New Coder
    Join Date
    Mar 2005
    Posts
    48
    Thanks
    2
    Thanked 0 Times in 0 Posts
    Here is the complete demo code I use. It works fine withe Firefox and Opera but not with IE.

    Code:
    <html>
    <head>
    <title>Div demo</title>
    
    <style type="text/css">
    .cssTooltipText {color: #034340;background-color: #bec8d2;}
    .cssHeader {font-weight: bold; color: #FF9900; background-color: #003366;}
    .cssFormBorder {order: 1px solid #006699;padding: 0px;margin: 0px;align: center;}
    #ToolTip{position:absolute; width: 100px; top: 0px; left: 0px; z-index:100; visibility:hidden;}
    </style>
    
    <script language="JavaScript">
    var ie = document.all ? 1 : 0
    var ns = (document.getElementById && !document.all) ? 1 : 0
    
    if(ns){doc = "document.getElementById(\"ToolTip\")"; sty = ""}
    if(ie){doc = "document.all."; sty = ".style"}
    
    var initialize = 0
    var Ex, Ey, topColor, subColor, ContentInfo
    
    if(ie){
    	Ex = "event.x"
    	Ey = "event.y"
    }
    
    function MoveToolTip(layerName, FromTop, FromLeft, e){
    	if(ie){
               eval(doc + layerName + sty + ".top = "  + (eval(FromTop) + document.body.scrollTop))
    	       eval(doc + layerName + sty + ".left = " + (eval(FromLeft) + 15))
               }
    	if(ns){
                  document.getElementById("ToolTip").style.top = FromTop
    	          document.getElementById("ToolTip").style.left = FromLeft + 15
                }
    }
    
    function ReplaceContent(layerName){
    	if(ie){document.all[layerName].innerHTML = ContentInfo}
    	if(ns){document.getElementById("ToolTip").innerHTML = ContentInfo}
    }
    
    function Activate(){initialize=1}
    function deActivate(){initialize=0}
    
    function overhere(e){
        if (!e) var e = window.event;
    	if(initialize){
    	    if (ns) {
            	window.captureEvents(Event.MOUSEMOVE)
             	window.onmousemove=overhere
              	Ex = window.pageXOffset+e.clientX
               	Ey = window.pageYOffset+e.clientY
            }
            MoveToolTip("ToolTip", Ey, Ex, e)
    		document.getElementById("ToolTip").style.visibility = 'visible'
    	}
    	else{
    		MoveToolTip("ToolTip", 0, 0)
    		document.getElementById("ToolTip").style.visibility = 'hidden'
    	}
    }
    
    function EnterContent(layerName, TTitle, TContent){
    
    	ContentInfo = '<table width="150" cellpadding="4" cellspacing="0" class="cssFormBorder">'+
    				  '<tr class="cssHeader"><td>'+TTitle+'</td></tr>'+
    				  '<tr class="cssTooltipText"><td>'+TContent+'</td></tr></table>';
    
    	ReplaceContent(layerName)
    }
    </script>
    
    </head>
    <body class="cssBody" onmousemove="overhere()" >
        <div id="ToolTip"></div>
        
        <form name="demo" method="post" action="demoproc.php">
              <img src="theme/images/info.gif" onMouseover="EnterContent('ToolTip','Testpage','The combobox is over the div. Why?'); Activate();" onMouseout="deActivate()">
              <input name="name" type="text"><br>
              <select name="selector">
                <option>test1</option>
                <option>test2</option>
              </select><br>
              The combobox is over the div. Why?
        </form>
    </body>
    </html>

  • #3
    New Coder
    Join Date
    Jul 2005
    Location
    detroit area
    Posts
    75
    Thanks
    0
    Thanked 0 Times in 0 Posts
    you could try integrating this into yours:

    Code:
    <script>
    <!--
    function showMenu(value){
    if(document.all)
    if(document.all.selectMenuOuter)
    if(document.all.selectMenuOuter.filters){
    if(value){
    document.all.selectMenuOuter.filters["revealTrans"].apply();
    document.all.selectMenuInner.style.display = "none";
    document.all.dropDownMenu.style.display = "block";
    }else{
    document.all.dropDownMenu.style.display = "none";
    document.all.selectMenuInner.style.display = "block";
    }
    }
    }
    //-->
    </script>
    
    <div id="selectMenuOuter" style="filter:revealTrans; height=50; width=100;">
    <select id="selectMenuInner">
    <option>select menu</option>
    <option>select menu</option>
    <option>select menu</option>
    </select>
    </div>
    
    <br>
    <br>
    <a href="javascript:showMenu(true)">show menu</a>
    <a href="javascript:showMenu(false)">hide menu</a>
    
    <div id="dropDownMenu" style="DISPLAY:none;BACKGROUND-COLOR: red; LEFT: 10pt; POSITION: absolute; TOP: 1pt ">
    Menu<br>
    Menu<br>
    Menu<br>
    </div>
    it freezes the select box. it only works on IE, since the problem is only on IE it will work fine. it might only work on IE 5.5+ though im not sure.


  •  

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •