Javascript Scrollbar on Mobile Devices Workaround? - javascript

I'm building a draggable timeline of sorts for a new project using some simple jquery ui features and have run into a problem regarding mobile devices.
Namely, drag and drop just doesn't work on touch screen devices like that. I've noticed any video players you pull up run proprietary plugins on your phone so moving the timeline around is not an issue. But, seeing as I'm not really doing video, I was hoping for some sort of work around.
Thoughts?

You could try to use JQuery Mobile Drag and Drop
See here for some documentation.
NOTE Using JQuery mobile will work on some phones, but not all phones. Older Blackberries, HTC Phones, and many other ones cannot handle many JQuery Mobile calls. Look at this page for more information on compatability

Related

jQuery Scrollbar Plugin

Hi I am stucked in my big project using the custom scrollbar. None of the plugins are 100% working or I may be unaware of some plugins.
which jQuery scroll bar plugin is best? in given list of circumstances below.
proper touch / scroll (cross browser and device compatibility)
nested conditions
inside popup and inside drop down.
inside ajax updated contents
resize / orientation scenarios
for devices: auto focusing for input inside popup
supported in major devices including samsung low end touch phones.
Has any one using this type of custom scrollbar which is perfect for all type of my scenarios?
I'm using the plugin by Malihu. It does the job pretty well and have dozen of options so you can personalize it. I think it passes all your requirements.
http://manos.malihu.gr/jquery-custom-content-scroller/

How to make a website that uses fullpage.js go fullscreen on Safari for iOS

I'm working on a wordpress website that uses the fullpage.js plugin.
My main goal is to make it go fullscreen on iOS devices, latest versions are the main targets. By making it go fullscreen I mean getting rid of the ugly top and bottom bars, as you can see on this picture, in landscape mode those bars take up more than 25% of the space.
I've tried this, but of course all browsers are compatible except safari iOS.
I've also tried all tips I found on here like including the meta "apple-mobile-web-app-capable" but nothing seems to work.
On Apple devices in Safari, getting rid of the anchors option of fullPage.js will do the trick.
Not sure about other mobile phones or browsers, but it is well known browsers don't provide a way to deal with those bars and therefore there won't be much you can do about it.

How to find javascript properties which are only supported by mobile devices and tablets?

The basic problem is to detect mobile and tablet devices with JavaScript. I have a scrollbar plugin, and I only would like to display it on desktop browsers. I would like to use the mobiles/tablets default scrollbar if possible.
I decided to detect devices without the user-agent string, but focusing on mobile and tablet specific JS properties. Here are the properties I found useful to detect mobile/tablet browsers. I would combine them to make it work as accurate as possible.
window.screenX can not be different from 0 on mobile/tablet
window.orientation is "undefined" on the most desktop browsers
I you can help me with this, I would appreciate it. Is there any way to detect mobile/tablet browser in more accurate way?
Here is the link to another SO that covers detecting devices using javascript or jQuery.
Edit: However it does appear to utilize userAgent in the more popular answer. The second most popular answer does not use userAgent. It uses CSS media queries to detect, and Javascript checks against the media query to determine the device.
Hope this helps!
What is the best way to detect a mobile device in jQuery?

Sencha Touch over jquery Mobile

What is main feature of Sencha Touch over jQueryMobile I don't understand.
as per my knowledge about this two technology:
1) jQueryMobile have very simple data attribute feature for design app for cross mobile platform but as compare to Sencha Touch.
2) Sencha Touch have new concept and their structure to implement designing for page is very difficult compare to jQuery Mobile.
Then What is significance of Sencha and jqueryMobile and What is their own area in Which they both play role significantly ?
Intro
Unlike jQuery Mobile Sencha Touch (just like App Framework) is made specifically to work on mobile platforms and it is highly optimized. Where jQuery Mobile is made to work equally on desktop and mobile devices and it is not optimized like Sencha Touch. This is not bad for jQuery Mobile but it also means jQuery Mobile is not best solution form mobile hybrid applications.
Good side of Sencha Touch
It is several times faster then jQuery Mobile, you can find several benchamark articles if you google a bit. From my experience Sencha Touch mobile applications works much much smoother then jQuery Mobile ones. Again this is not an attack on jQuery Mobile, Sencha is highly optimized not to mention build to run only on web kit browsers.
Much better application packaging system then Phonegap which is usually used with jQuery Mobile
Did I say it is FAAAAAAST, a little bit slower then App Framework but still extremely fast.
Excellent documentation with huge number of tutorials and video examples.
vs. the bad
Unlike jQuery Mobile don't expect Sencha Touch to work on a desktop browsers. First it is optimized to work on a smaller devices and it will work only on web kit browsers which makes it unusable for Firefox, IE8+ ....
It uses complex and alien syntax, specially to someone coming from jQuery Mobile or jQuery like syntax.
Development application is a paid app so you need to expect initial expenses.
Don't expect native app feeling, mobile apps made with HTML5 will never have 100% native feel.
Unlike Sencha official documentation jQuery Mobile is still much more represented on the internet
Final advise
If Sencha Touch is not something you are willing to spend time on and jQuery Mobile is too sluggish for you, consider using PhoneJS or Kendo UI. Unlike Sencha Touch, they are built on jQuery, but unlike jQuery they are fast as Sencha Touch.
There is also a jQuery fork, special for mobile devices called Zepto.JS. You have a lot of extra mobile events like swipe and it's a lot smaller and faster than the regular jQuery lib. Downside is that you don't have the UI elements like you have in Sencha Touch or jQuery Mobile, but you have a lot of freedom. And it's MIT licensed. I like that a lot.

JavaScript libraries for touch screen devices

I know there are a number of frameworks to help make web applications on Mobile Safari/Webkit look and behave like native applications (eg, jQTouch), but are there any more light-weight libraries that help out at a slightly lower-level?
eg, I might want to add some animations on certain touch events to reproduce an iPhone style swipe.
I don't want to create an iPhone web application as such, just enhance an existing site with a few special touch events.
It's not so difficult to create this stuff by directly using the touch events that the device provides, but some of the iPhone animation styles are quite complex to reproduce. eg, the bounce when you get to the end of a scroll bar, etc... Just wondering if anyone has done the work and wrapped it up into an open source library.
This doesn't answer your question completely, but since you mentioned bounce scrolling specifically, TouchScroll was just released on Tuesday.
I am looking for the same thing, JavaScript frameworks free from IE stuff..
So far
XUI
http://code.google.com/p/xui-js/
SLY
http://github.com/digitarald/sly
Coming Soon
jQuery for touch devices (not jqtouch) http://jquerymobile.com/2010/08/announcing-the-jquery-mobile-project/
http://zeptojs.com/ is all you want.
It's jQuery trimmed for webkit mobile. Excellent library with (brand new) great documentation. Handles ajax, dom selection, touch events. Does not have UI components.
Very lightweight.

Categories