xPopup is a simple alternative to pop-up windows. It uses dynamically created iFrames.
The implementation of xPopup demonstrates the use of the xTimer object.
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>
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