Wednesday, December 21, 2005

drop down (select) in HTML, DIV, and a little bit more about it.

to pimp my website with a suggestion text box can be very cool... the meaning behind it is to show suggestions based on user's input. As a AJAX.net fan, I downloaded Michales great suggestion box and have used it in combination with some other controls on my page... eh voila!

have you ever tried to make show a div over a drop-down? Microsoft's MSDN answer sounds like that:


Remarks
-The SELECT element is available in HTML and script, as of Internet Explorer 3.0.

-This element is a windowed control and does not support the z-index attribute or zIndex property.

-This element is an inline element.

-This element requires a closing tag.


so now i still have the same problem like before. but since i get used to display div's i did the following try:

My HTML part looks like that:
<div id="myDivStyle" class="divBoxing">some
more
information

<input id="text" maxlength="30" onfocus="myLoveleySelectBox(true);void(0);" onblur="myLoveleySelectBox(false);void(0);" />
<br/>
<select id="myDropDown" style="visibility:visible;">
<option value="a">A
<option value="b">B
</select>


the css for my suggestion can looks like that (div):
<style type="text/css">
.divBoxing
{
border-right: #000000 3px dashed;
border-top: #000000 3px dashed;
border-left: #000000 3px dashed;
border-bottom: #000000 3px dashed;
line-height: 100px;
line-width:140;
visibility:hidden;
position:absolute;
left:12px;
top:36px;
background-color:Teal;
color:White;
}
</style>


and here the last part, a little bit javascript
<script type="text/javascript" language="javascript">
function myLoveleySelectBox(b)
{
var l = document.getElementById("myDivStyle");
l.style.visibility = b ? "visible" : "hidden";

var l = document.getElementById("myDropDown");
l.style.visibility = !b ? "visible" : "hidden";
}
</script>


enjoy it!

Sample page available at: DivAndDropDown.htm

No comments:

Shared Cache - .Net Caching made easy

All information about Shared Cache is available here: http://www.sharedcache.com/. Its free and easy to use, we provide all sources at codeplex.

Facebook Badge