Stop div from sliding up when it's textbox is focused on - css

Question

I'm trying to make the upper panel of my application to have top property to be -80px by default so it's invisible except of a small part of it. And when the user hover with his mouse on that part, it slides down again.
The problem is, this div has a textbox, i want the div to stop sliding up when the user is typing on this textbox even if he move his mouse pointer away, but unfortunately don't know how to do this, here's my code :
index.html
<div id="taskInput">
<div id="controllers">
<input type="text" name="mainTask" id="mainTask">
<button id="addMain">Add</button>
<button id="resetMain">Reset</button>
</div>
</div>
css of this part :
#taskInput {
background: red;
width:606px;
height:43px;
padding: 22px;
box-shadow: 0px 3px 4px -3px black;
position: absolute;
z-index : 0;
top:0px;
}
script.js
$(function(){
$("#taskInput").delay(400).animate({top:-80}, 500,function(){});
$("#taskInput").mouseover(
function(){
$(this).stop().animate({top:0}, 200, function(){});
});
$("#taskInput").mouseout(function(evt){
$(this).stop().animate({top:-80}, 200, function(){});
})
$("#mainTask").focus(function(){
//i though i can put something here to stop mouseout event or something
})
})

Answer 1

I've changed my mind from my comment, there's no need to unbind the events or use a global variable to track it. You can use document.activeElement to get the currently focused element on the page, and compare its id to the id of your <input>, like so:
$("#taskInput").mouseout(function(evt){
if(document.activeElement.id !== 'mainTask') {
$(this).stop().animate({top:-80}, 200, function(){});
}
});
Working DEMO

Answer 2

add a flag to the animate to top and change it in the focus function
i have not tested this but it should work
$(function(){
writing = false;
$("#taskInput").delay(400).animate({top:-80}, 500,function(){});
$("#taskInput").mouseover(
function(){
$(this).stop().animate({top:0}, 200, function(){});
});
$("#taskInput").mouseout(function(evt){
if(writing == false){
$(this).stop().animate({top:-80}, 200, function(){});
}
})
$("#mainTask").focus(function(){
//i though i can put something here to stop mouseout event or something
writing = true
})
$("#mainTask").focusout(function(){
//i though i can put something here to stop mouseout event or something
writing = false
})
})

Answer 3

jsFiddle DEMO
Easiest way is to give the #mainTask a data-focus attribute set to true, then when doing the mouseout on #taskInput, make sure it is False before animating the slideUp.
$(function(){
// ... code
$("#taskInput").mouseout(function(evt){
console.log($('#mainTask').data('focus'));
if ($('#mainTask').data('focus') === false) {
$(this).stop().animate({top:-80}, 200, function(){});
}
})
$("#mainTask").on({
focus: function(){
$(this).data('focus', true);
},
blur: function () {
$(this).data('focus', false);
}
});
})
​

Answer 4

I guess, you could also give this a try:
$('#taskInput').delay(400).animate({top:-80},500);
$('#taskInput').mouseover(function()
{
$(this).stop().animate({top:0},200);
});
$('#taskInput').mouseout(function()
{
if(!$('#mainTask').is(':focus'))
{
$(this).stop().animate({top:-80},200);
}
});
DEMO
Edit:
You could also add this to your code:
$('#mainTask').blur(function()
{
$('#taskInput').stop().animate({top:-80},200);
});
DEMO 2

Answer 5

in the $("#mainTask").focus event handler you can set a global boolean variable to true, set it to false in an blur event handler and check on the value of that variable in the #taskInput mouseout event handler
var preventSlide = false;
$("#taskInput").mouseout(function(evt){
if (!preventSlide) {
$(this).stop().animate({top:-80}, 200, function(){});
}
})
$("#mainTask").focus(function(){
preventSlide = true;
})
$("#mainTask").blur(function(){
preventSlide = false;
})

Answer 6

$(function(){
var flag=true;
$("#taskInput").on('mouseenter mouseleave', function(e) {
if (flag) $(this).stop().animate({top: e.type=='mouseenter'?0:-80}, 200);
}).delay(400).animate({top:-80}, 500);
$("#mainTask").on('blur focus', function(e) {
flag=e.type=='blur';
});
});​
FIDDLE