Dropdown list using an IFrame

• Download source files - 3.42 KB

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;
}