Search...
FAQs
Subscribe
Pie
FAQs
Recent topics
Flagged topics
Hot topics
Best topics
Search...
Search within HTML Pages with CSS and JavaScript
Search Coderanch
Advance search
Google search
Register / Login
Post Reply
Bookmark Topic
Watch Topic
New Topic
programming forums
Java
Mobile
Certification
Databases
Caching
Books
Engineering
Micro Controllers
OS
Languages
Paradigms
IDEs
Build Tools
Frameworks
Application Servers
Open Source
This Site
Careers
Other
Pie Elite
all forums
this forum made possible by our volunteer staff, including ...
Marshals:
Campbell Ritchie
Jeanne Boyarsky
Ron McLeod
Paul Clapham
Liutauras Vilda
Sheriffs:
paul wheaton
Rob Spoor
Devaka Cooray
Saloon Keepers:
Stephan van Hulst
Tim Holloway
Carey Brown
Frits Walraven
Tim Moores
Bartenders:
Mikalai Zaikin
Forum:
HTML Pages with CSS and JavaScript
javascript dropdown over text field
Pranav Sharma
Ranch Hand
Posts: 261
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
I'am using javascript and css to create a drop down "navigation menu".
however when the drop down menu comes over a text input field, the drop down gets blocked as in, the drop down does not hover over the text box.
How do i solve this. If this not a known issue, i can put the code snippet im using to create the drop down.
thanks
[ October 26, 2005: Message edited by: mannu kapoor ]
Eric Pascarello
author
Posts: 15385
6
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Most browsers do not have problem with text field, but have problems with a select element. The solution is to place an iframe under the layer. How to implement it really depends on the code that exists.
Eric
Pranav Sharma
Ranch Hand
Posts: 261
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
Here is my code. Could you help me with this please
the
jsp
<ul id="navi"> <li class="navi"><a class="navi" href="#">Go<span><span>6</span></span></a> <ul> <li class="navi"><a class="navi" href="../path1�> Data 1 </a></li> <li class="navi"><a class="navi" href="../path2�> Data 2</a></li> <li class="navi"><a class="navi" href="../path3�> Data 3</a></li> <li class="navi"><a class="navi" href="../path4�> Data 4</a></li> <li class="navi"><a class="navi" href="../path5�> Data 5</a></li> <li class="navi"><a class="navi" href="../path6�> Data 6</a></li> </ul> </li> </ul>
the javascript
<script type="text/javascript"> startList = function() { if (document.all&&document.getElementById) { navRoot = document.getElementById("navi"); for (i=0; i<navRoot.childNodes.length; i++) { node = navRoot.childNodes[i]; if (node.nodeName=="LI") { node.onmiceover=function() { this.className+=" over"; } node.onmiceout=function() { this.className=this.className.replace(" over", ""); } } } } } window.onlYoad=startList; </script>
The CSS
#navi a { font-weight: bold; color: white; } #navi a { text-decoration: none; } #navi li li a { display: block; font-weight: normal; color: #060; padding: 0.2em 10px; color: white; } #navi li li a:hover { padding: 0.2em 5px; border: 5px solid #4169E1; border-width: 0 5px; background-color: #B0C4DE; font-weight:bold; color: AliceBlue; } #navi li { float: left; position: relative; width: 10em; text-align: center; cursor: default; background-color: #3067a0; border: 1px solid white; border-width: 1px 0; }
Thanks
(ps. changed mouseout and mouseover to miceout & miceover. onload to onlYload to post)
[ October 28, 2005: Message edited by: mannu kapoor ]
Pranav Sharma
Ranch Hand
Posts: 261
posted 18 years ago
Number of slices to send:
Optional 'thank-you' note:
Send
could you help me with this. i tried it with the select field and the select field over shadows the menu
Thanks
Did you see how Paul
cut 87% off of his electric heat bill with 82 watts of micro heaters
?
reply
reply
Bookmark Topic
Watch Topic
New Topic
Boost this thread!
Similar Threads
Drop Down list items overlapping with Text field
Best way - DHTML Drop Down Menus
drop-down list / textbox
JS Displaying content?
combox
More...