I have two image and two button in a div, Now process is when i click on button 1 then image 1 show same as in button 2.. now my problem is i want both image hide when i click in any part of body.. Now my problem is when i click on body it will hide but not able to show images on button click.
Fiddle Here
HTML
<input type='button' id='btn1' value='button1'>
<img src="abc.jpg" id='img1'>
<input type='button' value='button2' id='btn2'>
<img src="abc.jpg" id='img2' >
Js
$('#btn1').click()(function(){
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click()(function(){
$('#img2').show();
$('#img1').hide();
});
$('body').click()(function(){
$('#img1').hide();
$('#img1').hide();
});
Try:
$('#btn1').click(function (e) {
e.stopPropagation();
$('#img1').show();
$('#img2').hide();
});
$('#btn2').click(function (e) {
e.stopPropagation();
$('#img2').show();
$('#img1').hide();
});
$('body').click(function () {
$('#img1,#img2').hide();
});
jsFiddle example
You were using the click function incorrectly, plus your click events on the buttons were also bubbling up the DOM to the event you placed on the body.
try this
$('body').click(function(e) {
var target = $(e.target);
if(!target.is('#btn1') || !target.is('#btn2')) {
$('#img1').hide();
$('#img1').hide();
}
});
Related
Hello i'm trying to add an event of click on a button when the user click a label,
its working fine but the user have to click on the label twice i need to make it work from the first click
this is my function :
(function($){
$('.next-on-click .forminator-checkbox-label').on('click', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
});
})(jQuery);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.0.0/jquery.min.js"></script>
<lable class="next"> Next </lable>
<button class="check">Check</button>
<script>
$('.next').click(function() {
alert("Hi");
$('button.check').trigger('click');
});
</script>
example:
$('.next-on-click .forminator-checkbox-label').on('dblclick', function() {
$('button.forminator-button.forminator-button-next').trigger('click');
})
So why would you need JavaScript to handle the click? Adding an for attribute on a label will click the button.
$("#btn").on("click", function () {
console.log("clicked");
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<label for="btn">Label</label>
<button id="btn">Button</button>
I have a dropdown menu that shows with the following jQuery script:
jQuery(document).ready(function($) {
$('#block-mln-main-menu li').click(function(){
$(this).find('.test').toggle();
});
});
What I want to achieve is when the user clicks anywhere else on the page, it slides up or hides. I am literally at a loss on how to achieve this.
Any help is greatly appreciated.
added a fiddle : http://jsfiddle.net/aL7Xe/999/
Yoy can try stop propagation event.
CSS:
.showup{width:100px;height:100px; background:red; display:none;}
.click{cursor:pointer;}
HTML
<div class="click">click me</div>
<div class="showup">Click somewhere else!</div>
JQUERY
$(document).ready(function(){
$('.click').click(function(event){
event.stopPropagation();
$(".showup").slideToggle("fast");
});
$(".showup").on("click", function (event) {
event.stopPropagation();
});
});
$(document).on("click", function () {
$(".showup").hide();
});
Toggle will only work it user click on the same object it you want to hide it when click elsewhere try
jQuery(document).ready(function($) {
$(this).not('#block-mln-main-menu li').click(function(){
$(this).find('.test').hide();
});
});
What I understand is that you want to show dropdown menu when an user clicks on it. If the user again clicks on it or anywhere on the page it should close.
CSS
.hide {
display: none;
}
JS
$('.menu-label').on('click', function() {
$('.drop-down-menu').toggleClass('hide');
});
To hide the menu when user click anywhere on page
$('body').on('click', function() {
$('.drop-down-menu').addClass('hide');
});
I have a button on which when i click, a form opens to be filled by the user. When i click the button again the form closes. This wasn't possible as with one button i wasn't able to perform 2 functions like opening and closing of the form with one button. So, i took 2 buttons. When one button is clicked, it hides and the second button shows and the form is opened and when the second button is clicked, the same button hides and the first button shows and the form closes. I have no problem in this.
Now, I also want that when user clicks anywhere outside the div form, the form should close itself. Help me do this. These are the 2 buttons.
<input type="button" value="Add New" id="NewRow" class="btn1 green" onclick="ToggleDisplay()" />
<input type="button" value="Add New" id="NewRowCopy" style="display: none;" class="btn green" />
This is the form.
<div id="div_fieldWorkers" style="display:none;" class="formsizeCopy">
This is the script.
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide(); });
$('input#NewRow').click(function () {
$('input#NewRowCopy').show();
$('input#NewRow').hide();
$('#div_fieldWorkers').slideDown("fast");
});
$('input#NewRowCopy').click(function () {
$('input#NewRow').show();
$('input#NewRowCopy').hide();
$('#div_fieldWorkers').slideUp("fast");
});
$("html").click(function (e) {
if (e.target.parentElement.parentElement.parentElement == document.getElementById("div_fieldWorkers") || e.target == document.getElementById("NewRow")) {
}
else
{
$("#input#NewRowCopy").hide();
$("#input#NewRow").show();
$("#div_fieldWorkers").slideUp("fast");
}
I an trying to hide the second button when clicked outside the form.. but not working..
Try
$(document).ready(function () {
$('#div_fieldWorkers').hide();
$('input#NewRowCopy').hide();
$('#NewRow').click(function (e) {
$('#NewRowCopy').show();
$('#NewRow').hide();
$('#div_fieldWorkers').stop(true, true).slideDown("fast");
e.stopPropagation();
});
$('#NewRowCopy').click(function (e) {
$('#NewRow').show();
$('#NewRowCopy').hide();
$('#div_fieldWorkers').stop(true, true).slideUp("fast");
e.stopPropagation();
});
$(document).click(function (e) {
var $target = $(e.target);
if ($target.closest('#div_fieldWorkers').length == 0) {
$("#NewRowCopy").hide();
$("#NewRow").show();
$("#div_fieldWorkers").stop(true, true).slideUp("fast");
}
})
});
Demo: Fiddle
I'm using jQuery mobile and I was trying to add a button inside a collapsible but the problem is that when i click on the button the click event is not fired but instead the block gets uncollapsed or collapsed.
I tried the code below but it didn't work
$(document).on('pagebeforeshow', '#page', function () {
$('#header').on('click', '#start', function (e) {
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
});
});
<div data-role='collapsible' data-theme='c' data-content-theme='d' data-collapsed icon='arrow-d' data-expanded-icon='arrow-u' data-iconpos='right'>
<h4 id='header'>
<input type='button' data-theme='c' value='Demarrer' data-mini='true' data-inline='true' data-icon='mappin' data-icon-pos='top' id='start'/>
</h4>"
</div>
that's because your button exists inside the collapsible section. What you can do is prevent the section from collapsing when the button is clicked i.e get the id of the target clicked and if it's the id="start" then e.preventDefault(); so something like this:
$('#header').on('click', function (e) {
var id = e.target.id;
if(id=="start"){
alert("click");
e.stopPropagation();
e.preventDefault();
e.stopImmediatePropagation();
}
});
How to close element opened by toggle() function when I click on any place in browser window. For example StackExchange link on this site. When I click on this link div appears, but if I click on any place in window, it disappears.
You can do in this way:
$(function(){
$('.yourelem, .targetDiv').click(function(ev){
$('.targetDiv').slideDown('fast');
ev.stopPropagation();
});
$(document).click(function(){
$('.targetDiv').slideUp('fast');
});
});
See the action in jsbin
Try this :
HTML
<a id="show" href="#">show</a>
<div class="test" style="display: none;">
hey
</div>
JS
$('a#show').click(function(event) {
event.stopPropagation();
$('.test').toggle();
});
$('html').click(function() {
$('.test').hide();
});
Take a look on .blur function of jquery http://api.jquery.com/blur/
A quick example:
$("#myelement").blur(function(){
$(this).hide();
//or
$("#targetelement").hide();
});
Make variable sel true, if we click on the div.
if(sel)
$(".stackExchange").slideDown(800);
else
$(".stackExchange").slideUp(800);