Please note that as of October 24, 2014, the Nokia Developer Wiki will no longer be accepting user contributions, including new entries, edits and comments, as we begin transitioning to our new home, in the Windows Phone Development Wiki. We plan to move over the majority of the existing entries. Thanks for all your past and future contributions.

Adding a Guarana UI scroll on a web page

From Wiki
Jump to: navigation, search
Article Metadata
Code ExampleTested with
Devices(s): Nokia N97, Nokia 5800 XpressMusic
Created: tapla (17 Dec 2009)
Last edited: hamishwillee (05 Oct 2012)



This code snippet demonstrates how to add a Guarana UI scroll component on a web page. The scroll component looks like this:

Guarana scroll icon.jpg

You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.

Source: Relevant HTML components

<!-- Guarana UI style sheets -->
<link rel="stylesheet"
type="text/css" media="screen">
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
<script type="text/javascript" src="lib/guarana/defaults.js"
<script type="text/javascript" src="lib/guarana/core.js"
<div id="bodyContent" class="bodyContent">
<div id="scroll">
Suspendisse non justo ac dui ultricies mollis sed semper
magna. Donec gravida erat in ipsum scelerisque interdum.
Nullam congue vehicula sagittis. Aliquam condimentum
facilisis suscipit. Proin sagittis pulvinar tempor. Cras in
mollis lectus. Class aptent taciti sociosqu ad litora
torquent per conubia nostra, per inceptos himenaeos. Nulla
facilisi. Aliquam convallis viverra erat eu posuere.
Vivamus aliquam, dolor id condimentum adipiscing, lacus
diam volutpat mauris, id pulvinar neque elit a arcu. Etiam
volutpat aliquam elit eu dictum. Integer in nisl magna, eu
lobortis tortor. Donec aliquet quam sit amet lectus aliquam
faucibus ullamcorper tellus auctor. Donec accumsan dapibus
rutrum. Fusce dolor arcu, sodales id ultricies imperdiet,
aliquet auctor quam. Vestibulum vitae magna vitae dui
pellentesque aliquam. Vivamus massa augue, vulputate ut
auctor in, placerat eget orci.
Aenean iaculis dui sem. Sed ornare aliquet lorem, eu varius
libero feugiat quis. Nullam nec lectus erat, nec vestibulum
elit. Nam gravida rhoncus adipiscing. Vestibulum justo
nibh, aliquam et volutpat at, pellentesque sed magna.
Mauris pharetra odio ante. Nunc dignissim placerat
volutpat. Donec accumsan arcu id libero dapibus sodales.
Donec fringilla, nibh nec mattis fringilla, purus quam
ultricies lectus, a ultricies orci est nec lectus. Nunc
vitae orci ante, eu imperdiet eros. Nunc dapibus sapien
pharetra mi fringilla ornare.
Duis fringilla ornare blandit. Morbi vitae nulla urna.
Aenean vestibulum, magna quis vestibulum ultricies, mauris
nunc elementum tortor, nec rhoncus sapien nisl sit amet
velit. Quisque condimentum massa ac turpis auctor vitae
facilisis leo malesuada. Sed vitae lacus id dui sodales
tincidunt. Integer fermentum pellentesque augue vitae
egestas. Nunc ipsum magna, consequat vitae semper quis,
auctor eu massa. Donec magna nisi, aliquet sed feugiat
pretium, tempor non orci. Nulla at nisl tempor dui
faucibus viverra.
Vestibulum ac lectus id erat volutpat fringilla in ut ante.
Pellentesque tristique libero vitae dui posuere pretium
cursus nibh mollis. Fusce aliquet, mi eget euismod
facilisis, risus est pretium mauris, sed pulvinar urna nisi
vel nisl. Nunc laoreet mauris sit amet velit vulputate id
pharetra lacus laoreet. Etiam in eros elit, at tristique
mi. Lorem ipsum dolor sit amet, consectetur adipiscing
elit. Quisque lorem ligula, mollis vitae viverra eget,
fermentum et augue. Donec pellentesque, ipsum eu auctor
molestie, risus sem tincidunt nulla, vitae tincidunt purus
nibh eu nisi. Sed magna dolor, malesuada vulputate pretium
quis, ornare a nibh. Donec eleifend ligula nec purus
posuere molestie. Sed sed risus nibh. Phasellus purus
velit, viverra ut imperdiet id, consequat sed felis.

Source: JavaScript

Nokia.use("scroll", init);
// Initializes the widget
function init() {
var scroll = new Nokia.Scroll({
element: "#scroll",
scrollBar: true,
showArrows: true,
bottomImage: false,
increase: 200,
duration: 50

The scrollBar and showArrows attributes define whether a scrollbar and scrolling arrows are displayed, respectively. If the bottomImage attribute is set to true, an image is displayed to indicate the bottom of the scroll component. If it is set to false, no bottom image is displayed. The increase attribute defines how many pixels the content scrolls in one scroll, and the duration attribute specifies how much time (in milliseconds) the scroll activity takes.

Note: The scroll component requires the following files from the library:

  • lib/jquery/jquery.js
  • src/core.js
  • src/defaults.js
  • src/dom.js (implicitly loaded by core.js)
  • src/util.js (implicitly loaded by core.js)
  • src/device.js (implicitly loaded by core.js)
  • src/animation.js (implicitly loaded by core.js)
  • src/widget.js (implicitly loaded by core.js)
  • src/scroll.js (implicitly loaded by core.js)
  • themes/nokia/base/base.css (implicitly loaded by core.js)
  • themes/nokia/base/scroll.css (implicitly loaded by core.js)
  • themes/nokia/base/images/scroll.png (from scroll.css)
  • themes/nokia/base/images/shadow.png (from base.css)
  • themes/nokia/base/images/shadow-c.png (from base.css)
  • themes/nokia/base/images/shadow-lr.png (from base.css)
  • themes/themeroller/default-theme/ui.accordion.css
  • themes/themeroller/default-theme/ui.all.css
  • themes/themeroller/default-theme/ui.base.css
  • themes/themeroller/default-theme/ui.core.css
  • themes/themeroller/default-theme/ui.theme.css
  • themes/themeroller/default-theme/images/ui-bg_diagonals-thick_10_444444_40x40.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_flat_0_000000_40x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_20_9f1504_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_40_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_55_8ab61c_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_glass_100_c2cba5_640x400.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-hard_80_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-bg_highlight-soft_100_ededed_640x100.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_89bf43_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_97B72B_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_222222_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_e3bfb5_256x240.png (from ui.theme.css)
  • themes/themeroller/default-theme/images/ui-icons_ffffff_256x240.png (from ui.theme.css)


A Guarana UI scroll is added on the web page.

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.

This page was last modified on 5 October 2012, at 06:04.
53 page views in the last 30 days.