Element inside div should not interfere on the event handler - javascript

I have a div and inside it I have a p. The paragraph is visually above the div. My event handler is being affected by the paragraph.
This is my event handler:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});
So, when I am moving my mouse on the div, it will toggle the class if I cross the paragraph. What I want is to only toggle the class once I enter/leave the div. I also tried to use this:
$("#container-map").on("mouseover mouseleave", ".ct-symbol", ".ct-symbol p" function() {
$(this).toggleClass("active-b");
});
But now it toggles twice once I move my mouse above the paragraph...

$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
if (this.id == "container-map")
{
$(this).toggleClass("active-b");
}
});
That should work. It only fires when this has the same id as the div.

You have to use mouseenter not mouseover
$("#container-map").on("mouseenter mouseleave", ".ct-symbol" function() {
$(this).toggleClass("active-b");
});

If what you want is that your active-b class is only affected when you leave/enter.
You need to use mouseenter not mouseover.
$("#container-map").on("mouseenter mouseleave", ".ct-symbol", function() {
$(this).toggleClass("active-b");
});

Related

Is there a way to add a different action on the second click with jQuery?

My current code is this:
$('.how-we-menu').on('click', function() {
$('.how-we-menu > ul').slideDown();
$('.under').on('click', function() {
$('.under > ul').slideDown();
})
$('.over').on('click', function() {
$('.over > ul').slideDown();
})
$('.ar').on('click', function() {
$('.ar > ul').slideDown();
})
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
})
});
I am trying to avoid slide toggle because it affects another element and slides both of them up so I want to make each element work individually. So when you click ".fc > ul" once it slides down and when you click again it slides up.
I hope this makes sense thanks!
Use $(this) in the function so it only affects the element you clicked on.
$('.fc').on('click', function() {
$(this).children('ul').slideToggle();
});
And all the event handlers should be at top level, not inside another event handler. Since they all do the same thing, you can bind them all at once.
$('.how-we-menu, .under, .over, .ar, .fc').on('click', function() {
$(this).children('ul').slideToggle();
});

How do I make this a on HOVER of Div fade on div

I need to make this on hover instead of on click and still be able to access the .shopping-cart div when my cursor leaves the #cart-line div. What is the best way to do this?
(function(){$("#cart-line").on("click", function() {
$(".shopping-cart").fadeToggle( "fast");}); })();
Similarly to the click event, jQuery has a hover event.
The difference in syntax is that the hover event takes two handlers, hoverin and hoverout
$("div#ToHoverOver").hover(
//Hover in handler
function(){
$(this).css("color", "red");
},
//Hover out handler
function(){
$(this).css("color", "blue");
});
(function(){
var cart_line = document.getElementById("cart-line");
cart_line.addEventListener("mouseover", function(){
$(".shopping-cart").fadeToggle( "fast");
});
})();

how to close notification when trigger clicked twice or outside element in jquery

I have a notification widget that will appear when I click the trigger and disappear when I click the trigger twice or click elsewhere in outside element.
How to do that?
$('.swt').click(function(){
$('.swt').removeClass('active');
$('.ctx').removeClass('ctx-active');
$(this).addClass('active');
});
var ccd = 1;
$('#add').click(function(){
$('#ad').addClass('ctx-active');
});
$('#msg').click(function(){
$('#ms').addClass('ctx-active');
});
$('#notif').click(function(){
$('#no').addClass('ctx-active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
demo code
Just change the removeClass and addClass with toggleClass. Here's the Documentation on toggleClass.
Here's a fixed JSFiddle.
For 'close when click outside', you will have to add a transparent div with full width and height behind #tooltip, and add a click eventListener.
You can use dblclick for double-click event handler and inside the event handler you can add checking like this one:
$(document).dblclick(function(e) {
if (e.target.id != "show" && !$(e.target).parents("#show").size()) {
//remove class
}
});
For the implementation you can see here : JSFiddle
Thanks for answers.
Finally i find the result for all the problems.
i just use sibling() and toggleclass() to fix the problems.
this is the update demo.
demo code
$('#add').click(function(){
$('#ms').removeClass('ctx-active');
$('#no').removeClass('ctx-active');
$('#ad').toggleClass('ctx-active');
$('#add').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#msg').click(function(){
$('#no').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#ms').toggleClass('ctx-active');
$('#msg').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#notif').click(function(){
$('#ms').removeClass('ctx-active');
$('#ad').removeClass('ctx-active');
$('#no').toggleClass('ctx-active');
$('#notif').siblings().removeClass('active');
$(this).toggleClass('active');
});
$('#sst').click(function(){
$('#show div').removeClass('ctx-active');
});
$('#ss').click(function(){
$('.ctx').removeClass('ctx-active');
$('.swt').removeClass('active');
});`

Store triggered events on DOM

How can I store events triggered in DOM. Suppose I have one div. I want to change the color of div when I mouseover on it. Again change the color of div to previous color after mouseout. Again, change color when I click on div showing as active.
My code are as follows:
$(document).on("mouseover", ".imgpayment", function(){
$(this).parent().css("background","#89C4F4");
});
$(document).on("mouseout", ".imgpayment", function(){
$(this).parent().css("background","none");
});
$(document).on("click", ".imgpayment", function(){
$(this).parent().css("background","#59ABE3");
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
The problem is that:
How can I know that click events has already been triggered in div so that mouseout events doesn't trigger because it changes the color to default and I can't show that div is clicked and active.
You should not use css method for style manipulation. You can see why - it's very inconvenient in inflexible. There will be no problem if you toggle classes.
$(document).on("mouseover", ".imgpayment", function () {
$(this).parent().addClass('active');
});
$(document).on("mouseout", ".imgpayment", function () {
$(this).parent().removeClass('active');
});
$(document).on("click", ".imgpayment", function () {
$(this).parent().toggleClass('selected');
$(this).parent().find(".the-terms").prop('checked', true);
$("#submitBtn").removeAttr("disabled");
});
.active {
background: #89C4F4;
}
.selected {
background: #59ABE3;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
<div class="imgpayment">TEST <small>Hover to highlight, click to select</small></div>
</div>

I can't get hover or mouseenter to unbind and rebind again

I have tried sooooo many different methods of this that others have suggested, but I don't understand what i'm doing wrong and really need some help. I have tried using various combinations of hover, mouseenter/mouseleave, on/off, bind/unbind.
Basically, I can get things to unbind, but I can't get them to bind again afterwards.
I put together a jsfiddle with a basic example. If you click the "Hover Off" button, mouseenter is disabled like intended. But then if you click the "Hover On" button after, mouseenter does not enable again.
http://jsfiddle.net/770b5p8q/3/
Here is "hover" functionality:
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
Here is what should enable/disable it:
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter");
$(this).bind("mouseleave");
});
});
$('.hover_disabled').click(function(){
$('.square').each(function(){
$(this).unbind("mouseenter");
$(this).unbind("mouseleave");
});
});
You should pass the function for binding and unbinding the handlers, something like:
var mouseEnterHandler = function () {
$(this).addClass('active');
}
var mouseLeaveHandler = function () {
$(this).removeClass('active');
};
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
$('.hover_enabled').click(function () {
$(this).addClass('active');
$('.hover_disabled').removeClass('active');
// I need to bind hover here
$('.square').bind("mouseenter", mouseEnterHandler)
.bind("mouseleave", mouseLeaveHandler);
});
But the code becomes ugly and unmaintainable. You can use event delegation instead:
$(document).on('mouseenter mouseleave', '.square.hoverable', function(event) {
// toggle the class by checking the type of the event
$(this).toggleClass('active', event.type === 'mouseenter');
});
// caching the state changers
var $e = $('.hover_enabled, .hover_disabled').click(function () {
var $this = $(this).addClass('active'),
isHoverable = $this.hasClass('hover_enabled');
// exclude the clicked element from the set and remove the class
$e.not($this).removeClass('active');
$('.square').toggleClass('hoverable', isHoverable);
});
The above mouseenter mouseleave handler is only executed when the .square element has hoverable className. You can also remove the event handler and use CSS for styling.
.square.hoverable:hover {
}
http://jsfiddle.net/bztec1f4/
Once you rebind it back you need to pass function as well.
$('.hover_enabled').click(function(){
$('.square').each(function(){
$(this).bind("mouseenter", function(){
$(this).addClass('active');
});
$(this).bind("mouseleave", function(){
$(this).removeClass('active');
});
});
});

Categories