Website Design Edmonton       Website Design Feedback       Website Design Sitemap     Contact Website Design Company
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 Designers R Us is a professional Internet strategy and Web design company based in Toronto, Canada. We specialize in best-in-class website design, online marketing, Flash multimedia, corporate identity and print graphics. Website Designers R Us features an integrated team of web consultants, creative designers, writers, programmers and marketing professionals that know how to get online results
 Home          ::             About Us          ::             Support            ::             Services            ::             Link Partners          ::             Contact

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