Cross-Browser.com

Application

xPopup is a simple alternative to pop-up windows. It uses dynamically created iFrames. Here's how to use it.

<style type='text/css'>
.popupStyle {
  width:150px; height:150px;
  border:1px solid #330;
  border-top:4px solid #330;
  margin:0; padding:0;
}
</style>
<script type='text/javascript' src='../x_load.js'></script> 
<script type='text/javascript'>

xInclude('../x_core.js', '../x_slide.js', '../x_popup.js', '../x_timer.js');

var pop1, pop2;

window.onload = function() {
  
  pop1 = new xPopup(
             'timeout',       // timer type
             10000,           // timeout in ms
             'cen',           // position
             'popupStyle',    // style class name
             'popup1',        // id
             'popup1.html');  // popup url

  pop2 = new xPopup(
             'interval',    
             5000,          
             'se',          
             'popupStyle',  
             'popup2',      
             'popup2.html');

} // end onload
</script>

xPopup Implementation

The implementation of xPopup demonstrates the use of the xTimer object.

// sTmrType: 'timeout' or 'interval'
function xPopup(sTmrType, uTimeout, sPosition, sStyle, sId, sUrl)
{
  if (document.getElementById &&
      document.createElement &&
      document.body &&
      document.body.appendChild)
  { 
    // create popup element
    var e = document.createElement('IFRAME');
    this.ele = e;
    e.id = sId;
    e.style.position = 'absolute';
    e.className = sStyle;
    e.src = sUrl
    document.body.appendChild(e);
    xShow(e);
    this.tmr = xTimer.set(sTmrType, this, sTmrType, uTimeout);
    // timer event listeners
    this.timeout = function() // hide popup
    {
      var e = this.ele;
      xSlideTo(e, -xWidth(e), -xHeight(e), this.slideTime);
    }
    this.interval = function() // size, position and show popup
    {
      var x=0, y=0, e = this.ele;
      var ew = xWidth(e), eh = xHeight(e);
      var cw = xClientWidth(), ch = xClientHeight();
      switch (this.pos) {
        case 'e':
          x = cw - ew - this.margin;
          y = (ch - eh)/2;
          break;
        case 'se':
          x = cw - ew - this.margin;
          y = ch - eh - this.margin;
          break;
        case 'w':
          x = this.margin;
          y = (ch - eh)/2;
          break;
        case 'cen': default:
          x = (cw - ew)/2;
          y = (ch - eh)/2;
          break;
      } // end switch    
      xSlideTo(e, xScrollLeft() + x, xScrollTop() + y, this.slideTime);
    }
    // init
    this.margin = 10;
    this.pos = sPosition;
    this.slideTime = 500; // slide time in ms
    this.interval();
  } 
} // end xPopup