PC Review
Home Forums Reviews Articles Register
Member Login:

PC Review > Forums > Newsgroups > Microsoft Word > Microsoft Frontpage > Complete dhtml windowing-system in 600 lines (24kb)*

Reply
Thread Tools Rate Thread

Complete dhtml windowing-system in 600 lines (24kb)*

 
 
darwinist
Guest
Posts: n/a
 
      1st Aug 2006
1 Works in a browser as customisable web-interface or,
2 Use with apache to make window-based, dhtml-apps
3 Rename/retitle open windows
4 Arbitrary virtual desktop size with easy navigation (default
10000x10000)
5 Free as in freedom, and free as in free-beer (beer not included).
6 All in one html/js file at
http://darwinist.googlepages.com/webwindows.html
7 You can copy and paste this post into a new .html file and start your
own
8 Tested on firefox 1.5 and ie 6
9 Left and right window padding too fat on ie. Very hard. Please help.
*(With comments, whitespace, and api reference)

Please copy or contribute:

<!-- dhtml windowing-system-->
<html>
<title>Web Windows</title>

<body style='font-family:arial;'>

<!-- Scripts to control the desktop: -->
<script>
var CurrentObject =""; // Which object is being dragged (moved)
right now.
var AreMoving = false; // Is an object being dragged.
var AreSizing = false; // Are we sizing any objects right now
var SizingType = ""; // Which kind of sizing
var StartMouseX = 0; // Mouse x when dragging started
var StartMouseY = 0; // Mouse y when dragging started
var StartObjectX = 0; // element x when dragging started
var StartObjectY = 0; // element y when dragging started
var StartObjectHeight = 0; // element y when dragging started
var StartObjectWidth = 0; // element y when dragging started
var Windows = 0; // total windows created
var WindowsNow = 0; // Number of windows currently open
var TopZIndex = 0; // TopMostWindow

// Show debug information (9 keystrokes shorter than window.alert
and
debugon=true; // controllable with debugon flag)
function msg(text){if (debugon) window.alert(text);}

// Strip the "px" from the style values of gui objects, if it's
there, and return as number.
function pxVal(val) {
return val.substring(val.length-2)=="px" ?
val.substring(0, val.length-2) *1
: val *1;
}

// Create a new object and give it an id
function $make(type, id) {el =
document.createElement(type);el.id=id;return el;}
function $del(id){$(id).parentNode.removeChild($(id));} // remove an
item from html document.
function $text(text) { return document.createTextNode(text);} //
Make a text node

// Make an input with type, name and optional value and id (which is
the same as name if not specified
// or not used if set to false
function $input(type, name, value, id)
{
if (id == undefined) id = name; if (id == false) id = undefined;
el = $make("input", id); el.name= name; el.type= type; el.value=
value;
return el;
}

// return a default value if the desired parameter is undefined;
otherwise the parameter.
// Only works from inside functions
function IfNo(targetvar, defaultval)
{return targetvar == undefined ? defaultval : targetvar; }

// Get an object by id (22 keystrokes shorter than
document.getElementById)
function $(id){return document.getElementById(id);}

// Get some values quicker; read-only.
function Width(id){return pxVal($(id).style.width);}
function Height(id){return pxVal($(id).style.height);}
function Top(id){return pxVal($(id).style.top);}
function Left(id){return pxVal($(id).style.left);}

// Write these values more quickly:
function WidthIs(id, newwidth){$(id).style.width=newwidth;}
function HeightIs(id, newheight){$(id).style.height=newheight;}
function TopIs(id, newtop){$(id).style.top=newtop;}
function LeftIs(id, newleft){$(id).style.left=newleft;}
XIs = LeftIs; YIs = TopIs; // Some aliases

// Increase the height, width, top (y), or left (x) properties of
elements:
function AddToHeight(id, pixels) {HeightIs(id,
(Height(id)+pixels));}
function AddToWidth(id, pixels) {WidthIs(id, (Width(id)+pixels));}
function AddToX(id, pixels) {LeftIs(id, Left(id)+pixels);}
function AddToY(id, pixels) {TopIs(id, Top(id)+pixels);}
// X and Y are shorter than Left and Top, but you might forget
AddToLeft = AddToX; AddToTop = AddToY; // aliases

// Put an object in a a container object (at its end) both passed by
reference, not id
function PutIn(targetobject, newcontainer)
{newcontainer.appendChild(targetobject);}

// If we're meant to be moving a window, move it according to start
and current positions
function MoveIfMoving(e)
{
if (AreMoving)
{
NewX = StartObjectX + (e.clientX - StartMouseX);
NewY = StartObjectY + (e.clientY - StartMouseY);
if (NewX > 0) XIs(CurrentObject, NewX);
if (NewY > 0) YIs(CurrentObject, NewY);

ExtraWidth = Left(CurrentObject)+Width(CurrentObject) -
Width("desktop");
ExtraHeight = Top(CurrentObject)+Height(CurrentObject) -
Height("desktop");
if (ExtraWidth > 0) WidthIs("desktop", Width("desktop")+
(ExtraWidth));
if (ExtraHeight > 0) HeightIs("desktop", Height("desktop")+
(ExtraHeight));
$("desktopheight").value = Height("desktop");
$("desktopwidth").value = Width("desktop");
}
// Also we might be sizing instead
else if (AreSizing) SizeObject(e);
}

// executed for sizing buttons, not a low-level function.
function SizeObject(e)
{
xdiff = e.clientX - StartMouseX;
ydiff = e.clientY - StartMouseY;

if (SizingType == "out") // make window bigger, no matter what
direction you move mouse.
{
WinSize(CurrentObject, Math.abs(xdiff)+StartObjectWidth,
Math.abs(ydiff)+StartObjectHeight);
if (xdiff < 0) XIs(CurrentObject, StartObjectX + xdiff);
if (ydiff < 0) YIs(CurrentObject, StartObjectY + ydiff);
}
else if (SizingType == "in")
{
WinSize(CurrentObject, StartObjectWidth-Math.abs(xdiff),
StartObjectHeight-Math.abs(ydiff));
if (xdiff > 0) XIs(CurrentObject, StartObjectX + xdiff);
if (ydiff > 0) YIs(CurrentObject, StartObjectY + ydiff);
}
else if (SizingType == "se") // south east
WinSize(CurrentObject, StartObjectWidth + xdiff, StartObjectHeight
+ ydiff);
else if (SizingType == "nw") // north west
{
XIs(CurrentObject, StartObjectX + xdiff);
YIs(CurrentObject, StartObjectY + ydiff);
WinSize(CurrentObject, StartObjectWidth - xdiff, StartObjectHeight
- ydiff);
}
}

// Start and stop moving objects around the screen when you press or
unpress the mouse
function StopMoving() {AreMoving=false;ShowObjectFrame(); }
function StopSizing() {AreSizing=false; ShowObjectFrame();}
function ShowObjectFrame(){if ($(CurrentObject+"_iframe"))
show(CurrentObject+"_iframe");}
function SetMouseMoving(e) {StartMouseX = e.clientX; StartMouseY =
e.clientY; }
function StartMoving(ObjectID)
{
AreMoving=true;
AreSizing=false;
CatchObjectState(ObjectID);
}

// Find out about what state an object was in at start of dragging
or sizing.
function CatchObjectState(ObjectID)
{
CurrentObject = ObjectID;
StartObjectX = Left(ObjectID); StartObjectY = Top(ObjectID);
StartObjectHeight = Height(ObjectID); StartObjectWidth =
Width(ObjectID);
if ($(ObjectID+"_iframe")) hide(ObjectID+"_iframe");
}

function StartSizing(ObjectID, type)
{
CatchObjectState(ObjectID);
AreSizing=true;
SizingType = type;
AreMoving=false;
}

function hide(id) {$(id).style.display='none';}
function show(id)
{$(id).style.display='';$(id).style.zIndex=++TopZIndex;}
function toggle(id){if ($(id).style.display == "none") show(id);
else hide(id);}
function ToTop(id) {}//$(id).style.zIndex = -1;}

function WinSize(id, x, y)
{
if (x <1) x=1; if (y <1) y=1;
HeightIs(id, y);WidthIs(id, x);
HeightIs(id+"_div", y);WidthIs(id+"_div", x);
HeightIs(id+"_iframe", y);WidthIs(id+"_iframe", x);
}

function WinMove(id, x, y)
{
if (x<1) x=1; if (y<1) y=1;
// if position is further than desktop's size, increase desktop
accordingly
if (x+Width(id) > Width("desktop")) AddToWidth("desktop", ((x -
Width("desktop")) + Width(id)));
if (y+Height(id) > Height("desktop")) AddToHeight("desktop", ((y -
Height("desktop")) + Height(id)));
XIs(id, x); YIs(id, y);
ShowDesktopSize(); // Update the size numbers on the navbox
}

// The sizing buttons, as we need two per window of each.
function sizeinbutton(id)
{
var sizeinbutton = $make("button"); PutIn($text("> <"),
sizeinbutton);
sizeinbutton.onmousedown = function (){StartSizing(id, "in");}
sizeinbutton.style.cursor = "ew-resize";
return sizeinbutton;
}

function sizeoutbutton(id)
{
// The size bigger button
var sizeoutbutton = $make("button"); PutIn($text("< >"),
sizeoutbutton);
sizeoutbutton.onmousedown = function (){StartSizing(id, "out");}
sizeoutbutton.style.cursor = "ew-resize";
return sizeoutbutton;
}

// Size southeast
function sizesebutton(id)
{
var sizesebutton = $make("button"); PutIn($text("v>"),
sizesebutton);
sizesebutton.onmousedown = function (){StartSizing(id, "se");}
sizesebutton.style.cursor = "se-resize";
return sizesebutton;
}

// Size northwest
function sizenwbutton(id)
{
var sizenwbutton = $make("button"); PutIn($text("<^"),
sizenwbutton);
sizenwbutton.onmousedown = function (){StartSizing(id, "nw");}
sizenwbutton.style.cursor = "se-resize";
return sizenwbutton;
}

// For processing move forms, not to be confused with the lower
level WinMove();
function MoveWindow(id)
{
x = $(id+"_x").value;
y = $(id+"_y").value;
WinMove(id, x, y);
}

// Create a window for this windowing system, it's a table with a
title bar and an iframe
// and some borders
function CreateWindow(src, id, title, height, width, top, left)
{
var id = IfNo(id, "Window_"+Windows++);
while ($(id)) id = "Window_"+Windows++;
var nw = $make("table", id);
nw.style.zIndex = ++TopZIndex; // This is used to put windows on
top
nw.style.position = "absolute";
nw.onclick = function(){if (TopZIndex ==0) TopZIndex = Windows;
this.style.zIndex = ++TopZIndex;}//.position = "absolute";
nw.style.height = IfNo(height, 300);

nw.style.width = IfNo(width, 400);
nw.style.top = IfNo(top, 60);
nw.style.left = IfNo(left, 90);
nw.style.backgroundColor="white";
nw.border=1;

// the title bar, one cell;
var tb = $make("td");
tb.style.cursor = "move"; tb.style.width="100%"; tb.align="left";
tb.style.backgroundColor="ddddee";

// now the control bar, another cell;
var ctlb = $make("td"); ctlb.align="left"; ctlb.width="80px";
ctlb.style.whiteSpace="nowrap";

// Sizing in and out buttons.
var TopSizeIn = sizeinbutton(id);
var BottomSizeIn = sizeinbutton(id);
var TopSizeOut = sizeoutbutton(id);
var BottomSizeOut = sizeoutbutton(id);

// The close bar has just the close button
var cb = $make("td"); cb.align = "right"; cb.width="1px";
var closebutton = $make("button"); PutIn($text("x"), closebutton);
closebutton.onclick = function (){$del(id);WindowsNow--}
closebutton.style.cursor = "crosshair";
PutIn(closebutton, cb);

// Put the controls in the control box;
PutIn(sizenwbutton(id), ctlb); PutIn(TopSizeOut, ctlb);
PutIn(TopSizeIn, ctlb);
titletext = $input("text", id+"_Title", (IfNo(title, "Title Bar
"+id))); // Title bar text
titletext.style.width="100%"; // offset by the nowrap properties of
other cells
titletext.style.cursor = "move";
PutIn(titletext, tb);

// The main application section, an iframe in a div in a cell
var appframe = $make("iframe", id+"_iframe");
appframe.style.height = IfNo(height, 300);
appframe.style.width = IfNo(width, 400);
appframe.src = IfNo(src, "http://localhost");
appframe.style.borderStyle="none";//src = IfNo(src,
"http://localhost");
appframe.style.whiteSpace="nowrap";

if (src == "") appframe.src = "http://localhost";

var appdiv = $make("div");
appdiv.id = id+"_div";
appdiv.style.height = IfNo(height, 300);
appdiv.style.width = IfNo(width, 400);
appdiv.style.borderStyle="solid"; appdiv.style.borderColor="black";

var row1 = $make("tr"); var row2 = $make("tr");
row1.style.verticalAlign="top";row1.height="10";

// Now the table cell to contain the div with the iframe.
var appcell = $make("td");appcell.colSpan =3;
appcell.align="center";

// The third row
var row3 = $make("tr");
var row3cell = $make("td"); row3cell.colSpan=3;
row3cell.align="right";

// The moving form:
var mf = $make("form"); mf.style.display="inline";
mf.onsubmit = function() {MoveWindow(id); return false;}
PutIn($text("x: "), mf);
xmov = $input("text", id+"_x", 10000); xmov.size=5;
ymov = $input("text", id+"_y", 10000); ymov.size=5;
movbutn = $input("submit", id+"_mov", "<- Move");
PutIn(xmov, mf);PutIn($text(", y: "), mf);PutIn(ymov, mf);
PutIn(movbutn, mf); PutIn(mf, row3cell);

// Sizing buttons for row 3.
PutIn(BottomSizeIn, row3cell); PutIn(BottomSizeOut, row3cell);
PutIn(sizesebutton(id), row3cell); PutIn(row3cell, row3);

// Now make the moving events:
tb.onmousedown = function(){StartMoving(id);}
tb.onmouseup = function(){show(id+"_iframe");}

// Put the frame in the cell
PutIn(appframe, appdiv); PutIn(appdiv, appcell);
// The appcell in the sceond row, the title bar in the first
PutIn(appcell, row2);
// control box, title box, close box
PutIn(ctlb, row1);PutIn(tb, row1); PutIn(cb, row1);
//the three rows into the table (window)
tablebody = $make("tbody"); // ie is fussy about this
PutIn(row1, tablebody); PutIn(row2, tablebody);PutIn(row3,
tablebody);
// the window into the desktop
PutIn(tablebody, nw); PutIn(nw, $("desktop"));
}
</script>

<!-- The Desktop-Navigation box scripts-->
<script>
function gotosection(section)
{
//msg(section);
if (section < 11) yoffset = 0;
else if (section < 21) yoffset = 1;
else if (section < 31) yoffset = 2;
else if (section < 41) yoffset = 3;
else if (section < 51) yoffset = 4;
else if (section < 61) yoffset = 5;
else if (section < 71) yoffset = 6;
else if (section < 81) yoffset = 7;
else if (section < 91) yoffset = 8;
else yoffset = 9;

x = (Width("desktop")/10)*((section-1)-yoffset*10);
y = (Height("desktop")/10)*(yoffset);

NavBoxX = 450; // Offset values to display the navbox after moving.
NavBoxY = 60;

// Move navbar to some visible area:
if (x+Width("navbox")+NavBoxX < Width("desktop")) XIs("navbox",
x+NavBoxX);
else {Overlap = (x+Width("navbox")) - Width("desktop");
XIs("navbox", x-Overlap);}

if (y+Height("navbox")+NavBoxY < Height("desktop")) YIs("navbox",
y+NavBoxY);
else {Overlap = (y+Height("navbox")) - Height("desktop");
YIs("navbox", y-Overlap);}

window.scrollTo(x,y); // scroll the window to the start of the
desired hundredth square.
}

</script>

<!-- the desktop gui object -->
<div id='desktop'
style='padding:5;position:absolute;top:1;left:1;width:10000;height:10000;
overflow:hidden;border-style:solid;background-color:ddeeff;border-width:1;'
onmouseup='StopMoving();StopSizing();'
onmousedown ='SetMouseMoving(event)'
onmousemove='MoveIfMoving(event)'>

<!-- the navigation box -->
<div id='navbox' onclick='this.style.zIndex=++TopZIndex;'
style="border-width:1;border-style:solid;
border-style:solid;border-width:1;background-color:ffffff;width:230;
height:260;
top:60;left:450;position:absolute;overflow:visible;">
<table border=1 width=100% height=100%>
<tr style='vertical-align:top;'>
<td colspan=2 style='cursor:move;'
onmousedown='StartMoving("navbox")'>
<table border=0 width="100%"> <tr><td>Desktop</td>
<td align=right id='fetchbox'> <a
style='cursorointer;font-size:12;text-decoration:underline;color:blue'
onclick='MakeWindowList()'> Fetch Window: ...</a></td></tr>
</table>
</tr>
<tr>

<!-- the navigation grid -->
<td id='desktopgrid'>
<script>
function MakeNavGrid()
{
navtable = $make("table");
tablebody = $make("tbody");
navtable.border=1;
for (rows=1;rows<11;rows++)
{
var row = $make("tr");
for (cols=1;cols<11;cols++)
{
var cell = $make("td");
Section = ((rows-1)*10) + cols;
cell.id=Section;
cell.style.fontSize="9";
cell.onclick = function (){gotosection(this.id);}
cell.style.cursor ="pointer";
cell.onmouseover=function(){this.style.backgroundColor='ccddee';}
cell.onmouseout=function(){this.style.backgroundColor='ffffff';}
PutIn($text(" "+Section+" "), cell);
PutIn(cell, row);
}
PutIn(row, tablebody);
}
PutIn(tablebody, navtable);
PutIn(navtable, $("desktopgrid"));
}

MakeNavGrid(); // Make a nav grid, it knows where to put
itself.

function FetchWindow(list, e) // Get a window according to a
list-click
{
var winid = list[list.selectedIndex].value;
WinMove(winid, Left("navbox"), Top("navbox"));//XIs(winid,
Left("navbox")); YIs(winid, Top("navbox"));
$del("WindowList");
AddToHeight("navbox", -200);
}
function MakeWindowList() // show all windows on navbox.
{
// Delete it if it's already there.
if ($("WindowList"))
{
AddToHeight("navbox", -200);
$del("WindowList");
}
else
{
var WindowList= $make("select","WindowList");
var tables = document.getElementsByTagName('table');
for (table in tables)
{
id = tables[table].id ;
if (id != undefined)
{
// if there's an iframe it's one of ours
if ($(id+"_iframe"))
{
option = $make("option");
option.value = id;
PutIn($text($(id+"_Title").value), option);
PutIn(option, WindowList);
}
}
}

WindowList.size = 10;
WindowList.style.display = "block";
WindowList.onclick = function(){FetchWindow(this,
window.event);}
PutIn(WindowList, $("fetchbox"));
AddToHeight("navbox", 200);
}
}

function SizeDesktop() // resize the desktop according to the
navbox
{
HeightIs("desktop", $("desktopheight").value);
WidthIs("desktop", $("desktopwidth").value);
return false;
}

function ShowDesktopSize() // reset the navbox values according
to the desktop
{
$("desktopheight").value = Height("desktop");
$("desktopwidth").value = Width("desktop");
}
</script>
</td>
<td style='vertical-align:top;font-size:11;'>
<form onsubmit='return SizeDesktop()' style='display:inline;'>
<font style='font-weight:bold;'>Width</font><br><input
type='text' value='10000' size=3 id='desktopwidth' /><br> pixels
<br><br>
<font style='font-weight:bold;'>Height</font><br><input
type='text'value='10000' size=3 id='desktopheight' />pixels
<br><br>
<input type='submit' value='Set' />
</form>
</td>
</tr>
<tr>
<td colspan=2>
<font style='font-size:10;'>
Go to a section, resize, or stretch the desktop by dragging
any window past its edges
</font>
</td>
</tr>
</table>
</div>

<!-- desktop background controls -->
<table border=0
style='width:650;border-style:dashed;border-width:1;'>
<tr>
<td>
[<a style='cursorointer;color:blue;'
onclick='toggle("helpbox");XIs("helpbox", 40);YIs("helpbox",
100);'>Help</a>]
[<a style='cursorointer;color:blue;' onclick='XIs("navbox",
450);YIs("navbox", 60);show("navbox");'>Navbox</a>]
</td>
<td align=right> Load URL:
<form style='display:inline;' onsubmit='return LoadUrl();'>
<script>
function LoadUrl() // grab the url from the form and load it in
a new window.
{
WindowsNow++;CreateWindow($("newurl").value, undefined,
$("newtitle").value)
return false;
}
</script>
<input type='text' style='font-size:10;' size=40 id='newurl'
value='http://www.google.com/search?q=' />
<input type='text' style='font-size:10;' id='newtitle'
value='New Title' />
<input type='submit' style='cursorointer;' value='<-Open' />
</form>
</td>
</tr>
</table>
<br>Execute Javascript [<a
style='cursorointer;text-decoration:underline;color:blue;'
onclick='toggle("codeboxes");$("helpbox").style.display=$("codeboxes").style.display;'
>...</a>]:
<div style="display:block;" id="codeboxes">
<textarea id='code' ACCESSKEY='C' rows=4 cols=40
onfocus='this.value=""'
onblur='ExecuteJavascript(this);'></textarea><br>
<textarea id='codememory' rows=4 cols=40
onfocus='GetCode();'></textarea><br>
</div>

<!-- the help box -->
<table onclick='this.style.zIndex=++TopZIndex;' id="helpbox"
style='background-color:white;border-style:solid;border-width:1;border-color:black;
position:absolute;left:40;top:100;'>
<tr>
<td onmousedown="StartMoving('helpbox');" style='cursor:move;'>
<font style='color:005500;font-weight:bold;'>Help</font></td>
</tr>
<tr>
<td>
<ul style='overflow:auto;
height:300;width:350;font-size:12;'>
<li>Press tab in top textbox to execute its contents </li>
<li>Alt+C to set focus to the code box</li>
<li>L(+tab) to show last code</li>
<li>Javascript will be copied to the second box regardless</li>
<li>Commands provided by this system:
<ul style='font-family:courier;'>
<li>CreateWindow(url, id, title, height, width, top, left);
<font style='color:green;'>// Like the "open" button. Only url
is necessary.</font></li>
<li>WinMove(id, x, y); <font style='color:green;'> // Move a
window by id,
resize desktop accordingly</font></li>
<li>WinSize(id, x, y); <font style='color:green;'> // Doesn't
resize the desktop</font></li>
<li>msg(text); <font style='color:green;'>// shortcut to
window.alert();</font></li>
<li>$(id); <font style='color:green;'>//
document.getElementById();</font></li>
<li>$make(tagtype, id); <font style='color:green;'>// return a
new html element</font></li>
<li>$del(id); <font style='color:green;'>// remove element
from document tree </font></li>
<li>$text(text); <font style='color:green;'>// returns a text
node with text in it </font></li>
<li>$input(type, name, value, id); <font
style='color:green;'>// returns a form input. Type and name are
required</font></li>
<li>AddToHeight(id, pixels); <font style='color:green;'>// Add
to an elements height, must already have a pixel value</font></li>
<li>AddToWidth(id, pixels);</li>
<li>AddToTop(id, pixels); <font style='color:green;'>// Can
also use AddToY();</font></li>
<li>AddToLeft(id, pixels); <font style='color:green;'>// Can
also use AddToX();</font></li>
</ul>
</li>
<ul>
</td>
</tr>
</table>

<!-- this will execute as the page finishes loading -->
<script>
LastCommand=""; // The last code executed from the javascript box

function ExecuteJavascript(CodeBox)
{
var Code = CodeBox.value;
if (Code.toUpperCase() == "L") // in a fraction of a second, show
last command
setTimeout("$('code').focus();$('code').value = LastCommand;",
1);
else if(Code.toUpperCase() != "")
{
LastCommand = CodeBox.value;
eval(LastCommand);
}
}

// Use to add the executed code to a buffer, (the second text box).
function GetCode()
{
var Code = $("code").value;
if (Code.toUpperCase() != "L" && Code !="")
{
$("codememory").value+=$("code").value;
$("codememory").value+="\n";
}
}

$("code").focus(); // set focus to the javascript code box
</script>
<div>
</body>
</html>
 
Reply With Quote
 
 
 
 
Murray
Guest
Posts: n/a
 
      1st Aug 2006
Fails when I turn off javascript.

(please don't crosspost)

--
Murray
--------------
MVP FrontPage


"darwinist" <(E-Mail Removed)> wrote in message
news:(E-Mail Removed)...
>1 Works in a browser as customisable web-interface or,
> 2 Use with apache to make window-based, dhtml-apps
> 3 Rename/retitle open windows
> 4 Arbitrary virtual desktop size with easy navigation (default
> 10000x10000)
> 5 Free as in freedom, and free as in free-beer (beer not included).
> 6 All in one html/js file at
> http://darwinist.googlepages.com/webwindows.html
> 7 You can copy and paste this post into a new .html file and start your
> own
> 8 Tested on firefox 1.5 and ie 6
> 9 Left and right window padding too fat on ie. Very hard. Please help.
> *(With comments, whitespace, and api reference)
>
> Please copy or contribute:
>
> <!-- dhtml windowing-system-->
> <html>
> <title>Web Windows</title>
>
> <body style='font-family:arial;'>
>
> <!-- Scripts to control the desktop: -->
> <script>
> var CurrentObject =""; // Which object is being dragged (moved)
> right now.
> var AreMoving = false; // Is an object being dragged.
> var AreSizing = false; // Are we sizing any objects right now
> var SizingType = ""; // Which kind of sizing
> var StartMouseX = 0; // Mouse x when dragging started
> var StartMouseY = 0; // Mouse y when dragging started
> var StartObjectX = 0; // element x when dragging started
> var StartObjectY = 0; // element y when dragging started
> var StartObjectHeight = 0; // element y when dragging started
> var StartObjectWidth = 0; // element y when dragging started
> var Windows = 0; // total windows created
> var WindowsNow = 0; // Number of windows currently open
> var TopZIndex = 0; // TopMostWindow
>
> // Show debug information (9 keystrokes shorter than window.alert
> and
> debugon=true; // controllable with debugon flag)
> function msg(text){if (debugon) window.alert(text);}
>
> // Strip the "px" from the style values of gui objects, if it's
> there, and return as number.
> function pxVal(val) {
> return val.substring(val.length-2)=="px" ?
> val.substring(0, val.length-2) *1
> : val *1;
> }
>
> // Create a new object and give it an id
> function $make(type, id) {el =
> document.createElement(type);el.id=id;return el;}
> function $del(id){$(id).parentNode.removeChild($(id));} // remove an
> item from html document.
> function $text(text) { return document.createTextNode(text);} //
> Make a text node
>
> // Make an input with type, name and optional value and id (which is
> the same as name if not specified
> // or not used if set to false
> function $input(type, name, value, id)
> {
> if (id == undefined) id = name; if (id == false) id = undefined;
> el = $make("input", id); el.name= name; el.type= type; el.value=
> value;
> return el;
> }
>
> // return a default value if the desired parameter is undefined;
> otherwise the parameter.
> // Only works from inside functions
> function IfNo(targetvar, defaultval)
> {return targetvar == undefined ? defaultval : targetvar; }
>
> // Get an object by id (22 keystrokes shorter than
> document.getElementById)
> function $(id){return document.getElementById(id);}
>
> // Get some values quicker; read-only.
> function Width(id){return pxVal($(id).style.width);}
> function Height(id){return pxVal($(id).style.height);}
> function Top(id){return pxVal($(id).style.top);}
> function Left(id){return pxVal($(id).style.left);}
>
> // Write these values more quickly:
> function WidthIs(id, newwidth){$(id).style.width=newwidth;}
> function HeightIs(id, newheight){$(id).style.height=newheight;}
> function TopIs(id, newtop){$(id).style.top=newtop;}
> function LeftIs(id, newleft){$(id).style.left=newleft;}
> XIs = LeftIs; YIs = TopIs; // Some aliases
>
> // Increase the height, width, top (y), or left (x) properties of
> elements:
> function AddToHeight(id, pixels) {HeightIs(id,
> (Height(id)+pixels));}
> function AddToWidth(id, pixels) {WidthIs(id, (Width(id)+pixels));}
> function AddToX(id, pixels) {LeftIs(id, Left(id)+pixels);}
> function AddToY(id, pixels) {TopIs(id, Top(id)+pixels);}
> // X and Y are shorter than Left and Top, but you might forget
> AddToLeft = AddToX; AddToTop = AddToY; // aliases
>
> // Put an object in a a container object (at its end) both passed by
> reference, not id
> function PutIn(targetobject, newcontainer)
> {newcontainer.appendChild(targetobject);}
>
> // If we're meant to be moving a window, move it according to start
> and current positions
> function MoveIfMoving(e)
> {
> if (AreMoving)
> {
> NewX = StartObjectX + (e.clientX - StartMouseX);
> NewY = StartObjectY + (e.clientY - StartMouseY);
> if (NewX > 0) XIs(CurrentObject, NewX);
> if (NewY > 0) YIs(CurrentObject, NewY);
>
> ExtraWidth = Left(CurrentObject)+Width(CurrentObject) -
> Width("desktop");
> ExtraHeight = Top(CurrentObject)+Height(CurrentObject) -
> Height("desktop");
> if (ExtraWidth > 0) WidthIs("desktop", Width("desktop")+
> (ExtraWidth));
> if (ExtraHeight > 0) HeightIs("desktop", Height("desktop")+
> (ExtraHeight));
> $("desktopheight").value = Height("desktop");
> $("desktopwidth").value = Width("desktop");
> }
> // Also we might be sizing instead
> else if (AreSizing) SizeObject(e);
> }
>
> // executed for sizing buttons, not a low-level function.
> function SizeObject(e)
> {
> xdiff = e.clientX - StartMouseX;
> ydiff = e.clientY - StartMouseY;
>
> if (SizingType == "out") // make window bigger, no matter what
> direction you move mouse.
> {
> WinSize(CurrentObject, Math.abs(xdiff)+StartObjectWidth,
> Math.abs(ydiff)+StartObjectHeight);
> if (xdiff < 0) XIs(CurrentObject, StartObjectX + xdiff);
> if (ydiff < 0) YIs(CurrentObject, StartObjectY + ydiff);
> }
> else if (SizingType == "in")
> {
> WinSize(CurrentObject, StartObjectWidth-Math.abs(xdiff),
> StartObjectHeight-Math.abs(ydiff));
> if (xdiff > 0) XIs(CurrentObject, StartObjectX + xdiff);
> if (ydiff > 0) YIs(CurrentObject, StartObjectY + ydiff);
> }
> else if (SizingType == "se") // south east
> WinSize(CurrentObject, StartObjectWidth + xdiff, StartObjectHeight
> + ydiff);
> else if (SizingType == "nw") // north west
> {
> XIs(CurrentObject, StartObjectX + xdiff);
> YIs(CurrentObject, StartObjectY + ydiff);
> WinSize(CurrentObject, StartObjectWidth - xdiff, StartObjectHeight
> - ydiff);
> }
> }
>
> // Start and stop moving objects around the screen when you press or
> unpress the mouse
> function StopMoving() {AreMoving=false;ShowObjectFrame(); }
> function StopSizing() {AreSizing=false; ShowObjectFrame();}
> function ShowObjectFrame(){if ($(CurrentObject+"_iframe"))
> show(CurrentObject+"_iframe");}
> function SetMouseMoving(e) {StartMouseX = e.clientX; StartMouseY =
> e.clientY; }
> function StartMoving(ObjectID)
> {
> AreMoving=true;
> AreSizing=false;
> CatchObjectState(ObjectID);
> }
>
> // Find out about what state an object was in at start of dragging
> or sizing.
> function CatchObjectState(ObjectID)
> {
> CurrentObject = ObjectID;
> StartObjectX = Left(ObjectID); StartObjectY = Top(ObjectID);
> StartObjectHeight = Height(ObjectID); StartObjectWidth =
> Width(ObjectID);
> if ($(ObjectID+"_iframe")) hide(ObjectID+"_iframe");
> }
>
> function StartSizing(ObjectID, type)
> {
> CatchObjectState(ObjectID);
> AreSizing=true;
> SizingType = type;
> AreMoving=false;
> }
>
> function hide(id) {$(id).style.display='none';}
> function show(id)
> {$(id).style.display='';$(id).style.zIndex=++TopZIndex;}
> function toggle(id){if ($(id).style.display == "none") show(id);
> else hide(id);}
> function ToTop(id) {}//$(id).style.zIndex = -1;}
>
> function WinSize(id, x, y)
> {
> if (x <1) x=1; if (y <1) y=1;
> HeightIs(id, y);WidthIs(id, x);
> HeightIs(id+"_div", y);WidthIs(id+"_div", x);
> HeightIs(id+"_iframe", y);WidthIs(id+"_iframe", x);
> }
>
> function WinMove(id, x, y)
> {
> if (x<1) x=1; if (y<1) y=1;
> // if position is further than desktop's size, increase desktop
> accordingly
> if (x+Width(id) > Width("desktop")) AddToWidth("desktop", ((x -
> Width("desktop")) + Width(id)));
> if (y+Height(id) > Height("desktop")) AddToHeight("desktop", ((y -
> Height("desktop")) + Height(id)));
> XIs(id, x); YIs(id, y);
> ShowDesktopSize(); // Update the size numbers on the navbox
> }
>
> // The sizing buttons, as we need two per window of each.
> function sizeinbutton(id)
> {
> var sizeinbutton = $make("button"); PutIn($text("> <"),
> sizeinbutton);
> sizeinbutton.onmousedown = function (){StartSizing(id, "in");}
> sizeinbutton.style.cursor = "ew-resize";
> return sizeinbutton;
> }
>
> function sizeoutbutton(id)
> {
> // The size bigger button
> var sizeoutbutton = $make("button"); PutIn($text("< >"),
> sizeoutbutton);
> sizeoutbutton.onmousedown = function (){StartSizing(id, "out");}
> sizeoutbutton.style.cursor = "ew-resize";
> return sizeoutbutton;
> }
>
> // Size southeast
> function sizesebutton(id)
> {
> var sizesebutton = $make("button"); PutIn($text("v>"),
> sizesebutton);
> sizesebutton.onmousedown = function (){StartSizing(id, "se");}
> sizesebutton.style.cursor = "se-resize";
> return sizesebutton;
> }
>
> // Size northwest
> function sizenwbutton(id)
> {
> var sizenwbutton = $make("button"); PutIn($text("<^"),
> sizenwbutton);
> sizenwbutton.onmousedown = function (){StartSizing(id, "nw");}
> sizenwbutton.style.cursor = "se-resize";
> return sizenwbutton;
> }
>
> // For processing move forms, not to be confused with the lower
> level WinMove();
> function MoveWindow(id)
> {
> x = $(id+"_x").value;
> y = $(id+"_y").value;
> WinMove(id, x, y);
> }
>
> // Create a window for this windowing system, it's a table with a
> title bar and an iframe
> // and some borders
> function CreateWindow(src, id, title, height, width, top, left)
> {
> var id = IfNo(id, "Window_"+Windows++);
> while ($(id)) id = "Window_"+Windows++;
> var nw = $make("table", id);
> nw.style.zIndex = ++TopZIndex; // This is used to put windows on
> top
> nw.style.position = "absolute";
> nw.onclick = function(){if (TopZIndex ==0) TopZIndex = Windows;
> this.style.zIndex = ++TopZIndex;}//.position = "absolute";
> nw.style.height = IfNo(height, 300);
>
> nw.style.width = IfNo(width, 400);
> nw.style.top = IfNo(top, 60);
> nw.style.left = IfNo(left, 90);
> nw.style.backgroundColor="white";
> nw.border=1;
>
> // the title bar, one cell;
> var tb = $make("td");
> tb.style.cursor = "move"; tb.style.width="100%"; tb.align="left";
> tb.style.backgroundColor="ddddee";
>
> // now the control bar, another cell;
> var ctlb = $make("td"); ctlb.align="left"; ctlb.width="80px";
> ctlb.style.whiteSpace="nowrap";
>
> // Sizing in and out buttons.
> var TopSizeIn = sizeinbutton(id);
> var BottomSizeIn = sizeinbutton(id);
> var TopSizeOut = sizeoutbutton(id);
> var BottomSizeOut = sizeoutbutton(id);
>
> // The close bar has just the close button
> var cb = $make("td"); cb.align = "right"; cb.width="1px";
> var closebutton = $make("button"); PutIn($text("x"), closebutton);
> closebutton.onclick = function (){$del(id);WindowsNow--}
> closebutton.style.cursor = "crosshair";
> PutIn(closebutton, cb);
>
> // Put the controls in the control box;
> PutIn(sizenwbutton(id), ctlb); PutIn(TopSizeOut, ctlb);
> PutIn(TopSizeIn, ctlb);
> titletext = $input("text", id+"_Title", (IfNo(title, "Title Bar
> "+id))); // Title bar text
> titletext.style.width="100%"; // offset by the nowrap properties of
> other cells
> titletext.style.cursor = "move";
> PutIn(titletext, tb);
>
> // The main application section, an iframe in a div in a cell
> var appframe = $make("iframe", id+"_iframe");
> appframe.style.height = IfNo(height, 300);
> appframe.style.width = IfNo(width, 400);
> appframe.src = IfNo(src, "http://localhost");
> appframe.style.borderStyle="none";//src = IfNo(src,
> "http://localhost");
> appframe.style.whiteSpace="nowrap";
>
> if (src == "") appframe.src = "http://localhost";
>
> var appdiv = $make("div");
> appdiv.id = id+"_div";
> appdiv.style.height = IfNo(height, 300);
> appdiv.style.width = IfNo(width, 400);
> appdiv.style.borderStyle="solid"; appdiv.style.borderColor="black";
>
> var row1 = $make("tr"); var row2 = $make("tr");
> row1.style.verticalAlign="top";row1.height="10";
>
> // Now the table cell to contain the div with the iframe.
> var appcell = $make("td");appcell.colSpan =3;
> appcell.align="center";
>
> // The third row
> var row3 = $make("tr");
> var row3cell = $make("td"); row3cell.colSpan=3;
> row3cell.align="right";
>
> // The moving form:
> var mf = $make("form"); mf.style.display="inline";
> mf.onsubmit = function() {MoveWindow(id); return false;}
> PutIn($text("x: "), mf);
> xmov = $input("text", id+"_x", 10000); xmov.size=5;
> ymov = $input("text", id+"_y", 10000); ymov.size=5;
> movbutn = $input("submit", id+"_mov", "<- Move");
> PutIn(xmov, mf);PutIn($text(", y: "), mf);PutIn(ymov, mf);
> PutIn(movbutn, mf); PutIn(mf, row3cell);
>
> // Sizing buttons for row 3.
> PutIn(BottomSizeIn, row3cell); PutIn(BottomSizeOut, row3cell);
> PutIn(sizesebutton(id), row3cell); PutIn(row3cell, row3);
>
> // Now make the moving events:
> tb.onmousedown = function(){StartMoving(id);}
> tb.onmouseup = function(){show(id+"_iframe");}
>
> // Put the frame in the cell
> PutIn(appframe, appdiv); PutIn(appdiv, appcell);
> // The appcell in the sceond row, the title bar in the first
> PutIn(appcell, row2);
> // control box, title box, close box
> PutIn(ctlb, row1);PutIn(tb, row1); PutIn(cb, row1);
> //the three rows into the table (window)
> tablebody = $make("tbody"); // ie is fussy about this
> PutIn(row1, tablebody); PutIn(row2, tablebody);PutIn(row3,
> tablebody);
> // the window into the desktop
> PutIn(tablebody, nw); PutIn(nw, $("desktop"));
> }
> </script>
>
> <!-- The Desktop-Navigation box scripts-->
> <script>
> function gotosection(section)
> {
> //msg(section);
> if (section < 11) yoffset = 0;
> else if (section < 21) yoffset = 1;
> else if (section < 31) yoffset = 2;
> else if (section < 41) yoffset = 3;
> else if (section < 51) yoffset = 4;
> else if (section < 61) yoffset = 5;
> else if (section < 71) yoffset = 6;
> else if (section < 81) yoffset = 7;
> else if (section < 91) yoffset = 8;
> else yoffset = 9;
>
> x = (Width("desktop")/10)*((section-1)-yoffset*10);
> y = (Height("desktop")/10)*(yoffset);
>
> NavBoxX = 450; // Offset values to display the navbox after moving.
> NavBoxY = 60;
>
> // Move navbar to some visible area:
> if (x+Width("navbox")+NavBoxX < Width("desktop")) XIs("navbox",
> x+NavBoxX);
> else {Overlap = (x+Width("navbox")) - Width("desktop");
> XIs("navbox", x-Overlap);}
>
> if (y+Height("navbox")+NavBoxY < Height("desktop")) YIs("navbox",
> y+NavBoxY);
> else {Overlap = (y+Height("navbox")) - Height("desktop");
> YIs("navbox", y-Overlap);}
>
> window.scrollTo(x,y); // scroll the window to the start of the
> desired hundredth square.
> }
>
> </script>
>
> <!-- the desktop gui object -->
> <div id='desktop'
> style='padding:5;position:absolute;top:1;left:1;width:10000;height:10000;
> overflow:hidden;border-style:solid;background-color:ddeeff;border-width:1;'
> onmouseup='StopMoving();StopSizing();'
> onmousedown ='SetMouseMoving(event)'
> onmousemove='MoveIfMoving(event)'>
>
> <!-- the navigation box -->
> <div id='navbox' onclick='this.style.zIndex=++TopZIndex;'
> style="border-width:1;border-style:solid;
> border-style:solid;border-width:1;background-color:ffffff;width:230;
> height:260;
> top:60;left:450;position:absolute;overflow:visible;">
> <table border=1 width=100% height=100%>
> <tr style='vertical-align:top;'>
> <td colspan=2 style='cursor:move;'
> onmousedown='StartMoving("navbox")'>
> <table border=0 width="100%"> <tr><td>Desktop</td>
> <td align=right id='fetchbox'> <a
> style='cursorointer;font-size:12;text-decoration:underline;color:blue'
> onclick='MakeWindowList()'> Fetch Window: ...</a></td></tr>
> </table>
> </tr>
> <tr>
>
> <!-- the navigation grid -->
> <td id='desktopgrid'>
> <script>
> function MakeNavGrid()
> {
> navtable = $make("table");
> tablebody = $make("tbody");
> navtable.border=1;
> for (rows=1;rows<11;rows++)
> {
> var row = $make("tr");
> for (cols=1;cols<11;cols++)
> {
> var cell = $make("td");
> Section = ((rows-1)*10) + cols;
> cell.id=Section;
> cell.style.fontSize="9";
> cell.onclick = function (){gotosection(this.id);}
> cell.style.cursor ="pointer";
> cell.onmouseover=function(){this.style.backgroundColor='ccddee';}
> cell.onmouseout=function(){this.style.backgroundColor='ffffff';}
> PutIn($text(" "+Section+" "), cell);
> PutIn(cell, row);
> }
> PutIn(row, tablebody);
> }
> PutIn(tablebody, navtable);
> PutIn(navtable, $("desktopgrid"));
> }
>
> MakeNavGrid(); // Make a nav grid, it knows where to put
> itself.
>
> function FetchWindow(list, e) // Get a window according to a
> list-click
> {
> var winid = list[list.selectedIndex].value;
> WinMove(winid, Left("navbox"), Top("navbox"));//XIs(winid,
> Left("navbox")); YIs(winid, Top("navbox"));
> $del("WindowList");
> AddToHeight("navbox", -200);
> }
> function MakeWindowList() // show all windows on navbox.
> {
> // Delete it if it's already there.
> if ($("WindowList"))
> {
> AddToHeight("navbox", -200);
> $del("WindowList");
> }
> else
> {
> var WindowList= $make("select","WindowList");
> var tables = document.getElementsByTagName('table');
> for (table in tables)
> {
> id = tables[table].id ;
> if (id != undefined)
> {
> // if there's an iframe it's one of ours
> if ($(id+"_iframe"))
> {
> option = $make("option");
> option.value = id;
> PutIn($text($(id+"_Title").value), option);
> PutIn(option, WindowList);
> }
> }
> }
>
> WindowList.size = 10;
> WindowList.style.display = "block";
> WindowList.onclick = function(){FetchWindow(this,
> window.event);}
> PutIn(WindowList, $("fetchbox"));
> AddToHeight("navbox", 200);
> }
> }
>
> function SizeDesktop() // resize the desktop according to the
> navbox
> {
> HeightIs("desktop", $("desktopheight").value);
> WidthIs("desktop", $("desktopwidth").value);
> return false;
> }
>
> function ShowDesktopSize() // reset the navbox values according
> to the desktop
> {
> $("desktopheight").value = Height("desktop");
> $("desktopwidth").value = Width("desktop");
> }
> </script>
> </td>
> <td style='vertical-align:top;font-size:11;'>
> <form onsubmit='return SizeDesktop()' style='display:inline;'>
> <font style='font-weight:bold;'>Width</font><br><input
> type='text' value='10000' size=3 id='desktopwidth' /><br> pixels
> <br><br>
> <font style='font-weight:bold;'>Height</font><br><input
> type='text'value='10000' size=3 id='desktopheight' />pixels
> <br><br>
> <input type='submit' value='Set' />
> </form>
> </td>
> </tr>
> <tr>
> <td colspan=2>
> <font style='font-size:10;'>
> Go to a section, resize, or stretch the desktop by dragging
> any window past its edges
> </font>
> </td>
> </tr>
> </table>
> </div>
>
> <!-- desktop background controls -->
> <table border=0
> style='width:650;border-style:dashed;border-width:1;'>
> <tr>
> <td>
> [<a style='cursorointer;color:blue;'
> onclick='toggle("helpbox");XIs("helpbox", 40);YIs("helpbox",
> 100);'>Help</a>]
> [<a style='cursorointer;color:blue;' onclick='XIs("navbox",
> 450);YIs("navbox", 60);show("navbox");'>Navbox</a>]
> </td>
> <td align=right> Load URL:
> <form style='display:inline;' onsubmit='return LoadUrl();'>
> <script>
> function LoadUrl() // grab the url from the form and load it in
> a new window.
> {
> WindowsNow++;CreateWindow($("newurl").value, undefined,
> $("newtitle").value)
> return false;
> }
> </script>
> <input type='text' style='font-size:10;' size=40 id='newurl'
> value='http://www.google.com/search?q=' />
> <input type='text' style='font-size:10;' id='newtitle'
> value='New Title' />
> <input type='submit' style='cursorointer;' value='<-Open' />
> </form>
> </td>
> </tr>
> </table>
> <br>Execute Javascript [<a
> style='cursorointer;text-decoration:underline;color:blue;'
> onclick='toggle("codeboxes");$("helpbox").style.display=$("codeboxes").style.display;'
> >...</a>]:
> <div style="display:block;" id="codeboxes">
> <textarea id='code' ACCESSKEY='C' rows=4 cols=40
> onfocus='this.value=""'
> onblur='ExecuteJavascript(this);'></textarea><br>
> <textarea id='codememory' rows=4 cols=40
> onfocus='GetCode();'></textarea><br>
> </div>
>
> <!-- the help box -->
> <table onclick='this.style.zIndex=++TopZIndex;' id="helpbox"
> style='background-color:white;border-style:solid;border-width:1;border-color:black;
> position:absolute;left:40;top:100;'>
> <tr>
> <td onmousedown="StartMoving('helpbox');" style='cursor:move;'>
> <font style='color:005500;font-weight:bold;'>Help</font></td>
> </tr>
> <tr>
> <td>
> <ul style='overflow:auto;
> height:300;width:350;font-size:12;'>
> <li>Press tab in top textbox to execute its contents </li>
> <li>Alt+C to set focus to the code box</li>
> <li>L(+tab) to show last code</li>
> <li>Javascript will be copied to the second box regardless</li>
> <li>Commands provided by this system:
> <ul style='font-family:courier;'>
> <li>CreateWindow(url, id, title, height, width, top, left);
> <font style='color:green;'>// Like the "open" button. Only url
> is necessary.</font></li>
> <li>WinMove(id, x, y); <font style='color:green;'> // Move a
> window by id,
> resize desktop accordingly</font></li>
> <li>WinSize(id, x, y); <font style='color:green;'> // Doesn't
> resize the desktop</font></li>
> <li>msg(text); <font style='color:green;'>// shortcut to
> window.alert();</font></li>
> <li>$(id); <font style='color:green;'>//
> document.getElementById();</font></li>
> <li>$make(tagtype, id); <font style='color:green;'>// return a
> new html element</font></li>
> <li>$del(id); <font style='color:green;'>// remove element
> from document tree </font></li>
> <li>$text(text); <font style='color:green;'>// returns a text
> node with text in it </font></li>
> <li>$input(type, name, value, id); <font
> style='color:green;'>// returns a form input. Type and name are
> required</font></li>
> <li>AddToHeight(id, pixels); <font style='color:green;'>// Add
> to an elements height, must already have a pixel value</font></li>
> <li>AddToWidth(id, pixels);</li>
> <li>AddToTop(id, pixels); <font style='color:green;'>// Can
> also use AddToY();</font></li>
> <li>AddToLeft(id, pixels); <font style='color:green;'>// Can
> also use AddToX();</font></li>
> </ul>
> </li>
> <ul>
> </td>
> </tr>
> </table>
>
> <!-- this will execute as the page finishes loading -->
> <script>
> LastCommand=""; // The last code executed from the javascript box
>
> function ExecuteJavascript(CodeBox)
> {
> var Code = CodeBox.value;
> if (Code.toUpperCase() == "L") // in a fraction of a second, show
> last command
> setTimeout("$('code').focus();$('code').value = LastCommand;",
> 1);
> else if(Code.toUpperCase() != "")
> {
> LastCommand = CodeBox.value;
> eval(LastCommand);
> }
> }
>
> // Use to add the executed code to a buffer, (the second text box).
> function GetCode()
> {
> var Code = $("code").value;
> if (Code.toUpperCase() != "L" && Code !="")
> {
> $("codememory").value+=$("code").value;
> $("codememory").value+="\n";
> }
> }
>
> $("code").focus(); // set focus to the javascript code box
> </script>
> <div>
> </body>
> </html>
>
 
Reply With Quote
Reply

« Delete text that shows through banner graphic. | shared border updates not published »
Thread Tools
Rate This Thread
Rate This Thread:

Posting Rules
You may not post new threads
You may not post replies
You may not post attachments
You may not edit your posts
BB code is On
Smilies are On
[IMG] code is On
HTML code is Off
Trackbacks are On
Pingbacks are On
Refbacks are Off

Similar Threads
Thread Thread Starter Forum Replies Last Post
Drawing lines, pixels, circles with DHTML/Ajax/ActiveX jason.m.ho@gmail.com Windows XP Internet Explorer 1 10th Oct 2006 02:29 PM
text disappeared, document still is 24KB how do I retrieve =?Utf-8?B?YXN3NjE=?= Microsoft Word Document Management 4 9th Sep 2006 05:42 AM
Open Source IDE, Windowing System and Desktop Environment (31kb)* darwinist@gmail.com Freeware 21 8th Aug 2006 03:17 AM
Detect Scroll Offset/Dragging While Scrolling (html windowing system). darwinist Windows XP Internet Explorer 0 2nd Aug 2006 05:13 AM
dhtml event handling using dhtml edit control possible? Abhijeet Shelke Microsoft Dot NET Framework 0 5th Nov 2003 07:14 AM


Features
Forums Startup Database Reviews Articles FAQ / Guidelines About Us
 

Advertising
 

Newsgroups
Windows Vista Windows XP Microsoft Word Microsoft DotNet Windows 2000 AntiSpyware Microsoft Access Microsoft Excel Microsoft Outlook Hardware
 


All times are GMT +1. The time now is 05:05 PM.
Powered by vBulletin®. Copyright ©2000 - 2012, Jelsoft Enterprises Ltd.
SEO by vBSEO ©2010, Crawlability, Inc.
Contact Us - Archive - Privacy Statement - Top