CODEWITHSUNDEEP
javascriptjqueryhtml
Lukas B.
Lukas B.

Reputation: 23

Jquery, how to keep focus on child elements inside wrapper div?

I have a div wrapper and 3 input elements(text input and + - quantity buttons) inside it. HTML structure looks like this:

<div id="total_text" style="display:none;" class="total_price_txt">Total price:
<div id="total_price" class="total_price">$0.00</div>
</div>

<div id="wrapper">
    <input id="plus"></input>
    <input id="text"></input>
    <input id="minus"></input>
</div>

And a jquery code to slideOut total amount on input focus:

$('#wrapper').on('focusin',function(e){
$("#product_wrapper").addClass("jquery_product");
$('#total_text').slideDown(400);

});

$('#wrapper').on('focusout',function(e){
$("#product_wrapper").removeClass("jquery_product");
$('#total_text').slideUp(400);
});

$('#amount_input').on('change paste keyup',function(e){
var filterPrice=$('#product_price').text().replace(/[^0-9.]+/gi, '');  
var price=parseFloat(filterPrice, 10);
var inputAmount = $('#amount_input').val();
var total = (inputAmount*price).toFixed(2);
$('#total_price').html("<div class='total_price'>$" +total+ "</div>");  
});

It kinda works, but the problem is that when i enter an input inside text box and want to alter it with any of + - boxes it slides up and down again. And it happens every time i switch between any of those inputs. I would like it to keep focus on entire div wrapper, no matter which of those inputs is on focus, until the wrapper itself is out of focus.

Upvotes: 1

Views: 1496

Answers (3)

ryachza
ryachza

Reputation: 4540

I think this may do what you need: http://jsfiddle.net/1zojf2L1/

Just .stop(true, false) the animation in focusin.

$('#wrapper').on('focusin',function(e){
  $("#product_wrapper").addClass("jquery_product");
  $('#total_text').stop(true, false).slideDown(400);
});

$('#wrapper').on('focusout',function(e){
  $("#product_wrapper").removeClass("jquery_product");
  $('#total_text').slideUp(400);
});

Upvotes: 3

James Hibbard
James Hibbard

Reputation: 17735

I'd probably display the total_text div on click, then listen for a click outside of that div to shut it again.

$('#wrapper').on('click',function(){
  $('#total_text').slideDown(400);
});

$(document).on('click',function(e){
  if(! $("#" + e.target.id).parents().is("#wrapper") ){
    $('#total_text').slideUp(400);
  }
});
#total_text{
  display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<div id="total_text">Hello</div>
<div id="wrapper">
    <input id="plus"></input>
    <input id="text"></input>
    <input id="minus"></input>
</div>

HTH

Upvotes: 0

99Sono
99Sono

Reputation: 3677

Can't you get the same visual effect of the focusin focus out to work on that wrapping div based on a mouseover? which should stay constantly active for as long as the mouse is within the region of the div?

Or is that too cahotic a user experience?

If so, you could still try to work around by geting the mouse over effect only after any of those input fields suffers the first focusin effect.

And as the mouse leaves the region of the wrapper dive, you take the mouseover effect away.

So in this case, mouse in ter region of the div - nothing happens. You tick on one of your input fields giving it focus you enable the mouseover effect that gives you your current focus in slide.

You keep on ticking nothing else changes. Mouse goes out of the region, you take the mouseover effect away - doing your current focusout?

Something of the sort.

regards.

Upvotes: 0

Related Questions