Overlay Manager Example




<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<title>YAHOO.widget.OverlayManager</title>

<script type="text/javascript" src="./build/yahoo/yahoo.js" ></script>
<script type="text/javascript" src="./build/event/event.js" ></script>
<script type="text/javascript" src="./build/dom/dom.js" ></script>
<script type="text/javascript" src="./build/dragdrop/dragdrop.js" ></script>
<script type="text/javascript" src="./build/animation/animation.js" ></script>

<link rel="stylesheet" type="text/css" href="./build/fonts/fonts.css" />
<link rel="stylesheet" type="text/css" href="./examples/container/css/example.css" />

<link rel="stylesheet" type="text/css" href="./build/container/assets/container.css" />
<script type="text/javascript" src="./build/container/container.js"></script>

<style>

.overlay {
  visibility:hidden;
  border:1px solid black;
  background-color:#FFFFFF;
  z-index:10;
  padding:5px;
}

.overlay.focused {
  border:3px solid red;
  background-color:yellow;
}

</style>

<script language="javascript">

  YAHOO.namespace("example.overlaymanager");

  function init() {

    // *****************************************************************
    // This represents a Overlay already on the page
    // *****************************************************************

      YAHOO.example.overlaymanager.oPredefined = new YAHOO.widget.Overlay("oPredefined", {visible:true, x:400, y:400} );
      YAHOO.example.overlaymanager.oPredefined.render();

    // *****************************************************************
    // This represents an Overlay completely pre-constructed from code
    // *****************************************************************

      YAHOO.example.overlaymanager.oDynamic = new YAHOO.widget.Overlay("oDynamic", {visible:true, x:400, y:250} );

      YAHOO.example.overlaymanager.oDynamic.setHeader("Completely dynamic overlay");
      YAHOO.example.overlaymanager.oDynamic.setBody("I was created completely at runtime!");

      YAHOO.example.overlaymanager.oDynamic.render(document.body);

    // *****************************************************************
    // This represents a overlay with a container, but no body content defined
    // *****************************************************************
      YAHOO.example.overlaymanager.oChangedAtRuntime = new YAHOO.widget.Overlay("oChangedAtRuntime", {visible:true, x:400, y:300} );

      YAHOO.example.overlaymanager.oChangedAtRuntime.setHeader("I was changed at runtime!");
      YAHOO.example.overlaymanager.oChangedAtRuntime.setBody("<b>My original markup text was replaced at runtime with this text.</b>");
      YAHOO.example.overlaymanager.oChangedAtRuntime.setFooter("The footer was changed too!");

      YAHOO.example.overlaymanager.oChangedAtRuntime.render();
    // *****************************************************************


    YAHOO.example.overlaymanager.mgr = new YAHOO.widget.OverlayManager( { overlays:[YAHOO.example.overlaymanager.oPredefined,YAHOO.example.overlaymanager.oDynamic,YAHOO.example.overlaymanager.oChangedAtRuntime] } );

    var button2 = document.getElementById("btnHide");
    button2.onclick = hideAll;

    var button3 = document.getElementById("btnShow");
    button3.onclick = showAll;

    var dd1 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oDynamic.element.id, "module");
    dd1.onDrag = function() {
      YAHOO.example.overlaymanager.oDynamic.cfg.refireEvent("iframe");
        var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oDynamic.element);
        YAHOO.example.overlaymanager.oDynamic.cfg.setProperty("xy", pos);
    }

    var dd2 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oPredefined.element.id, "module");
    dd2.onDrag = function() {
      YAHOO.example.overlaymanager.oPredefined.cfg.refireEvent("iframe");
        var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oPredefined.element);
        YAHOO.example.overlaymanager.oPredefined.cfg.setProperty("xy", pos);
    }

    var dd3 = new YAHOO.util.DD(YAHOO.example.overlaymanager.oChangedAtRuntime.element.id, "module");
    dd3.onDrag = function() {
      YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.refireEvent("iframe");
        var pos = YAHOO.util.Dom.getXY(YAHOO.example.overlaymanager.oChangedAtRuntime.element);
        YAHOO.example.overlaymanager.oChangedAtRuntime.cfg.setProperty("xy", pos);
    }

  }

  function hideAll() {
    YAHOO.example.overlaymanager.mgr.hideAll();
  }

  function showAll() {
    YAHOO.example.overlaymanager.mgr.showAll();
  }
  
  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 (constrain) {
      args.constraintoviewport = true;
    }

    if (useIframe) {
      args.iframe = true;
    }

    if (fixedcenter) {
      args.fixedcenter = true;
    }

    if (contextArg.length > 0) {
      args.context = contextArg;
    }

    var newMod;
    var isNew = true;

    if (YAHOO.example.overlaymanager.mgr.find(id)) {
      newMod = YAHOO.example.overlaymanager.mgr.find(id);
      newMod.cfg.applyConfig(args);
      isNew = false;
    } else {
      newMod = new YAHOO.widget.Overlay(id, args);
      YAHOO.example.overlaymanager.mgr.register(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);

</script>
</head>
<body>
  <div class="box">
    <div class="hd">
      <h1>OverlayManager Example</h1>
    </div>
    <div class="bd">
      <p>OverlayManager is used to manage the focused state of a collection of Overlay objects. Creating an OverlayManager and registering an Overlay is simple:
      <code>mgr = new YAHOO.widget.OverlayManager();<br/>
      mgr.register(myOverlay);
      </code>
      </p>
      <p>Note that when you click on an Overlay, the Overlay is highlighted, indicating that it currently has the focus. This is because the OverlayManager keeps track of which of the registered Overlays currently is focused, and ensures that the z-index of that Overlay is the highest.</p>
      <button id="btnHide">Hide All</button>
      <button id="btnShow">Show All</button>
    </div>
    <p></p>
  </div>

  <select style="display:block">
    <option>This is a &lt;select&gt; element, helpul for testing the IFRAME shim</option>
  </select>

  <div id="oPredefined" style="visibility:hidden;position:absolute">
    <div class="hd">Predefined Overlay Header</div>
    <div class="bd">I was created using simple predefined markup.</div>
    <div class="ft">Predefined Overlay Footer</div>
  </div>

  <div id="oChangedAtRuntime" style="visibility:hidden;position:absolute">
    <div class="hd">Placeholder Header</div>
    <div class="bd">This is only placeholder text in the markup.</div>
    <div class="ft">Placeholder Footer</div>
  </div>


  <img id="ctx1" src="./examples/container/img/ctx.gif" />

<form onsubmit="return false" id="overlayform">
<div class="overlayform">

  <div class="formheader">
      Create / Modify a Dynamic Overlay
    </div>

  <div class="row header">
      <div class="label" style="text-align:center">Property</div><div class="formw">Value</div>
    </div>

  <div class="row first">
      <div class="label">ID</div><div class="formw"><input type="text" name="id" /></div>
    </div>

  <div class="row first">
      <div class="label">Header</div><div class="formw"><textarea name="header"></textarea></div>
    </div>

  <div class="row first">
      <div class="label">Body</div><div class="formw"><textarea name="body"></textarea></div>
    </div>

  <div class="row first">
      <div class="label">Footer</div><div class="formw"><textarea name="footer"></textarea></div>
    </div>

  <div class="row">
      <div class="label">Show/Hide Effect(s)</div><div class="formw"><select name="effect">
      <option value="">*none*</option>
      <option value="YAHOO.widget.ContainerEffect.FADE">Fade</option>
      <option value="YAHOO.widget.ContainerEffect.SLIDE">Slide</option>
    </select> Duration: <input type="text" name="duration" style="width:25px"/>s</div>
    </div>

  <div class="row">
      <div class="label">Visible</div><div class="formw"><input type="checkbox" name="visible" value="checkbox" checked="true"/></div>
    </div>

  <div class="row">
      <div class="label">x position</div><div class="formw"><input type="text" name="x" /></div>
    </div>

  <div class="row">
      <div class="label">y position</div><div class="formw"><input type="text" name="y" /></div>
    </div>

  <div class="row">
      <div class="label">width</div><div class="formw"><input type="text" name="width" /></div>
    </div>

  <div class="row">
      <div class="label">height</div><div class="formw"><input type="text" name="height" /></div>
    </div>

  <div class="row">
      <div class="label">z-index</div><div class="formw"><input type="text" name="zIndex" /></div>
    </div>

  <div class="row">
      <div class="label">constrain to viewport</div><div class="formw"><input type="checkbox" name="constraintoviewport" value="checkbox" /></div>
    </div>
  
  <div class="row">
      <div class="label">fix to center of viewport</div><div class="formw"><input type="checkbox" name="fixedcenter" value="checkbox" /></div>
    </div>

  <div class="row">
      <div class="label">Use iframe shim</div><div class="formw"><input type="checkbox" name="iframe" value="checkbox" /></div>
    </div>

  <div class="row">
      <div class="label">Context element</div><div class="formw">ID:<input type="text" name="context" /></div>
  </div>

  <div class="row">
    <div class="label">&nbsp;</div>
    <div class="formw">
      Align overlay's 
      <select name="elementMagnet">
        <option value="tl">top left</option>
        <option value="tr">top right</option>
        <option value="bl">bottom left</option>
        <option value="br">bottom right</option>
      </select>
      corner to context element's 
      <select name="contextMagnet">
        <option value="tl">top left</option>
        <option value="tr">top right</option>
        <option value="bl">bottom left</option>
        <option value="br">bottom right</option>
      </select> corner
    </div>
    </div>

  <div class="row last">
      <div class="label"></div><div class="formw"><button onclick="create()">create/modify my overlay</button></div>
  </div>

</div>
</form>

</body>
</html>
Overlay Manager Example : Float : Ajax Layer JAVASCRIPT DHTML TUTORIALS

JAVASCRIPT DHTML TUTORIALS » Ajax Layer » Float »

Overlay Manager Example

Leave a Comment / Note

JAVASCRIPT DHTML TUTORIALS
