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.
Related
I've been wanting to implement a similar effect like in these apple sites where the computer animation changes with the scroll.
https://www.apple.com/macbook-pro-16/
https://www.apple.com/imac-pro/
Searching around how to implement the sort of parallax effect Apple does in these websites, I haven't expressly found something quite the same, how is this accomplished?
They propbaly used three.js scripts to achive this. But you can do it in much more easier way but with worse performace for sure. You need to make a lot of photos (you know like in the movie frame by frame) and then on the scroll event you have to replace photo with prevoius one(if you detect scroll top) or with next one (if you detect scroll down). If you detect last or first item then you stop hijacking scroll event and let browser do the job.
If you want to learn more abot three.js you can read more about this here: three.js - Learn
In the end of <body></body> element of this website you can see that they added three.js :
I was also researching what apple use on their website and found out that a tool called Lottie.
Lotttie is a design library by Airbnb you can find it here
"Lottie is an iOS, Android, and React Native library that renders After Effects animations in real-time, allowing apps to use animations as easily as they use static images."
Lottie also has a web version available here
What is the best way to make a drag and drop builder in 2017? Yes, this question has been asked before but that was 5 years ago and I assume things have changed? HTML5, jQuery UI or is there another option now?
A more recent question Form Builder From Scratch - HTML 5 Drag and Drop, or JQuery UI Draggable, or What? was also left unanswered.
Any help would be great! I have started to play around with both (I have never used HTML5 or jQuery UI's Drag and Drop so it's hard for me to make a decision.) and jQuery UI does seem to be easier to use and understand but also seems quite buggy, well at least in codepen.
We just did a bit of research into Drag and Drop with ReactJs and honestly came out the other side a bit sad. So if you're looking for pure HTML 5 Drag and Drop this is a fantastic site to show you how screwed you are:
https://caniuse.com/#feat=dragndrop
So as of the time of writing this, if you went pure HTML5 DND you really wouldn't cover the mobile scenarios.
Now what isn't listed in this is all the edge cases to get the feature looking the same across browsers. Between Edge, Firefox and Chrome, one adds an Icon to show that you are dragging at item, one has a slight opacity on a copied element and one does something else. Either way, aligning these designs (depending on how annoying your design team is) can be easy (e.g. don't care as long as drag and drop works) to impossible (e.g. get rid of the icon while I'm dragging).
Now when it comes to JQuery, it's been around a while but that doesn't mean it doesn't have it's faults as well. Because it runs in the JS layer instead of the browser itself, depending on how much is going on in the system, it can feel a bit slow. Also I did notice it started dragging on annoying situations like when you're trying to swipe the page to scroll in Edge. That could have also been poor programming on our part.
I think in the end we just used React Dnd with the HTML5 backend. Seems to work pretty good and for those mobile scenarios we just have menu options which expose the same functionality in a different form. It ended up helping with accessibility as explaining all the actions for drag and drop via keyboard shortcuts was slightly annoying.
Not sure if that helps but if I recall (and it's been about 6 months) that's the run down.
I recommend using jqueryui with a small hack called touch punch that allows you to capture the events of mobile devices such as ontouch on the screen. I prefer jqueryui because it is more complete than HTML5 and relatively easy to use.
The link:
http://touchpunch.furf.com
Good luck and greetings
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.
I've created a website using SUPERSCROLLORAMA plugin. I wasn't aware of the problems with parallax scrolling on iPad and iPhone. I've found out a little bit to late, and I'm thinking about the ways to solve this.
If I understand correctly, events are disabled on this devices while scrolling. So will I be able to make website act as it should, if I disable the native scrolling and implement another one, via JavaScript plugin?
I've already disabled the original scrolling using Alnitak's answer from this question. I've tried to find some plugins to activate scrolling again, but the problem is, it has to be binded to the document since animations are fired there... Do you know the plugin that will do the trick? Is my solution even correct, or there is no solution for my case, I need to rewrite the script from scratch?
You can use parallax scrolling plugin that works on mobile browsers (iOS too).
Have a look at Skrollr. It doesn't depend on any other library, it has optional mobile js file and is very easy to use. Just read the documentation.
I'm working on a few html5 screens which will be embedded inside native mobile apps (for ios and android).
I obviously don't want to reinvent things here, and would like to use a stable framework on the javascript side of things.
I tried using JQuery Mobile but it is way more than I need, plus they kind of force you to do things their way.
All I need is to have an element which can be (vertically) scrolled by swiping (without visible scrollbars), but I couldn't find how that can be done with JQM easily (without all of their widgets, themes and defaults).
I also tried jGestures but it did not work at all.
Any ideas what will be the best approach?
Thanks.
Update
I found this jquery plugin which does what I need: https://github.com/ifightcrime/touch-scroll
You can use -webkit-overflow-scrolling: touch; which uses the native inertia scrolling built into the phone. Works really well. There is a scrollbar, but I'm sure some clever positioning could solve that.
More info here: http://johanbrook.com/browsers/native-momentum-scrolling-ios-5/
And here: http://fioravengi.blogspot.co.uk/2011/06/implications-of-ios-5-webkit-overflow.html
Hope that helps :)
edit: Sorry, just realised you need it to work on android. I doubt this does. For iOS though this works a treat. So, half an answer!