jQuery hide(), delay() and clearTimeout() not Working as Expected - javascript

I want if a user hovers over .userNames, .details should slide out after a little delay and also wants .details show hide() when the mouse leaves .userNames, after a little delay too. This is working. Now I want .details to stay if the mouse enters it but it still disappears.
Obsv: A good example of this is Facebook's user names when a mouse hovers them.
HTML code:
<div class = 'posts'>
<p class = 'userNames'> Yax </p>
<div class = 'details'>
<p> Full Name </p>
<p> Birthday </p>
<p> Age </p>
</div>
</div>
jQuery:
$(document).ready(function(){
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this);
$.data($this, 'timer', setTimeout(function(){
$this.parents('.posts').find('.details').slideDown(100);
},900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this);
$this.parents('.posts').find('.details').delay(800).hide(100);
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this);
var $dataTime = $this.parents('.posts').find('.userNames');
clearTimeout($.data($dataTime, 'timer'));
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Thank you in advance.

Try
$(document).ready(function () {
$('.details').hide();
$(document).on('mouseenter', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).slideDown(100);
}, 900));
});
$(document).on('mouseleave', ".userNames", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$post.data('timer', setTimeout(function () {
$post.find('.details').stop(true, true).delay(800).hide(100);
}, 900));
});
$(document).on('mouseenter', ".details", function () {
var $this = $(this),
$post = $this.closest('.posts');
clearTimeout($post.data('timer'));
$this.stop(true, true)
});
$(document).on('mouseleave', ".details", function () {
var $this = $(this);
$this.hide();
});
});
Demo: Fiddle

Here is a solution that works and simplifies your jQuery a lot:
$(document).ready(function(){
$('.details').hide();
$('.userNames').mouseenter(function () {
$('.details').delay(900).slideDown(100);
});
$('.userNames').mouseleave(function () {
$('.details').delay(800).hide(100);
});
$('.details').mouseenter(function () {
$(this).stop(true, true);
});
$('.details').mouseleave(function () {
$(this).hide(100);
});
});
Try it here.

Related

icon change onclick of menu element jquery

I am trying to replace the calendar icon which is on right side of header,based on item we selected from the menu elements.
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
});
});
Please check full code here
You can do it like this
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
classI= $(this).find("i").attr('class');
$("#chicon i").attr("class",classI+" pull-right");
});
});
Here is working example http://codepen.io/anon/pen/ALWRww
You can write it like this:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var text = $(this).attr('class');
var icon = $(this).find('i').attr('class');
var newClass = icon + ' pull-right';
$("#title").text(text);
$('#chicon i').removeClass();
$('#chicon i').addClass(newClass);
});
});
This will change your icon and text
$(document).ready(function() {
var oldicon = "fa fa-calendar-check-o";
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var newicon = $(this).find("i").attr("class");
$("#chicon i").removeClass(oldicon).addClass(newicon);
oldicon = newicon;
});
});
I have done minor change script as below:
$(document).ready(function() {
$('ul.s-thumbs li').on('click', function() {
var getClass = $(this).attr('class');
$("#title").text(getClass);
var icon_class=$(this).find('i').attr('class');
$("#chicon").find('i').attr('class',icon_class+' pull-right');
});
});

onmouseover show/ hide div and can select the text of div

I want to Show and hide one tooltip on hover of an anchor. but tooltip should be there till my cursor on it.
fiddle
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()}).mouseout(function(){
$(this).parent().find('#reasonTip').slideUp()
}
)
thanks in advance.
Try
jQuery(function ($) {
$('#showReasonTip').hover(function () {
var $target = $('#reasonTip');
clearTimeout($target.data('hoverTimer'));
$target.stop(true, true).slideDown();
}, function () {
var $target = $('#reasonTip');
var timer = setTimeout(function () {
$target.stop(true, true).slideUp();
}, 200);
$target.data('hoverTimer', timer);
});
$($('#reasonTip')).hover(function () {
clearTimeout($(this).data('hoverTimer'));
}, function () {
$(this).stop(true, true).slideUp();
});
});
Demo: Fiddle
You should try using mouseleave instead of mouseout and that too on #reasonTip and not on #showReasonTip.
$('#showReasonTip').mouseover(function(){
$(this).parent().find('#reasonTip').slideDown()
});
$('#reasonTip').mouseleave(function(){
$(this).parent().find('#reasonTip').slideUp()
});
Here's the modified fiddle with a small change in your code.

jQuery box fadeOut/fadeIn blinking after mouseleave

How to make this just fade out on mouseover and just fade back in again on mouseleave?
My jsFiddle
$(function() {
var box = $('#box');
box.on('mouseover', function() {
box.fadeOut(500);
});
box.on('mouseleave', function() {
box.fadeIn(500);
});
});
$(function() {
$('#box').on('mouseenter mouseleave', function() {
$(this).stop().fadeToggle();
});
});
FIDDLE
try this:
$(function() {
var box = $('#box');
box.hover(function() {
$(this).fadeOut(500);
}, function() {
$(this).stop().fadeIn(500);
});
});
see this fiddle

Delete parent div when clicking link using JQuery

I need to fade out the parent 'content' div when clicking on either of the hyperlinks with the 'dc' class. The following code is what I already have, but does not work.
<script>
$('.dc').unbind("click").click(function(){
var dic = this.id;
var strlinkc = "somepage.php?cid=" + dic;
$.post(strlinkc, function(data, textStatus){
$('a.dc#'+dic).closest('.content').fadeOut("slow");
});
});
</script>
<div class="content">
<div id="somediv"><a class="dc" id="23" href="javascript:void(0);">update</a></div>
<div id="anotherdiv">
blah blah blah more text and images
</div>
<div id="yetanother"><a class="dc" id="23" href="javascript:void(0);">update</a></div>
</div>
Put your code in dom ready handler.
$(function () {
$('.dc').unbind("click").click(function () {
var $this = $(this);
var strlinkc = "somepage.php?cid=" + this.id;
$.post(strlinkc, function (data, textStatus) {
$this.closest('.content').fadeOut("slow");
});
return false;
});
});
$('.dc').click(function(){
$(this).parents('.content').fadeOut('fast');
return false;
});
Instead of using unbind, prevent the default event.
$(function () {
$('.dc').click(function (e) {
e.preventDefault();
var $this = $(this);
var strlinkc = "somepage.php?cid=" + this.id;
$.post(strlinkc, function (data, textStatus) {
$this.closest('.content').fadeOut("slow");
});
return false;
});
});

How can I trigger a 'focusout' after I click on an element?

I have the following markup:
<select style="display:none">
<option value='1'>1</option>
<option vlaue='2'>2</option>
</select>
<input type="text" id="comboBox" />
<ul id="comboBoxData" style="display:none">
<li id='1'>1</li>
<li id='2'>2</li>
</ul>
and the following JQuery code:
$(document).ready(function() {
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
});
When I click on one of the LI's the 'comboBoxData' element disappears before the click trigger happens. Is there a way around this or an alternate event that I can use instead to have the same effect as a focusout?
Put mouseenter and mouseleave events and change the value of a global variable say isOver.
$('select').each(function() {
var parent = this;
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$(parent).val(value);
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBoxData').mouseover(function(){
isOver = true;
}).mouseleave(function(){
isOver = false;
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
$('#comboBox').bind('focusout', function () {
if(!isOver){
$('#comboBoxData').hide();
}
});
You do not require this:
$('#comboBox').bind('focusout', function () {
$('#comboBoxData').hide();
});
instead use this inside $('#comboBoxData').on('click', 'li', function() {
if you are fine with plugin , you could just use this way:
$('#menu').bind('clickoutside', function (event) {
$(this).hide();
});
You can get that plugin here
Also, I have changed the code without using the plugin:
Please check the updated answer:
DEMO
try with blur() function
$('#comboBox').blur(function () {
$('#comboBoxData').hide();
});
The blur event is sent to an element when it loses focus.
from http://api.jquery.com/blur/
Not exactly elegant but it works.
$("body").click(function(event){
if(!$(event.target).is("#comboBoxData") && !$(event.target).is("#comboBox") ){
$("#comboBoxData").hide(); }
});
$(document).ready(function() {
$('select').each(function() {
$('#comboBoxData').on('click', 'li', function() {
var value = $(this).prop('id');
$('#comboBox').val(value);
$('#comboBoxData').hide();
});
});
$('#comboBox').bind('focusin', function () {
$('#comboBoxData').show();
});
});

Categories

Resources