Introduction:
In
this article I will explain how to show guidelines
(Tool-Tip) to the
user while filling forms like contact us form, login form
etc on Mouse Over. Whenever user takes cursor on the text boxes it display what
to enter in that textbox. So it is user friendly because
user get to know what to enter and in what format to enter the value in fields. Lets understand using JavaScript.
Example:
Implementation: Let's
create an example to see it in action.
In the design page (.aspx) write the JavaScript functions in
the Head tag as:
<head id="Head1" runat="server">
<title>Validation Guideline Demo</title>
<%-- validation guideline starts here--%>
<style type="text/css">
#hintbox{ /*CSS for pop up
hint box */
position:absolute;
top: 0;
background-color: #f2f2f2;
width: 150px; /*Default width of hint.*/
padding: 3px;
border:1px solid black;
font:normal 11px Verdana;
line-height:18px;
z-index:100;
border-right: 3px
solid black;
border-bottom: 3px
solid black;
visibility: hidden;
color:red;
}
.hintanchor{ /*CSS
for link that shows hint onmouseover*/
font-weight: bold;
color: navy;
margin: 3px 8px;
}
</style>
<script type="text/javascript">
var horizontal_offset = "9px"
//horizontal offset of hint box from anchor link
/////No further editting needed
var vertical_offset = "0"
//horizontal offset of hint box from anchor link.
No need to change.
var ie = document.all
var ns6 = document.getElementById &&
!document.all
function getposOffset(what, offsettype) {
var totaloffset = (offsettype == "left") ? what.offsetLeft :
what.offsetTop;
var parentEl = what.offsetParent;
while (parentEl != null)
{
totaloffset = (offsettype == "left")
? totaloffset + parentEl.offsetLeft : totaloffset + parentEl.offsetTop;
parentEl = parentEl.offsetParent;
}
return totaloffset;
}
function iecompattest() {
return (document.compatMode &&
document.compatMode != "BackCompat")
? document.documentElement : document.body
}
function clearbrowseredge(obj, whichedge) {
var edgeoffset = (whichedge == "rightedge") ?
parseInt(horizontal_offset) * -1 : parseInt(vertical_offset) * -1
if (whichedge == "rightedge")
{
var windowedge = ie && !window.opera ?
iecompattest().scrollLeft + iecompattest().clientWidth - 30 :
window.pageXOffset + window.innerWidth - 40
dropmenuobj.contentmeasure = dropmenuobj.offsetWidth
if (windowedge - dropmenuobj.x < dropmenuobj.contentmeasure)
edgeoffset = dropmenuobj.contentmeasure + obj.offsetWidth +
parseInt(horizontal_offset)
}
else {
var windowedge = ie && !window.opera ?
iecompattest().scrollTop + iecompattest().clientHeight - 15 :
window.pageYOffset + window.innerHeight - 18
dropmenuobj.contentmeasure = dropmenuobj.offsetHeight
if (windowedge - dropmenuobj.y < dropmenuobj.contentmeasure)
edgeoffset = dropmenuobj.contentmeasure - obj.offsetHeight
}
return edgeoffset
}
function showhint(menucontents, obj, e, tipwidth) {
if ((ie || ns6) && document.getElementById("hintbox")) {
dropmenuobj = document.getElementById("hintbox")
dropmenuobj.innerHTML = menucontents
dropmenuobj.style.left = dropmenuobj.style.top = -500
if (tipwidth != "")
{
dropmenuobj.widthobj = dropmenuobj.style
dropmenuobj.widthobj.width = tipwidth
}
dropmenuobj.x = getposOffset(obj, "left")
dropmenuobj.y = getposOffset(obj, "top")
dropmenuobj.style.left = dropmenuobj.x - clearbrowseredge(obj, "rightedge") + obj.offsetWidth + "px"
dropmenuobj.style.top = dropmenuobj.y - clearbrowseredge(obj, "bottomedge") + "px"
dropmenuobj.style.visibility = "visible"
obj.onmouseout = hidetip
}
}
function hidetip(e) {
dropmenuobj.style.visibility = "hidden"
dropmenuobj.style.left = "-500px"
}
function createhintbox() {
var divblock = document.createElement("div")
divblock.setAttribute("id", "hintbox")
document.body.appendChild(divblock)
}
if (window.addEventListener)
window.addEventListener("load",
createhintbox, false)
else if
(window.attachEvent)
window.attachEvent("onload",
createhintbox)
else if
(document.getElementById)
window.onload = createhintbox
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<table border="0" cellpadding="0" cellspacing="5" width="30%">
<tr>
<td align="left">
Name:</td>
<td >
<asp:TextBox ID="txtName"
runat="server" onFocus="showhint('Please enter your Name e.g. Lalit
Raghuvanshi', this, event, '150px')" onMouseover="showhint('Please enter Name e.g. Rohan', this, event,
'150px')"></asp:TextBox></td>
</tr>
<tr>
<td align="left"
>
Email ID:</td>
<td align="left">
<asp:TextBox ID="txtEmailId"
runat="server" onFocus="showhint('Please enter valid email e.g
example@yahoo.com', this, event, '150px')" onMouseover="showhint('Please enter valid email e.g
example@yahoo.com', this, event, '150px')"></asp:TextBox></td>
</tr>
<tr>
<td align="left"
valign="top">
Address:</td>
<td align="left">
<asp:TextBox ID="txtAddress"
runat="server"
onFocus="showhint('Please
enter your address', this, event, '150px')"
onMouseover="showhint('Please
enter your address', this, event, '150px')"
Columns="25"
Rows="6"
TextMode="MultiLine"></asp:TextBox></td>
</tr>
<tr>
<td align="left"
>
Contact
Numbers:</td>
<td align="left">
<asp:TextBox ID="txtPhone"
runat="server"
onFocus="showhint('Please
enter your valid mobile number', this,
event, '150px')" onMouseover="showhint('Please enter your valid mobile number',
this, event, '150px')"></asp:TextBox></td>
</tr>
<tr>
<td align="left"
valign="top">
Comments:</td>
<td align="left">
<asp:TextBox ID="txtComments"
runat="server"
TextMode="MultiLine"
Rows="6"
Columns="25"
onFocus="showhint('Please
enter your message/comments', this, event, '150px')" onMouseover="showhint('Please
enter your message/comments', this, event, '150px')"></asp:TextBox></td>
</tr>
<tr align="center">
<td >
</td>
<td align="left">
<asp:Button ID="btnSUbmit"
runat="server"
Text="Submit"
/></td>
</tr>
</table>
</div>
</form>
</body>
0 comments:
Post a Comment