I am trying to get a slider to work using JQuery Mobile. Specifically, I would like the slider to react to the slidestop event.
I've made a JSFiddle here: jsfiddle
The thing that doesn't work is:
$('#ActualSlider').on('slidestop',function(){
alert('slidestop');
});
There is something wrong, but I can't find the problem. Please help me out.
Related
I've got a drawer div that comes out from the right on click. I want it to close when it gets swiped to the right and I've tried using the jQuery swiperight event but it doesn't seem to do anything.
Are you loading a version of jQuery mobile on your page?
I think the 'swiperight' event is from jQuery mobile.
Try adding it to your list of scripts.
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
https://api.jquerymobile.com/swiperight/
Hello I'm trying to combine in a div the .sortable operation of jquery-ui with swipe evente on mobile device. Unfortunately when a div is .sortable it does not handle the 'swipe' event.
Any Ideas?
jQuery UI doesn't support touchevents at the moment. You could use a plugin which converts the mouseevents as touch events here is link to the Homepage and Github. Thats the only way i know how to make jQuery UI widges touchable.
I am stuck on this, I am trying to unhide / hide jquery mobile flip switches using knockout. When knockout action is applied the jquery mobile controls stopped working. Could you please help me on this
here is the code
target.formattedValue(target());
return target;
and jsFiddle where the third control would hide if female selected but when male selected again the control disabled and not working
http://jsfiddle.net/FU7Nq/45
San.
When inspecting the rendered DOM of the following element:
<div data-bind="if: isMale">...</div>
you can see that after the radio button is changed to female, then the entire rendered HTML of that DIV is removed. Then, when switching back to the male, the content of that DIV is rendered back, but is this means that events are still attached to those slider HTML elements? I'm not sure how the way jQuery mobile attached the events, but it seems to me that this is the problem, cause you are clicking on the slider, but no action is taken. You can workaround this by recreating the Slider again:
$("#select-ifmale").slider()
Eventually this can be a bug in jQuery mobile. Sorry for suggesting this as an answer, but I don't have enough points, just to comment on your question.
I'm trying to get my Three.js app to work with JQuery Mobile and have run into a little issue. I'm new to JQuery mobile, but everything I have read says that I should use:
$(document).on('pageinit', function(){
});
instead of
$(document).ready() {
});
my problem is that if I move my initialization code from document ready to to pageinit, then nothing is being displayed even though the rendering loop is running.
I have looked at the html and discovered that the canvas element that Three.js/WebGL reders to has a width of 0 when using pageinit, and a width matching the display with when using document ready.
Everything I have read about JQuery Mobile warns against using document ready, so I'd really like to get this to work with page init. Can anybody help me figure out why the canvas element has a zero width when using pageinit?
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