Do you know how to take advantage of custom JavaScript when working with Appery.io visual components? You can easily access any Appery.io component in JavaScript via the Appery.io JavaScript API and manipulate it with the jQuery Mobile API. Here is an example of how to dynamically add items to a list using JavaScript. Read the rest of this entry »
Here is how add HTML5 <audio> tag to your mobile app in Appery.io. Add the following JavaScript on screen load event:
$('').appendTo('#j_3');
Here is how the app looks in Google Chrome (desktop):
We are working on adding an actual component for the <audio> tag. We already have HTML5 <video> tag.
One more thing. Mobile browser support for the <audio> still varies. iOS seems to have good support while Android support is not as good yet (no support on Android 2.2).
Navigating between pages in Appery.io is very simple. You first add an HTML event to a component, such as click for a button, and then add Navigate To Page action where you select the page to navigate:
This works very well, but it will replace the entire page. An alternative way to navigate or transition between pages is to use jQuery swipe transition which in my opinion looks better. Here is how to do it. You use the same event, such as click for a button. Then, we add Run Custom JavaScript action with the following code:
navigateTo('end', 's');
The first argument is the page name. The second argument indicates that a swipe transition should be done. That’s it. You are probably wondering why not do this via Navigate To Page action? It will be possible soon. We are going to add a check box so you will be able to select what type of transition you would like, a page replace or swipe. For now, this is a very simple work around.
Want to try it?
Just scan this QR code:
A number of users asked us how to use a custom image as background for mobile app. We are working on this feature but a simple work around exists. We want to run a very simple jQuery CSS query when the mobile screen loads. First, add load event to the screen. Then, add Run Custom JavaScript action with the following code:
$('div[dsid="mobilecontainer"]').css('background-image',
'url("http://www.sdcblog.com/wp-content/uploads/2011/06/italy.jpg")')
I removed the Header and Footer parts and also looking for mobilecontainer1, as this is the content where I want to set the background image.
The result (click image to view the app):
Image source: http://www.sdcblog.com/2011/06/italian-artchitecture-bellissimo/italy/