Adding a Guarana UI scroll on a web page
Article Metadata
Code Example
Tested with
Devices(s): Nokia N97, Nokia 5800 XpressMusic
Article
Created: tapla
(17 Dec 2009)
Last edited: hamishwillee
(05 Oct 2012)
Contents |
Overview
This code snippet demonstrates how to add a Guarana UI scroll component on a web page. The scroll component looks like this:
You can download the component library from Guarana UI: a jQuery-Based UI Library for Nokia WRT.
Source: Relevant HTML components
<head>
<!-- Guarana UI style sheets -->
<link rel="stylesheet"
href="style/themes/themeroller/default-theme/ui.all.css"
type="text/css" media="screen">
<!-- Guarana UI scripts -->
<script type="text/javascript" src="lib/jquery/jquery.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/defaults.js"
charset="utf-8"></script>
<script type="text/javascript" src="lib/guarana/core.js"
charset="utf-8"></script>
</head>
<body>
<div id="bodyContent" class="bodyContent">
<div id="scroll">
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
<p>
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.
</p>
</div>
</div>
</body>
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)
Postconditions
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.
- The patched, executable application that can be used to test the features described in this snippet is available for download at Media:adding a guarana ui scroll.zip.
- You can view all the changes that are required to implement the above-mentioned features. The changes are provided in unified diff and colour-coded diff (HTML) formats in Media:adding a guarana ui scroll.diff.zip.
- For general information on applying the patch, see Using Diffs.
- For unpatched stub applications, see Example app stubs with logging framework.
(no comments yet)