I have a jquery script which is supposed to show a content box when hovered over the button.. and the button class hovered is also turned on. When the mouse is hovered inside the button div that was just triggered to show up, the button should still retain its hover styles. But whenever the mouse is hovered off the .hovered class should also be removed. Currently, when you hover over the button, and hover off without hovering over the child elements, the .hovered class is still retained. This needs to be removed.
The HTML code is as follows:
<li>Login
<div class="login-content">
<form name="login-form" action="" method="post">
<input type="email" name="email" value="" placeholder="E-mail" />
<input type="password" name="password" value="" placeholder="Password" />
<input type="submit" name="login" value="Login" class="form-login" />
</form>
</div>
</li>
The jQuery code is as follows:
$(document).ready(function () {
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function () {
$(this).removeClass('hovered');
$(".login-content").hide();
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
});
The initial issue was that the context of this within a setTimeout function is not the element hovered. Instead, persist the context by first assigning it to a variable.:
$(document).ready(function () {
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
var $this = $(this);
clearTimeout($this.data('hoverTimeoutId'));
$this.data('hoverTimeoutId', setTimeout(function () {
$this.removeClass('hovered');
$(".login-content").hide();
} ,500));
});
$('.login-content').hover(
function(){
clearTimeout($(".login-btn").data('hoverTimeoutId'));
},
function(){
$(".login-content").hide();
$(".login-btn").removeClass('hovered');
});
});
I am guessing you're losing $(this) scope inside the setTimeout function. Can you try this simple replacement and see if it has any effect?
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(this).data('hoverTimeoutId', setTimeout(function () {
$(".hovered").removeClass('hovered'); // change here
$(".login-content").hide();
} ,500));
});
If you have multiple .login-btn on the page, this may not be the most elegant solution because it can cannibalize the other element's hover. If that's the case, you might try:
var $btn = 0;
$(".login-btn").hover(
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$(".login-content").show();
$(this).addClass('hovered');
},
function() {
clearTimeout($(this).data('hoverTimeoutId'));
$btn = $(this);
$(this).data('hoverTimeoutId', setTimeout(function () {
$btn.removeClass('hovered'); // change here
$(".login-content").hide();
} ,500));
});
Instead of using the .hover() which always triggers a mouseout event, you might want to give .mouseenter.() a try.
In one event you can clear active states and apply it to the current one.
var initVideos = function () {
var divs = $("ul li a");
// bind your hover event to the divs
divs.mouseenter(function () {
flashembed("videoArea", $(this).prop("href"));
divs.removeClass("active");
$(this).addClass("active");
});
};
// once all is loaded
$(window).load(function () {
initVideos();
});
demo: http://jsfiddle.net/tive/Ff7Mq/
Approach 2:
var btn = $(".login-btn"),
content = $(".login-content"),
triggers = btn.add(content);
triggers.mouseenter(function() {
content.show();
triggers.addClass('hovered');
});
content.mouseleave(function(){
$(this).hide(500);
btn.removeClass('hovered');
});
demo: http://jsfiddle.net/tive/GkVN3/
Related
You can access full code with github pages link below.
Link
I'm developing the Matching game
When I click each li selector, class of the li will be change so it can change card open. But I want to make it after 2 second, class of the li selector will change class.
$(document).ready(function () {
$(".card").each(function () {
$(this).click(function () {
$(this).addClass("card open show"); // When click li element class will change to card open show
setTimeout(function(){
$(".card open show").addClass("card");
}, 2000);
});
});
});
when I click the li selector class will change to card open show and I want to make it after 2 seconds class will change to card.
I don't know why it's not working.
You need to remove the class from the element using $().removeClass()
Change $(".card open show").addClass("card"); to
$(this).removeClass("open show");
Also there is no need to iterate over the elements. You can directly attach the click event to the element
$(document).ready(function () {
$(".card").click(function () {
// since element already have class card, no need to add same class again
// only add the open and show class
$(this).addClass("open show");
setTimeout(function () {
$(this).removeCLass(" open show");
}, 2000);
});
});
Assuming every time click on any li it should close after 2 seconds.
$(this).click(function () {
var ele = $(this);
$(this).addClass("open show");
setTimeout(function(){
ele.removeClass("open show");
}, 2000);
});
You can use $().toggleClass() to toggle the classses before and after the timeout:
let element = this;
$(element).toggleClass("open show");
setTimeout(function() {
$(element).toggleClass("open show");
}, 2000);
Here is my HTML code:
<div class="editable-select-holder">
<input type="text" name="position" id="position" value="${userInfoForm.position}">
<button type="button" class="editable-select-expander"></button>
<ul class="editable-select-options">
<c:forEach var="position" items="${positions}">
<li>${position.description}</li>
</c:forEach>
</ul>
</div>
and this is Jquery:
$(document).on('click', '.editable-select-expander', function () {
var $holder = $(this).parent();
$holder.toggleClass('editable-select-expanded');
$holder.on('click', 'li', function () {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
});
I want to exand list when I click on button or focus on input. The code I have provided above only works on button click. I need the same logic also on focus event. Any suggestions?
changed like this but still not working properly.
$(document).on("click",'.editable-select-holder', function() {
var $holder = $(this);
$holder.on('click','.editable-select-expander', function() {
$holder.toggleClass('editable-select-expanded');
});
$holder.on('click', 'li', function() {
var $t = $(this);
$holder.removeClass('editable-select-expanded');
$holder.find('input').val($t.text());
});
$holder.on('focus', 'input', function() {
$holder.addClass('editable-select-expanded');
});
});
I hope you can use this code
$( your input box id or class ).focusin(function() {
//your logic here
});
I wrote a code where a div appears if someone hovers other div, I added the 5 seconds delay so the shown div stays but the problem is that I want it to stay until next link hovered. Means I need the first div to be disappeared if the second link hovered.
Here's JS Fiddle link of my existing code:
http://jsfiddle.net/np87e/880/
$( document ).ready(function() {
$("#theLink3").hover(
function () {
$("#theDiv3").slideDown();
},
function () {
$("#theDiv3").delay(5000).slideUp();
}
);
$("#theLink4").hover(
function () {
$("#theDiv4").slideDown();
},
function () {
$("#theDiv4").delay(5000).slideUp();
}
);
});
You need to call slideUp() of the div in next elements mouseenter callback
$("#theLink3").hover(function () {
$("#theDiv4").stop(true, true).slideUp();
$("#theDiv3").slideDown();
}, function () {
$("#theDiv3").delay(5000).slideUp();
});
Demo: Fiddle
Note: I'm not a fan of writing individual hover handlers like you have done. So
hover here
<div id="theDiv3" class="target">this is the div</div>
<hr />
hover here
<div id="theDiv4" class="target">this is the div</div>
<hr />
then
jQuery(function ($) {
var $targets = $('.target');
$(".trigger").hover(function () {
var $target = $(this).next('.target').stop(true, true).slideDown();
$targets.not($target).stop(true, true).slideUp();
}, function () {
$(this).next('.target').stop(true, true).delay(5000).slideUp();
});
});
Demo: Fiddle
I'm using JQuery tooltip plugin and I'm trying to simulate a input button on hover, which it does successfully but I cannot click on said button. It's like it never exists in the DOM, or maybe it does but then is instantly removed. I'm not sure why the click is not binding.
http://jsfiddle.net/BgDxs/126/
$("[title]").bind("mouseleave", function (event) {
var evt = event ? event : window.event;
var target = $(evt.srcElement || evt.target);
evt.stopImmediatePropagation();
var fixed = setTimeout(
function () {
target.tooltip("close");
}, 200);
$(".ui-tooltip").hover(
function () { clearTimeout(fixed); },
function () { target.tooltip("close"); }
);
});
$("[title]").tooltip({
content: "...wait...",
position: { my: "left top", at: "right center" },
open: function (event, ui) {
var _elem = ui.tooltip;
window.setTimeout(
function() {
var html = "<input type='button' value='Card Information' class='card_info_popup'></input>";
_elem.find(".ui-tooltip-content").html(html);
},
200);
},
track: false,
show: 100
});
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
You're using event delegation wrongly here since .container is not the child of your input with class card_info_popup, so you need to use:
$('body').on('click', '.card_info_popup', function() {
alert('click');
});
instead of:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
Updated Fiddle
change:
$('.card_info_popup').on('click', '.container', function() {
alert('click');
});
to
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
Updated Fiddle
Try this.
You have to use event delegation to enable the click event on the newly created tooltip button
http://learn.jquery.com/events/event-delegation/
$(document).on('click', '.card_info_popup', function() {
alert('click');
});
You have to delegate on('click'); to a static element then bind it to the dynamically generated popup.
I have updated your fiddle: http://jsfiddle.net/BgDxs/130/
Here is the updated code:
$('body').on('click', '.ui-tooltip input.card_info_popup', function() {
alert('click');
});
i have look around this forum a lot and can only find the opposite to my question, in other words i am looking to find how to change the parent div's background when the child div is hovered over, i can only find how to change the child div, when the parent is hovered over.
I have 1 parent div with an inner submit button:
<div class="ugd_ele_normal_base">
<input name="ugd_1" type="submit" class="ugd_ele_normal"/>
</div><!--end ugd_ele_normal_base-->
What i want is for when the submit button is hovered over, the parent css changes background.
I have tried a few things, but nothing seems to work.
Thanks for the help
I would use jQuery & CSS for this:
CSS
.black {
background-color: #000000;
}
jQuery
$(function() {
$('.ugd_ele_normal').hover( function(){
$(this).parent().addClass("black");
},
function(){
$(this).parent().removeClass("black");
});
});
$('input.ugd_ele_normal').on({
mouseenter: function() {
$(this).parent().css('background', 'url(/folder/image1.jpg)');
},
mouseleave: function() {
$(this).parent().css('background', 'url(/folder/image2.jpg)');
}
});
or short(er) version:
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-color', e.type=='mouseenter'?'url(/folder/image1.jpg)':'url(/folder/image2.jpg)');
});
and to retrieve the old image:
var bgImg = $('input.ugd_ele_normal').css('background-image'),
hvImg = 'url(/folder/image2.jpg)';
$('input.ugd_ele_normal').on('mouseenter mouseleave', function(e) {
$(this).parent()
.css('background-image', e.type=='mouseenter'?hvImg:bgImg);
});
or use classes:
.hoverClass {background: url(/folder/image2.jpg);}
-
$('input.ugd_ele_normal').on('mouseenter mouseleave', function() {
$(this).toggleClass('hoverClass');
});
You can do this way.
$("#ugd_1").hover(function(){
$(this).parent().css("background","red");
},
function(){
$(this).parent().css("background","none");
});
Live Demo :
http://jsfiddle.net/Z4QDC/2/
i would define some jquery to do this, and use a custom class.
//when the document is loaded, execute the following code
$(document).read(function(){
//on this elements hover, ...
$('.ugd_ele_normal').hover( function(){
//we add the class black to the parent on hover
$(this).parent().addClass("black");
},
function(){
//and remove it on exit hover.
$(this).parent().removeClass("black");
});
});
can be seen in action here:
http://jsfiddle.net/xBuyC/
Try:
$('input[name="ugd_1"]').hover(function() {
$(this).parent().css('background-color', 'COLOR');
});
Hope it helps.