YAHOO.widget.Overlay
YAHOO.namespace("example.overlay");
YAHOO.example.overlay.overlays = [];
function init() {
// *****************************************************************
// This represents a Overlay already on the page
// *****************************************************************
YAHOO.example.overlay.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
YAHOO.example.overlay.oPredefined.render();
// *****************************************************************
// This represents an Overlay completely pre-constructed from code
// *****************************************************************
YAHOO.example.overlay.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );
YAHOO.example.overlay.oDynamic.setHeader("Completely dynamic overlay");
YAHOO.example.overlay.oDynamic.setBody("I was created completely at runtime!");
YAHOO.example.overlay.oDynamic.render(document.body);
// *****************************************************************
// This represents a overlay with a container, but no body content defined
// *****************************************************************
YAHOO.example.overlay.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );
YAHOO.example.overlay.oChangedAtRuntime.setHeader("I was changed at runtime!");
YAHOO.example.overlay.oChangedAtRuntime.setBody("My original markup text was replaced at runtime with this text.");
YAHOO.example.overlay.oChangedAtRuntime.setFooter("The footer was changed too!");
YAHOO.example.overlay.oChangedAtRuntime.render();
// *****************************************************************
var button2 = document.getElementById("btnHide");
button2.onclick = hideAll;
var button3 = document.getElementById("btnShow");
button3.onclick = showAll;
var dd1 = new YAHOO.util.DD(YAHOO.example.overlay.oDynamic.element.id, "module");
dd1.onDrag = function() {
YAHOO.example.overlay.oDynamic.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oDynamic.element);
YAHOO.example.overlay.oDynamic.cfg.setProperty("xy", pos);
}
var dd2 = new YAHOO.util.DD(YAHOO.example.overlay.oPredefined.element.id, "module");
dd2.onDrag = function() {
YAHOO.example.overlay.oPredefined.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oPredefined.element);
YAHOO.example.overlay.oPredefined.cfg.setProperty("xy", pos);
}
var dd3 = new YAHOO.util.DD(YAHOO.example.overlay.oChangedAtRuntime.element.id, "module");
dd3.onDrag = function() {
YAHOO.example.overlay.oChangedAtRuntime.cfg.refireEvent("iframe");
var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlay.oChangedAtRuntime.element);
YAHOO.example.overlay.oChangedAtRuntime.cfg.setProperty("xy", pos);
}
YAHOO.example.overlay.overlays["oPredefined"] = YAHOO.example.overlay.oPredefined;
YAHOO.example.overlay.overlays["oDynamic"] = YAHOO.example.overlay.oDynamic;
YAHOO.example.overlay.overlays["oChangedAtRuntime"] = YAHOO.example.overlay.oChangedAtRuntime;
}
function hideAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.hide();
}
}
function showAll() {
for (var i in YAHOO.example.overlay.overlays) {
var m = YAHOO.example.overlay.overlays[i];
m.show();
}
}
function create() {
var form = document.forms["overlayform"];
// get form values
var id = form["id"].value;
var x = form["x"].value;
var y = form["y"].value;
var header = form["header"].value;
var body = form["body"].value;
var footer = form["footer"].value;
var visible = form["visible"].checked;
var effectArg;
if (form["effect"].selectedIndex > 0) {
var dur = form["duration"].value;
if (! dur) {
dur = 0.5;
} else {
dur = parseFloat(dur);
}
var effect = form["effect"].options[form["effect"].selectedIndex].value;
var effectClass = eval(effect);
effectArg = {
effect:effectClass,
duration:dur
}
}
var width = form["width"].value;
var height = form["height"].value;
var zIndex = form["zIndex"].value;
var constrain = form["constraintoviewport"].checked;
var useIframe = form["iframe"].checked;
var fixedcenter = form["fixedcenter"].checked;
var context = form["context"].value;
var contextArg = new Array();
if (context) {
contextArg[0] = context;
contextArg[1] = form["elementMagnet"].options[form["elementMagnet"].selectedIndex].value;
contextArg[2] = form["contextMagnet"].options[form["contextMagnet"].selectedIndex].value;
}
var args = {};
args.visible = visible;
if (effectArg) {
args.effect = effectArg;
}
if (x) {
args.x = parseInt(x);
}
if (y) {
args.y = parseInt(y);
}
if (width) {
args.width = width;
}
if (height) {
args.height = height;
}
if (zIndex) {
args.zIndex = zIndex;
}
args.constraintoviewport = constrain;
args.iframe = useIframe;
args.fixedcenter = fixedcenter;
if (contextArg.length > 0) {
args.context = contextArg;
} else {
args.context = null;
}
var newMod;
var isNew = true;
if (YAHOO.example.overlay.overlays[id]) {
newMod = YAHOO.example.overlay.overlays[id];
newMod.cfg.applyConfig(args);
isNew = false;
} else {
newMod = new YAHOO.widget.Overlay(id, args);
YAHOO.example.overlay.overlays[id] = newMod;
}
if (header) {
newMod.setHeader(header);
}
if (body) {
newMod.setBody(body);
}
if (footer) {
newMod.setFooter(footer);
}
if (isNew) {
newMod.render(document.body);
} else {
newMod.render();
}
}
YAHOO.util.Event.addListener(window, "load", init);
Overlay Example
An Overlay is a
In this example, there are three draggable overlays that are displayed, two of which are already completely or partially marked up, and one which is dynamically created using JavaScript alone.
Each overlay automatically has a hidden IFRAME element wired underneath it when the browser is Internet Explorer, so that the overlays can be positioned above SELECT elements without the SELECT bleeding through. The IFRAME also ensures that the overlay can be positioned above Flash elements easily.