My Portal Project

Another day, another cool tool for the Prototype/Scriptaculous libraries. A few months ago, the Lightbox method hit the RSS feeds, and now somebody wrote a special Prototype.js class that creates multiple types of “windows” on your pages. They can be movable, draggable, and customized to the extent of your CSS prowess.

The code required is pretty basic, and the information page shows some samples of what this class can do. Below are a few examples with the code used:

Show Window with Content

<script type='text/javascript' src='/js/prototype.js'>
</script><script type='text/javascript' src='/scriptaculous-js-1.5.3/src/effects.js'></script>
<script type='text/javascript' src='/js/window.js'></script>
<link href='/js/default.css' rel='stylesheet' type='text/css'></link>
<link href='/js/theme1.css' rel='stylesheet' type='text/css'></link>
calling code:
var win = new Window("foo", {className: "theme1", title: "My Portal Project", top:70, left:100, width:500, height:300, resizable: true, url: "http://www.crossedconnections.org/w", showEffectOptions: {duration:3}}) ;
win.show();

Show Standard Alert Dialog

<script type='text/javascript' src='/js/prototype.js'></script>
<script type='text/javascript' src='/scriptaculous-js-1.5.3/src/effects.js'></script>
<script type='text/javascript' src='/js/window.js'></script>
<link href='/js/alert.css' rel='stylesheet' type='text/css'>
<link href='/js/default.css' rel='stylesheet' type='text/css'>
calling code:
Dialog.alert("Test of alert panel. Nothing complex, just the facts.", {windowParameters: {width:300, height:100}, okLabel: "close", ok:function(win) {debug("validate alert panel"); return true;}});

You may have noticed that the Prototype.js file used for these demos is not the same one that comes out of my Scriptaculous directory. This is the single biggest drawback to the window class; it uses an older Prototype.js file that may be incompatible with the version you are using.

Show Login Dialog

<script type='text/javascript' src='/js/prototype.js'></script>
<script type='text/javascript' src='/scriptaculous-js-1.5.3/src/effects.js'></script>
<script type='text/javascript' src='/js/window.js'></script>
<link href='/js/alert.css' rel='stylesheet' type='text/css'>
<link href='/js/default.css' rel='stylesheet' type='text/css'>
calling code:
Dialog.confirm($('login').innerHTML, {windowParameters: {width:350}, okLabel: "login", cancelLabel: "cancel", ok:function(win){$('login_error_msg').innerHTML='Login or password inccorect'; new Effect.Shake('modal_dialog'); return false;}});
existing div:
<div id="login" style="display:none"> <p><span id='login_error_msg' class="login_error"> </span></p> <div style="clear:both"></div> <p><span class="login_label">login</span> <span class="login_input"><input type="text"/></span></p> <div style="clear:both"></div> <p><span class="login_label">password</span> <span class="login_input"><input type="password"/></span></p> <div style="clear:both"></div> </div>

Show Confirmation Prompt

<script type='text/javascript' src='/js/prototype.js'></script>
<script type='text/javascript' src='/scriptaculous-js-1.5.3/src/effects.js'></script>
<script type='text/javascript' src='/js/window.js'></script>
<link href='/js/alert.css' rel='stylesheet' type='text/css'>
<link href='/js/default.css' rel='stylesheet' type='text/css'>
calling code:
Dialog.confirm("Test of confirm panel, just a yes or no will do",{windowParameters: {width:300}, okLabel: "close",cancel:function(win) {debug("cancel confirm panel")},ok:function(win) {debug("validate confirm panel"); return true;}});

A little rough around the edges, but some interesting potential.

This entry was posted on Wednesday, June 7th, 2006 at 10:16 pm and is filed under Cool Tools, Web Development. You can follow any responses to this entry through the RSS 2.0 feed. Both comments and pings are currently closed.