Change font size of the WRT app during runtime

**Tslv** · 2011-01-24, 18:48

Hi,
I am developing an WRT app using Nokia Web Developer Environment 1.0.1 and Web SDK Simulator.
I would like for user to choose from 3 text sizes (small, medium and large). I have managed to create a code that works in Web SDK Simulator but unfortunately doesn't work on the phones. I have tested it on N8, C7, X6 and N97. On the phone whichever size I choose the text is displayed in the same size

Do you have any idea how to make this code work on the phone? Thanks

Basically I want to change the size of the font (text) while the app is running. I want to make the text inside id "Resizeable Text" big, small or medium. User can change this by picking the size from the soft key menu.
You can download this project:
http://dl.dropbox.com/u/13079791/Cha...NotWorking.wgz

Here is the code:
index.html
...
<body onload="init();">
<div id="resizeableText">
Resize me
</div>
</body>

basic.js
function init()
{
var largeFont=new MenuItem("Large",1);
var mediumFont=new MenuItem("Medium",2);
var smallFont=new MenuItem("Small",3);
smallFont.onSelect=setFontSmall;
mediumFont.onSelect=setFontMedium;
largeFont.onSelect=setFontLarge;
menu.append(largeFont);
menu.append(mediumFont);
menu.append(smallFont);
menu.showSoftkeys();
}

function setFontSmall()
{
var tekst=document.getElementById("resizeableText");
tekst.style.fontSize="x-small";
}

function setFontLarge()
{
var tekst=document.getElementById("resizeableText");
tekst.style.fontSize="x-large";
}

function setFontMedium()
{
var tekst=document.getElementById("resizeableText");
tekst.style.fontSize="medium";
}

**sreerajvr** · 2011-01-25, 04:38

Take three different 'Id' for each font. The font size can be defined within the CSS. eg:
#mediumfont
{
font-size:30px;
}

Activate the suitable id by using menu selector.

**Tslv** · 2011-01-25, 21:08

Hi sreerajvr,
Thanks for your help. Unfortunately your method too works only in the simulator and not on the phone

I have tested on X6 and C7.
So does anyone know solution to this problem?

You can download whole project (that DOES NOT work on phones) from:
http://dl.dropbox.com/u/13079791/ChF...tAttribute.wgz

Here is what I did, so correct me if I misunderstood you.
basic.css file
.fontMedium
{ font-size:0.85em; }
.fontBig
{ font-size:1.00em; }
.fontSmall
{ font-size:0.50em; }

index.html file
...
<body onload="init();">
<div id="resizeableText" class="fontMedium">
Resize me using class attribute
</div>
</body>

basic.js file
function init()
{
var largeFont=new MenuItem("Large",1);
var mediumFont=new MenuItem("Medium",2);
var smallFont=new MenuItem("Small",3);
smallFont.onSelect=setFontSmall;
mediumFont.onSelect=setFontMedium;
largeFont.onSelect=setFontLarge;
menu.append(largeFont);
menu.append(mediumFont);
menu.append(smallFont);
menu.showSoftkeys();
}

function setFontSmall()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontSmall";
}

function setFontLarge()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontBig";
}

function setFontMedium()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontBig";
}

**packaging010** · 2011-01-28, 08:41

i m have same problem kindly someone pls ans this

**Tslv** · 2011-01-28, 11:26

Hi packaging010,
I have found temporary solution. It works for my example, but I had difficulties in more complex programs.
You just need to add tekst.innerHTML+=""; to the end of functions setFontMedium(), setFontLarge() and setFontBig(). This will force the browser on the phone to redraw. I am not sure if tis is a bug on phone's browser of it isn't suppose to refresh ?!?!
This is not the solution it is just the workaround, so I hope someone from Nokia or someone more skillful than me will reply to this thread.

So the functions need to look like this
function setFontSmall()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontSmall";
tekst.innerHTML+="";
}

function setFontLarge()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontBig";
tekst.innerHTML+="";
}

function setFontMedium()
{
var tekst=document.getElementById("resizeableText");
tekst.getAttributeNode("class").nodeValue="fontBig";
tekst.innerHTML+="";
}

Discussion Board

Thread: Change font size of the WRT app during runtime

Thread Tools

Search Thread

Rate This Thread

Display

Similar Threads

to change the font size of CEikTextListBox.

how to change the font size of CAknTabGroup

Change of theme during runtime

to change the font size of lable in ceiklabel

how do you change the size of the font?

Posting Permissions