Click here to Skip to main content
Click here to Skip to main content
Go to top

Dropdown list using an IFrame

, 19 Mar 2006
Rate this:
Please Sign up or sign in to vote.
Creating a dropdown list using an IFrame

Introduction

In this article, I am going to talk about an issue in Internet Explorer. If you have ever tried to use DIV tags to create a dropdown menu or list, you will find that the SELECT boxes will cover up your DIVs. This is because the SELECT boxes is derived from Windows controls. The solution is to use an IFRAME to cover up the SELECT boxes.

How it works

You need to test which browser you are currently running. For IE, you can place an IFRAME on top of the SELECT boxes, and it will cover the SELECT Windows control. You can then place a DIV on top of the IFRAME.

var V=parseInt(navigator.appVersion);
var B=(navigator.userAgent+navigator.appName).toLowerCase();
var NS4=(B.indexOf("netscape")!=-1&&V==4);
var IE=(B.indexOf("microsoft")!=-1);
var parentInputBox = null;
var parentImage = null;
var PopupDivId = 'Popup';
var PopupIFrameId = 'PopupIFrame';

document.write("<IFRAME id=PopupIFrame src="javascript:false" " + 
               "frameBorder=0 scrolling=no></IFRAME>");
document.write("<DIV id=Popup></DIV>");

if(!NS4) window.onresize=function()
{
    if(parentInputBox)
    {
        HidePopup();
    }        
}

function iecompattest()
{
    return (document.compatMode && document.compatMode!="BackCompat")? 
            document.documentElement : document.body
}

if(!NS4) document.onmouseup=function(e)
{
    if(parentInputBox)
    {
        var inputBoxPos = new Position(parentInputBox);
        var linkPos = new Position(parentImage);
        var PopupPos = new Position(PopupDivId);        

        var x = PopupPos.GetElementLeft();
        var y = PopupPos.GetElementBottom();

        var x = inputBoxPos.GetElementLeft();
        var y = inputBoxPos.GetElementBottom();

        var top=document.all && !window.opera? 
                iecompattest().scrollTop : window.pageYOffset;
        var windowedge=document.all && !window.opera? 
            iecompattest().scrollTop+iecompattest().clientHeight : 
            window.pageYOffset+window.innerHeight;

        if(y + PopupPos.GetElementHeight() > windowedge)
        {
            var z = inputBoxPos.GetElementTop() - 
                    PopupPos.GetElementHeight();
            if(z >= top)
                y = z;
        }    
                    
        var width = PopupPos.GetElementWidth();
        var height = PopupPos.GetElementHeight();

        var lx = linkPos.GetElementLeft();
        var ly = linkPos.GetElementTop();
        var lwidth = linkPos.GetElementWidth();
        var lheight = linkPos.GetElementHeight();

        var pageX, pageY;
        if (window.event)
        {
            e = window.event;
            pageX = e.clientX;
            pageY = e.clientY;
        }        
        else
        {
            pageX = e.pageX;
            pageY = e.pageY;
        }        
        if(!((pageX >= x && pageY >= y && 
              pageX < x+width && pageY < y+height) || 
             (pageX >= lx && pageY >= ly && 
              pageX < lx+lwidth && pageY < ly+lheight)))
            HidePopup();            
    }        
}

function Position(object)
{
    var m_elem = object;

    this.GetElementWidth = GetElementWidth;
    function GetElementWidth()
    {
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        return parseInt(elem.offsetWidth);
    }

    this.GetElementHeight = GetElementHeight;
    function GetElementHeight()
    {
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        return parseInt(elem.offsetHeight);
    }

    this.GetElementLeft = GetElementLeft;
    function GetElementLeft()
    {
        var x = 0;
        var elem;        
        if(typeof(m_elem) == "object")
            elem = m_elem;
        else
            elem = document.getElementById(m_elem);
            
        while (elem != null)
        {
            x += elem.offsetLeft;
            elem = elem.offsetParent;
        }
        return parseInt(x);
    }
    
    this.GetElementRight = GetElementRight;
    function GetElementRight()
    {
        return GetElementLeft(m_elem) + GetElementWidth(m_elem);
    }

    this.GetElementTop = GetElementTop;
    function GetElementTop()
    {
        var y = 0;
        var elem;
        if(typeof(m_elem) == "object")
        {
            elem = m_elem;
        }
        else
        {
            elem = document.getElementById(m_elem);
        }
        while (elem != null)
        {
            y+= elem.offsetTop;
            elem = elem.offsetParent;
        }
        return parseInt(y);
    }

    this.GetElementBottom = GetElementBottom;
    function GetElementBottom()
    {
        return GetElementTop(m_elem) + GetElementHeight(m_elem);
    }
}

function Popup()
{
    var Desc = 0;

    function SetElementProperty(elemId, property, value)
    {
        var elem = null;

        if(typeof(elemId) == "object")
            elem = elemId;
        else
            elem = document.getElementById(elemId);
            
        if((elem != null) && (elem.style != null))
        {
            elem = elem.style;
            elem[property] = value;
        }
    }

    this.Sort = Sort;
    function Sort(change)
    {
        Desc = change;
        Popup = document.getElementById(PopupDivId);
        Popup.innerHTML = PopupInnerHTML();
    }

    this.SelectFont = SelectFont;
    function SelectFont(value)
    {        
        parentInputBox.value = value; 
        Hide();
        return;
    }


    function PopupInnerHTML()
    {
        var table = "<TABLE cellSpacing=0 cellPadding=3 width=150 border=0>";
        table += "<TBODY><TR class=header>";
        table += "  <TD noWrap align=middle>";
        table += "<A class=linkText href="javascript:Sort(0);">A->Z</A>  ";
        table += "<A class=linkText href="javascript:Sort(1);">Z->A</A>  "; 
        table += "<A class=linkText href="javascript:HidePopup();">Cancel</A>"; 
        table+="</TD></TR><TR><TD>";
        if(Desc == 0) {
          table+="<A class=cursive href='javascript:" + 
                 "SelectFont(\"cursive\");'>cursive</A> "; 
          table+="<A class=fantasy href='javascript:" + 
                 "SelectFont(\"fantasy\");'>fantasy</A> "; 
          table+="<A class=monospace href='javascript:" + 
                 "SelectFont(\"monospace\");'>monospace</A> "; 
          table+="<A class=sans-serif href='javascript:" + 
                 "SelectFont(\"sans-serif\");'>sans-serif</A> "; 
          table+="<A class=serif href='javascript:" + 
                 "SelectFont(\"serif\");'>serif</A>";
        }
        else {
          table+="<A class=serif href='javascript:" + 
                 "SelectFont(\"serif\");'>serif</A> "; 
          table+="<A class=sans-serif href='javascript:" + 
                 "SelectFont(\"sans-serif\");'>sans-serif</A> "; 
          table+="<A class=monospace href='javascript:" + 
                 "SelectFont(\"monospace\");'>monospace</A> "; 
          table+="<A class=fantasy href='javascript:" + 
                 "SelectFont(\"fantasy\");'>fantasy</A> "; 
          table+="<A class=cursive href='javascript:" + 
                 "SelectFont(\"cursive\");'>cursive</A>"; } 
          table+="</TD></TR></TBODY></TABLE>";
        return table;
    }

    this.Show = Show;
    function Show(inputBox, img)
    {
        // If the Popup is visible, hide it.

        if (parentInputBox == inputBox)
        {
            return;
        }            
        else
        {
            parentInputBox = inputBox;
            parentImage = img;
        }            
        

        if(document.getElementById)
        {
            Popup = document.getElementById(PopupDivId);
            Popup.innerHTML = PopupInnerHTML();
            
            // Fixed some Windows and IE problems

            if(B.indexOf("win")!=-1 && IE)
                SetElementProperty(PopupIFrameId, 'display', 'block');
      
            SetElementProperty(PopupDivId, 'display', 'block');
            var inputBoxPos = new Position(parentInputBox);
            var PopupPos = new Position(PopupDivId);

            var x = inputBoxPos.GetElementLeft();
            var y = inputBoxPos.GetElementBottom();
            
            var top=document.all && !window.opera? 
                iecompattest().scrollTop : window.pageYOffset;
            var windowedge=document.all && !window.opera? 
                iecompattest().scrollTop+iecompattest().clientHeight : 
                window.pageYOffset+window.innerHeight;

            if(y + PopupPos.GetElementHeight() > windowedge)
            {
                var z = inputBoxPos.GetElementTop() - 
                        PopupPos.GetElementHeight();
                if(z >= top)
                    y = z;
            }                

            SetElementProperty(PopupDivId, 'left', x + "px");
            SetElementProperty(PopupDivId, 'top', y + "px");
            SetElementProperty(PopupIFrameId, 'left', x + "px");
            SetElementProperty(PopupIFrameId, 'top', y + "px");
            SetElementProperty(PopupIFrameId, 'width', 
                               PopupPos.GetElementWidth() + "px");
            SetElementProperty(PopupIFrameId, 'height', 
                               PopupPos.GetElementHeight() + "px");
        }

    }

    this.Hide = Hide;
    function Hide()
    {
        if(parentInputBox)
        {
            SetElementProperty(PopupDivId, 'display', 'none');
            SetElementProperty(PopupIFrameId, 'display', 'none');
            parentInputBox = null;
        }
    }
}

var PopupWin = new Popup();

function ShowPopup(inputBox, imgDropDown)
{

    if(parentInputBox == null)
        PopupWin.Show(inputBox, imgDropDown);
    else
        PopupWin.Hide();
}

function HidePopup()
{
    PopupWin.Hide();
}

function SelectFont(value)
{
    PopupWin.SelectFont(value);
}

function Sort(change)
{
    PopupWin.Sort(change);
}

A simple stylesheet file might look like the following:

#PopupIFrame
{
    display: none; 
    left: 0px;
    width: 100px;
    position: absolute;
    z-index: 99;
}
#Popup
{
    display: none;
    color: #000000;
    background-color: #ffffff;
    position: absolute;
    margin: 0px;
    padding-left: 0px;
    padding-right: 0px;
    padding-top: 0px;
    padding-bottom: 0px;
    border-left: #666666 1px solid;
    border-top: #666666 1px solid;
    border-right: #666666 1px solid;
    border-bottom: #666666 1px solid;
    z-index: 100;
}
#Popup .header
{
    background-color: #567cbb;
}
#Popup .linkText
{
    font-family: Verdana, Arial, Helvetica, sans-serif;    
    font-size: 12px;
    color : #ffffff;     
    text-decoration: underline;    
}
#Popup .serif
{
    font-family: serif;
    font-size: 24;
    color: blue;
}
#Popup .sans-serif
{
    font-family: sans-serif;
    font-size: 24;
    color: blue;
}
#Popup .cursive
{
    font-family: cursive;
    font-size: 24;
    color: blue;
}
#Popup .fantasy
{
    font-family: fantasy;
    font-size: 24;
    color: blue;
}
#Popup .monospace
{
    font-family: monospace;
    font-size: 24;
    color: blue;
}

License

This article, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

Share

About the Author

william s. su
Web Developer
United States United States
William is currently working for Toshiba. His programming experience includes C/C++, C#, MFC, Java, ASP.NET and SQL. His Internet experience includes XML, SOAP and UI design. He is MCSD.NET, MCDBA and MCT certified and has a MS degree in CS.
 
Willaim was born in Taiwan but lives in USA. For relaxation he enjoy traveling and art.

Comments and Discussions

 
-- There are no messages in this forum --
| Advertise | Privacy | Mobile
Web02 | 2.8.140916.1 | Last Updated 20 Mar 2006
Article Copyright 2006 by william s. su
Everything else Copyright © CodeProject, 1999-2014
Terms of Service
Layout: fixed | fluid