<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<script>
/**
Title: MessageBox
Purpose: Create and display a message box
Parameters: None
Known Bugs: None
Author: Tyler Heslinga
Browsers Tested: IE, Firefox
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
function MessageBox() {
var self = this; // Handle loss of 'this' scope
this.width; // The width you want the message box to have
this.height; // The estimated height of the message box. This won't be used for actually specifying the height of the message box and is only used for calculating the center of the screen.
this.x; // The current x position of the user's mouse
this.y; // The current y position of the user's mouse
this.xOffSet; // The difference between where the x position of the user's mouse is and where the left side of the div is
this.yOffSet; // The difference between where the y position of the user's mouse is and where the top side of the div is
// Create elements
this.messageDiv = document.createElement('div');
this.titleDiv = document.createElement('div');
this.titleSpanText = document.createElement('span');
this.titleSpanButton = document.createElement('span');
this.closeButton = document.createElement('input');
this.closeButton.type = 'button';
this.textDiv = document.createElement('div');
this.buttonDiv = document.createElement('div');
this.button = document.createElement("input");
this.button.type = "button";
// Build dom
this.messageDiv.appendChild(this.titleDiv);
this.titleDiv.appendChild(this.titleSpanText);
this.titleDiv.appendChild(this.titleSpanButton);
this.titleSpanButton.appendChild(this.closeButton);
this.messageDiv.appendChild(this.textDiv);
this.messageDiv.appendChild(this.buttonDiv);
this.buttonDiv.appendChild(this.button);
/**
Title: show
Purpose: Displays the message box
Parameters: 1. width (REQUIRED) - The width of the message box
2. height (REQUIRED) - The estimated height of the message box
3. title (REQUIRED) - The text/html you want to display in the title of the message box
4. text (REQUIRED) - The text/html you want to display in the body of the message box
5. button (REQUIRED) - The label for the confirmation button
6. locX (OPTIONAL) - The x location you would like to display the message box. Default is center screen.
7. locY (OPTIONAL) - The y location you would like to display the message box. Default is center screen.
8. messageDivClass (OPTIONAL) - The CSS class you would like to assign the message box div
9. titleDivClass (OPTIONAL) - The CSS class you would like to assign the title div
10. textDivClass (OPTIONAL) - The CSS class you would like to assign the text div
11. buttonClass (OPTIONAL) - The CSS class you would like to assign the confirmation button
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.show = function(width, height, title, text, button, locX, locY, messageDivClass, titleDivClass, textDivClass, buttonClass) {
// Set up width, height, and labels
this.width = width;
this.height = height;
this.titleSpanText.innerHTML = title;
this.textDiv.innerHTML = text;
this.button.value = button;
this.closeButton.value = ' X ';
// Set up start position of message box
if (!locX) {
this.messageDiv.style.left = this.getCenterX() + 'px';
}
else {
this.messageDiv.style.left = locX + 'px';
} // end if
if (!locY) {
this.messageDiv.style.top = this.getCenterY() + 'px';
}
else {
this.messageDiv.style.top = locY + 'px';
} // end if
// Style related set up
this.setMessageDivStyle(messageDivClass);
this.setTitleDivStyle(titleDivClass);
this.setFloatStyle(this.titleSpanText, 'left');
this.setFloatStyle(this.titleSpanButton, 'right');
this.setCloseButtonStyle();
this.setTextDivStyle(textDivClass);
this.setButtonDivStyle();
this.setButtonStyle(buttonClass);
// Set up event handlers
this.titleDiv.onmousedown = this.drag;
this.titleDiv.onmouseup = this.drop;
this.button.onclick = this.close;
this.closeButton.onclick = this.close;
// Display message box
var body = document.getElementsByTagName('body').item(0);
body.appendChild(this.messageDiv);
this.messageDiv.style.display = 'block';
};
/**
Title: close
Purpose: Hide message box
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.close = function() {
self.messageDiv.style.display = 'none';
self.cleanUp();
};
/**
Title: cleanUp
Purpose: Clean up DOM references
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.cleanUp = function() {
self.messageDiv = null;
self.titleDiv = null;
self.titleSpanText = null;
self.titleSpanButton = null;
self.textDiv = null;
self.buttonDiv = null;
self.button = null;
self.closeButton = null;
};
/**
Title: move
Purpose: Move the message box when the mouse moves
Parameters: 1. e (REQUIRED) - The event object that called the function passed by some browsers
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.move = function(e) {
if (!e) var e = window.event;
if (e.pageX) {
self.x = e.pageX;
self.y = e.pageY;
}
else if (e.clientX) {
self.x = e.clientX;
self.y = e.clientY;
}
self.messageDiv.style.left = (self.x - self.xOffSet) + 'px';
self.messageDiv.style.top = (self.y - self.yOffSet) + 'px';
};
/**
Title: drag
Purpose: Set up the message box to be moved when the mouse is moved
Parameters: 1. e (REQUIRED) - The event object that called the function passed by some browsers
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.drag = function(e) {
if (!e) var e = window.event;
if (e.pageX) {
self.x = e.pageX;
self.y = e.pageY;
}
else if (e.clientX) {
self.x = e.clientX;
self.y = e.clientY;
}
document.onmousemove = self.move;
self.xOffSet = self.x - self.messageDiv.offsetLeft;
self.yOffSet = self.y - self.messageDiv.offsetTop;
};
/**
Title: drop
Purpose: Stop moving the message box when the mouse moves
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.drop = function() {
document.onmousemove = function() { };
};
/**
Title: getCenterX
Purpose: Find the x location that will allow you to display the message box in the middle of the screen
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.getCenterX = function() {
var scrolledX = 0; // The x offset due to scrolling in the browser window
var widthX = 0; // The width of the browser window
if (window.pageXOffset) {
scrolledX = window.pageXOffset;
}
else if (document.documentElement && document.documentElement.scrollLeft) {
scrolledX = document.documentElement.scrollLeft;
}
else if (document.body && document.body.scrollLeft) {
scrolledX = document.body.scrollLeft;
} // end if
if (window.innerWidth) {
widthX = window.innerWidth;
}
else if (document.documentElement && document.documentElement.clientWidth) {
widthX = document.documentElement.clientWidth;
}
else if (document.body && document.body.clientWidth) {
widthX = document.body.clientWidth;
} // end if
return scrolledX + (widthX - self.width) / 2;
};
/**
Title: getCenterY
Purpose: Find the y location that will allow you to display the message box in the middle of the screen
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.getCenterY = function() {
var scrolledY = 0; // The y offset due to scrolling in the browser window
var heightY = 0; // The height of the browser window
if (window.pageYOffset) {
scrolledY = window.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop) {
scrolledY = document.documentElement.scrollTop;
}
else if (document.body && document.body.scrollTop) {
scrolledY = document.body.scrollTop;
} // end if
if (window.innerHeight) {
heightY = window.innerHeight;
}
else if (document.documentElement && document.documentElement.clientHeight) {
heightY = document.documentElement.clientHeight;
}
else if (document.body && document.body.clientHeight) {
heightY = document.body.clientHeight;
} // end if
return scrolledY + (heightY - self.height) / 2;
};
/**
Title: setMessageDivStyle
Purpose: Set up the style for the overall message box div
Parameters: 1. cssClass (OPTIONAL) - The CSS class you would like the message box div to have
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setMessageDivStyle = function(cssClass) {
if (!cssClass) {
// Default style
self.messageDiv.style.fontFamily = 'Calibri';
self.messageDiv.style.backgroundColor = '#EEEEEE';
self.messageDiv.style.border = '2px solid black';
self.messageDiv.style.cursor = 'default';
}
else {
self.messageDiv.className = cssClass;
} // end if
// Style must haves regardless of css properties
self.messageDiv.style.display = 'none';
self.messageDiv.style.position = 'absolute';
self.messageDiv.style.width = self.width + 'px';
};
/**
Title: setTitleDivStyle
Purpose: Set up the style for the title div
Parameters: 1. cssClass (OPTIONAL) - The CSS class you would like the title div to have
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setTitleDivStyle = function(cssClass) {
if (!cssClass) {
// Default style
self.titleDiv.style.backgroundColor = '#0066CC';
self.titleDiv.style.color = 'white';
}
else {
self.titleDiv.className = cssClass;
} // end if
// Style must haves regardless of css properties
self.titleDiv.style.fontSize = '16px';
self.titleDiv.style.padding = '2px';
self.titleDiv.style.fontWeight = 'bold';
self.titleDiv.style.borderBottom = '2px solid black';
self.titleDiv.style.height = '22px';
};
/**
Title: setTextDivStyle
Purpose: Set up the style for the text div
Parameters: 1. cssClass (OPTIONAL) - The CSS class you would like the text div to have
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setTextDivStyle = function(cssClass) {
if (!cssClass) {
// Default style
self.textDiv.style.fontSize = '14px';
}
else {
self.textDiv.className = cssClass;
} // end if
// Style must haves regardless of css properties
self.textDiv.style.padding = '4px';
self.textDiv.style.marginBottom = '16px';
};
/**
Title: setButtonDivStyle
Purpose: Set up the style for the div which contains the confirmation button
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setButtonDivStyle = function() {
self.buttonDiv.style.textAlign = 'center';
self.buttonDiv.style.marginBottom = '8px';
};
/**
Title: setCloseButtonStyle
Purpose: Set up the style for the close button
Parameters: None
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setCloseButtonStyle = function() {
self.closeButton.style.fontWeight = 'bold';
self.closeButton.style.backgroundColor = 'red';
self.closeButton.style.color = 'white';
self.closeButton.style.border = '2px solid #009999';
self.closeButton.style.cursor = 'pointer';
};
/**
Title: setButtonStyle
Purpose: Set up the style for the confirmation button
Parameters: 1. cssClass (OPTIONAL) - The CSS class you would like the confirmation button to have
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setButtonStyle = function(cssClass) {
if (!cssClass) {
// Default style
self.button.style.border = '2px solid #009999';
self.button.style.cursor = 'pointer';
}
else {
self.button.className = cssClass;
} // end if
};
/**
Title: setFloatStyle
Purpose: Sets the CSS float property for an object
Parameters: 1. obj (REQUIRED) - The element you'd like to apply the float style to
2. style (REQUIRED) - Options include left, right, or none
Returns: Nothing
Known Bugs: None
Exceptions Thrown: None
Assumptions: None
Side Affects: None
Revision History:
* Tyler Heslinga 03/28/2010 - Created
*/
this.setFloatStyle = function(obj, style) {
obj.style.cssFloat = style; // Most Browsers
obj.style.styleFloat = style; // Internet Explorer
};
}
</script>
<body>
<input type="button" name="aa" id="aa" value="5555555" onclick="javascript:var MsgBox = new MessageBox(); MsgBox.show(300, 150, 'Example Title', 'Example Text', 'Button Text');" />
</body>
</html>
Load balance : Server 01
