Tabs Which Will Cover Everything

• Download source code - 2.36 KB

Introduction

If you have ever tried to use <div> in a browser, you will quickly find that there are some limitations. Some of these limitations have been corrected modified in the latest release of IE 7. However, since most people probably do not use this new version yet or they never intend to, I decided to figure out how to workaround these limitations. The limitation that has frustrated me the most is when using a div over a <select>, the select always wins out and will display on top - always, period. You cannot use z-index or anything like that. To understand this issue, read this great article here. Many people see this problem immediately when they are using menus which drop down over the form which has a dropdown or anything else with a 'select' tag. The problem happens when I am using tooltips, balloons, popups, fade-ins, and anything else which provides additional information. The key to resolving this is to think iframe. You build your div using an iframe, and then at the last moment, load the div on top of the iframe. This may sound easy, but there are several things to consider. We will look at each one of these below. I have been to several sites which use a "tab" style to provide additional information, and I really like this type of notification.

Note: Although this is a very simple example, the implementations are limitless. Just think about using AJAX to dynamically display data in the tab, or anything else for that matter. The secret to creating a realistic tab is to use a transparent image (1x1). This helps in making sure that the cells in the tables are set exactly with the dimensions that you want. You can see this from below. Let's start with looking at the stylesheet.

Background

I took this idea and have decided to show how to implement this using one of my favorite tooltip styles. I hover over tab. This code will use this approach, but it is important to realize that you can use this for anything.

Using the Code

There are three sections to this code. The first is the style sheets. The second is the actual JavaScript. The third is the tag to call it. I realize that there are a lot of enhancements which can be done towards this. Examples include moving the tab when it is at the bottom of the page or when it is to far right on the screen, and I would welcome anyone in expanding this further, but this shows the process of using iframes. I have tested this code a little in Firefox, IE 6 and 7, and it appears to work. If anyone finds any problems with this, then post comments.

First, use the following style types....

/* This is the div which will hold the tab */
#tagcontainer
{
    position:absolute; 
    top:25px; 
    left:50px; 
    padding-left:0px ; 
    padding-top:0px;
    padding-bottom:0px;
    padding-right:0px;
    border-top-style: none; 
    border-right-style: none; 
    border-left-style: none;
    border-bottom-style:none;
    display:none; 
    background-color:red; 
    color:black; 
    z-index:100;
    width:100%
}
/* This defines the Iframe --Needed for IE 6 and older */
#Someiframe
{
    position:absolute; 
    background-color:#F4F878;
    top:0px; 
    left:0px; 
    display:none;
}
/* This is the style to let people know that there 
   is more information about on this text. */
.info {
    border-left: 1px;
    border-right: 1px;
    border-bottom: #F4F878 1px dotted;
    padding-left:1px;
    padding-right:1px;
}
/* This starts the creation of the tab when the item is hovered over */
.info:hover{
    border-left: black 1px solid;
    border-right: black 1px solid;
    border-bottom:0px;
    border-top: #828507 2px solid;
    background-color: #F4F878;
    padding-left:0px;
    padding-right:0px;
    cursor:pointer
}
#fldtag {
    padding:-2px 2px -2px 2px;
    background-color: #F4F878;
}
#fldtag .topleft{
    border-left: #828507 1px solid; 
    height:0px; 
    vertical-align: top; 
    font-size:6px
}
#fldtag .topcenter{
    border-top: #828507 1px solid; 
    width: 100%; 
    height:0px;
    vertical-align: top;
    font-size:1px
}
#fldtag .topright{
    border-top: #828507 1px solid; 
    border-right: #828507 1px solid; 
    height:0px;
    vertical-align: top;
    font-size:1px
}
#fldtag .midleft{
    border-right: #828507 1px solid;
    border-left: #828507 1px solid;
}
#fldtag .btm{
    border-bottom: #828507 1px solid; 
    border-right: #828507 1px solid;
    border-left: #828507 1px solid;
    height:3px
}
</style> 

You can play around with the different styles, but #fldtag is the style which is used in making the tab to appear as a tab.

The next step is to look at the JavaScript. I must admit that I have borrowed code that was found elsewhere to help with the looping of the parent window to capture the exact location of the tag, but I have modified it to account for Firefox. I have tried to keep it very generic, so that it will work on most browsers.

<script type="text/javascript" language="javascript"> 
var ie4=document.all
var ns6=document.getElementById&&!document.all
if(ie4||ns6)
{
    document.write('<div id="tagcontainer"></div>')
    document.write('<iframe id="Someiframe" ' + 
       'src="javascript:false;" scrolling="no" ' + 
       'frameborder="0" ></iframe>')
}
//*****************************************************************************
//Returns the dimensions of the top and left from the outter most part of the
//parent to the present obj
//******************************************************************************
function getposOffset(what, offsettype){
    //If it does not equal left then it must be top
    var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
    var parentEl=what.offsetParent;
    while (parentEl!=null)
    {
        totaloffset=(offsettype=="left")? 
                     totaloffset+parentEl.offsetLeft : 
                     totaloffset+parentEl.offsetTop;
        parentEl=parentEl.offsetParent;
    }
    return totaloffset;
}

function ShowTab(txt,tabwidth,tabheight,obj,e) 
{ 
    IfrRef=document.getElementById? 
           document.getElementById("Someiframe") : Someiframe
    divRef=document.getElementById? 
           document.getElementById("tagcontainer") : tagcontainer
    if (tabwidth==undefined){tabwidth=100;}     /* TabWidth is not passed in */
    if (tabheight==undefined){tabheight=200;}   /* TabHeight is not passed in */
    
    //Tab Container must be at least the same size as the object text. 
    if (obj.offsetWidth>tabwidth){tabwidth=obj.offsetWidth} 
    IfrRef.style.left=IfrRef.style.top=-500
    IfrRef.style.width=tabwidth + "px"
    IfrRef.x=getposOffset(obj, "left")
    IfrRef.y=getposOffset(obj, "top")-2
    IfrRef.style.left=IfrRef.x +"px"                        
    IfrRef.style.top=IfrRef.y+ obj.offsetHeight +"px"  
    IfrRef.style.visibility="visible"
    IfrRef.style.width=tabwidth +"px"        //Width of the ToolTip
    IfrRef.style.height=tabheight + "px"      //Height of the ToolTip
    IfrRef.style.display = "block"; 
    var tabgap=obj.offsetWidth-2        /* Determines the gap of the tab */
        
    //'Display the text to add into the tooltip
    var mtable 
    mtable="<table id=\"fldtag\" height=\"" + 
           tabheight + "\ width=\"" + tabwidth + 
           "px\" cellpadding=\"0\" cellspacing=\"0\ valign=\"top\" >"
    
    mtable+="<tr>"
    //Top Left Cell
    mtable+="<td class=\"topleft\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"" + 
            tabgap + "px\" height=\"1px\" />"
    mtable+="</td>"
    
    //Top Center Cell
    mtable+="<td class=\"topcenter \">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"100%\" height=\"1px\" />"
    mtable+="</td>"
    
    //Top Right Cell
    mtable+="<td class=\"topright\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"1px\" height=\"1px\" />"
    mtable+="</td>"
    mtable+="</tr>"
    
    //Body of the tab
    mtable+="<tr>"
    mtable+="<td style=\"padding-left:3px; padding-right:" + 
            "3px\"colspan=\"3\" class=\"midleft\" valign=\"top\">"
    mtable+="<!-- This is where you place your text for the tab -->"
    mtable+= txt
    mtable+="</td>"
    mtable+="</tr>"
    
    //Bottom of the tab
    mtable+="<tr>"
    mtable+="<td colspan=\"3\" class=\"btm\">"
    mtable+="<img alt=\"\" src=\"spacer.gif\" width=\"1px\" height=\"1px\" /></td>"
    mtable+="</tr>"
    mtable+="</table>"
 
    divRef.innerHTML=mtable
    //Creates the IFrame for the IE 6 and lower compatability
    divRef.style.width = IfrRef.offsetWidth + "px"
    divRef.style.height = IfrRef.offsetHeight + "px"; 
    divRef.style.top = IfrRef.style.top; 
    divRef.style.left = IfrRef.offsetLeft+"px"
    divRef.style.zIndex = IfrRef.style.zIndex + 1; 
    divRef.style.display = "block"; 
    divRef.style.visibility="visible"
} 
function HideTab()
{
    var divRef = document.getElementById('tagcontainer'); 
    var IfrRef = document.getElementById('Someiframe'); 
    divRef.style.display = "none"; 
    IfrRef.style.display = "none"; 
} 
</script> 

I believe the code above contains enough comments to help you understand this process. In essence, we are determining where to place the iframe in relation to the calling object.

The final part is to simply call the script with the syntax below:

<a class="info" 
  onmouseover ="ShowTab('This is very cool and I am glad that '  +
               'it is not to hard to understand',10,50,this,event)" 
  onmouseout="HideTab()">What?</a>

That's it.....

Although this is my first article. I hope to start publishing more, so any suggestions or comments will be appreciated.

History

• 1.0.0: Published