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);
Related
Is it possible to write the following, in order to cover all eventualities in terms of making something clickable on desktop and mobile (with jQuery Mobile)?
$('.persOpen').on('click vclick tap', function() {
// do stuff
});
I am trying to have an element respond to a tap on a mobile device. Tapping the black box should reveal elements behind the top div. See here: http://shaloon.com/help/
When I implement hammer.js "tap" in lieu of jQuery's "click", my interaction doesn't work.
This works:
$('.HomeButton').on("click", function() {
$(".FeedContainer").toggleClass("FeedContainerDOWN");
});
This doesn't work
$('.HomeButton').hammer().bind("tap", function() {
$(".FeedContainer").toggleClass("FeedContainerDOWN");
});
Thank you!
FastClick.js removes the 300ms delay for Tap on mobile devices
https://github.com/ftlabs/fastclick
Include the javascript file and then use this code for attaching it to the body:
FastClick.attach(document.body);
I'm developing jQuery Mobile (jQm) app.
I wanna utilize taphold event to some crucial elements, such as remove button, to assure, that this element is secured from unwanted trigger.
I created Remove button on jQm popup and aded some JS to it, but I cannot force default action to quit, not with event.preventDefault() and event.stopImmediatePropagation(), nor with return false.
I prepared jsFiddle as duplicate of my code. The popup there contains simple progress bar as indicator of holded tap. You can try it here: jsFiddle (note: HTML5 data tag taphold="true" is not jQm default)
As a workaround, I'm currently replacing <a href="#" data-role="button"...></a> with <div>styled like button. This works well, since it doesn't have any default action, but I'm curious why the "proper" solution doesn't work?
$("a:jqmData(taphold='true')").bind("vmousedown vmouseup", function(event) {
event.preventDefault();
event.stopImmediatePropagation();
The event.preventDefault(); and event.stopImmediatePropagation(); used in the above piece of code, refer to the vmousedown and vmouseup events and not to every event which is bound to the selected element(s).
This means that the default behaviour for the click event still exists. So when you click the remove button, the click event is triggered and that's why the pop up closes immediately.
I hope this helps.
I am working on a rotator using jquery ui and can get it to pause on hover with this:
$(document).ready(function(){
$("#rotator").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
This only problem is that it stops on the last item in the list and won't rotate through the first item unless I make it:
$(document).ready(function(){
$("#rotator > ul").tabs({fx:{opacity: "toggle"}}).tabs("rotate", 5000, true);
$("#rotator").hover(
function() {
$("#rotator").tabs("rotate",0,true);
},
function() {
$("#rotator").tabs("rotate",5000,true);
}
);
});
but then the hover doesn't work.
Any ideas how to get it to cycle through the list and pause on hover?
For some reason I had a really old version of jquery and jquery ui. I updated to the version we are running on our site (1.7.2 and jquery ui 1.82). Could run the newest versions, but we have too many issues with legacy code.
guys!
I just commited an extension to make Pause on Hover for jQuery UI Tabs
jQuery UI Tabs Rotate: Pause on Hover
Enjoy it!
I'm trying to bind a tap event to no avail:
$('label[for=p_divisionR]').bind('tap', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
I have tried with .live('tap', fn) as well which doesn't work. However when on a desktop, using .live('click', fn) works fine.
Why would the click event work but not tap? It's being tested on an iPad using jQuery mobile rc1.
See:
http://m.bentons.propertylogic.net/
You can use other events like touchstart along with click. They respond to touch on safari in iOS. This approach worked for me.
$('#p_divisionR').live('click touchstart', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
Use vclick There were issues with tap back in the beta days and their developers recommended people use vclick. vclick will work on both mobile and desktop. Tap will sometimes trigger multiple events.
$('#p_divisionR').live('change', function(){
$('#propertyTypeDivision').parent().show();
$("#propertyType").parent().hide();
$("#propertyTypeDivisionRL").parent().hide();
hideBedrooms();
});
EDIT:
http://jsfiddle.net/jostster/UHX5k/1/
Forgot you were using radio buttons. For those you should use change instead of vclick