RE: [xsl] Javascript and XSLT

Subject: RE: [xsl] Javascript and XSLT
From: Jen Jiang <zhenjiang14221@xxxxxxxxx>
Date: Sat, 25 Sep 2004 19:41:40 -0700 (PDT)
process_login_member.xsl: 

"<?xml version="1.0"?>
<!DOCTYPE xsl:stylesheet [
	<!ENTITY % HTMLlat1 SYSTEM "Dtd/HTMLlat1x.ent">
	%HTMLlat1;
	<!ENTITY % HTMLsymbol SYSTEM "Dtd/HTMLsymbolx.ent">
	%HTMLsymbol;
	<!ENTITY % HTMLspecial SYSTEM "Dtd/HTMLspecialx.ent">
	%HTMLspecial;
]>
<xsl:stylesheet version="1.0" 
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
    <xsl:import href="cascademenu_member.xsl"/>
	<xsl:import href="footer.xsl"/>
	<xsl:import href="menubarv.xsl"/>
	<xsl:import href="menubarh_member.xsl"/>
	<xsl:import href="header.xsl"/>
	
	<xsl:output method="html" encoding="iso-8859-1"/>
	<xsl:template match="/">
		<html>
			<xsl:for-each select="//ROOT">
				<!-- If the username or password entered is not
the same as pulled 
out from db. Ask for login again -->
				<!--xsl:if test="VAR_USERNAME !=OBJECT/USERNAME or
VAR_PASSWORD != 
OBJECT/PASSWORD"-->
				<xsl:if test="WRONG_USERNAME != ' ' or
WRONG_PASSWORD != ' ' ">
					<head>
						<title>Member Login Page</title>
						<meta http-equiv="Content-Type"
content="text/html; 
charset=iso-8859-1"/>
						<link rel="stylesheet" href="../style/style.css"

type="text/css"/>
					</head>
					<body bgcolor="#8080C0" link="#6666FF"
vlink="#6666FF" 
alink="#CCCCCC">
						<!--xsl:import href="header.xsl"/-->
						<xsl:call-template name="header" />
						<!--Start of repeating part-->
						<table width="100%" border="0" align="center"
cellpadding="10">
							<!--xsl:import href="menubarh_member.xsl"/-->
								<xsl:call-template name="menubarh_member" />
								<tr bgcolor="#6699FF">
								<!--xsl:import href="menubarv.xsl"/-->
								<xsl:call-template name="menubarv" />
								<td bgcolor="#FFFFFF" valign="top"
height="400">
									<div align="center">
									You've entered a invalid username or
password. Please try 
again.	
										<p>
											<font face="Verdana, Arial, Helvetica,
sans-serif" size="3">
												<b>Member Login </b>
											</font>
										</p>
										<form name="member_login_form2"
method="post" 
action="?CN=process_login_member">
											<table width="49%" border="0" height="88">
												<tr>
													<td width="38%" height="40">
														<div align="right">
															<font face="Verdana" size="2">User
name</font>
														</div>
													</td>
													<td width="62%" height="40">
														<input type="text" name="username"/>
													</td>
												</tr>
												<tr>
													<td width="38%" height="48">
														<div align="right">
															<font face="Verdana"
size="2">Password</font>
														</div>
													</td>
													<td width="62%" height="48">
														<input type="password" name="password"/>
													</td>
												</tr>
											</table>
											<p>
												<input type="submit" name="Submit"
value="Sign in"/>
											</p>
										</form>
									</div>
								</td>
							</tr>
						</table>
						<!--xsl:import href="footer.xsl"/-->
						<xsl:call-template name="footer" />
					</body>
				</xsl:if>
				<xsl:if test="VAR_USERNAME = OBJECT/USERNAME and
VAR_PASSWORD = 
OBJECT/PASSWORD">
					<head>
						<title>User's Page</title>
						<meta http-equiv="Content-Type"
content="text/html; 
charset=iso-8859-1"/>
						<link rel="stylesheet" href="../style/style.css"

type="text/css"/>
						<link rel="stylesheet"
href="../style/cascademenu.css" 
type="text/css"/>
						<!--xsl:import href="cascademenu_member.xsl"/-->
						<xsl:call-template name="cascademenu_member" />
					</head>
					<body bgcolor="#8080C0" marginwidth="0"
marginheight="0" 
style="margin: 0" onLoad="writeMenus()" onResize="if
(isNS4) nsResizeHandler()" 
link="#6666FF" vlink="#6666FF" alink="#CCCCCC">
						<!--xsl:import href="header.xsl"/-->
						<xsl:call-template name="header" />
						<!--Start of repeating part-->
						<table width="100%" border="0" align="center"
cellpadding="10">
							<!--xsl:import href="menubarh_member.xsl"/-->
							<xsl:call-template name="menubarh_member" />
							<tr bgcolor="#6699FF">
								<td width="18%" valign="top"
bgcolor="#CCCCCC">
								</td>
								<td bgcolor="#FFFFFF" valign="top"
height="400">
									<div align="center">
										<p>&nbsp;</p>
										<font color="#000000" face="Verdana, Arial,
Helvetica, 
sans-serif" size="2">
											<b><font color="#000000" face="Verdana,
Arial, Helvetica, 
sans-serif" size="2">Welcome </font>
											<font color="red" face="Verdana, Arial,
Helvetica, 
sans-serif" size="2"><xsl:value-of
select="OBJECT/USERNAME"/></font>
											<font color="#000000" face="Verdana, Arial,
Helvetica, 
sans-serif" size="2">to the member's web
site.</font></b>
											<font color="#000000" face="Verdana, Arial,
Helvetica, 
sans-serif" size="2"><p>You have successfully logged
in.</p></font>
											<font color="#000000" face="Verdana, Arial,
Helvetica, 
sans-serif" size="2"><p>You can click on the links on
the left menu bar to 
view information or take the questionnaire.</p></font>
										</font>
									</div>
								</td>
							</tr>
						</table>
						<!--xsl:import href="footer.xsl"/-->
						<xsl:call-template name="footer" />
					</body>
				</xsl:if>
			</xsl:for-each>
		</html>
	</xsl:template>
</xsl:stylesheet>


This is the file containing javascript:

<?xml version="1.0"?>
<!DOCTYPE xsl:stylesheet [
	
<!ENTITY % HTMLlat1 SYSTEM "Dtd/HTMLlat1x.ent">
	%HTMLlat1;
	<!ENTITY % 
HTMLsymbol SYSTEM "Dtd/HTMLsymbolx.ent">
	%HTMLsymbol;
	<!ENTITY % 
HTMLspecial SYSTEM "Dtd/HTMLspecialx.ent">
	%HTMLspecial;
]>
<xsl:stylesheet 
version="1.0"
xmlns:xsl="http://www.w3.org/1999/XSL/Transform";>
<script 
language="javascript" 
type="text/javascript">
<xsl:comment>
<![CDATA[
var isDOM = (document.getElementById ? true : false); 
var isIE4 = 
((document.all && !isDOM) ? true : false);
var isNS4 = (document.layers ? 
true : false);
function getRef(id) {
if (isDOM) return 
document.getElementById(id);
if (isIE4) return document.all[id];
if (isNS4) return 
document.layers[id];
}
function getSty(id) {
return (isNS4 ? getRef(id) : 
getRef(id).style);
} 
// Hide timeout.
var popTimer = 0;
// Array showing 
highlighted menu items.
var litNow = new Array();
function 
popOver(menuNum, itemNum) {
clearTimeout(popTimer);
hideAllBut(menuNum);
litNow = 
getTree(menuNum, itemNum);
changeCol(litNow, true);
targetNum = 
menu[menuNum][itemNum].target;
if (targetNum > 0) {
thisX = 
parseInt(menu[menuNum][0].ref.left) +
parseInt(menu[menuNum][itemNum].ref.left);
thisY = 
parseInt(menu[menuNum][0].ref.top) + 
parseInt(menu[menuNum][itemNum].ref.top);
with (menu[targetNum][0].ref) {
left = parseInt(thisX + 
menu[targetNum][0].x);
top = parseInt(thisY + menu[targetNum][0].y);
visibility 
= 'visible';
      }
   }
}
function popOut(menuNum, itemNum) {
if 
((menuNum == 0) && 
!menu[menuNum][itemNum].target)
hideAllBut(0)
else
popTimer = setTimeout('hideAllBut(0)', 500);
}
function getTree(menuNum, 
itemNum) {

// Array index is the menu number. The contents are
null (if 
that menu is not a parent)
// or the item number in that menu that is an 
ancestor (to light it up).
itemArray = new 
Array(menu.length);

while(1) {
itemArray[menuNum] = itemNum;
// If we've reached the top of the 
hierarchy, return.
if (menuNum == 0) return itemArray;
itemNum = 
menu[menuNum][0].parentItem;
menuNum = menu[menuNum][0].parentMenu;
   }
}

// 
Pass an array and a boolean to specify colour change,
true = over 
colour.
function changeCol(changeArray, isOver) {
for (menuCount = 0; 
menuCount < changeArray.length; menuCount++) {
if (changeArray[menuCount]) 
{
newCol = isOver ? menu[menuCount][0].overCol : 
menu[menuCount][0].backCol;
// Change the colours of the div/layer background.
with 
(menu[menuCount][changeArray[menuCount]].ref) {
if (isNS4) bgColor = newCol;
else 
backgroundColor = newCol;
         }
      }
   }
}
function 
hideAllBut(menuNum) {
var keepMenus = getTree(menuNum, 1);
for (count = 0; count 
< menu.length; count++)
if 
(!keepMenus[count])
menu[count][0].ref.visibility = 'hidden';
changeCol(litNow, false);
}

// *** MENU CONSTRUCTION 
FUNCTIONS ***

function Menu(isVert, popInd, x, y, width, overCol, 
backCol, borderClass, textClass) {
// True or false - a vertical 
menu?
this.isVert = isVert;
// The popout indicator used (if any) for this 
menu.
this.popInd = popInd
// Position and size settings.
this.x = x;
this.y 
= y;
this.width = width;
// Colours of menu and items.
this.overCol = 
overCol;
this.backCol = backCol;
// The stylesheet class used for item 
borders and the text within items.
this.borderClass = 
borderClass;
this.textClass = textClass;
// Parent menu and item numbers, indexed 
later.
this.parentMenu = null;
this.parentItem = null;
// Reference to the 
object's style properties (set later).
this.ref = null;
}

function 
Item(text, href, frame, length, spacing, target) {
this.text = 
text;
this.href = href;
this.frame = frame;
this.length = length;
this.spacing = 
spacing;
this.target = target;
// Reference to the object's style 
properties (set later).
this.ref = null;
}

function writeMenus() {
if (!isDOM 
&& !isIE4 && !isNS4) return;

for (currMenu = 0; currMenu < menu.length; 
currMenu++) with (menu[currMenu][0]) {
// Variable for holding HTML for 
items and positions of next item.
var str = '', itemX = 0, itemY = 
0;

// Remember, items start from 1 in the array (0 is
menu object itself, 
above).
// Also use properties of each item nested in the
other with() 
for construction.
for (currItem = 1; currItem < menu[currMenu].length; 
currItem++) with (menu[currMenu][currItem]) {
var itemID = 'menu' + 
currMenu + 'item' + currItem;

// The width and height of the menu item - 
dependent on orientation!
var w = (isVert ? width : length);
var h = 
(isVert ? length : width);

// Create a div or layer text string with 
appropriate styles/properties.
// the width must be a miniumum of 3 for it 
to work in that browser.
if (isDOM || isIE4) {
str += '<div id="' + 
itemID + '" style="position: absolute; left: ' + itemX
+ '; top: ' + itemY 
+ '; width: ' + w + '; height: ' + h + '; visibility:
inherit; ';
if 
(backCol) str += 'background: ' + backCol + '; ';
str += '" ';
}
if 
(isNS4) {
str += '<layer id="' + itemID + '" left="' + itemX +
'" top="' + 
itemY + '" width="' +  w + '" height="' + h + '"
visibility="inherit" 
';
if (backCol) str += 'bgcolor="' + backCol + '" ';
}
if (borderClass) 
str += 'class="' + borderClass + '" ';

// Add mouseover handlers and 
finish div/layer.
str += 'onMouseOver="popOver(' + currMenu + ',' + 
currItem + ')" onMouseOut="popOut(' + currMenu + ',' +
currItem + ')">';

// 
Add contents of item (default: table with link
inside).
// In IE/NS6+, 
add padding if there's a border to emulate NS4's layer
padding.
// If a 
target frame is specified, also add that to the <a>
tag.

str += 
'<table width="' + (w - 8) + '" border="0"
cellspacing="0" cellpadding="' + 
(!isNS4 && borderClass ? 3 : 0) + '"><tr><td
align="left" height="' + (h 
- 7) + '">' + '<a class="' + textClass + '" href="' +
href + '"' + 
(frame ? ' target="' + frame + '">' : '>') + text +
'</a></td>';
if (target 
> 0) {

// Set target's parents to this menu 
item.
menu[target][0].parentMenu = currMenu;
menu[target][0].parentItem = currItem;

// Add a 
popout indicator.
if (popInd) str += '<td class="' + textClass + '" 
align="right">' + popInd + '</td>';
}
str += '</tr></table>' + (isNS4 ? 
'</layer>' : '</div>');
if (isVert) itemY += length + spacing;
else itemX += 
length + spacing;
}
if (isDOM) {
var newDiv = 
document.createElement('div');
document.getElementsByTagName('body').item(0).appendChild(newDiv);
newDiv.innerHTML 
= str;
ref = newDiv.style;
ref.position = 'absolute';
ref.visibility = 
'hidden';
}

// Insert a div tag to the end of the BODY with menu
HTML 
in place for IE4.
if (isIE4) 
{
document.body.insertAdjacentHTML('beforeEnd', '<div
id="menu' + currMenu + 'div" ' + 'style="position: 
absolute; visibility: hidden">' + str + '</div>');
ref = getSty('menu' + 
currMenu + 'div');
}

// In NS4, create a reference to a new layer and write

the items to it.
if (isNS4) {
ref = new 
Layer(0);
ref.document.write(str);
ref.document.close();
}

for (currItem = 1; currItem < 
menu[currMenu].length; currItem++) {
itemName = 'menu' + currMenu + 'item' + 
currItem;
if (isDOM || isIE4) menu[currMenu][currItem].ref = 
getSty(itemName);
if (isNS4) menu[currMenu][currItem].ref =
ref.document[itemName];
   
}
}
with(menu[0][0]) {
ref.left = x;
ref.top = y;
ref.visibility = 
'visible';
   }
}

var menu = new Array();

// Default colours passed to 
most menu constructors (just passed to functions, not
// a global 
variable - makes things easier to change later in
bulk).
var defOver = 
'#8080C0', defBack = '#CCCCFF';

// Default 'length' of menu items - item 
height if menu is vertical, width if horizontal.
var defLength = 22;

// 
Menu 0 is the special, 'root' menu from which
everything else 
arises.()
menu[0] = new Array();
menu[0][0] = new Menu(true, '', 30, 150, 150, 
'#8080C0', '#CCCCCC', '', 'itemText');
menu[0][1] = new Item('  View 
Events', '?CN=viewEvents', '', 30, 0, 0);
menu[0][2] = new Item('  Veiw 
Staff Members', '?CN=viewStaff', '', 30, 0, 0);
menu[0][3] = new Item('  
View Charts', '', '', 30, 0, 3);
menu[0][4] = new Item('  Questionnaire', 
'?CN=questions', '', 30, 0, 0);
menu[0][5] = new Item('  User Logout', 
'?CN=member_logout', '', 30, 0, 0);

// Membership menu.
menu[1] = new 
Array();
menu[1][0] = new Menu(true, '>', 100, 22, 80, defOver,

defBack, 'itemBorder', 'itemText');
menu[1][1] = new Item('Add', 
'?CN=addMember', '', defLength, 0, 0);
menu[1][2] = new Item('Delete', 
'?CN=delMemberInfo', '', defLength, 0, 0);
menu[1][3] = new Item('Modify', 
'?CN=modMemberInfo', '', defLength, 0, 0);

// Questionnaire menu.
menu[2] = new 
Array();
menu[2][0] = new Menu(true, '>', 100, 22, 80, defOver,

defBack, 'itemBorder', 'itemText');
menu[2][1] = new Item('Add', 
'?CN=addQuestion', '', defLength, 0, 0);
menu[2][2] = new Item('Delete', 
'?CN=delQuestion', '', defLength, 0, 0);
menu[2][3] = new Item('Modify', '#', '', 
defLength, 0, 0);

// View Charts menu
menu[3] = new 
Array();
menu[3][0] = new Menu(true, '>', 100, 22, 140,
defOver, defBack, 'itemBorder', 
'itemText');
menu[3][1] = new Item('Age Distribution', '?CN=age',
'', 
defLength, 0, 0);
menu[3][2] = new Item('Medicine Usage',
'?CN=medicine', 
'', defLength, 0, 0);
menu[3][3] = new Item('Tinnitus Occurrence', 
'?CN=occurrence', '', defLength, 0, 0);
menu[3][4] = new Item('Tinnitus 
Loudness', '?CN=loudness', '', defLength, 0, 0);
menu[3][5] = new 
Item('Sound of Tinnitus', '?CN=sound', '', defLength,
0, 0);
menu[3][6] = new 
Item('Use of Hearing Aid', '?CN=hearingaid', '',
defLength, 0, 0);


// 
Reopen menu
menu[4] = new Array();
menu[4][0] = new Menu(true, '>', 
100, 0, 120, '#333366', '#666699', 'crazyBorder',
'crazyText');
menu[4][1] 
= new Item('Recent Doc 1:<br>Schedule', '#', '', 36,
4, 0);
menu[4][2] 
= new Item('Recent Doc 2:<br>Plan', '#', '', 36, 7,
0);
menu[4][3] = 
new Item('Etc. etc...', '#', '', defLength, 0, 0);

// Events 
menu
menu[5] = new Array();
menu[5][0] = new Menu(true, '>', 100, 22, 80, defOver,

defBack, 'itemBorder', 'itemText');
menu[5][1] = new Item('Add', 
'?CN=addEvent', '', defLength, 0, 0);
menu[5][2] = new Item('Delete', 
'?CN=delEvent', '', defLength, 0, 0);
menu[5][3] = new Item('Edit', '#', '', 
defLength, 0, 0);


var popOldWidth = window.innerWidth;
nsResizeHandler 
= new Function('if (popOldWidth != window.innerWidth) 
location.reload()');

if (isNS4) document.captureEvents(Event.CLICK);
document.onclick = 
clickHandle;

function clickHandle(evt)
{
 if (isNS4) 
document.routeEvent(evt);
 hideAllBut(0);
}

// This is just the moving command for the 
example.

function moveRoot()
{
 with(menu[0][0].ref) left = 
((parseInt(left) < 100) ? 100 : 
5);
}
]]>
</xsl:comment>
</script>
<style>
<xsl:comment>
.itemBorder { border: 1px solid gray }
.itemText { 
text-decoration: none; color: #000000; font: 12px
Verdana, Arial, Helvetica, 
sans-serif }

.crazyBorder { border: 2px outset #663399 }
.crazyText { 
text-decoration: none; color: #FFCC99; font: Bold 12px
Verdana, Arial, 
Helvetica, sans-serif}
</xsl:comment>
</style>
	
</xsl:stylesheet>

"
--- Michael Kay <mike@xxxxxxxxxxxx> wrote:

>  
> > 
> > It is that the stylesheet is not producing the
> HTML I
> > want it to produce.
> 
> Then show us the HTML you want to produce, compared
> with the HTML actually
> produced, and we can tell you what is wrong with
> your stylesheet.
> 
> Michael Kay
> http://www.saxonica.com/
> 
> 



		
__________________________________
Do you Yahoo!?
Yahoo! Mail - 50x more storage than other providers!
http://promotions.yahoo.com/new_mail

Current Thread