Namespaces

Variants
Actions

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 over the next few weeks. Thanks for all your past and future contributions.

Creating Scrolling area on mobile screen : Web Runtime

From Wiki
Jump to: navigation, search
Article Metadata
Tested with
Devices(s): Nokia 5230
Article
Keywords: Scrolling area
Created: girishpadia (08 Mar 2011)
Last edited: hamishwillee (12 Oct 2012)

Contents

Introduction

Internet is now used as an information hub. To be able to navigate from all the informations, scroll bars plays an important role. Mobile device screens are much smaller in size then the PC monitor. There may be situations where we have lots of infomation need to show in small mobile device screen. In nokia Web Runtime, it is very easy to show scrolling controls by using a simple Cascading Style Sheets (CSS).

What's there inside?

The example show you two different scrolling area within the single mobile screen. I have used two html Div tags by specifying their fixed height and width in CSS file. The div tags have an important property "overflow" which values can be set either of the following.

  • hidden : Hides the contents which do not feet to the specified height and width.
  • auto  : Shows the scroll bars if required when the contents do not feet the height and width.
  • Scroll : This shows the horizontal and vertical scroll bars whether they are required or not and it is visible by default.

Once you know these properties the task to show scrolling control is easy. You need to put div tag with fixed height and width and assign its "overflow" property to "scroll"

index.html

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Scrolling Contents using div tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<script language="javascript" type="text/javascript" src="scroll.js"></script>
<link rel="stylesheet" href="scroll.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
</head>
<body onload="init();">
<div id="scrolling1" class="scroll" >
This is first <br />area which will scroll <br />individully on the screen<br />
You can put <br />any html tags <br />in this area <br />like following.<br />
<p>Type any text and click on the button bellow.<br /> It will alert a message</p>
<table border="1">
<tr><td>Name:</td><td><input type="text" id="txtbox1" name="txtbox1" /></tr>
<tr><td>&nbsp;</td><td><input type="button" id="btn1" value="ClickMe" onclick="alert('Hello '+txtbox1.value);"/></td></tr>
</table>
 
</div>
<p>Following is another scrolling content</p>
<div id="scrolling2" class="scroll" >
This is anothter scrolling area. <br />
I am putting other html components here.
<br />
 
<input type="radio" name="group1" id="group1" />Radio Button1<br />
<input type="radio" name="group1" id="group1" />Radio Button2<br />
 
<br />...
<br />...
<br />...
<br />
<input type="checkbox" name="chk1" />Frouits<br />
<input type="checkbox" name="chk2" />Vagetables<br />
 
<br />...
<br />...
<br />...
<br />
 
<input type="button" name="btn2" id="btn2" value="ClickMe" onclick="alert('I am in scrolling area2.');"/>
 
</div>
 
</body>
</html>


scroll.css

.scroll
{
width:80%;
height:100px;
overflow:scroll;
border:solid;
border-color:Black;
}

Images

First look of the screen


Article 10 image 1.jpg


The image after contents are scrolled.


Article 10 image 2.jpg


Tested on device

The application has been tested on Nokia 5230.

Download

The Source code can be downloaded from here : File:ScrollableContent.zip

This page was last modified on 12 October 2012, at 06:26.
72 page views in the last 30 days.

Was this page helpful?

Your feedback about this content is important. Let us know what you think.

 

Thank you!

We appreciate your feedback.

×