resizable for JQuery Mobile - jquery-mobile

Is there a "JQuery UI"-like resizable option available for JQuery Mobile? The reason I'm looking for this is because I can't get a resizable to respond to touch event (e.g. on Ipad), not even with touch-punch.

You can also look at jquery-resizable, which is a standalone component. It has mobile support, although that is not specific to jquery mobile. Further details are in [this blog post].

Related

How to make JQuery Draggable in Meteor work with touch devices?

I am learning Meteor and JQuery and created a project in Meteor that uses JQuery UI Draggable. This works fine in Desktop Browsers. I assumed that it would work in Mobile devices when dragged with fingers but it isn't (thats why we have JQuery Mobile). Is there anyway I can create a application that works in both Desktop browsers and be able to use it mobile. This might be a silly basic question but I don't know how to progress. Would appreciate some directions
Could that be of some use to you?
Basically, it should translate touch events such as tap in mouse events such as click.

jQuery Mobile 1.4+ Mobile widgets - native look and feel on devices iOS, Android WP8+

Do jQuery Mobile widgets supports the look and feel of native device like iOS7, Android and WP8+. Is there any way in the jQuery Mobile widgets Framework that will help to develop such widgets with the look and feel of native device?
By widget's the look and feel of native device, i mean on iOS7 device a widget like datepicker should open a in iOS7 style, it's interface for selection date be same as native iOS7 style. If same page accessed on Android it should look and feel like android's style.
There are a couple of answers here. First, the easiest thing for you to do is simply take your iOS device, open up mobile Safari, and go to jQuery Mobile. The site has online demos of all the widgets and you can see how things look.
Second - jQM automatically enhances widgets to look nicer on mobile, but if you do NOT want it to enhance, you can use a data attribute to tell jQM to leave it alone. So if you have input type=date and wanted the native date picker to fire, you could use that option. (FYI, it is data-enhance="false" on the page level, but you can also turn it off globally.)

Navigation Menu in Jquery Mobile

I'm a newbie with jquery mobile but I want to build a vertical navigation panel with its specific animation (no page changing).
A good example is here ( i don't want sencha touch, i need to do this with jquery mobile): http://dev.sencha.com/deploy/touch/examples/production/kitchensink/index.html
For example, if you select "User Interface", just the menu is updating (and a button back appear...)
Another good example is IOs, as the dropbox Ipad application (cf http://www.youtube.com/watch?v=qeqw5OroHzY)
How I can do that with jquery mobile ? I see panels, the 1.3 new feature, but it's not really the same thing ...
Thanks for your help
Try this: jQueryUI's .menu
Other than that, it's just a fancy <aside>

How can I customize jQuery Mobile themes for buttons?

jQuery Mobile has a fine collection of themes for buttons.
http://jquerymobile.com/test/docs/buttons/buttons-themes.html
However, I want a button with a red gradient in the background. I could just override the CSS for one button's theme directly, but is there way to do this without breaking jQuery Mobile's abstraction barriers?
In other words, can I add my own themes through the interface that jQuery Mobile offers?
Use the ThemeRoller at http://jquerymobile.com/themeroller/index.php
You can import the existing jQuery Mobile theme and then customize it. Note that if you have less than 5 themes, you need to edit the CSS yourself and specify the style for .ui-body-e because the error message uses it.

SVG interactivity on an iPad

We have code that loads SVG via Ajax and then interacts via Javscript. Under Mozilla, and under Safari 5, running on a PC we get click events as expected in SVG. Running Safari iPad we don't get click events. According to the Safari developer guide:
http://developer.apple.com/library/safari/#documentation/AppleApplications/Reference/SafariWebContent/CreatingContentforSafarioniPhone/CreatingContentforSafarioniPhone.html
it looks probable we should be 'Making Elements Clickable.' Apple's guide suggests one does this by adding an onclick handler. The problem is all our SVG elements already have a click handler set up via jQuery - and they still don't click.
Maybe this is because SVG is not HTML, and SVG's DOM access is not HTML DOM's access? (We've been here before.)
How do we get the iPad to listen for events on SVG elements?
To my knowledge, there is a problem with safari according this javascript - which handles canvas/SVG
It seems that click and touch is not the same.
https://github.com/kangax/fabric.js/blob/master/dist/all.js
And SVG 1.1 does not have other than click events
http://www.w3.org/TR/SVG11/interact.html#PointerEventsProperty
I have the same interest, therefore I seek the same information ...
I was able to get click events working on Ipad using jquery and javascript. but my issue is that the svg blurs on an iPad.
My svg is embedded in an html object, then I just access it by calling a normal click event referenced to a function that access the svg component through:
window.top.document.getElementById('elementId');

Resources