I have this html structure
Click me
<div class="dp_div" style="display: none;">
this is the div content
</div>
I want to show the hidden div that has a class of "dp_div" when click on a link that has a class of "dp" and then if click to other element (if the current target click element is not '.dp' and '.dp_div'), the .dp_div will be hide, on the contrary, when click either .dp_div or the .dp then do not hide.
This is what I tried so far but sadly not working.
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
{
alert('either .dp or .dp_div is click!!');
} else {
alert("not .dp or .dp_div is click");
}
});
You code snippet is missing a paranthesis
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div"))
{
alert('either .dp or .dp_div is click!!');
} else {
alert("not .dp or .dp_div is click");
}
});
Please see the fiddle here for a demo
This code will show the element if the HREF (link) is clicked on:
$(document).on('click', function(event) {
if ($(event.target).hasClass("dp") || $(event.target).hasClass("dp_div")){
$('.dp_div').fadeIn();
} else {
alert("not .dp or .dp_div is click");
}
});
http://jsfiddle.net/L0LmLquj/
You may use:
$('.dp_div').show();
or
$('.dp_div').fadeIn();
or even:
$('.dp_div').toggle(); if you wish to toggle the element upon clickation.
Related
I have written simple quiz with two cards. After user have clicked on the card, attribute clicked change status and answer is checked.
clicked = false;
$(document).on("click", "#card1", function() {
clicked = true;
check answer........
});
I have got antoher on click event, which should load next question when user click on body element.
This event should only work when the card is clicked and clicked status is true.
$(document).on("click", "body", function() {
if (clicked == true) {
quiz.nextQuestion();
clicked = false;
}
});
But these two onclick events start and execute simultaneously.
How can I prevent this?
stopPropagation(); can be used for this. Otherwise click on elements inside will also trigger the body click functions.
One more thing is that, we have to give click for <html> rather than <body>.
Description: Prevents the event from bubbling up the DOM tree, preventing any parent handlers from being notified of the event.
clicked = false;
$(document).on("click", "#card1", function(e) {
e.stopPropagation();
clicked = true;
console.log('click card');
});
$(document).on("click", "html", function(e) {
if (clicked == true) {
console.log('click body');
clicked = false;
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div id="card1">
Card1
</div>
</body>
Simple...
clicked = false;
$(document).on("click", "#card1", function() {
clicked = true;
//check answer........
$(this).on("click", "body", function() {
if (clicked == true) {
quiz.nextQuestion();
clicked = false;
}
});
});
Hope this helps.....
You can do it by changing the status of clicked as true after you have checked the answer.
$(document).on("click", "#card1", function() {
check answer........
clicked = true;
});
This will make sure that clicked is not made true as soon as the click event is fired hence making the if statement in the second part of the code false
OR
You can even do it by
clicked = 0;
$(document).on("click", "#card1", function() {
clicked = 1;
check answer........
});
$(document).on("click", "body", function() {
if (clicked == 2) {
quiz.nextQuestion();
clicked = 0;
}else
{
clicked +=1;
}
});
I have a div which should be visible, whenever a button is clicked. It's like a menu. Afterwards, it should disappear (toggle), when the button is clicked again or when the user clicks somewhere else on the page (whole body).
In my current approach, the menu constantly toggles, so both functions (see below) are being triggered.
$("#b1").click(function() {
$("#menu").toggle("slide");
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
How should I improve my code, so that the menu only disappears when the button is clicked again or when the user clicks somewhere else?
Here is a fiddle.
Use $(window) to attach the event, then you can close the menu anywhere.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false;
});
$(window).click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
Check demo: https://jsfiddle.net/wru8mvxt/5/
You can use e.target and check whenever it's not the menu or the button which got clicked. Otherwise the menu closed even on the button click or on a click inside.
$("#b1").click(function() {
$("#menu").slideDown();
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
} else {
e.preventDefault();
}
});
If you want the menu to stay even on click inside, just add && !$(e.target).is("#menu") to the if condition.
Working example.
I think your code looks good.. I see one problem when you click on menu it will be hide.
$("#b1").click(function() {
$("#menu").toggle("slide");
return false; // prevent to pass click event to body
});
$("body").click(function() {
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
});
$("#menu").click(function(e){
e.preventDefault();
return false;
});
Use something like this:
$(document).mouseup(function (e)
{
var container = $("YOUR CONTAINER SELECTOR");
if (!container.is(e.target) // if the target of the click isn't the container...
&& container.has(e.target).length === 0) // ... nor a descendant of the container
{
container.hide();
}
});
Try this.
$("#b1").click(function() {
event.stopPropagation();
$("#menu").toggle("slide");
});
$("body").click(function() {
if(!$(event.target).closest('#menu').length){
if ($("#menu").is(":visible")) {
$("#menu").toggle("slide");
}
}
});
I think this code will solve your issue. You can use e.target property to find whether user clicked on button or outside button. When user click on button b1 it enters both b1 click event and body click event. So if in order to find where the user is clicked you can use event.target property.
Clicking the button will toggle the menu visibility.
Clicking outside the button will close the menu if it is opened.
$("#b1").click(function() {
$("#menu").toggle("slide");
$("#b1").text() == "hide menu" ? $("#b1").text("show menu") : $("#b1").text("hide menu");
});
$("body").click(function(e) {
if (!$(e.target).is("#b1") && $("#menu").is(":visible")) {
$("#menu").slideUp();
}
else {
e.preventDefault();
}
});
Working fiddle
You have to do following changes.
$(document).ready(function() {
$("#b1").click(function(e) {
$("#menu").slideToggle();
e.stopPropagation();
});
$(document).click(function(e) {
if (!$(e.target).is('#menu, #menu *')) {
$("#menu").slideUp();
}
});
});
I am trying to detect if a link was clicked with JS.
This is my code:
<div onclick="setLocation('http://domain.com/test')" class="gd-details" id="detail-box2">
<h2 class="gd-product-name">
<a title="test" href="http://domain.com/test">content 1</a>
</h2>
</div>
I'm also trying with this code and it doesn't works:
$(document).on("click", "a", function() {
var href = $(this).attr("href");
if(href == 'http://domain.com/test'){
alert('clicked');
} else {
alert('not clicked');
}
});
How do I detect if a specific link is clicked?
Add an event handler to the div click and compare the onclick attribute to your test url.
$(document).on("click", "div", function() {
var href = $(this).attr("onclick");
if(href === "setLocation('http://domain.com/test')"){
alert('clicked');
} else {
alert('not clicked');
}
});
I am trying to display menu (#lorem-ipsum-wrapper) when the div (#content) is focused, and again hide the menu if neither the div or the menu is clicked.
js:
$(document).ready(function() {
console.log('ready');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
event.stopPropagation();
});
$(document).on("click", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
});
demo at codepent.io
But the problem is that as soon as the #content is in focus, the menu displays and then again hides itself. Isn't the stopPropagation() method used to stop this? What am I doing wrong? Your help will be very much appreciated. Thank you.
Does this help ?
$(document).click(function(e) {
var e = $(e.target), eid = e.attr("id");
if (!e.parents("#lorem-ipsum-wrapper").length && !e.parents("#content-wrapper").length && eid !== "content-wrapper" && eid !== "lorem-ipsum-wrapper") {
$('#lorem-ipsum-wrapper').css("display", "none");
}
});
or you can use blur event :
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css("display", "block");
});
$('#content').on("blur", function(event) {
$('#lorem-ipsum-wrapper').css("display", "none");
});
If I didn't misunderstand, you want to hide #lorem-ipsum-wrapper if #content is not clicked and show the #lorem-ipsum-wrapper on click of #content. Then, your code should be:
$(document).ready(function() {
console.log('ready');
$('#lorem-ipsum-wrapper').css('display','none');
$('#content').on("focus", function(event) {
$('#lorem-ipsum-wrapper').css('display','block');
});
$('#content').on("blur", function() {
$('#lorem-ipsum-wrapper').css("display", "none");
});
$('#lorem-ipsum-wrapper').on("click",function(){
$(this).css("display","block");
});
Explanation:
The third lines ensures that the lorem-ipsum-wrapper is not show before executing any code.
The fourth and fifth lines make the #lorem-ipsum-wrapper visible whenever the focus is on the #content.
The seventh and eighth lines make the lorem-ipsum-wrapper hidden whenever the users clicks somewhere else on the page or make the #lorem-ipsum-wrapper lose focus.
I am trying to allow clicking on a div that contains a checkbox to cause that checkbox to be selected. Whenever the checkbox is selected, its parent div changes color. When unselected, the parent div's background color goes back to the original one.
Problem: The behavior when clicking on the checkbox's div is correct. However, when clicking on the checkbox directly, the behavior is opposite of what is desired. I suspect this is due to double clicking: The checkbox's own click handler fires, as well as the click handler for its parent div. I may be wrong here. How can I fix it?
JS
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
if (event.target.type !== 'checkbox') {
$(':checkbox', this).trigger('click');
}
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function() {
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
HTML
<div class="organizer_listing">
<div class="organizer_listing_checkbox_container_container">
<div class="organizer_listing_checkbox_container" data-listing_id=1234>
<input type="checkbox" class="organizer_listing_checkbox" />
</div>
</div>
</div>
EDIT: Swapped the background colors + e.stopPropagation()
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
$(':checkbox', this).trigger('click');
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
You might want to try using a label and then use a change handler on the check box. Clicking on a label associated with a checkbox is functionally the same as clicking on the checkbox. By using a change handler, you process all the events where the value of the checkbox changes.
<style>
.organizer_listing_checkbox_container {
display: block;
}
</style>
<script type="text/javascript">
$(function() {
$(".organizer_listing_checkbox").on('change',function() {
if ($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
} else {
$(this).parent().parent().parent().css('background-color', "#FFF");
}
});
});
</style>
<div class="organizer_listing">
<div class="organizer_listing_checkbox_container_container">
<label class="organizer_listing_checkbox_container" for="listing_checkbox_0" data-listing_id=1234>
<input id="listing_checkbox_0" type="checkbox" class="organizer_listing_checkbox" />
</label>
</div>
</div>
I kind of went crazy and rewrote most of the code (demo):
var update = function($el){
// cycle through all elements
$el.each(function(){
var bkgd = $(this).prop('checked') ? "#FAFAFA" : "#FFF";
$(this).closest('.organizer_listing_checkbox_container_container')
.css('background-color', bkgd);
});
};
// Click checkbox when its container is clicked
$(".organizer_listing_checkbox_container_container").click(function(event) {
var check = $(':checkbox', this);
check.prop('checked', !check.prop('checked') );
update( check );
});
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();
update( $(this) );
});
// update on initialization
update( $(".organizer_listing_checkbox") );
Use the on() to bind events (jQuery 1.7+). The following method will:
Toggle colours on change of the checkbox (Use change instead of click to allow keyboard-initiated state changes).
Toggle the check state on clicking the <div>
Demo: http://jsfiddle.net/sPb9f/1/
// Click checkbox when its container is clicked
$('.organizer_listing').on('click', '.organizer_listing_checkbox_container_container', function(event) {
if ($(event.target).hasClass('organizer_listing_checkbox')) {
return; // Do nothing (checkbox)
}
$(':checkbox', this).each(function(){
this.checked = !this.checked; // Swap check state
}).trigger('change');
}).on('change', '.organizer_listing_checkbox', function(event) {
// Highlight row on selecting Checkbox
var $this = $(this),
$main_listing = $this.closest('.organizer_listing');
if (this.checked) {
$main_listing.css('background-color', "red");
} else {
$main_listing.css('background-color', "yellow");
}
});
You have just to stop propagation:
// Highlight row on selecting Checkbox
$(".organizer_listing_checkbox").click(function(e) {
e.stopPropagation();//so the click will not propagate to the div parent
if($(this).attr('checked')) {
$(this).parent().parent().parent().css('background-color', "#FFF");
} else {
$(this).parent().parent().parent().css('background-color', "#FAFAFA");
}
});