Website Designers R Us - Home
Creating your own library to write dynamic content to IFRAME utility functions

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

Return to Listing

Website Designer R Us has over 12 years of IT experience and a focus on custom website design, web development and web hosting services. Our professional web design services will give your business the look and feel needed to beat your competitors! Our website design services include; web design, website redesign, website maintenance, web development, flash animation, eCommerce, shopping carts, domains, web hosting, search engine optimization, graphic design, logo design, blog writing, script installations & much more!
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

Copyright © 2006-2007 Website Designers R Us, a DOT Specialist Company. All rights reserved.