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);
Related
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);
});
Hi I have a close button on the container and i am trying to create two different click events. When a user click on the close button then it should call the close button click event and when click on the container it should call the container click event.
The container click event is working fine but when clicking on the close button then it is calling both close click event and the contianer click event. I have set the z-index:9999 to the close div but still this is not working.
This is my Jsfiddle code .
$( "#close-button-landscape" ).click(function() {
alert( "close button click" );
});
$( "#container" ).click(function() {
alert( "container click" );
});
Thanks for the answers. In the Jquery i can use event.stopPropagation(); but what if click events are not using Jquery and pure javascript . See this updated Jsfiddle, then how to stop the bubble event?
What you should do is to do something called stop propagation
$( "#close-button-landscape" ).click(function(evt) {
evt.stopPropagation();
alert( "close button click" );
});
this prevents the click event from bubbling up to the container one as well.
Note: z-index won't affect anything in this case. z-index only paints elements out of order ... and the area which #container covers is larger than the one that the close button affects
The button is still in the container so you have to stop the click getting through:
$('#close-button-landscape').click(function(event)
{
event=event||window.event;
if(event.stopPropagation)
{
event.stopPropagation();
}
else
{
event.cancelBubble=true;
}
}
Just use stopPropagation
$( "#close-button-landscape" ).click(function(e) {
e.stopPropagation();
alert( "close button click" );
});
$( "#container" ).click(function() {
alert( "container click" );
});
I'm having some difficulty getting a script to execute. I am new to HTML and JQuery.
Using Google Sheets and Google Apps Scripts:
I have 3 files in question:
'sidebar.html'
'popup.html'
'scriptsJS.html'
Scripts for both 'sidebar' and 'popup' are all in 'scriptsJS'.
The button "#btnRefreshData" is bound to a button in 'sidebar'; this button, and associated scripts work as expected.
I am trying to trigger this same button from another script that is bound to different buttin in 'popup.html', but the call is ignored.
The script below is in 'scriptsJS.html', and is bound to a button in 'popup.html':
$( '#btnOpenSelectedItem' ).click(function() {
this.disabled = true;
var item = $( "#resultsList" ).find(':selected').val();
google.script.run
.withSuccessHandler(
function(msg, element) {
element.disabled = false;
doThis();
google.script.host.close();
})
.withFailureHandler(
function(msg, element) {
showStatus(msg, 'error');
element.disabled = false;
})
.withUserObject(this)
.openSelectedItem(item);
});
The script above executes correctly; my data loads, then it calls 'doThis':
function doThis () {
alert ('do this called');
$( "#btnRefreshData" ).trigger( "click" ); //<-- ignored
};
The script above displays an alert successfully (for testing), then attempts to trigger #btnRefreshData. #btnRefreshData is bound to 'sidebar.html', and causes the data in the sidebar to re-populate.
Again, all these scripts are in the same file, but when I call #btnRefreshData (bound to 'sidebar.html) from 'popup.html', it is ignored.
I'm hoping to find a way to trigger this event. Thank you for any help you can give me.
I will guess that this is an event delegation issue, how are you binding the click handler for #btnRefreshData? If You are not delegating it, try to delegate it as follows:
$( "#btnRefreshData" ).on( "click", function() {} ); //My guess on how you are binding it.
$( document ).on( "click", "#btnRefreshData", function() {} ); //Delegating the event.
Apps script uses caja to compile the code. For design some of the options you can get on normal javascript are disabled and triggering click programatically is one of them. This is why the code you mentioned is ignored.
In this case it would be better to call the methods that are executed when clicking the button "#btnRefreshData" inside your doThis method.
Here you can find a little bit of explanation on that: https://code.google.com/p/google-caja/issues/detail?id=1404
https://developers.google.com/apps-script/guides/html/restrictions#restrictions_in_native_and_emulated_mode
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");
});
My Fiddle
http://jsfiddle.net/sx9Rt/2/
My problem
I have a page, called page1. After I navigate to page2, I want to CHANGE page1 so that next time it is visited, it will look in a certain way (for example, background-color blue). I want to make this change only AFTER the end of the transition to page2.
I was trying to correctly use the pagecontainerchange event in JQM 1.4 and it wouldn't work for me. I don't want to use the pagechange event because it has been deprecated.
Updated FIDDLE
The pagecontainershow event of the pagecontainer widget runs after the animation to the new page is complete. In the event you can check the toPage or prevPage properties to figure out where you came from and where you are going.
$( ":mobile-pagecontainer" ).on( "pagecontainershow", function( event, ui ) {
var prevPageID = ui.prevPage.prop("id");
if (prevPageID == "page1"){
toDoAfterTransition();
}
});
Fiddle updated: http://jsfiddle.net/sx9Rt/13/
Use this:
$( ":mobile-pagecontainer" ).on( "pagecontainerhide", function( event, ui ) {
$("#page1").css('background', 'blue');
});
API doc: http://api.jquerymobile.com/pagecontainer/
You can use Javascripts setInterval function to check the visibility of the page.
var prevPage;
$(document).on('click', 'a[data-role="button"]', function(){
prevPage = $(this).parents('[data-role="page"]');
var checkVisibility = setInterval(function() {
if(!$(prevPage).is(':visible')) {
$(prevPage).css('background', 'blue');
clearInterval(checkVisibility);
}
}, 10);
});
Fiddle: http://jsfiddle.net/sx9Rt/11/