The following function may be used to resize the IFRAME dynamically.
IFrameBox.prototype.Resize = function(wdth)
{
if( IFrameBox.IsBrowserIE() )
{
var div = frames[this.id].document.getElementById(this.DivID);
if(!wdth)
this.IFrame.style.width = div.offsetWidth;
else
this.IFrame.style.width = wdth;
this.IFrame.style.height = div.offsetHeight;
}
else
{
this.IFrame.style.width = this.Width;
this.IFrame.style.height = this.Height;
}
}
The following function may be used to place an IFRAME at required positions on the web page:
IFrameBox.prototype.PlaceAt = function(x, y)
{
this.IFrame.style.position = "absolute";
this.IFrame.style.left = x;
this.IFrame.style.top = y;
}
The following function tests whether the current IFRAME is in the visible state or not:
IFrameBox.prototype.IsVisible = function()
{
var ifrm = document.getElementById(this.id);
if( ifrm.style.visibility == "visible" && ifrm.style.width > 0 )
return true;
else
return false;
}
The following function makes an IFRAME visible (make sure that it uses some of the functions defined above).
IFrameBox.prototype.Show = function(evt, msg, wdth)
{
if( this.IsVisible() )
return;
var div = frames[this.id].document.getElementById(this.DivID);
div.innerHTML=msg;
this.Resize(wdth);
if(evt)
{
this.PlaceAt((evt.x +10),(evt.y +10));
}
this.IFrame.style.visibility = "visible";
this.IFrame.style.zIndex = "999999";
}
Hiding an IFRAME is the simplest of all. You can define the function as follows:
IFrameBox.prototype.Hide = function()
{
this.IFrame.style.visibility = "hidden";
this.IFrame.style.width = 0;
this.IFrame.style.height = 0;
}
I leave it to the programmers to further extend the library to suit their needs. The above set of functions is very suitable for presenting eye-catching tool tips on your web page. As the tool tips are based on IFRAME, they are naturally displayed ahead of any windowed controls (like dropdown lists and so on).