The power of DIV with IFRAME - Creating your own library to write dynamic content to IFRAME: utility functions

(Page 5 of 5 )

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).

Any comments, suggestions, ideas, improvements, bugs, errors, feedback etc. are highly appreciated at jag_chat@yahoo.com.

DISCLAIMER: The content provided in this article is not warranted or guaranteed by Developer Shed, Inc. The content provided is intended for entertainment and/or educational purposes in order to introduce to the reader key ideas, concepts, and/or product reviews. As such it is incumbent upon the reader to employ real-world tactics for security and implementation of best practices. We are not liable for any negative consequences that may result from implementing any information covered in our articles or tutorials. If this is a hardware review, it is not recommended to open and/or modify your hardware.

Comments On: The power of DIV with IFRAME

· Hello guys! A fine introduction on using DIV with IFRAME. enjoy and give any...    · I tried this tutorial but it didn't work in firefox. what are the firefox work...    · I tried this tutorial but it didn't work in firefox 3.0. what are the firefox work...    · document.all.myFrame.style.visibility="visible"; doesn't work in firefox...   >>> Post your comment now!