CODEWITHSUNDEEP
jqueryajax
air
air

Reputation: 6264

sliding panel did't close on link click

i have one slide panel login box with jquery and its works fine only close link did't work here is javascript code.

 <script type="text/javascript">
$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    })
})
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }

});

$("#login-close").click(function() {
$("#login-panel").hide(0);
return false;
});

</script>

here is HTML for

<a id="login-link" href="#" title="Login">Login</a>   
<div id="login-panel">
<div style="padding-left:10px;width:190px; height:163px; background-color:#2a2a2a; text-align:left; vertical-align:text-top;">
<form id="login" action="<?php echo osc_base_url(true) ; ?>" method="post">
<table border="0" style="font: normal 10pt Tahoma; color:#fff;">
  <tr>
    <td height="20" valign="top">Email <br>
    <input id="email" type="text" value="" name="email"></td>
  </tr>
  <tr>
    <td height="20" valign="top">Password<br>
    <input id="password" type="password" value="" name="password">
  </tr>
   <tr>
  <td><input type="submit" name="submit" value="Sign In" /></td>
  </tr>
  <tr>
    <td height="25" valign="top">
     <small><a href="#login-close">press ESC or close</a></small></td>
  </tr>
</table>
</form>
</div>

it works perfect and also close the login box when i ESC is pressed. but it did't close on link click, it only add #login-close in url

Thanks

Upvotes: 0

Views: 356

Answers (4)

Tats_innit
Tats_innit

Reputation: 34107

Working demo http://jsfiddle.net/WhSTh/5/

id login-close was missing: Also I added <td> which was missing as well:

<td height="25" valign="top">
    <small><a href="#login-close" id="login-close"> press ESC or close</a></small>
</td>

Code:

$(document).ready(function() {
    $("#login-link").click(function() {
        $("#login-panel").slideToggle(200);
    })
})
$(document).keydown(function(e) {
    if (e.keyCode == 27) {
        $("#login-panel").hide(0);
    }

});

$("#login-close").click(function() {
    $("#login-panel").hide(0);
    return false;
});​

Upvotes: 0

Greg
Greg

Reputation: 31378

Does this work?

$("#login-close").click(function(e) { // added e to function arguments
    e.preventDefault(); // added method here
    $("#login-panel").hide(0);
    // remove return false here.
});

Also add an id to the link:

<a id="login-close" href="#login-close">press ESC or close</a>

You've got mistakes in your JS (not everything is in the ready function) and HTML (unclosed tags) - http://jsfiddle.net/dtctu/

Upvotes: 0

Denys S&#233;guret
Denys S&#233;guret

Reputation: 382112

You didn't give an id to your link, so $("#login-close") can't find it.

Add id="login-close" to your link.

Upvotes: 0

Christian
Christian

Reputation: 19740

You don't have any element with an id of login-close. Try change your close anchor to this:

<a href="#login-close" id="login-close">press ESC or close</a>

Also, make sure all your code is inside the document ready function.

$(document).ready(function(){
    $("#login-link").click(function(){
        $("#login-panel").slideToggle(200);
    });

    $(document).keydown(function(e) {
        if (e.keyCode == 27) {
            $("#login-panel").hide(0);
        }
    });

    $("#login-close").click(function() {
        $("#login-panel").hide(0);
        return false;
    });
});

Upvotes: 1

Related Questions