Wrox Programmer Forums
|
HTML Code Clinic Do you have some HTML code you'd like to share and get suggestions from others for tweaking or improving it? This discussion is the place.
Welcome to the p2p.wrox.com Forums.

You are currently viewing the HTML Code Clinic section of the Wrox Programmer to Programmer discussions. This is a community of software programmers and website developers including Wrox book authors and readers. New member registration was closed in 2019. New posts were shut off and the site was archived into this static format as of October 1, 2020. If you require technical support for a Wrox book please contact http://hub.wiley.com
 
Old July 18th, 2005, 07:41 AM
Registered User
 
Join Date: Apr 2005
Posts: 352
Thanks: 14
Thanked 0 Times in 0 Posts
Send a message via Yahoo to rupen
Default DHTML Menu.

I am using dhtml menu at every page of my ASP project, it works fine the only problem is that it goes behind the combobox control on the same page, I tried using z-order but not working.

Thanks in advance.

 
Old July 18th, 2005, 09:09 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

this should be in a FAQ somewhere. Google for something like "javascript windowed controls z-index".
 
Old July 18th, 2005, 09:35 AM
Registered User
 
Join Date: Apr 2005
Posts: 352
Thanks: 14
Thanked 0 Times in 0 Posts
Send a message via Yahoo to rupen
Default

I have kept combobox in tabale's td tag, trie using z-index = 500 and 230 but not working.



Rupen Anjaria.
We can't avoid problems, but ofcourse can solve it.
 
Old July 18th, 2005, 09:56 AM
Registered User
 
Join Date: Apr 2005
Posts: 352
Thanks: 14
Thanked 0 Times in 0 Posts
Send a message via Yahoo to rupen
Default

Here is an example just copy and paste in notepad and run...
-----------------------------------------------------------------
<html>
<head>
<style>
body{font-family:arial;}
table{font-size:80%;background:black}
a{color:black;text-decoration:none;font:bold}
a:hover{color:#606060}
td.menu{background:lightblue}
table.menu
{
z-index:1;
font-size:100%;
position:absolute;
visibility:hidden;
}
</style>
<script type="text/javascript">
function showmenu(elmnt)
{
document.getElementById(elmnt).style.visibility="v isible"
}
function hidemenu(elmnt)
{
document.getElementById(elmnt).style.visibility="h idden"
}
</script>
</head>

<body>
<h3>Drop down menu</h3>
<table width="100%">
 <tr bgcolor="#FF8080">
  <td onmouseover="showmenu('tutorials')" onmouseout="hidemenu('tutorials')">
   <a href="/default.asp">Tutorials</a><br />
   <table class="menu" id="tutorials" width="120">
   <tr><td class="menu"><a href="/html/default.asp">HTML</a></td></tr>
   <tr><td class="menu"><a href="/xhtml/default.asp">XHTML</a></td></tr>
   <tr><td class="menu"><a href="/css/default.asp">CSS</a></td></tr>
   <tr><td class="menu"><a href="/xml/default.asp">XML</a></td></tr>
   <tr><td class="menu"><a href="/xsl/default.asp">XSL</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('scripting')" onmouseout="hidemenu('scripting')">
   <a href="/default.asp">Scripting</a><br />
   <table class="menu" id="scripting" width="120">
   <tr><td class="menu"><a href="/js/default.asp">JavaScript</a></td></tr>
   <tr><td class="menu"><a href="/vbscript/default.asp">VBScript</a></td></tr>
   <tr><td class="menu"><a href="default.asp">DHTML</a></td></tr>
   <tr><td class="menu"><a href="/asp/default.asp">ASP</a></td></tr>
   <tr><td class="menu"><a href="/ado/default.asp">ADO</a></td></tr>
   </table>
  </td>
  <td onmouseover="showmenu('validation')" onmouseout="hidemenu('validation')">
   <a href="/site/site_validate.asp">Validation</a><br />
   <table class="menu" id="validation" width="120">
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate HTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XHTML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate CSS</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate XML</a></td></tr>
   <tr><td class="menu"><a href="/site/site_validate.asp">Validate WML</a></td></tr>
   </table>
  </td>
 </tr>
</table>
<p><select name="my" style='z-index:-1'><option value="1">x</option></select></body>

</html>
---------------------------------------------------


Rupen Anjaria.
We can't avoid problems, but ofcourse can solve it.
 
Old July 19th, 2005, 03:44 AM
Friend of Wrox
 
Join Date: Jun 2003
Posts: 1,212
Thanks: 0
Thanked 1 Time in 1 Post
Default

Rupen, did you try google like I suggested?

The problem is that combo boxes are windowed controls, which means they are drawn on a different pane to non-windowed controls. The z-index only applies to controls drawn in a common pane, that's why it has no effect on your problem.

As I said before its a common problem. The general solution is to make the combo invisible when showing the menu. There may be other workarounds, but I don't know about them because I try and avoid excessive DHTML things like this.

hth
Phil
 
Old July 20th, 2005, 05:01 AM
Registered User
 
Join Date: Apr 2005
Posts: 352
Thanks: 14
Thanked 0 Times in 0 Posts
Send a message via Yahoo to rupen
Default

Hi,
It is "working fine" as now I am making combo invisible.

Thanks for help.

Rupen Anjaria.
We can't avoid problems, but ofcourse can solve it.





Similar Threads
Thread Thread Starter Forum Replies Last Post
DHTML Menu... rupen HTML Code Clinic 3 January 17th, 2007 06:13 AM
DHTML Treeview deepak.vasudevan Wrox Book Feedback 0 September 2nd, 2005 04:58 AM
javascript menu DHTML? drop-down crmpicco Javascript How-To 6 March 14th, 2005 12:58 PM
Can you use XSLT with DHTML? bekim XSLT 4 June 9th, 2004 11:15 AM
Where's That DHTML forum? Ben Horne Forum and Wrox.com Feedback 2 March 4th, 2004 03:06 PM





Powered by vBulletin®
Copyright ©2000 - 2020, Jelsoft Enterprises Ltd.
Copyright (c) 2020 John Wiley & Sons, Inc.