[jboss-cvs] jboss-seam/examples/numberguess/view ...
Gavin King
gavin.king at jboss.com
Wed Jan 31 12:06:36 EST 2007
User: gavin
Date: 07/01/31 12:06:36
Modified: examples/numberguess/view cheat.jspx confirm.jspx
giveup.jspx lose.jspx numberGuess.jspx win.jspx
Added: examples/numberguess/view niceforms.css niceforms.js
Log:
use niceforms looknfeel
Revision Changes Path
1.2 +7 -3 jboss-seam/examples/numberguess/view/cheat.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: cheat.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/cheat.jspx,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- cheat.jspx 16 Nov 2006 15:36:23 -0000 1.1
+++ cheat.jspx 31 Jan 2007 17:06:36 -0000 1.2
@@ -8,16 +8,20 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>You cheater!</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
+ <script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</head>
<body>
<h1>You cheater!</h1>
<f:view>
- <h:form>
+ <h:form styleClass="niceform">
(The answer is <h:outputText value="#{numberGuess.randomNumber}"/>.)
<h:commandButton value="Done"/>
</h:form>
</f:view>
</body>
+ </html>
</jsp:root>
1.2 +7 -3 jboss-seam/examples/numberguess/view/confirm.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: confirm.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/confirm.jspx,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- confirm.jspx 16 Nov 2006 15:36:23 -0000 1.1
+++ confirm.jspx 31 Jan 2007 17:06:36 -0000 1.2
@@ -8,17 +8,21 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>Do you really want to cheat?</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
+ <script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</head>
<body>
<h1>Do you really want to cheat?</h1>
<f:view>
- <h:form>
+ <h:form styleClass="niceform">
I'll be really disappointed if you do this...
<h:commandButton value="Yes" action="yes"/>
<h:commandButton value="No" action="no"/>
</h:form>
</f:view>
</body>
+ </html>
</jsp:root>
1.2 +7 -3 jboss-seam/examples/numberguess/view/giveup.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: giveup.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/giveup.jspx,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- giveup.jspx 17 Dec 2006 15:05:37 -0000 1.1
+++ giveup.jspx 31 Jan 2007 17:06:36 -0000 1.2
@@ -8,17 +8,21 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>Do you really want to give up now?</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
+ <script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</head>
<body>
<h1>Do you really want to give up now?</h1>
<f:view>
- <h:form>
+ <h:form styleClass="niceform">
You still have <h:outputText value="#{numberGuess.remainingGuesses}"/> guesses remaining.
<h:commandButton value="Yes" action="yes"/>
<h:commandButton value="No" action="no"/>
</h:form>
</f:view>
</body>
+ </html>
</jsp:root>
1.2 +5 -2 jboss-seam/examples/numberguess/view/lose.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: lose.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/lose.jspx,v
retrieving revision 1.1
retrieving revision 1.2
diff -u -b -r1.1 -r1.2
--- lose.jspx 25 Oct 2006 16:03:34 -0000 1.1
+++ lose.jspx 31 Jan 2007 17:06:36 -0000 1.2
@@ -6,8 +6,10 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>You lose.</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>You lose.</h1>
@@ -15,4 +17,5 @@
<a href="http://mathworld.wolfram.com/Bisection.html">bisection algorithm</a>.
Would you like to <a href="numberGuess.seam">play again</a>?
</body>
+ </html>
</jsp:root>
1.5 +9 -5 jboss-seam/examples/numberguess/view/numberGuess.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: numberGuess.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/numberGuess.jspx,v
retrieving revision 1.4
retrieving revision 1.5
diff -u -b -r1.4 -r1.5
--- numberGuess.jspx 17 Dec 2006 15:05:37 -0000 1.4
+++ numberGuess.jspx 31 Jan 2007 17:06:36 -0000 1.5
@@ -9,13 +9,16 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>Guess a number...</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
+ <script language="javascript" type="text/javascript" src="niceforms.js"><!-- --></script>
</head>
<body>
<h1>Guess a number...</h1>
<f:view>
- <h:form>
+ <h:form styleClass="niceform">
<h:messages globalOnly="true"/>
<h:outputText value="Higher!"
rendered="#{numberGuess.randomNumber gt numberGuess.currentGuess}"/>
@@ -27,7 +30,7 @@
<h:outputText value="#{numberGuess.remainingGuesses}"/> guesses.
<br />
Your guess:
- <h:inputText value="#{numberGuess.currentGuess}" id="guess" required="true">
+ <h:inputText value="#{numberGuess.currentGuess}" id="guess" required="true" size="3">
<f:validateLongRange maximum="#{numberGuess.biggest}"
minimum="#{numberGuess.smallest}"/>
</h:inputText>
@@ -39,4 +42,5 @@
</h:form>
</f:view>
</body>
+ </html>
</jsp:root>
1.3 +5 -2 jboss-seam/examples/numberguess/view/win.jspx
(In the diff below, changes in quantity of whitespace are not shown.)
Index: win.jspx
===================================================================
RCS file: /cvsroot/jboss/jboss-seam/examples/numberguess/view/win.jspx,v
retrieving revision 1.2
retrieving revision 1.3
diff -u -b -r1.2 -r1.3
--- win.jspx 16 Nov 2006 15:36:23 -0000 1.2
+++ win.jspx 31 Jan 2007 17:06:36 -0000 1.3
@@ -8,8 +8,10 @@
doctype-public="-//W3C//DTD XHTML 1.0 Transitional//EN"
doctype-system="http://www.w3c.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"/>
<jsp:directive.page contentType="text/html"/>
+ <html>
<head>
<title>You won!</title>
+ <link href="niceforms.css" rel="stylesheet" type="text/css" />
</head>
<body>
<h1>You won!</h1>
@@ -20,4 +22,5 @@
Would you like to <a href="numberGuess.seam">play again</a>?
</f:view>
</body>
+ </html>
</jsp:root>
1.1 date: 2007/01/31 17:06:36; author: gavin; state: Exp;jboss-seam/examples/numberguess/view/niceforms.css
Index: niceforms.css
===================================================================
/*##########################################
Name: Default styling for Niceforms v.1.0
Author: Lucian Slatineanu
URL: http://www.badboy.ro/
##########################################*/
/*General styles - NOT really related to the forms*/
/* {
margin:0;
padding:0;
}*/
body {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#404040;
background:#fff;
}
img {border:0;}
#container {padding:20px;}
/*Forms defaults - change as needed*/
input, textarea {
font-family:Arial, Helvetica, sans-serif;
font-size:12px;
color:#404040;
}
label {
color:#999;
cursor:pointer;
padding-left:2px;
line-height:16px;
}
label.chosen {color:#333;}
/*Transparent items*/
.outtaHere {
position:absolute;
left:-3000px;
}
/*Radio buttons*/
.radioArea, .radioAreaChecked {
display:block;
float:left;
clear:left;
width:15px;
height:14px;
font-size:0;
cursor:pointer;
}
.radioArea {background:url(images/radio.gif) no-repeat left top;}
.radioAreaChecked {background:url(images/radio.gif) no-repeat left bottom;}
/*Checkboxes*/
.checkboxArea, .checkboxAreaChecked {
display:block;
float:left;
clear:left;
width:13px;
height:13px;
font-size:0;
padding:0;
margin:0;
cursor:pointer;
}
.checkboxArea {background:url(images/checkbox.gif) no-repeat left top;}
.checkboxAreaChecked {background:url(images/checkbox.gif) no-repeat left bottom;}
.focused {border:1px dotted #ddd;}
/*Text inputs*/
.textinput, .textinputHovered {
height:15px;
background:url(images/input_bg.gif) repeat-x left top;
border:none;
padding:4px 0;
vertical-align:middle;
}
.textinputHovered {background-position:left bottom;}
.inputCorner {
padding-bottom:0;
vertical-align:middle;
}
/*Text areas*/
.txtarea .tr, .txtarea .tr_xon {background:url(images/txtarea_tr.gif) no-repeat top right;}
.txtarea .tr_xon {background:url(images/txtarea_tr_xon.gif) no-repeat top right;}
.txtarea img.txt_corner {
width:5px;
height:5px;
display:block;
}
.txtarea .br, .txtarea .br_xon {background:url(images/txtarea_br.gif) no-repeat top right;}
.txtarea .br_xon {background:url(images/txtarea_br_xon.gif) no-repeat top right;}
.txtarea .cntr {background:url(images/txtarea_cntr.gif) repeat-y right top;}
.txtarea .cntr_xon {background:url(images/txtarea_cntr_xon.gif) repeat-y right top;}
.txtarea .cntr_l, .txtarea .cntr_l_xon {
width:5px;
background:url(images/txtarea_l.gif) repeat-y left top;
float:left;
}
.txtarea .cntr_l_xon {background:url(images/txtarea_l_xon.gif) repeat-y left top;}
.txtarea textarea {
border:0;
background:none;
padding:0;
margin:5px;
}
/*Selects*/
.selectArea {
width:200px;
height:21px;
background:url(images/select_bg.gif) repeat-x left top;
}
.selectArea .left {
width:8px;
height:21px;
float:left;
background:url(images/select_left.gif) no-repeat left top;
}
.selectArea .right {
width:21px;
height:21px;
float:right;
background:url(images/select_right.gif) no-repeat left top;
}
.selectArea .right a {
display:block;
width:200px;
height:21px;
margin-left:-179px;
position:absolute;
}
.selectArea .right i {display:none;}
.selectArea .center {
width:160px;
color:#FFF;
padding-top:3px;
overflow:hidden;
white-space:nowrap;
}
/*Selects drop-down*/
.optionsDivInvisible, .optionsDivVisible {
position:absolute;
margin-top:-1px;
margin-left:3px;
width:172px;
background:#6f7074;
padding:2px;
font-size:11px;
z-index:20;
}
.optionsDivInvisible {display:none;}
.optionsDivVisible {display:block;}
.optionsDivVisible p {
margin:0;
padding:0;
}
.optionsDivVisible a {
color:#F2F2F2;
text-decoration:none;
display:block;
padding:1px 4px;
border:1px solid #6f7074;
}
.optionsDivVisible a:hover {
color:#FFF;
background:#5F6062;
border-color:#cfd0d6;
}
/*Button*/
.buttonSubmit, .buttonSubmitHovered {
width:auto;
height:26px;
color:#FFF;
font-weight:bold;
padding:2px;
background:url(images/button_bg.gif) repeat-x left top;
cursor:pointer;
border:none;
}
.buttonSubmitHovered {background-position:left bottom;}
.buttonImg {vertical-align:bottom;}
1.1 date: 2007/01/31 17:06:36; author: gavin; state: Exp;jboss-seam/examples/numberguess/view/niceforms.js
Index: niceforms.js
===================================================================
/*#############################################################
Name: Niceforms
Version: 1.0
Author: Lucian Slatineanu
URL: http://www.badboy.ro/
Feel free to use and modify but please provide credits.
#############################################################*/
//Global Variables
var niceforms = document.getElementsByTagName('form'); var inputs = new Array(); var labels = new Array(); var radios = new Array(); var radioLabels = new Array(); var checkboxes = new Array(); var checkboxLabels = new Array(); var texts = new Array(); var textareas = new Array(); var selects = new Array(); var selectText = "please select"; var agt = navigator.userAgent.toLowerCase(); this.ie = ((agt.indexOf("msie") != -1) && (agt.indexOf("opera") == -1)); var hovers = new Array(); var buttons = new Array(); var isMac = new RegExp('(^|)'+'Apple'+'(|$)');
//Theme Variables - edit these to match your theme
var selectRightSideWidth = 21;
var selectLeftSideWidth = 8;
var selectAreaHeight = 21;
var selectAreaOptionsOverlap = 2;
var imagesPath = "images/";
//Initialization function - if you have any other 'onload' functions, add them here
function init() {
if(!document.getElementById) {return false;}
preloadImages();
getElements();
separateElements();
replaceRadios();
replaceCheckboxes();
replaceSelects();
if(!isMac.test(navigator.vendor)) {
replaceTexts();
replaceTextareas();
buttonHovers();
}
}
//preloading required images
function preloadImages() {
preloads = new Object();
preloads[0] = new Image(); preloads[0].src = imagesPath + "button_left_xon.gif";
preloads[1] = new Image(); preloads[1].src = imagesPath + "button_right_xon.gif";
preloads[2] = new Image(); preloads[2].src = imagesPath + "input_left_xon.gif";
preloads[3] = new Image(); preloads[3].src = imagesPath + "input_right_xon.gif";
preloads[4] = new Image(); preloads[4].src = imagesPath + "txtarea_bl_xon.gif";
preloads[5] = new Image(); preloads[5].src = imagesPath + "txtarea_br_xon.gif";
preloads[6] = new Image(); preloads[6].src = imagesPath + "txtarea_cntr_xon.gif";
preloads[7] = new Image(); preloads[7].src = imagesPath + "txtarea_l_xon.gif";
preloads[8] = new Image(); preloads[8].src = imagesPath + "txtarea_tl_xon.gif";
preloads[9] = new Image(); preloads[9].src = imagesPath + "txtarea_tr_xon.gif";
}
//getting all the required elements
function getElements() {
var re = new RegExp('(^| )'+'niceform'+'( |$)');
for (var nf = 0; nf < document.getElementsByTagName('form').length; nf++) {
if(re.test(niceforms[nf].className)) {
for(var nfi = 0; nfi < document.forms[nf].getElementsByTagName('input').length; nfi++) {inputs.push(document.forms[nf].getElementsByTagName('input')[nfi]);}
for(var nfl = 0; nfl < document.forms[nf].getElementsByTagName('label').length; nfl++) {labels.push(document.forms[nf].getElementsByTagName('label')[nfl]);}
for(var nft = 0; nft < document.forms[nf].getElementsByTagName('textarea').length; nft++) {textareas.push(document.forms[nf].getElementsByTagName('textarea')[nft]);}
for(var nfs = 0; nfs < document.forms[nf].getElementsByTagName('select').length; nfs++) {selects.push(document.forms[nf].getElementsByTagName('select')[nfs]);}
}
}
}
//separating all the elements in their respective arrays
function separateElements() {
var r = 0; var c = 0; var t = 0; var rl = 0; var cl = 0; var tl = 0; var b = 0;
for (var q = 0; q < inputs.length; q++) {
if(inputs[q].type == 'radio') {
radios[r] = inputs[q]; ++r;
for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} radioLabels[rl] = labels[w]; ++rl;}}
}
if(inputs[q].type == 'checkbox') {
checkboxes[c] = inputs[q]; ++c;
for(var w = 0; w < labels.length; w++) {if(labels[w].htmlFor == inputs[q].id) {if(inputs[q].checked) {labels[w].className = "chosen";} checkboxLabels[cl] = labels[w]; ++cl;}}
}
if((inputs[q].type == "text") || (inputs[q].type == "password")) {texts[t] = inputs[q]; ++t;}
if((inputs[q].type == "submit") || (inputs[q].type == "button")) {buttons[b] = inputs[q]; ++b;}
}
}
function replaceRadios() {
for (var q = 0; q < radios.length; q++) {
//move radios out of the way
radios[q].className = "outtaHere";
//create div
var radioArea = document.createElement('div');
if(radios[q].checked) {radioArea.className = "radioAreaChecked";} else {radioArea.className = "radioArea";}
radioArea.style.left = findPosX(radios[q]) + 'px';
radioArea.style.top = findPosY(radios[q]) + 'px';
radioArea.style.margin = "1px";
radioArea.id = "myRadio" + q;
//insert div
radios[q].parentNode.insertBefore(radioArea, radios[q]);
//assign actions
radioArea.onclick = new Function('rechangeRadios('+q+')');
radioLabels[q].onclick = new Function('rechangeRadios('+q+')');
if(!this.ie) {radios[q].onfocus = new Function('focusRadios('+q+')'); radios[q].onblur = new Function('blurRadios('+q+')');}
radios[q].onclick = radioEvent;
}
return true;
}
function focusRadios(who) {
var what = document.getElementById('myRadio'+who);
what.style.border = "1px dotted #333"; what.style.margin = "0";
return false;
}
function blurRadios(who) {
var what = document.getElementById('myRadio'+who);
what.style.border = "0"; what.style.margin = "1px";
return false;
}
function checkRadios(who) {
var what = document.getElementById('myRadio'+who);
others = document.getElementsByTagName('div');
for(var q = 0; q < others.length; q++) {if((others[q].className == "radioAreaChecked")&&(others[q].nextSibling.name == radios[who].name)) {others[q].className = "radioArea";}}
what.className = "radioAreaChecked";
}
function changeRadios(who) {
if(radios[who].checked) {
for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}}
radios[who].checked = true; radioLabels[who].className = "chosen";
checkRadios(who);
}
}
function rechangeRadios(who) {
if(!radios[who].checked) {
for(var q = 0; q < radios.length; q++) {if(radios[q].name == radios[who].name) {radios[q].checked = false; radioLabels[q].className = "";}}
radios[who].checked = true; radioLabels[who].className = "chosen";
checkRadios(who);
}
}
function radioEvent(e) {
if (!e) var e = window.event;
if(e.type == "click") {for (var q = 0; q < radios.length; q++) {if(this == radios[q]) {changeRadios(q); break;}}}
}
function replaceCheckboxes() {
for (var q = 0; q < checkboxes.length; q++) {
//move checkboxes out of the way
checkboxes[q].className = "outtaHere";
//create div
var checkboxArea = document.createElement('div');
if(checkboxes[q].checked) {checkboxArea.className = "checkboxAreaChecked";} else {checkboxArea.className = "checkboxArea";}
checkboxArea.style.left = findPosX(checkboxes[q]) + 'px';
checkboxArea.style.top = findPosY(checkboxes[q]) + 'px';
checkboxArea.style.margin = "1px";
checkboxArea.id = "myCheckbox" + q;
//insert div
checkboxes[q].parentNode.insertBefore(checkboxArea, checkboxes[q]);
//asign actions
checkboxArea.onclick = new Function('rechangeCheckboxes('+q+')');
if(!isMac.test(navigator.vendor)) {checkboxLabels[q].onclick = new Function('changeCheckboxes('+q+')');}
else {checkboxLabels[q].onclick = new Function('rechangeCheckboxes('+q+')');}
if(!this.ie) {checkboxes[q].onfocus = new Function('focusCheckboxes('+q+')'); checkboxes[q].onblur = new Function('blurCheckboxes('+q+')');}
checkboxes[q].onkeydown = checkEvent;
}
return true;
}
function focusCheckboxes(who) {
var what = document.getElementById('myCheckbox'+who);
what.style.border = "1px dotted #333"; what.style.margin = "0";
return false;
}
function blurCheckboxes(who) {
var what = document.getElementById('myCheckbox'+who);
what.style.border = "0"; what.style.margin = "1px";
return false;
}
function checkCheckboxes(who, action) {
var what = document.getElementById('myCheckbox'+who);
if(action == true) {what.className = "checkboxAreaChecked";}
if(action == false) {what.className = "checkboxArea";}
}
function changeCheckboxes(who) {
if(checkboxLabels[who].className == "chosen") {
checkboxes[who].checked = true;
checkboxLabels[who].className = "";
checkCheckboxes(who, false);
}
else if(checkboxLabels[who].className == "") {
checkboxes[who].checked = false;
checkboxLabels[who].className = "chosen";
checkCheckboxes(who, true);
}
}
function rechangeCheckboxes(who) {
var tester = false;
if(checkboxLabels[who].className == "chosen") {
tester = false;
checkboxLabels[who].className = "";
}
else if(checkboxLabels[who].className == "") {
tester = true;
checkboxLabels[who].className = "chosen";
}
checkboxes[who].checked = tester;
checkCheckboxes(who, tester);
}
function checkEvent(e) {
if (!e) var e = window.event;
if(e.keyCode == 32) {for (var q = 0; q < checkboxes.length; q++) {if(this == checkboxes[q]) {changeCheckboxes(q);}}} //check if space is pressed
}
function replaceSelects() {
for(var q = 0; q < selects.length; q++) {
//create and build div structure
var selectArea = document.createElement('div');
var left = document.createElement('div');
var right = document.createElement('div');
var center = document.createElement('div');
var button = document.createElement('a');
var text = document.createTextNode(selectText);
center.id = "mySelectText"+q;
var selectWidth = parseInt(selects[q].className.replace(/width_/g, ""));
center.style.width = selectWidth - 10 + 'px';
selectArea.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
button.style.width = selectWidth + selectRightSideWidth + selectLeftSideWidth + 'px';
button.style.marginLeft = - selectWidth - selectLeftSideWidth + 'px';
button.href = "javascript:showOptions("+q+")";
button.onkeydown = selectEvent;
button.className = "selectButton"; //class used to check for mouseover
selectArea.className = "selectArea";
selectArea.id = "sarea"+q;
left.className = "left";
right.className = "right";
center.className = "center";
right.appendChild(button);
center.appendChild(text);
selectArea.appendChild(left);
selectArea.appendChild(right);
selectArea.appendChild(center);
//hide the select field
selects[q].style.display='none';
//insert select div
selects[q].parentNode.insertBefore(selectArea, selects[q]);
//build & place options div
var optionsDiv = document.createElement('div');
optionsDiv.style.width = selectWidth + 1 + 'px';
optionsDiv.className = "optionsDivInvisible";
optionsDiv.id = "optionsDiv"+q;
optionsDiv.style.left = findPosX(selectArea) + 'px';
optionsDiv.style.top = findPosY(selectArea) + selectAreaHeight - selectAreaOptionsOverlap + 'px';
//get select's options and add to options div
for(var w = 0; w < selects[q].options.length; w++) {
var optionHolder = document.createElement('p');
var optionLink = document.createElement('a');
var optionTxt = document.createTextNode(selects[q].options[w].text);
optionLink.href = "javascript:showOptions("+q+"); selectMe('"+selects[q].id+"',"+w+","+q+");";
optionLink.appendChild(optionTxt);
optionHolder.appendChild(optionLink);
optionsDiv.appendChild(optionHolder);
//check for pre-selected items
if(selects[q].options[w].selected) {selectMe(selects[q].id,w,q);}
}
//insert options div
document.getElementsByTagName("body")[0].appendChild(optionsDiv);
}
}
function showOptions(g) {
elem = document.getElementById("optionsDiv"+g);
if(elem.className=="optionsDivInvisible") {elem.className = "optionsDivVisible";}
else if(elem.className=="optionsDivVisible") {elem.className = "optionsDivInvisible";}
elem.onmouseout = hideOptions;
}
function hideOptions(e) { //hiding the options on mouseout
if (!e) var e = window.event;
var reltg = (e.relatedTarget) ? e.relatedTarget : e.toElement;
if(((reltg.nodeName != 'A') && (reltg.nodeName != 'DIV')) || ((reltg.nodeName == 'A') && (reltg.className=="selectButton") && (reltg.nodeName != 'DIV'))) {this.className = "optionsDivInvisible";};
e.cancelBubble = true;
if (e.stopPropagation) e.stopPropagation();
}
function selectMe(selectFieldId,linkNo,selectNo) {
//feed selected option to the actual select field
selectField = document.getElementById(selectFieldId);
for(var k = 0; k < selectField.options.length; k++) {
if(k==linkNo) {selectField.options[k].selected = "selected";}
else {selectField.options[k].selected = "";}
}
//show selected option
textVar = document.getElementById("mySelectText"+selectNo);
var newText = document.createTextNode(selectField.options[linkNo].text);
textVar.replaceChild(newText, textVar.childNodes[0]);
}
function selectEvent(e) {
if (!e) var e = window.event;
var thecode = e.keyCode;
switch(thecode){
case 40: //down
var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
var linkNo = 0;
for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
++linkNo;
if(linkNo >= selects[fieldId].options.length) {linkNo = 0;}
selectMe(selects[fieldId].id, linkNo, fieldId);
break;
case 38: //up
var fieldId = this.parentNode.parentNode.id.replace(/sarea/g, "");
var linkNo = 0;
for(var q = 0; q < selects[fieldId].options.length; q++) {if(selects[fieldId].options[q].selected) {linkNo = q;}}
--linkNo;
if(linkNo < 0) {linkNo = selects[fieldId].options.length - 1;}
selectMe(selects[fieldId].id, linkNo, fieldId);
break;
default:
break;
}
}
function replaceTexts() {
for(var q = 0; q < texts.length; q++) {
texts[q].style.width = texts[q].size * 10 + 'px';
txtLeft = document.createElement('img'); txtLeft.src = imagesPath + "input_left.gif"; txtLeft.className = "inputCorner";
txtRight = document.createElement('img'); txtRight.src = imagesPath + "input_right.gif"; txtRight.className = "inputCorner";
texts[q].parentNode.insertBefore(txtLeft, texts[q]);
texts[q].parentNode.insertBefore(txtRight, texts[q].nextSibling);
texts[q].className = "textinput";
//create hovers
texts[q].onfocus = function() {
this.className = "textinputHovered";
this.previousSibling.src = imagesPath + "input_left_xon.gif";
this.nextSibling.src = imagesPath + "input_right_xon.gif";
}
texts[q].onblur = function() {
this.className = "textinput";
this.previousSibling.src = imagesPath + "input_left.gif";
this.nextSibling.src = imagesPath + "input_right.gif";
}
}
}
function replaceTextareas() {
for(var q = 0; q < textareas.length; q++) {
var where = textareas[q].parentNode;
var where2 = textareas[q].previousSibling;
textareas[q].style.width = textareas[q].cols * 10 + 'px';
textareas[q].style.height = textareas[q].rows * 10 + 'px';
//create divs
var container = document.createElement('div');
container.className = "txtarea";
container.style.width = textareas[q].cols * 10 + 20 + 'px';
container.style.height = textareas[q].rows * 10 + 20 + 'px';
var topRight = document.createElement('div');
topRight.className = "tr";
var topLeft = document.createElement('img');
topLeft.className = "txt_corner";
topLeft.src = imagesPath + "txtarea_tl.gif";
var centerRight = document.createElement('div');
centerRight.className = "cntr";
var centerLeft = document.createElement('div');
centerLeft.className = "cntr_l";
if(!this.ie) {centerLeft.style.height = textareas[q].rows * 10 + 10 + 'px';}
else {centerLeft.style.height = textareas[q].rows * 10 + 12 + 'px';}
var bottomRight = document.createElement('div');
bottomRight.className = "br";
var bottomLeft = document.createElement('img');
bottomLeft.className = "txt_corner";
bottomLeft.src = imagesPath + "txtarea_bl.gif";
//assemble divs
container.appendChild(topRight);
topRight.appendChild(topLeft);
container.appendChild(centerRight);
centerRight.appendChild(centerLeft);
centerRight.appendChild(textareas[q]);
container.appendChild(bottomRight);
bottomRight.appendChild(bottomLeft);
//insert structure
where.insertBefore(container, where2);
//create hovers
textareas[q].onfocus = function() {
this.previousSibling.className = "cntr_l_xon";
this.parentNode.className = "cntr_xon";
this.parentNode.previousSibling.className = "tr_xon";
this.parentNode.previousSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_tl_xon.gif";
this.parentNode.nextSibling.className = "br_xon";
this.parentNode.nextSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_bl_xon.gif";
}
textareas[q].onblur = function() {
this.previousSibling.className = "cntr_l";
this.parentNode.className = "cntr";
this.parentNode.previousSibling.className = "tr";
this.parentNode.previousSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_tl.gif";
this.parentNode.nextSibling.className = "br";
this.parentNode.nextSibling.getElementsByTagName("img")[0].src = imagesPath + "txtarea_bl.gif";
}
}
}
function buttonHovers() {
for (var i = 0; i < buttons.length; i++) {
buttons[i].className = "buttonSubmit";
var buttonLeft = document.createElement('img');
buttonLeft.src = imagesPath + "button_left.gif";
buttonLeft.className = "buttonImg";
buttons[i].parentNode.insertBefore(buttonLeft, buttons[i]);
var buttonRight = document.createElement('img');
buttonRight.src = imagesPath + "button_right.gif";
buttonRight.className = "buttonImg";
if(buttons[i].nextSibling) {buttons[i].parentNode.insertBefore(buttonRight, buttons[i].nextSibling);}
else {buttons[i].parentNode.appendChild(buttonRight);}
buttons[i].onmouseover = function() {
this.className += "Hovered";
this.previousSibling.src = imagesPath + "button_left_xon.gif";
this.nextSibling.src = imagesPath + "button_right_xon.gif";
}
buttons[i].onmouseout = function() {
this.className = this.className.replace(/Hovered/g, "");
this.previousSibling.src = imagesPath + "button_left.gif";
this.nextSibling.src = imagesPath + "button_right.gif";
}
}
}
//Useful functions
function findPosY(obj) {
var posTop = 0;
while (obj.offsetParent) {posTop += obj.offsetTop; obj = obj.offsetParent;}
return posTop;
}
function findPosX(obj) {
var posLeft = 0;
while (obj.offsetParent) {posLeft += obj.offsetLeft; obj = obj.offsetParent;}
return posLeft;
}
window.onload = init;
More information about the jboss-cvs-commits
mailing list