Manipulating Tiggzi Components with jQuery Mobile

Do you know how to take advantage of custom JavaScript when working with Tiggzi visual components? You can easily access any Tiggzi component in JavaScript via the Tiggzi 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 »

Using HTML5 <audio> Tag In Your Mobile App

Here is how add HTML5 <audio> tag to your mobile app in Tiggr. Add the following JavaScript on screen load event:

$('<audio controls>
   <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.mp3" type="audio/mpeg" />
   <source src="http://www.html5rocks.com/en/tutorials/audio/quick/test.ogg"
   type="audio/ogg" /></audio>').appendTo('#j_3');

Here is how the app looks in Google Chrome (desktop):

You can try the app here.

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).

Using jQuery Swipe Transition For Navigation In Your Mobile App

Navigating between pages in Tiggr 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:

1

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? Open this app on your device:

Or just scan this QR code:

Setting Custom Image Background For Your Mobile App

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:

1
2

$('div[dsid="mobilecontainer1"]').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/