UI very distorted using jquery Trigger.io apps - trigger.io

I have couple of questions:
1) I am creating apps using Trigger.io and trying to make a search form that loads listview and shows data. However the UI is very distorted when i tried on android simulator and i also tested on my android tablet.
All the rounded borders and icons in list view looks very messed up. Does anyone have any solution to this?
2) How can i add ads in my apps? Can i use admob?
3) How can i scale YouTube video according to screen size?

1) Is your HTML displaying properly in browsers? Unfortunately, we don't control the HTML rendering, so you'll need to write your markup in a webkit-compatible way.
2) We have an AdMob integration in our medium-term plans
3) If you want full-screen video playback, see forge.media. For inline video, we should behave in the same way as the stock browser - if not, let me know!

1) Android 2.x has f'ugly rendering of CSS rounded corners, combined with older 2.x handsets having lower res displays leads to some really freaky looking borders, shadows and bevels. Also slows down the page a lot - I would avoid these css effects if possible if you want to target these devices.

Related

How to animate letters/words on screen in different ways

I know How to use/show animated images in ImageView. But I m wondering if this is possible in native iOS and/Or Android that letters of a string can be shown on screen via different shape of animations.
For Example:
Ballons on the full app screen pop and deposit the words of the text/string.
Popcorn in a pan on the full app screen pop and deposits the words of the text/string.
Then these letters/words are moving down to bottom of app screen and placed/shown in some textView
I have searched a lot but found nothing like this in Native environment.
I have found THIS LTMorphingLabel but it is very far from my requirement.
Any idea or direction will be highly appreciated.
Lottie is a mobile library for Android and iOS that parses Adobe
After Effects animations exported as json with Bodymovin and renders
them natively on mobile!
you can have different animation for each lettter
have fun

Mobile optimisation of rails app

I have a website at http://bit.ly/1h3HLVE
There are two issues I am trying to resolve regarding viewing the website on mobile devices.
The dropdown boxes in the top navbar do not work on mobile viewing (with my iphone anyway)
When I load the website the first time it is zoomed in on my mobile, and I need to zoom out to see it properly. I'd like to find a way to have it automatically open at the right size for the mobile device.
Can anyone help with either of these?
What you are trying to do is called responsive design, the easiest way would be learn a little about Bootstrap, Bootstrap is framework for design, there is a gem for rails called bootstrap-sass for easy integration, with this you can set different behaviours for different devices (this is one of the functionalities of bootstrap), you can hide for example your navbar in mobile devices and show another smaller in mobile. Bootstrap also has responsive adaptive support for images and tables, that it will change according to the width of the device dynamically.
Of course, if you are hiding items they will still loading to your site so eventually it could be a little hard to loading, you can use browser gem then, this one allow you to have different behaviors for different devises with conditionals(mobile? desktop? e.g.) and also let you have different views for each one.
Check both of them, is a good place too start and there is lots of guides for those, regards.

Drawing and Animation in iOS

My background is Processing and HTML5 Canvas. Now I want to write an iOS app, and include some kind of canvas, where I can draw shapes and images on, similar to a sketch in Processing (2D).
What's the common / most simple way to do that in iOS development? I would also appreciate links to good tutorials to get started, if you know some.
The simple way is, assuming you are not using any Java Libraries in Processing, use processing.js and your .pde file in something like PhoneGap so that you can compile it to native code for iOS. I have done this and it works well although the performance is simular to what you would get in mobile safari with a html5 app.

iOS: CSS3 animation breaks scrolling on div

I'm developing a web-app, based on the Dribbble API. In this app I have a div which shows all comments with a max-height of 200px, so if there's more than 200px worth on comments, the div gets scrollable. So far so good, works as intended on iOS.
However, when I add a Scale transfrm to this div (to mimic iOS's folder opening animation), scrolling the div breaks entirely. You can see the live version here: http://maxsteenbergen.com/longshot/
Is this fixable by setting a a new style using jQ's webkitAnimationEnd or is this without solution?
EDIT: In the meantime I found that using two fingers to scroll the div works but obviously, this is not how it's supposed to work.
It's also worth noting that scrolling DIV's don't work on older versions of iOS - it might be worth having a look at iScroll.
You can implement native iOS UI and achieve much better UI feedback. especially on scroll view. To obtain data from Dribbble API you may use 3rd-party Dribbble iOS SDK: https://github.com/agilie/dribbble-ios-sdk

Website for iPad Mobile Safari

While creating a website for iPad Mobile Safari, I have a few questions;
Does the orientation happen automatically or do we have to write code for that ?
What is the best approach in terms of CSS/JS..I mean create separate copy of the web CSS for iPad and just update for iPad specific. Also what about JS?
What is the best way to detect for iPad (CSS/JS) and how?
Any online references which specifically covers iPad Mobile Safari development will also be great.
Thank you.
The orientation happens automatically, but you can write code to intercept the event and do things.
I highly recommend using an existing JS library such as Sencha Touch to handle the UI for you; they automatically detect the client and will display the appropriate scale of the app.
I just added a few meta tags to my current project, based on this page - http://www.nczonline.net/blog/2010/04/06/ipad-web-development-tips/
It made a huge difference. The orientation media queries work great. I madea simple example by setting the body background colour different based on orientation.

Resources