How to get the current text cursor position on a mouse hover event?

Question

I'm creating a hidden contact form that would appear when the mouse is positioned above the element. This is quite simple and I have achieved it by doing:

$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

Now the problem is that when the user will go over the input elements or textarea and start writing their details, they might move the mouse out of the container (quite likely they would).

How can I prevent the form from hiding in this case?

I would guess adding some conditional functions (if/else) within the "hover" functions, but how can I get the current text cursor position?

The contact form (#contact_1) contains 4 elements inside ID: #cf_name, #cf_email, #cf_phone, #cf_text

Please note: I want to avoid the users from having to click on a "show/hide" button

*may be it is a simple query, but I can't find a clear answer anywhere.

------------------------------

SOLUTION:

Thanks to Diodeus help below I managed to solve it like this:

Every input has the onfocus/onblur actions:

<input type="text" id="cf_name" class="text" name="name" onfocus="allowcfhide=false;" onblur="allowcfhide=true;" />

The hover script was modified:

var allowcfhide=true;
$(document).ready(function(){   
  $(function (){
    $("#contact_1").hover(
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right:  0}, 500); },
      function(){ if (allowcfhide) $(this).stop(true,false).animate({right: -218}, 500); });
  });
});

Diodeus - James MacFarlane Diodeus - James MacFarlane · Accepted Answer · 2012-09-20T19:08:04

Have a flag at the start of your animation that will cause it to return. When any input gets focus, set the flag.

How to get the current text cursor position on a mouse hover event?

1 Answers