×
Namespaces

Variants
Actions
(Difference between revisions)

Customising a Guarana UI busy indicator

From Nokia Developer Wiki
Jump to: navigation, search
hamishwillee (Talk | contribs)
m (Automated change of category from Web Runtime (WRT) to Symbian Web Runtime)
hamishwillee (Talk | contribs)
m (Bot change of links to internal format.)
Line 14: Line 14:
 
==Overview==
 
==Overview==
  
This code snippet demonstrates how to customise a Guarana UI busy indicator. You can download the component library from [http://wiki.forum.nokia.com/index.php/Guarana_UI:_a_jQuery-Based_UI_Library_for_Nokia_WRT Forum Nokia]. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet [[CS001549 - Adding a Guarana UI busy indicator on a web page]].
+
This code snippet demonstrates how to customise a Guarana UI busy indicator. You can download the component library from [[Guarana UI: a jQuery-Based UI Library for Nokia WRT|Forum Nokia]]. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet [[CS001549 - Adding a Guarana UI busy indicator on a web page]].
  
 
To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded from the [http://www.ajaxload.info/ Ajaxload] website, for instance. Next, replace the file <tt>themes/nokia/base/images/busyindicator.gif</tt> with your own animation. Finally, customise the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:
 
To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded from the [http://www.ajaxload.info/ Ajaxload] website, for instance. Next, replace the file <tt>themes/nokia/base/images/busyindicator.gif</tt> with your own animation. Finally, customise the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:

Revision as of 00:04, 19 May 2011


Template:KBCS

Article Metadata
Tested with
Devices(s): Nokia N97, Nokia 5800 XpressMusic
Article
Created: (30 Dec 2009)
Last edited: hamishwillee (19 May 2011)

Overview

This code snippet demonstrates how to customise a Guarana UI busy indicator. You can download the component library from Forum Nokia. This snippet assumes that you are familiar with adding the busy indicator component on a web page. For more information about this, read the snippet CS001549 - Adding a Guarana UI busy indicator on a web page.

To replace the busy indicator with your own version, first create a GIF animation that you want to use. Free animations can be created and downloaded from the Ajaxload website, for instance. Next, replace the file themes/nokia/base/images/busyindicator.gif with your own animation. Finally, customise the width and height of the busy indicator so that they correspond to the width and height of the new animation. For example:

window.busyIndicator = new Nokia.Busy({
element: "#busyIndicatorContainer",
width: 126,
height: 22,
autoOpen: false
});

Postconditions

The default GIF animation of a busy indicator is replaced with your own animation.

See also

Supplementary material

This code snippet is part of the stub concept, which means that it has been patched on top of a template application in order to be more useful for developers. The version of the WRT stub application used as a template in this snippet is v1.2.

79 page views in the last 30 days.