Home/ Questions/Q 6626945
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-05-25T21:57:17+00:00

I am using jquery to do the following stuff- I need to display the

  • 0

I am using jquery to do the following stuff-

I need to display the form right next to the table cell i click on, with some animation.

The problem with my code is that the form displays only once, and after that on any more mouse clicks it doesn’t.

The code is-

<script type="text/javascript">
$(document).ready(function(){

$("td").click( function(event) {
  var div = $("#myform");
  div.css( {
      position:"absolute", 
      top:event.pageY, 
      left: event.pageX});

  var delayTimer = setTimeout( function( ) {
        $that.fadeIn( "slow");
     }, 100);

  div.mouseover( function( event) {
     if (delayTimer)
         clearTimeout( delayTimer);
  }).mouseout( function(){
     if (delayTimer)
         clearTimeout( delayTimer);
     var $that = $(this);
     delayTimer = setTimeout( function( ) {
        $that.fadeOut( "slow");
     }, 500)         
  });
});
});
</script>
</head>

<body>
<table width="600" border="2" cellpadding="4">
  <tr>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
    <td>&nbsp;</td>
  </tr>
</table>
<div id="myform">
<form>
<input type="text" value="Arjun"/>
<input type="submit" value="submit" />
</form>
</div>
</body>
</html>

more explanation—-
on clicking any td cell, the div tag with id “myform” should display.. with animation

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    Your setTimout function refers to $that but you don’t have such a thing in that scope:

    var delayTimer = setTimeout( function( ) {
    $that.fadeIn( "slow"); // No $that exists here
}, 100);

    I think you meant to say div.fadeIn:

    var delayTimer = setTimeout(function() {
    div.fadeIn("slow");
}, 100);

    You should also set display: none on div before you fade it in or the fade-in won’t do anything:

    div.css({
    position: "absolute",
    top: event.pageY,
    left: event.pageX,
    display: 'none'
});

    And initialize it in your CSS:

    #myform {
    display: none;
}

    Live demo: http://jsfiddle.net/ambiguous/dWYfD/

    • 0