Swipe, swipeleft, swiperight events do not trigger on image - javascript

I want use jQuery mobile's swiperight event in combination with an image, which doesn't seem to function.
HTML:
<div id="one"><img src="http://jquerymobile.com/wp-content/uploads/2012/09/jquery-mobile-logo-03.png"/></div>
<div id="two">works</div>
JS:
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
JSFiddle

I'm quite sure only desktop browser have this issue as mobile browsers usually don't drag images on swipe.
The solution suggested here prevents dragging your image in all browsers:
$('img').on('dragstart', function(event) {
event.preventDefault();
});
So here is your new working fiddle: http://jsfiddle.net/4CbEQ/1/

You need to prevent image dragging, here's a working example: http://jsfiddle.net/Gajotres/SgUZK/
$(document).on('pagebeforeshow', '#index', function(){
$('img').on('dragstart', function(event) { event.preventDefault(); });
$("#one").on("swiperight", function() {
alert("does not work");
});
$("#two").on("swiperight", function() {
alert("works");
});
});

Related

blur() event is not working on IPAD and Iphone

I have tried blur() for replacing the css but that function is not working. I did research on it that blur() is not work for IOS device. Is there any other way to remove position from .body-clip-overflow when focus is out from input field. My code is attached below. Link
$(document).on('focus', 'input, textarea', function() {
$('.body-clip-overflow').css('position', 'fixed');
$('.ui-dialog').css('position', 'absolute');
$('.ui-dialog').css('top', '80px');
});
$(document).on('blur', 'input, textarea', function() {
setTimeout(function() {
$('.body-clip-overflow').css('position', 'relative');
}, 100);
});
Try this:
$(document).live('blur', function () {
//some code
});
or try 'keyup':
$(document).live('keyup', function () {
//some code
});

Cannot open file dialog box present inside pop up screen using jQuery/JavaScript

I am trying to open the file dialog using jQuery but it's not opening inside the pop-up screen. If I am putting it outside the pop-up div it's working fine. I am providing my code below.
$(document).ready(function(){
$(document).on('click', '.brevent', function(e){
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
e.preventDefault();
console.log('hello');
});
$(document).on('change', '.file', function(){
$(this).parent().find('.form-control').val($(this).val().replace(/C:\\fakepath\\/i, ''));
});
})
$(document).ready(function() {
$("#addeventdiv").on('click', function(e) {
e.stopPropagation();
});
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("body").on('click', function(e) {
if (e.target.className == "#addeventdiv") {
} else {
$('#addeventdiv').css("display", "none");
}
});
});
Here is my full plunkr code. I have one Add event button. When user will click on this button the form will display and there user has to click on Attachment button which is not working as per expected.
Your delegation fails. Likely because the dialog blocks the document click.
Just add this to any of the loads since the button click does not need to be delegated since it exists in the code at load time
$('.brevent').on("click", function(e){
e.preventDefault();
var file = $(this).parent().parent().parent().find('.file');
file.trigger('click');
e.stopImmediatePropagation();
console.log('hello');
});
Your handler for all clicks in #addeventdiv gets the event first and stops propagation. I think https://plnkr.co/edit/FWRAKwlUeIRarY6bZl9n?p=preview will work as you expect:
$(document).ready(function() {
$(".daterangepicker").on('click', function(e) {
e.stopPropagation();
});
$("#addeventclose").click(function() {
$("#addeventdiv").fadeToggle(400);
});
$("#addevent").on('click', function(e) {
$("#addeventdiv").fadeToggle(400);
e.stopPropagation();
});
$("#addeventclose").on('click', function(e) {
$('#addeventdiv').css("display", "none");
});
$("body").on('click', function(e) {
if (!$(e.target).parent("#addeventdiv").length) {
$('#addeventdiv').css("display", "none");
}
});
});
Just as a stylistic nitpick, you only need one document ready handler per file

Bind and Unbind mousewheel on popup image event - JQuery

$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
I can stop mousewheel from scrolling the background when the popup image shows ... and I can do it by the following code.
So, I'm here trying to find a way to unbind and scroll the background again. After closing popup, all elements are blocked. The page doesn't scroll.
Any thoughts how to unbid it again?
Thanks.
Have you tried .unbind()?
$(document).on("click", ".test", function(z) {
$("body").bind("mousewheel", function() {
return false;
});
});
$(document).on("click", ".unbind_button", function() {
$("body").unbind("mousewheel", function() {
// do something
});
});

event.stopPropagation(); on Smartphones

I have the following code to show a mobile navigation. On my computer it works fine but in mobile browsers the event.stopPropagation(); doesn't work
$('.show').click( function(event){
event.stopPropagation();
$('#mnav').slideToggle(500);
});
$(document).click( function(){
$('#mnav').hide();
});
Test it:
$('.show').click( function(event){
event.stopPropagation();
$('#mnav').slideToggle(500);
alert('okshow');
});
$(document).click( function(){
$('#mnav').hide();
alert('okdocument');
});
Check this topic: JQuery event.stopPropagation() not working
I'm not sure, but I think you need something like this to work properly:
$(document).ready(function(){
$('#mnav').hide();
$('.show').click( function(event){
event.stopPropagation();
$('#mnav').slideToggle(500);
});
});

mouseOut effect with a mask

The following code produces a mask on a web page when hovering over a menu, my question is how do I edit this code to make the mask go away with mouseout event? As it sits now I have to click for the mask to go away. Any help is appreciated.
<script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
});
</script>
$(function() {
$("#menuwrapper").mouseover(function() {
$(this).expose();
});
$("#menuwrapper").mouseout(function() {
$(this).hide();
});
});
Or more succinctly:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).hide(); } // opposite of expose() function
);
If you are using the expose library, you can setup the event like this:
$("#menuwrapper").hover(
function(){ $(this).expose(); },
function(){ $(this).unexpose(); } // opposite of expose() function
);

Categories