jquery mobil compatibility

[carloParticipant]

Hello Peter, we tried to use the jqw datetimeinput control in a jquery mobile application. The control is displayed, but does not react on clicking the calender symbol. Are there known probles using jqw in jquery mobile pages ?

[Peter StoevKeymaster]

Hi carlo,

There are not known problems. If you experience some issue, please provide a sample and we will test it.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[carloParticipant]

Hi Peter, I found the reason. We are testing our mobile pages with the safari browser, setting the user agent to ‘Safari iOS 4.3.3 – iPhone’. You can reproduce the behaviour with your own demo page for DateTimeInput:

http://www.jqwidgets.com/jquery-widgets-demo/demos/jqxdatetimeinput/index.htm

Set the user-agent and click the calendar symbol.

The same happens with firefox setting the user agent.

[Peter StoevKeymaster]

Hi carlo,

We do not support iOS 4. We support iOS 5+ versions. In addition, I suggest you to use real devices for testing. In many cases, browser emulation gives wrong results rather than testing with a real device. I can say that this demo works correctly when I test it with real IPhone and IPad. The devices that I used in my current test are running iOS 7.0.4.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com

[carloParticipant]

Hi Peter, safari with user agent iOIS5+ is not working, no click events. Of course we also use real devices for testing.

Now something different: We are using jqwidgets for our desktop web application. Smartphones where supported by Titanium build apps. Now we decided to switch to HTML5. We are wondering whether the jqwidgets framework is suitabled for HTML5 cross browser/device smartphone development. Your mobile demo pages are nice but do not show a generic way how to setup a web page for handling different smart devices. As far as I found out, some magic is happening in simulator.js . A tutorial about setting up a mobile website with jqwidgets would be helpfull.

[Peter StoevKeymaster]

Hi carlo,

There is no magic here. The device detection is implemented within the widgets and is automatic. The simulator.js is used only for the demos to enable smart device simulation for desktop, but that is not related to the behavior of the widget when they are used on touch devices. The demo that you are pointing out works correctly with our Test devices. I cannot guarantee for some Emulation Debugging tools. For us, it is important the product to work on Real Devices and we do not care much about the emulators that try to mimic some behavior. According to us, our widgets are suitable for cross device applications, but it depends on you whether you will use them in such apps or not.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[carloParticipant]

Hi Peter,

the possibility of debugging with safari by setting the user agent on the desktop would be very handy.

Could you provide the source of http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/index.htm and the mobile demo sources which are really used when called on a smartphone ?

[Peter StoevKeymaster]

Hi carlo,

The mobile demos are included in the download package. The folder is called mobiledemos. I don’t understand what you mean by “mobile demo sources which are really used when called on a smartphone”. These are the same demos that are available online.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[carloParticipant]

Hi Peter,

I am missing http://www.jqwidgets.com/jquery-widgets-demo/mobiledemos/index.htm .

It would be very helpfull if you would explain a little bit, which of the mobile stylesheets (e.g. jqx.android.css, jqx.windowsphone.css…) have to be included for mobile devices.How the styles are attached to the controls, is this done automatic by jqwidgets or must we do some scripting, like in simulator.js ?

[Peter StoevKeymaster]

Hi carlo,

There is only one way to apply a theme and it is by including the theme’s CSS file and setting the theme property. No, the sheets are not automatically applied. That depends on your logic which theme to apply. That page – index.htm is not included. It is part of our web site and it is not a demo about a widget.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[carloParticipant]

Hi Peter,

so we have to include the mobile style sheets jqx.mobile.css, jqx.android.css etc, detect the device, build the theme name according to the detected device and apply the theme to the controls. Is would be very helpfull, if you could provide a bare bone mobile only device demo page e.g. for the ListMenue control, not using the very special simulator.js, which is cluttered with demo specific code (e.g. toolbar insertion..).

Best Regards
Carlo

[Peter StoevKeymaster]

Hi Carlo,

I already noted that simulator.js is not necessary. You should not use that file anywhere in your apps. It is specific for our website. simulator.js simulates a touch behavior on desktop. I am pretty sure that you don’t need such thing.

Best Regards,
Peter Stoev

jQWidgets Team
http://www.jqwidgets.com/

[carloParticipant]

Hi Peter,

yes your are right, one can remove all the demo specific stuff and use only base.cc and android.css. Thank you for your patience.

Best Regards
Carlo

[Author]

Posts