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
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"
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
<title>Scrolling Contents using div tag</title>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<link rel="stylesheet" href="scroll.css" type="text/css" />
<meta name="Generator" content="Nokia WDE 3.0.0" />
<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>
<tr><td>Name:</td><td><input type="text" id="txtbox1" name="txtbox1" /></tr>
<tr><td> </td><td><input type="button" id="btn1" value="ClickMe" onclick="alert('Hello '+txtbox1.value);"/></td></tr>
<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.
<input type="radio" name="group1" id="group1" />Radio Button1<br />
<input type="radio" name="group1" id="group1" />Radio Button2<br />
<input type="checkbox" name="chk1" />Frouits<br />
<input type="checkbox" name="chk2" />Vagetables<br />
<input type="button" name="btn2" id="btn2" value="ClickMe" onclick="alert('I am in scrolling area2.');"/>
First look of the screen
The image after contents are scrolled.
Tested on device
The application has been tested on Nokia 5230.
The Source code can be downloaded from here : File:ScrollableContent.zip