PDA

View Full Version : code is not working jquery.... help



pritamdulam
10-07-2010, 11:35 AM
I didn't find any jquery forum so I am posting it in here........

I have written following code... I think its correct but its not working..



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Home</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-5" />
<link rel="stylesheet" type="text/css" href="css/style.css" />
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function(){
$(".popup").mouseover(function(){
$("#popupbox").show("slow");
});
$(".popup").mouseout(function(){
$("#popupbox").hide("slow");
});
});
</script>
<style type="text/css">
#popupbox{
margin: 0;
margin-left: 0; /* This gets it relatively center on the screen */
margin-right: 0; /* This gets it relatively center on the screen */
margin-top: 10px; /* Makes it a little off the top of the screen */
padding-top: 10px; /* Make the text not touching the top on the login box */
width: 20%; /* For centering it on the screen */
height: 100px; /* The height of the login box */
position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
background: #CCCCCC; /* Login Box background color. Change this if desired. */
border: solid #000000 2px; /* Makes a black border around the login box */
z-index: 9; /* Makes it on top of everything else */
font-family: arial; /* Sets the font */
visibility: hidden; /* Makes it hidden at first. Very Important.*/
}
</style>
</head>
<body>
<div class="cur">

<strong><a href="" style="color:#807F7F;text-decoration:none;" class="popup">Customer Login</a></strong>
<div id="popupbox" > <!--Start login box-->
<form action="./lib/checkLogin.php" method="post" >
<center>Username:</center>
<center><input name="txt_username" size="14" /></center>
<center>Password:</center>
<center><input name="txt_password" type="password" size="14" /></center>
<center><input type="submit" name="submit" value="Login" /></center>
</form>
<!--br /-->
<!--strong><center><a href="javascript:login('hide');" style="color:#807F7F;text-decoration:none;">close</a></center></strong--> <!-- Closes the box-->
</div> <!--End login box-->
</div>
</body>
</html>

pritamdulam
10-08-2010, 07:22 AM
plz help.........

jscheuer1
11-03-2010, 09:50 AM
The jQuery hide() and show() functions work off of the display style property, not the visibility and position properties. There still will be the problem of not being able to use the form - it will disappear before you can enter anything into it. But at least the effect will work (get rid of the red, add the green):


<style type="text/css">
#popupbox{
margin: 0;
margin-left: 0; /* This gets it relatively center on the screen */
margin-right: 0; /* This gets it relatively center on the screen */
margin-top: 10px; /* Makes it a little off the top of the screen */
padding-top: 10px; /* Make the text not touching the top on the login box */
width: 20%; /* For centering it on the screen */
height: 100px; /* The height of the login box */
position: absolute; /* Makes sure its absolute so it doesn't dock with everything else */
background: #CCCCCC; /* Login Box background color. Change this if desired. */
border: solid #000000 2px; /* Makes a black border around the login box */
z-index: 9; /* Makes it on top of everything else */
font-family: arial; /* Sets the font */
visibility: hidden; /* Makes it hidden at first. Very Important.*/
display: none;
}
</style>