JavaScript Windows

Article: Location () Caller ()

When a class selector is intended to apply only to one kind of html element:
the selector consists of the element name [p], a period[.] and the identifier [author].
For example:
p.author {font-family:Consolas; font-weight: normal; font-size:10pt; line-height: normal; font-variant: normal; }

#contextMenu { position: absolute; visibility: hidden; 
               width: 275px; 
			   background-color: lightgrey; layer-background-color: lightgrey; 
			   border: 1px outset white; z-index:1; } 

<div id="contextMenu" onmouseout ="Menu=this; this.tid=setTimeout('Menu.style.visibility = \'hidden\'', 20);" 
                         onmouseover="clearTimeout(this.tid);"> 
</div>

function enableMenu(){document.oncontextmenu=showMenu;}
function showMenu(evt) { ... }

Requires

  • Basic Knowledge of HTML and Javascript
  • Inclusion of Workaround Code

Contents

Introduction
Default Page
Default Page: Workaround Function
Default Page: Optional HTML
Default Page: Required Script
Default Page: Complete Sample
Client Page: Required Script
Code Comments
Code Internals
Library Globals

Introduction

Javascript Windows are Cross Browser supporting Mozilla and Microsoft Internet Explorer.
In the case of Mozilla browsers the default standard is Netscape 6.0 or higher

Default Page

The default page needs the following code inclusions:

<script type="text/javascript" src="../jscript/jsWindows.js"></script>
<script type="text/javascript" src="../jscript/jsWindowCallBack.js"></script>
The above javascript code assumes that the javascript is at the same folder level as the Default Page.
<div id="docBody"></div>
JavaScript Windows creates the div as a placeholder for all of its elements.
body       { margin-top:0; margin-left:0; margin-right:0; margin-bottom:0; SCROLLBAR-FACE-COLOR: #cddfff; BACKGROUND: #ffffff; SCROLLBAR-HIGHLIGHT-COLOR: #ffffff; SCROLLBAR-SHADOW-COLOR: #6699ff; SCROLLBAR-3DLIGHT-COLOR: #cddfff; SCROLLBAR-ARROW-COLOR: #0000cc; SCROLLBAR-TRACK-COLOR: #efefef; SCROLLBAR-DARKSHADOW-COLOR: #0000cc; } 
.clWin          { position:absolute;             visibility:hidden; overflow:hidden; background-color:silver;}
.clCaption      { position:absolute; top:0;      width:200; font-family:arial,helvetica; font-size:11px; font-weight:bold; color:white; background-color:transparent;}
.clStatusBar    { position:absolute; top:0;      width:200; font-family:arial,helvetica; font-size:11px; font-weight:bold; color:white; background-color:transparent;border:1px solid silver;}
.clResize       { position:absolute;             width:14; height:18; }
.clWinButtons   { position:absolute; cursor:hand; font-family:arial,helvetica; font-size:12px;} 
.clWindow       { position:absolute;             width:200; background-color:transparent; overflow:hidden;}

The path to the images for logo, min, max, close, size is a parameter to window_init() default "../Image"
The trading system callback for iframe html push content uses either ."jsp" or ."aspx" and is a parameter to window_init()
border-top-color:blue; border-top-width:1px; border-top-style:solid;
border-left-color:blue; border-left-width:1px; border-left-style:solid;
border-bottom-color:blue; border-bottom-width:1px; border-bottom-style:solid;
border-right-color:blue; border-right-width:1px; border-right-style:solid;

Default Page: Workaround Function

The mouse click and mouse move(window or sizing) is now handled by the inclusion of jswindowCallBack.js
Frame Click is defined in the winLib.js file (include once in the code) while mouseUp is handled in jswindowCallBack.
When using Navigator the browser does not support the IFRAME onFocus method.

Default Page: Optional HTML

<div id="docBody"></div>
The Javascript Windows are actually added to this DIV which either you include or let the code do that.
Equally a P or a Span could be used it is the id of docBody that really matters.

Default Page: Required Script

<script type="text/javascript">
windows_init();
hWnd=addWindow('Navigation Menu','../FrameWest/deeptree.htm','');
</script>
The javascript, default page and images are all assumed to live in the same level folder.
It is important to set the relative path for the gif images used for the window Caption Title.
The javascript windows also require the library code is prepared before usage via windows_init()
The javascript function windows_init() can be called:
windows_init('../image') and thus not call SetImageJSPath(path)

Default Page: Complete Sample

<!DOCTYPE html>

<html lang="en">
<head>
<title>JavaScript Windows</title>
<script type="text/javascript" src="../jscript/jsWindows.js"></script>
<script type="text/javascript" src="../jscript/jsWindowCallBack.js"></script>

<style type=text/css>
</style>

</head>

<body>
<script type="text/javascript">
</script>

<!-- Place Your Rendering Code Here -->


<!-- Place Your Rendering Code Here -->

<script type="text/javascript">
var hWnd;
windows_init();
hWnd=addWindow('Navigation Menu','../FrameWest/deeptree.htm','')
</script>
</body>
</html>

Client Page: Required Script

This is handled by including:
the file <script type="text/javascript" src="../jscript/jswindowCallBack.js"></script>
jswindowCallBack.js contains the default mouse binding wm_mmove(e)
and a HideShow() method to determine if the Widget should be shown or hidden
It is not needed to include the JavaScript Windows code library in your pages.


<SCRIPT language="JavaScript">
// See jswindowCallBack.js
</SCRIPT>

Microsoft Internet Explorer before Version 7 shows the SELECT widget through any display DIV
To stop this action in your page your need to define function pageCallBack(action,arrayRects,yourLeftX,yourTopY)
The parameter action is either "H" or "S" for Hide or Show
The parameters yourLeftX and yourTopY are additions to the rectangle calculation due to the JS Windows chrome.
The Default (parent) Page should have winLib.js::overlap(divRectangle,mySelectRectangle)
As you can see the Rectangle is: left, top, width, height in absolute screen pixels.
The more complex pages, such as Tabs may need to be handled in a more complex fashion.
The idea is Hide if widget is in rectangle list otherwise show SELECT Widget.
There seems to be a hover issue with Explorer where these items are made visible when you hover over the frame page, in particular over the controls

The way to handle this issue is to wrap the SELECT widget inside a SPAN element
You then capture document.onmovemouse.
Set the style.visibility of the SELECT to the SPAN style.visibility
It makes good sense for the child to capture the document.onmovemouse and call the parent as follows: if (parent.mmove) {if (document.all) parent.mmove(event,2); else parent.mmove(e,2);} This does make the window moving and sizing more speed responsive.
Microsoft Internet Explorer Version 8 does not need these workaround calls into winLib.js or using the pageCallBack() method

Contents

Code Comments

handle = addWindow(title,url,menurule, x,y,w,h,,bg,bga)

title The Caption Name Of The WindowMandatory
url The location of the Client PageMandatory
menu rule Display On MenuOptional:Mandatory in Java Services Trading System
x The indent across the screenOptional
y The indent down the screenOptional
w The width of the windowOptional
h The Height of the windowOptional
The return value handle allows the developer to call the global functions
to add your own order of panel control images for example:
addDeleteIcon(handle);addSaveIcon(handle);

Code Internals

The style sheet attribute cursor:hand is not supported for onclick with IMG,DIV or SPAN in Netscape.


function lib_clipTo(r,b)
{
t=0;l=0;if(r<0)r=0;if(b<0)b=0;
this.ct=t; this.cW=r; this.cH=b; this.cl=l;
//this.css.clip="rect("+t+","+r+","+b+","+l+")";
this.css.width=r; this.css.height=b;
}
//a_windows[i].oWindow.css.overflow     = "hidden";
The usage of clipping and/or overflow for the page (IFrame) does not work correctly in Netscape.
If you un-remark these two lines in the source code Netscape will not automatically include scroll bars.
a_windows.bgcolor     = "silver";
a_windows.bgcoloron   = "#cdceff";

a_windows.bordersize  = 1;

a_windows.headh       = 20;
a_windows.bottomh     = 19;

a_windows.resizew     = 16;

a_windows.MarginX     =  2;

a_windows.MenuHeight  = 58;

a_windows.defwidth    = getPageWidth();
a_windows.defheight   = getPageHeight();

a_windows.MarginXchild= 200;

a_windows.between     =  2;
a_windows.logow       = 19;
Above are the attributes that can be customised.
Note the css style sheet includes height and width settings.
Match bottomh and resizew with clResize
headh is the height of the caption. The action images height influence this choice
MarginX is the left minimum window placement
MenuHeight is the top minimum window placement
defwidth and defheight are default window width and height
MarginXchildThe horizontal placement of windows relative to the 'Tree Window'
betweenRepresents the Tiling gap 'between' windows
logowWhen Cascading what to indent relative to previous window

Library Globals

function lib_tile_vertical()
function lib_tile_horizontal()
function lib_cascade_win()
function lib_arrange_icons()
function lib_reSize()

Contents