TextField ToolTip
<HTML>
<HEAD>
<TITLE>jaxWidgets by Sarat Pediredla</TITLE>
<META http-equiv=Content-Type content="text/html; charset=iso-8859-1">
<STYLE type=text/css>
.testClass {
BODY {
FONT-SIZE: 0.9em; FONT-FAMILY: Arial, serif
}
A {
TEXT-DECORATION: none
}
CODE {
CLEAR: both; DISPLAY: block; FONT-SIZE: 0.9em; FONT-FAMILY: "Courier New", arial, serif; BACKGROUND-COLOR: #00ffcc
}
highlight {
BACKGROUND-COLOR: #ffff99
}
.header {
PADDING-RIGHT: 15px; PADDING-LEFT: 10px; FONT-WEIGHT: normal; FONT-SIZE: 2.5em; PADDING-BOTTOM: 15px; MARGIN: 0px; PADDING-TOP: 1px; LETTER-SPACING: -0.05em
}
.header SPAN {
FONT-SIZE: 0.5em; FONT-FAMILY: Arial, serif; LETTER-SPACING: 0px
}
.toolheader {
MARGIN: 5px 10px; COLOR: #000000; BORDER-BOTTOM: #69c 2px solid; FONT-FAMILY: arial, serif
}
.layer {
CLEAR: both; BORDER-RIGHT: #ccc 1px solid; PADDING-RIGHT: 1em; BORDER-TOP: #ccc 1px solid; PADDING-LEFT: 1em; BACKGROUND: #fff; PADDING-BOTTOM: 0.5em; MARGIN: 15px 5%; OVERFLOW: auto; BORDER-LEFT: #ccc 1px solid; PADDING-TOP: 0.5em; BORDER-BOTTOM: #ccc 1px solid
}
.input {
BORDER-RIGHT: #ff0000 1px solid; BORDER-TOP: #ff0000 1px solid; OVERFLOW: auto; BORDER-LEFT: #ff0000 1px solid; BORDER-BOTTOM: #ff0000 1px solid
}
.button {
BORDER-RIGHT: #cccccc 1px ridge; PADDING-RIGHT: 2px; BORDER-TOP: #cccccc 1px ridge; PADDING-LEFT: 2px; PADDING-BOTTOM: 2px; BORDER-LEFT: #cccccc 1px ridge; PADDING-TOP: 2px; BORDER-BOTTOM: #cccccc 1px ridge; FONT-FAMILY: serif
}
.note {
FONT-SIZE: 0.8em
}
.testClass {
CLEAR: left; DISPLAY: block; PADDING-LEFT: 5px; FONT-WEIGHT: bold; FONT-SIZE: 12px; COLOR: red; FONT-FAMILY: Arial, Helvetica, sans-serif
}
FONT-WEIGHT: bold; COLOR: #ff0000
}
</STYLE>
<SCRIPT type="text/javascript" language=javascript">
/*
* This notice must be untouched at all times.
============= META ==================
@name : jaxWidgets_RuntimeEngine.js
@version : 0.10
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================
============== DESCRIPTION =============
The Runtime Engine to register and process widgets
=========================================
============= FEATURES ==================
- Dynamically loads and parses jaxWidgets
- i18n support for strings
============================================
============= FUTURE PLANS ==================
==============================================
LICENSE: LGPL
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// Define namespace
if (typeof jaxWidgets != "object") { var jaxWidgets = {}; }
// Register namespace and object
jaxWidgets.RuntimeEngine = function()
{
var registeredWidgets = new Array();
var totalWidgets = -1;
var loadedWidgets = new Array();
var currentWidgets = new Array();
this.registerWidget = function(tag, handler)
{
var newWidget = new Array(tag, handler);
registeredWidgets[++totalWidgets] = newWidget;
};
this.loadEngine = function()
{
// Load library component
_Library = new jaxWidgets.Library();
for(var i=0; i <= totalWidgets; i++)
{
currentWidgets = document.getElementsByTagName("jax:"+registeredWidgets[i][0]);
for(var j =0; j < currentWidgets.length; j++)
{
registeredWidgets[i][1].load(currentWidgets[j]);
}
_Library.cleanup(currentWidgets);
}
};
/*
Debug function for testing purposes only
You NEED to create a div with id=debug in your page for this to work
*/
this.writeDebug = function(string)
{
document.getElementById("debug").innerHTML += string + "<br>";
};
/*
Error Log function. Can be disabled through setErrors(false)
*/
this.writeError = function(string)
{
if(document.getElementById("jaxErrorLogDiv"))
{
document.getElementById("jaxErrorLogDiv").innerHTML += string + "<br>";
}
else
{
var logDiv = document.createElement("div");
logDiv.setAttribute("id","jaxErrorLogDiv");
logDiv.style.color = "red";
logDiv.style.fontSize = "0.9em";
logDiv.style.fontWeight = "bold";
var bodyTag = document.getElementsByTagName("body")[0];
bodyTag.insertBefore(logDiv,bodyTag.firstChild);
logDiv.innerHTML = "jax Error : ";
logDiv.innerHTML += string + "<br>";
}
};
}
// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onKeyUp
/******* Define GLOBAL Constants *********/
var _Engine; // The jax Runtime Engine
var _Library; // The jax Runtime library
_Engine = new jaxWidgets.RuntimeEngine();
var oldEventCode = (window.onload) ? elm.onload : function () {};
window.onload = function () {oldEventCode(); _Engine.loadEngine();};
</SCRIPT>
<!-- jaxWidgets_Library.js -->
<SCRIPT language=javascript type="text/javascript" >
/*
* This notice must be untouched at all times.
============= META ==================
@name : jaxWidgets_Library.js
@version : 0.10
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 14/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================
============== DESCRIPTION =============
The Library is a repository for common functions used by jaxWidgets
=========================================
============= FEATURES ==================
- Sets Style of elements
============================================
============= CHANGELOG ==================
17 June 2005 [17:46] [Sarat Pediredla]
- Modified code to replace getAttribute().toLowerCase() with tmpString
because strangely IE 6.0 wont support it.
18 June 2005 [08:45] [Sarat Pediredla]
- Added functions to get X & Y position of elements.
- Modified style setters to use element.style.cssText
==========================================
LICENSE: LGPL
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// The following array IS NEEDED for widgets wishing to lock submitting forms
var submitLockedBy = new Array();
// Register object
jaxWidgets.Library = function()
{
// Cleanup function to remove jax XML tags
this.cleanup = function(array)
{
var arraylength = array.length;
for(var i=0; i < arraylength; i++)
{
var element = array[0];
element.parentNode.removeChild(element);
}
return true;
}
// Gets the index of an element in an array
this.getIndex = function(element,array)
{
for(var i=0; i < array.length; i++)
{
if(array[i] == element)
return i;
}
}
// Sets the CSS style from source to target element
this.setStyle = function(sourceElement,targetElement)
{
if(sourceElement.getAttribute("style") && sourceElement.getAttribute("style").length > 0)
{
targetElement.style.cssText = sourceElement.getAttribute("style");
return;
}
if(sourceElement.getAttribute("class") && sourceElement.getAttribute("class").length > 0)
{
targetElement.setAttribute("className",sourceElement.getAttribute("class"));
targetElement.setAttribute("class",sourceElement.getAttribute("class"));
return;
}
}
// Returns parent form of a given element
this.getParentForm = function(element)
{
for(var i=0;i < document.forms.length; i++)
{
if(document.forms[i][element.id] == element)
return document.forms[i];
}
_Engine.writeError("jax Error : Your elements are not embedded inside a form");
return null;
}
// Returns the submit button for a given form
this.getSubmitElement = function(currentForm)
{
for(i=0;i<currentForm.length;i++)
{
var currentElement = currentForm.elements[i];
var tmpString = currentElement.type;
if(tmpString.toString().toLowerCase() == "submit")
return currentElement;
}
}
// Disables submitting of forms when fields not validated
this.disableSubmit = function(element)
{
form = this.getParentForm(element);
var btnSubmit = this.getSubmitElement(form);
if(btnSubmit)
btnSubmit.disabled = true;
}
this.enableSubmit = function(element)
{
form = this.getParentForm(element);
var btnSubmit = this.getSubmitElement(form);
if(btnSubmit)
btnSubmit.disabled = false;
}
this.lockSubmit = function(id)
{
var index = _Library.getIndex(id,submitLockedBy)
if(!(index >= 0))
{
submitLockedBy.push(id);
}
_Library.disableSubmit(document.getElementById(id));
}
this.unlockSubmit = function(id)
{
var index = _Library.getIndex(id, submitLockedBy);
if(index > -1)
{
submitLockedBy.pop(index);
if(_Library.noSubmitLocks())
_Library.enableSubmit(document.getElementById(id));
}
}
this.noSubmitLocks = function()
{
if(submitLockedBy.length <= 0)
return true;
return false;
}
this.getXPos = function(element)
{
xPos = element.offsetLeft;
tempEl = element.offsetParent;
while (tempEl != null)
{
xPos += (tempEl.offsetLeft);
tempEl = tempEl.offsetParent;
}
return xPos;
}
this.getYPos = function(element)
{
yPos = element.offsetTop;
tempEl = element.offsetParent;
while (tempEl != null)
{
yPos += tempEl.offsetTop;
tempEl = tempEl.offsetParent;
}
return yPos;
}
}
</SCRIPT>
<!-- jaxWidgets_FormTip.js -->
<SCRIPT language=javascript type="text/javascript">
/*
* This notice must be untouched at all times.
============= META ==================
@name : jaxWidgets_FormTip.js
@version : 0.10
@copyright (c) 2005 Sarat Pediredla. All rights reserved.
@last-modified: 18/06/2005
@url : http://sarat.xcelens.co.uk/jaxWidgets
@latest-version-url : http://sarat.xcelens.co.uk/jaxWidgets/latest/
======================================
============== DESCRIPTION =============
The Form Tip is a component of jaxWidgets library.
It displays an interactive form tip on form elements for users
=========================================
============= FEATURES ==================
- Uses jaxXML markup tags to specify designer friendly tags in HTML (.NET style)
- i18n support for strings
- Customisable UI
============================================
============= CHANGELOG ==================
==========================================
LICENSE: LGPL
This library is free software; you can redistribute it and/or
modify it under the terms of the GNU Lesser General Public
License (LGPL) as published by the Free Software Foundation; either
version 2.1 of the License, or (at your option) any later version.
This library is distributed in the hope that it will be useful,
but WITHOUT ANY WARRANTY; without even the implied warranty of
MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.
For more details on the GNU Lesser General Public License,
see http://www.gnu.org/copyleft/lesser.html
*/
// Register object
jaxWidgets.FormTip = function()
{
// i18n settings
strText = "This is the default tip";
// UI settings
defaultStyle = "border: 1px solid black; padding: 1px; position: absolute; cursor: default; background-color: #FFFFCC; font-family: arial,helvetica; font-size: 0.75em; display: block; z-index: 10000; height: 14px;";
// Create the element
this.load = function(element)
{
if(!element)
{
_Engine.writeError('jax Error: Form Tip cannot load');
return;
}
var formElement = document.getElementById(element.getAttribute("Target"));
if(!formElement)
{
_Engine.writeError('jax Error: Form Tip is missing a Target attribute');
return;
}
var tipElement = document.createElement("div");
tipElement.setAttribute("id",formElement.id+"_frmtip");
element.parentNode.insertBefore(tipElement, element);
// Standard function to parse custom tag
this.parseTag(element, tipElement);
// Set inner text
tipElement.innerHTML = "<nowrap>"+tipElement.getAttribute("strText")+"</nowrap>";
// Create style for current element using DOM compatible function from Library
tipElement.style.cssText = defaultStyle;
_Library.setStyle(element, tipElement);
// Position tip & perform standard formatting
tipElement.style.left = parseInt(_Library.getXPos(formElement))+"px";
tipElement.style.top = parseInt(_Library.getYPos(formElement) + formElement.offsetHeight)+"px";
tipElement.style.visibility = "hidden";
tipElement.style.position = "absolute";
tipElement.style.display = "block";
tipElement.style.zIndex = "10000";
// Small IE fix
// Register event handlers
// Use quirksmode idea for flexible registration by copying existing events
// onfocus
var oldEventCode = (formElement.onfocus) ? formElement.onfocus : function () {};
formElement.onfocus = function () {oldEventCode(); _FormTip.show(formElement.id)};
// onblue
var oldEventCode = (formElement.onblur) ? formElement.onblur : function () {};
formElement.onblur = function () {oldEventCode(); _FormTip.hide(formElement.id)};
}
this.parseTag = function(element, tipElement)
{
if(element.getAttribute("Text"))
tipElement.setAttribute("strText",element.getAttribute("Text"));
else
tipElement.setAttribute("strText",strText);
}
this.show = function(id)
{
var tipElement = document.getElementById(id+"_frmtip");
tipElement.style.visibility = "visible";
}
this.hide = function(id)
{
var tipElement = document.getElementById(id+"_frmtip");
tipElement.style.visibility = "hidden";
}
this.registerWithEngine = function(_FormTip)
{
var tag = "FormTip";
var handler = _FormTip;
_Engine.registerWidget(tag, handler);
}
}
var _FormTip = new jaxWidgets.FormTip();
_FormTip.registerWithEngine(_FormTip);
</SCRIPT>
<BODY>
<H2>Demo </H2>
<FORM id=testForm>This is a field with default tip<BR>
<INPUT id=test1><BR><BR>This is a field with custom tip <BR>
<INPUT id=test2><BR><BR>
<JAX:FORMTIP Target="test1"></JAX:FORMTIP>
<JAX:FORMTIP class=testClass Target="test2" Text="Mysterious field? Enter your age"></JAX:FORMTIP>
</FORM>
</BODY></HTML>
Related examples in the same category
