<html>
<head>
<title>Tool Error</title>
<style type="text/css">
#errmsg{
/*background-color:#EEEEEE;*/
display: none;
left: 137px;
right: auto;
top: 145px;
position:absolute;
width:100%
/*border:1px solid #111111;opacity:0.85;*/
/*padding:5px;*/
z-index:1000;
}
#errmsg .text{
float:left;
margin-top:1px;
margin-left:-1px;
padding-right:5px;
height:37px;
z-index:2000;
border-top: 2px solid #A1A1A1;
border-right: 2px solid #A1A1A1;
border-bottom: 2px solid #A1A1A1;
}
.left{ float:left; }
.right{ float:right; }
</style>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
function inline(id,msg)
{
var offset = $('#'+id).offset();
var width = $('#'+id).width()+20;
$('.text').html(msg);
$('#errmsg').css('top',offset.top+'px');
$('#errmsg').css('left',offset.left+ width+ 'px');
$('#errmsg').show();
}
$().ready(function(){
$('#sub').click(function(){
$('#errmsg').hide();
if($('#f_name').val()=='')
{
inline('f_name','Enter the First Name');
return false;
}
if($('#l_name').val()=='')
{
inline('l_name','Enter the Last Name');
return false;
}
if($('#email').val()=='')
{
inline('email','Enter the Email Name');
return false;
}
})
});
</script>
</head>
<body>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="f_name" name="f_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="l_name" name="l_name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td></td>
<td><input id="sub" type="button" name="sub" value="submit"></td>
</tr>
</table>
<div id="errmsg" class="">
<div class="left"><img src="http://www.fantasie.com/App_Themes/Fantasie/images/left_arrow.gif"/></div>
<div class="text" style="display: block;">Note that the tooltip disappears when clicking the input element</div>
</div>
</body>
</html>
<head>
<title>Tool Error</title>
<style type="text/css">
#errmsg{
/*background-color:#EEEEEE;*/
display: none;
left: 137px;
right: auto;
top: 145px;
position:absolute;
width:100%
/*border:1px solid #111111;opacity:0.85;*/
/*padding:5px;*/
z-index:1000;
}
#errmsg .text{
float:left;
margin-top:1px;
margin-left:-1px;
padding-right:5px;
height:37px;
z-index:2000;
border-top: 2px solid #A1A1A1;
border-right: 2px solid #A1A1A1;
border-bottom: 2px solid #A1A1A1;
}
.left{ float:left; }
.right{ float:right; }
</style>
<script type="text/javascript" src="jquery-1.6.1.js"></script>
<script type="text/javascript">
function inline(id,msg)
{
var offset = $('#'+id).offset();
var width = $('#'+id).width()+20;
$('.text').html(msg);
$('#errmsg').css('top',offset.top+'px');
$('#errmsg').css('left',offset.left+ width+ 'px');
$('#errmsg').show();
}
$().ready(function(){
$('#sub').click(function(){
$('#errmsg').hide();
if($('#f_name').val()=='')
{
inline('f_name','Enter the First Name');
return false;
}
if($('#l_name').val()=='')
{
inline('l_name','Enter the Last Name');
return false;
}
if($('#email').val()=='')
{
inline('email','Enter the Email Name');
return false;
}
})
});
</script>
</head>
<body>
<table>
<tr>
<td>First Name</td>
<td><input type="text" id="f_name" name="f_name"></td>
</tr>
<tr>
<td>Last Name</td>
<td><input type="text" id="l_name" name="l_name"></td>
</tr>
<tr>
<td>Email</td>
<td><input type="text" id="email" name="email"></td>
</tr>
<tr>
<td></td>
<td><input id="sub" type="button" name="sub" value="submit"></td>
</tr>
</table>
<div id="errmsg" class="">
<div class="left"><img src="http://www.fantasie.com/App_Themes/Fantasie/images/left_arrow.gif"/></div>
<div class="text" style="display: block;">Note that the tooltip disappears when clicking the input element</div>
</div>
</body>
</html>
No comments:
Post a Comment