I have a modal that uses jQuery to popup on (document).ready.
$(document).ready(function() {
$("#openModal").toggleClass("target");
});
$(window).one( "click", function() {
$( "#openModal" ).toggleClass("target");
});
It works fine on desktop, but on iOS Safari it doesn't close on tap.
I read about the cursor:pointer fix, but it doesn't want to work in this scenario. I'm guessing this is because the event is binded to the window while the cursor is binded to the element.
And I obviously can't put body{cursor:pointer;}
What could this be caused by ?
Using .one will only trigger this for the first click on the window, therefore if you tapped (clicked) on the window before the modal opens, the function will not run again. Try using this:
$(window).on( "click", function() {
$( "#openModal" ).toggleClass("target");
});
Edit after your response:
I guess you want the modal to open only once on document ready, then do it like this, avoid using toggleClass and use this instead:
$(document).ready(function() {
$("#openModal").addClass("target");
});
$(window).click(function() {
$( "#openModal" ).removeClass("target");
});
$(window).one('click touchstart', function () {
$( "#openModal" ).toggleClass("target");
});
Related
I am using jquery slidetoggle & slideup so that, when a user clicks on #link, #div (which is by default hidden) slides open. Additionally, any click anywhere should slideUp and hide #div. So my script is like this:
$( document ).ready(function() {
$('#link').click(function(){
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
This works fine in Chrome, but in Firefox the initial click to open the div also triggers the slideUp, so the div slides down and then immediately slides back up. What am I doing wrong here? Is there a better way to accomplish what I'm trying to do?
Seems like you have missed to pass event object to the listener.Correct your code to this and try..
$( document ).ready(function() {
$('#link').click(function(event){ //note here
$('#div').slideToggle('fast');
event.stopPropagation();
});
$(window).click(function() {
$('#div').slideUp('fast');
});
});
for more details refer here event.stopPropogation
hope this helps!
I'm using a combination of QUnit, and Karma to run some tests in Chrome. I want to test the functionality of a certain UI element in Kendo UI's Grid. However that element is represented with a link and some custom styling. In production this code works just fine, however in test executing the click event like I do below causes the browser to navigate to another page. I thought maybe I could prevent default on each link and button on the page but that didn't work as expected. Does anyone else have any ideas? Here's my test code:
QUnit.test("Do the arrows do something once I click on them?",
function(assert) {
var done = assert.async();
createShiftsGrid("#shifts-grid-test", "", "fooBaseURL", "subgridUrl/");
gridHTML = $("#shifts-grid-test");
$('a').click(function (e) {
e.preventDefault();
});
setTimeout(function(){
var arrowIcons = $(gridHTML).find(".k-icon.k-plus");
var oneIcon = $(arrowIcons[0]);
oneIcon.click();
assert.expect(0);
done();
}, 3000);
}
);
I think the problem is you are initiating the click event with the JQuery click function instead of dispachEvent.
In JQuery you can trigger event using the trigger function
$( "#foo" ).on( "click", function() {
alert( $( this ).text() );
});
$( "#foo" ).trigger( "click" );
In plain JavaScript you need to use the createEvent and dispachEvent function. See this link. Here is some code I have used before.
//dispach a clicks clicks on events
var evObj = document.createEvent('MouseEvents');
evObj.initEvent('click', true, false);
$('#target1').each(function () {
this.dispatchEvent(evObj);
});
I use this script to show popup tho people who want to quit my website. However, my website has some banner. When clicking banner, the new window browser will be opened, so the popup will appear. So, how to disable mouseleave function when open new windows ?
Jquery: How to disable mouseleave function when open new windows ?
$(document).bind('mouseleave', function(event) {
window.location.href = "http://your-website.com";
});
You are using the bind method to bind to an event. Similarly you can use the unbind to revoke the event binding.
Sample Code:
var handler = function() {
alert( "The quick brown fox jumps over the lazy dog." );
};
$( "#foo" ).bind( "click", handler );
$( "#foo" ).unbind( "click", handler );
Try out this link
and link
First, you have to declare your event handler like this
var myHandler = function(event) {
window.location.href = "http://your-website.com";
};
$(document).bind('mouseleave', myHandler);
Then call this when you want to remove it from the document
$(document).unbind('mouseleave', myHandler);
I am using jquery click event to open fancybox and it is working perfect. I have added one textbox inside this inline1 div but when I input something I can't writer anything.
My Code:
$(document).ready(function() {
$(".fancybox").on("click", function() {
$("#inline1").fancybox().trigger('click');
})
});
jsFiddle: my code
Any Idea?
Thanks
There was a problem with the triggering of 'click', I managed to fix this by simply using the Fancybox API to open the Fancybox without requiring a trigger.
$(".fancybox").on("click", function () {
$.fancybox.open( '#inline1' )
});
http://jsfiddle.net/xW5gs/1171/
$(".fancybox").on("click", function() {
$.fancybox($('#inline1').html())
})
check here
I'm using a popover in bootstrap, and I want it to close when the user clicks anywhere else on the screen. The code I have is this:
$('#popover').bind('click', function() {
$(".popover").live('click', function(){ return false; });
$(document).one("click", function() {
alert('click');
});
});
The problem is that the click on the button is triggering the alert. For some reason javascript uses that click to start the function and trigger the click event inside of it. What am I doing wrong?
EDITED:
This code doesn't do anything:
$(".popover").live('clickoutside', function(){
alert('click');
});
Check out these:
https://developer.mozilla.org/en-US/docs/DOM/event.stopPropagation
https://developer.mozilla.org/en-US/docs/DOM/event.stopImmediatePropagation
If your .popover is inside #popover, you're triggering events from all the affected elements.
NOTE: jQuery's live is in deprecating process, use the alternatives:
http://api.jquery.com/on/
http://api.jquery.com/delegate/