JQuery si la condición no estaba funcionando correctamente
En mi página web utilicé el programa Jquery para mostrar información sobre herramientas para el usuario para el campo especificado. Pero necesito mostrar la sugerencia de algunos campos en alguna otra posición. Para esto usé la condición if para cambiar el control. Pero no estaba funcionando como lo necesito. No entiendo cuál era el problema. el código :
$(window).load(function(){
/*
Display Tooltips on hovering over the input fields if an
alt tag is present
*/
if($('#frmail'))
{
$('input').hover(function()
{
var thisItem = $(this);
var msgTip = thisItem.attr('alt');
if(msgTip.length)
{
$('body').append('<div id="menuTooltip">\
<p>'+ msgTip +'</p>\</div>');
var pos = thisItem.offset();
var width = thisItem.width();
código de problema:
if($('#frmail'))
{
$("#menuTooltip").css( { "left": (pos.left + 95) + "px", "top":pos.top - 110 + "px" } );
$("#menuTooltip").fadeIn('slow');
}
else
{
$("#menuTooltip").css( { "left": (pos.left + 115) + "px", "top":pos.top - 90 + "px" } );
$("#menuTooltip").fadeIn('slow');
}
}
}, function()
{
$('div#menuTooltip').remove();
});
}
else
{}
});
El código de problema html es
<!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>Welcome</title>
<meta http-equiv="content-type" content="text/html; charset=UTF-8" />
<script type='text/javascript' src='js/jquery-1.8.3.js'></script>
<body>
<div id="topnav" class="topnav">
<a href="#" class="fr"><span>Forgot Password</span></a>
</div>
<div id="fr_menu">
<form id="fr">
<label for="username">Username Or Email-ID</label>
<input type="text" name="username" id="frmail" alt="Please check your username is correct before clicking Resend." />
<input type="submit" id="send" value=""/>
</form>
</div>
<p></p>
</div>
</div> <!-- end .header -->
<div class="container">
<div class="note"></div>
<div class="features"></div>
<div class="reg">
<h2>Didn't have an Account ?Create now.<center>It's Free !!</center></h2>
<form action="login" method="post">
<input type="text" name="fname" class="rtext" id="name" placeholder="First Nmae" alt="Enter your first name<br>Ex:<br> James P.J.<br>Enter (James)."/>
<input type="button" value="" id="next"/>
</form>
</div>
</body></html>
código css:
#topnav a.menu-open {
background:url("img/bg.png") repeat-x #222222;
color:#666!important;
outline:none;
}
#fr_menu {
-moz-border-radius:5px;
-webkit-border-radius:5px;
-webkit-box-shadow: 0px 3px 4px #fff;
-moz-box-shadow: 0px 3px 4px ;
box-shadow: 0px 3px 4px ; display:none;
background:url("img/bg.png") repeat-x #222222;
position:absolute;
width:210px;
z-index:100;
border:1px transparent;
text-align:left;
padding:10px;
margin-left:-8px;
*margin-left:-15px;
margin-top:35px;
color:#789;
font-size:11px;
}
#fr_menu input[type=text]{
display:block;
-moz-border-radius:10px;
-webkit-border-radius:10px;
border-radius:10px;
border:1px solid #ACE;
-moz-box-shadow: 0px 1px 0px #777;
-webkit-box-shadow: 0px 1px 0px #777;
background: #ddd url('img/inputSprite.png') no-repeat 4px 5px;
background: url('img/inputSprite.png') no-repeat 4px 5px, -moz-linear-gradient(
center bottom,
rgb(225,225,225) 0%,
rgb(215,215,215) 54%,
rgb(173,173,173) 100%
);
background: url('img/inputSprite.png') no-repeat 4px 5px, -webkit-gradient(
linear,
left bottom,
left top,
color-stop(0, rgb(225,225,225)),
color-stop(0.54, rgb(215,215,215)),
color-stop(1, rgb(173,173,173))
);
color:#333;
text-shadow:0px 1px 0px #FFF;
font-size:13px;
margin:10px 0 5px;
padding: 7px 14px 7px 30px;
width:80%;
}
#menuTooltip{
width: 160px;
min-height:90px;
position: absolute; display: none;
text-align:center;
font-family:Arial;
font-size:12px;
background-image:url('../images/tooltip_ao.png');
background-repeat:no-repeat;
}
#menuTooltip p {
width:145px;
margin:5px;
height:60px;
margin-top:10px;
}
La condición if siempre se ejecutaba como verdadera. Por favor ayúdame a solucionar esto....