Results 1 to 3 of 3

Thread: code is not working jquery.... help

  1. #1
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default code is not working jquery.... help

    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..

    Code:
    <!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>

  2. #2
    Join Date
    Oct 2010
    Posts
    14
    Thanks
    2
    Thanked 0 Times in 0 Posts

    Default

    plz help.........

  3. #3
    Join Date
    Mar 2005
    Location
    SE PA USA
    Posts
    28,957
    Thanks
    43
    Thanked 3,195 Times in 3,157 Posts
    Blog Entries
    12

    Default

    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):

    Code:
      <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>
    - John
    ________________________

    Show Additional Thanks: International Rescue Committee - Donate or: The Ocean Conservancy - Donate or: PayPal - Donate

Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •