How to Keep Drop-Downs on Top

I recently had a request related to a previous post title Keeping the Drop-Downs on Top asking me how to implement the method that I was showing. I have decided to post a tutorial that explains how to use this method in conjunction with a drop-down menu in order to show just how to keep drop-downs above HTML form select elements.

We will start by adding the addIframe method to a Utils object:

<script type="text/javascript">
var Utils = new Object();
Utils.addIframe = function(id, el)
{
if(document.getElementById(id) == null)
{
var _iframe = document.createElement("iframe");
_iframe.src = 'about:blank';
_iframe.scrolling = 'no';
_iframe.frameborder = '0';
_iframe.id = id;
_iframe.style.position = 'absolute';
_iframe.style.border = "none";
if(el)
{
document.getElementById(el).appendChild(_iframe);
}
else
{
document.body.appendChild(_iframe);
}

}
return document.getElementById(id);
}
</script>


Once we have the object created we can get started with our drop-down menu, this menu will not be fully-functional, as I simply want to show you how to keep it above other elements. We will start by creating the HTML:

<div><a href="#" onmouseover="Menu.show('myiframe', 'menu');" onmouseout="Menu.remove('myiframe', 'menu');">Menu Title</a></div>
<div id="menu" style="display: none;">
<a href="#">Menu option one</a>
<a href="#">Menu option two</a>
</div>

<div class="content">
<select>
<option>An Option</option>
</select>
</div>


Now we have a menu title and two menu options, this will become our drop-down once we add the Menu object that we are calling from the mouseover and mouseout of the title. Below this drop-down code is the HTML select list wrapped in a div named content. Before we create the Menu object we will need to set a few CSS properties for these elements in order to get it all to render properly:

<style type="text/css">
#menu
{
position: absolute;
z-index: 2;
border: #333 1px solid;
}

#menu a
{
display: block;
}

.content
{
position: absolute;
}
</style>


This CSS will set the positions of the menu and the content to absolute so that the drop-down does not push the content over as it would in a relative position. Next we set the z-index of the menu to a higher depth than content and we add a display of block to the menu options in order to get them to stack.

Now that this is down we will create our Menu object and see it all in action. Below is the code:

<script type="text/javascript">
var Menu = new Object();
Menu.show = function(iframeId, menuId)
{
var menu = document.getElementById(menuId);
menu.style.display = '';

var _iframe = Utils.addIframe(iframeId, menu.parentNode.id);
_iframe.style.backgroundColor = '#fff';
_iframe.style.width = menu.offsetWidth +"px";
_iframe.style.height = menu.offsetHeight +"px";
}

Menu.remove = function(iframeId, menuId)
{
var _iframe = document.getElementById(iframeId);
if(_iframe.parentNode != null)
{
_iframe.parentNode.removeChild(_iframe);
}
document.getElementById(menuId).style.display = 'none';
}
</script>


This object has two methods, show and remove, pretty self-explanatory... The show method takes a unique id for the iframe and the id of the drop-down menu that you want to display. It then calls the addIframe method, sets its background color and its width and height relative to the menu in order to keep it hidden behind it. The remove method takes the same two parameters, but removes the iframe from the document.

Labels: , ,

posted by Kris Hadlock on August 12, 2006 | 0 comments | TrackBack

HTML to String via JavaScript

If you ever receive an HTML string as a response from the server and try to write it to the page via JavaScript you'll find that it will not display it as a string. This is because the JavaScript parser is trying to render it instead of simply writing it. In order to work around this issue you can use the following method. Here's an example:

var html = "<body>My Title</body>";
document.write( htmlToString(html) );
function htmlToString(_html)
{
return _html.split('<').join("&lt;").split('>').join("&gt;");
}

Labels:

posted by Kris Hadlock on August 08, 2006 | 0 comments | TrackBack

Designing with Code: Creating a Resizable Interface

I am hosting the Web Design Resource Center on InformIT again this week. My new column covers resizing a web application GUI with CSS and JavaScript. The column focuses on a CSS implementation, then it explains some of the limitations and how to work out the kinks with JavaScript. The column is called Creating a Resizable Interface, it features a sample and source code download. Enjoy.

Labels: , ,

posted by Kris Hadlock on | 0 comments | TrackBack