Phonegap native iOS7 blur effect - javascript

Is there a more native solution using Phonegap to create the iOS7 blur effect other than using CSS or javascript?
I have never used Phonegap before, my app needs the blur effect and I'm trying to decide to either use my web skills to create this app or hire a native developer.
Thanks guys!

The answer is, as usual, it depends.
CSS3 does support blur, but not in the same way iOS 7 uses. This means it is possible to create a static blur (say, on the navigation bar), but there is no great way discovered (last I knew) to enable a dynamic blur -- which is probably what you want, if trying to mimic iOS 7.
Although it flies a bit in the face of the question to pose this as a solution, one option is to simply not implement a blur. You can approximate something similar by using a gradient (say, 75% opaque to 100% opaque). Depending on your needs, this may be sufficient. (I first noticed this at this site: https://mir.aculo.us/2013/09/16/how-to-create-a-web-app-that-looks-like-a-ios7-native-app-part-1/)
The other option is to use a native navigation bar. It introduces its own set of problems (for example: how best to synchronize your non-native view transitions with native navigation bar's transitions), but it means you also get iOS 7's blurring on the navigation bar for free. I've got a (very alpha) plugin that implements this (as well as toolbars) here: http://plugins.cordova.io/#/package/com.photokandy.nativecontrols

Related

Parallax-Animation Scrolling Effect

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

HTML5 Drag and Drop Vs jQuery UI Drag and Drop

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

Kendo UI flip effect in Internet Explorer shows back too soon

I'm developing a BI dashboard for a business app using the JavaScript Kendo UI version v2014.1.416, but I'm having a problem with some visuals in IE11.
I want to point out that due to real-world constraints, running IE11 is for all intents and purposes set in stone. The Kendo version number is somewhat easier to deal with, but still no picnic.
Specifically, I use the kendo.fx.flip() function to display a flip card. The card flips ok, but the "back of the card" is rendered before the flip animation starts. In contrast, the same effect in Chrome and Firefox plays out as it should, i.e., the back is shown halfway(-ish) through the animation.
I had a look at the API reference page for the flip effect, at http://docs.telerik.com/kendo-ui/api/javascript/effects/flip. As it turns out, the reference page example exhibits the same behavior in IE11.
I'm guessing the effect uses the CSS3 flip function under the hood (haven't looked yet though) and this seems to be somewhat of a general problem given the amount of questions regarding flip in IE.
My question is twofold:
1) Is there a way to "fix" the animation specifically for IE, using the provided version of Kendo and/or using regular CSS?
2) Is this effect fixed for IE in later Kendo versions, in spite of the behavior on the API reference page?
I could only get this to look nice by setting a large no-repeat fixed background image on both 'sides' (made out of a simple white png).

Stuttery performance issues with Jquery Mobile and Phonegap

So, I am developing an app using phonegap and jqm. Everything works great and it's all pretty easy thanks to phonegap build. However, I've started to see some 'stutter issues' that are really annoying. My app at the moment only has two pages and the transition effect between them is 'slide'. The first page has a background color set to it and the second one does not. Some of the issues:
When I navigate from page 1 to page 2, half of the page has the background color from the previous page. It goes away after I do some random swipes on screen.
On one of the pages, I have a regular form with some text input fields and a radio button set at the end. When I move from an input box to the radio button the keyboard slides down but it is replaced by a black area for a short period of time.
The fixed header that I have at the top randomly decides to disappear and reappear again.
These are only few of the annoying ones and these only happen on the mobile device and it works fine on the computer. So, I know it's a performance issue.
I've read up about this on the internet and here on SO and different solution have been proposed like writing custom CSS3 transitions (to take advantage of hardware acceleration) or using something like zepto.js.
What in your opinion would be the best 'cross device compatible' method to overcome these? Is there a way to force hardware acceleration with jquery mobile? Is CSS3 performance even across device platforms?
PS. I have been testing on jelly bean 4.2.2. I am not posting any of my code because they are just plain form elements and some input tags and this happens on multiple pages which are totally different so I am pretty sure this isn't code related.
Any help will be much appreciated.
JQuery writes animations using Javascript which dynamically writes inline styles that change quickly. The issue with that, is that it isn't using the hardware acceleration and if you are testing on a retina device, it animates using pixels as they are a unit of measurement. So it is skipping half of your pixels which causes the stutter.
I have written apps using PhoneGap and the best way I came up was to use CSS3 animations/transitions. Super smooth and they feel just like a native app. You will still use JQuery to add/remove classes, etc., but the movement should come from your CSS.

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