I am using jQuery mobile popups as context menu fired on right click on desktops and taphold on mobile devices.
My problem: when I right click, the popup appears - it works fine. But when the popup is open and i right click outside of popup, the popup is closed and the standard browser context menu appears instead of new popup.
The popup create a new layer (its class is ".ui-popup-screen" ) under itself to catch events, but something like
$(".ui-popup-screen").on("click", function(event) {
event.preventDefault();
$('#myElementWithPopupContextMenu').contextmenu();
return false;
});
does not work.
Any ideas how to fix it?
i like to write like follow pattern.
// prevent default contextmenu and trigger as 'custom-contextmenu'
$(".ui-popup-screen")
.bind("contextmenu",function(e) {
e.preventDefault();
// create and show menu
$("#myElementWithPopupContextMenu").trigger( "custom-contextmenu" );
});
// context menu handler
$("#myElementWithPopupContextMenu").bind( "custom-contextmenu", function(e) {
// my context menu
}
Related
I've been searching to see if there is a way to check whether the context menu in a nw.js app has been closed(if you click away from the menu or on another window, etc so that the menu disappears). I haven't been able to find an answer.
I have it working when clicking off, but not when clicking outside the window(I've tried adding blur and focusout to the event but those didn't do anything):
contextMenu.popup(e.x, e.y);
$( document ).one( "click ", function() {
alert(0);
});
Any help figuring out how to solve this would be great.
Alright, figured it out, had to include this;
var win = gui.Window.get();
win.on('blur', function() {
alert(0);
});
i am creating extension using crossrider i am using this simple code which showing image on browser
$('<img style="position:fixed; z-index:999;margin-top:40%" />')
.attr('src',('https://lh4.ggpht.com/9qGc5-maR10Fh1IpRlCuGSmge9Zzm8VQdPMNqjJkhZjtCvAQYX55MRoo4AYnYUdZhj7i=w300'))
.prependTo('body');
now i want to add simple x button on image to close image and also want to add link on that image like when user click on image will open new window.
You can use standard jQuery to handle the click events and the Crossrider appAPI.openURL to open a new window.
So, for example, using the following based on your code in your extension.js file, will create the elements you require and provide the functionality you seek. I'll leave the CSS design for you to tidy up as you require:
// Add div to contain the image and X button to the body element
$('<div id="my-wrapper" style="position:fixed; z-index:999;margin-top:40%"><img /><span>X</span></div>')
.prependTo('body');
// Configure the img src and add a click event handler that opens a new window
$('#my-wrapper img')
.attr('src',('https://lh4.ggpht.com/9qGc5-maR10Fh1IpRlCuGSmge9Zzm8VQdPMNqjJkhZjtCvAQYX55MRoo4AYnYUdZhj7i=w300'))
.click(function() {
appAPI.openURL({
url: 'http://example.com',
where: 'window'
});
});
// Add an event handler to the X button that closes/hides the image
$('#my-wrapper span')
.click(function() {
$('#my-wrapper').hide();
});
[Disclosure: I am a Crossrider employee]
I'm using jQuery BlockUI Plugin, and it pops up an image over the homepage. I want to be able to click outside of the image anywhere and be able to close it on smart phones.
I set this code, and it only works on Desktop, but NOT on Mobile:
$(document).ready(function() {
$('#demo9').click(function() {
$.blockUI();
$('.blockOverlay').attr('title','Click to unblock').click($.unblockUI);
});
});
Try binding the event with .on() in case there is a timing issue where the overlay does not exist yet:
$(".blockOverlay").on("click", function(){ $.unblockUI });
or
$(document).on("click", ".blockOverlay", function(){ $.unblockUI });
Also, does it make any difference if you use vclick instead of click?
Using touchstart with click works on Iphone, Kindle, Ipad
$('.blockOverlay').attr('title','Click to unblock').on('click touchstart',$.unblockUI);
In my jQM - Backbone app I add a dialog programmatically if a certain condition is true, like this
$('body').append('<div data-role="dialog" id="interlink" data-theme="b" data-close-btn="none" data-url="insignificant"></div> ');
// remove dialog from DOM on pagehide
$("#interlink").on('pagehide', function () {
$(this).remove();
// remove this views popup-containers
$('#interlink-video-popup-popup').remove();
});
Beside other content in the dialog there is a button to open a popup widget to play a video clip and a close button to close the dialog. The code for closing the dialog looks like this:
backBtnHandler: function(e) {
e.preventDefault();
$('#interlink').dialog('close');
$(this).remove(); // all DOM listeners get removed as well by jQuery
}
This works all well if the video clip is watched in full length, the popup widget closes on ended and the user clicks the dialog close button to close it.
A requirement is when the video clip is playing and the user scans another NFC tag the video should stop, trigger an ended event and close the popup. This is also working, however the dialog should also close. Here is a simplified code snippet with a timeout to simulate a NFC scan:
INTERPRETOUR.interlinkVideoPlayer = $('#interlink-video-player')[0];
// bind onended event to close the popup
$(INTERPRETOUR.interlinkVideoPlayer).on('ended', function() {
$('#interlink-video-popup').popup('close');
INTERPRETOUR.interlinkVideoPlayer = 'undefined';
$('#interlink-back-btn').trigger('click');
});
// play video
INTERPRETOUR.interlinkVideoPlayer.src = 'http://mydomain.ca' + this.model.get('video')[0].url;
INTERPRETOUR.interlinkVideoPlayer.play();
setTimeout(function() {
$.publish('item', '2479');
}, 5000);
The issue is that $('#interlink-back-btn').trigger('click'); invokes the backBtnHandler but pagehide is never triggered and so the dialog doesn't close.
Any help to resolve this issue would be much appreciated.
Instead of invoking a button using .trigger('click'), bind closing when popupafterclose event triggers.
Demo 1 / Demo 2
Static Popup
$('#popupID').on('popupafterclose', function () {
$('#dialogID').dialog('close');
});
Dynamically generated Popup
$(document).on('popupafterclose', '#popupID', function () {
$('#dialogID').dialog('close');
});
I have two pages .I am able to show page on clicking the button but i need to show same content as a dialog box on same screen without changing the screen. I need to show dialog box having same field in page .Here is my code in fiddle. on clicking the add button new page is open but i need the dialog box.
http://fiddle.jshell.net/ravi1989/nLJR7/
Are you looking for this?
$.mobile.changePage($("#UserSettingScreen"), {
transition: "slide",
reverse: false,
changeHash: false,
role: 'dialog' // you can use role: 'dialog' to open a dialog
});
Here is jsFiddle demo.
UPDATE
1) You can close a dialog programmatically by calling dialog('close') method like so
$("#case_dialog_cancel").on("click", function(){
$("#CaseInformationScreen").dialog('close');
});
Here is updated jsFiddle.
2) You can theme an overlay. Read more about overlayTHeme. If you for some reason want to get rid of the overlay completely or make it transparent - google for hakish ways. Here is one link Transparent jQuery mobile dialogs