Welcome!

Welcome to the official BlackBerry Support Community Forums.

This is your resource to discuss support topics with your peers, and learn from each other.

inside custom component

Web and WebWorks Development

Reply
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380
Accepted Solution

How to change font size of a div dynamically.

Hi all,

I developing an application and need to implement a functionality to increase/decrease the font-size accordingly on clicking a button. Can anyone give me the idea how can i implement this in my app.

 

Please use plain text.
Retired
astanley
Posts: 1,382
Registered: ‎07-02-2009
My Device: BlackBerry Bold 9900
My Carrier: Bell

Re: How to change font size of a div dynamically.

You can do this using JavaScript and CSS, like this:

 

<div id="someText"> Hello World </div>
<button id="btnClick" onclick="makeBigger()">Increase text size</button>

<script>
function makeBigger() {
  document.getElementById("someText").style.fontSize = "125%";
} </script>

 

 

 


 

As an aside, this is my 1,000th post.  Huzzah!  I hope my replies have been helpful to this development community so far.  Thanks for all the kudos.  I think this poem pretty much sums up my thoughts.

Follow me on Twitter: @n_adam_stanley
-------------------------------------------------------------------------------------------------------------------------
Your app doesn't work? Use BlackBerry remote web inspector to find out why.
Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: How to change font size of a div dynamically.

Expanding on Adam's comment...

 

You need two clickables - buttons, images - whatever then simply tie them to the font sizing routine

 

Adam's code gives you the base you need but I suggest you set an initial size in a global variable in JS

 

e.g.

 

var fontsize = 14;

 

This allows you to limit how big or small text becomes

 

If you go really tiny you won't be able to read it and if you go too big you risk breaking pageflow

 

You can also create a dropdown using this method so you get something akin to a WP's font size selection

 

Everything else is perfect but this allows more control

 

Use...

 

document.getElementById("someText").style.fontSize = fontsize + "px";

 

for this method




Click the like button if you find my posts useful!
Please use plain text.
Developer
SumiGhosh
Posts: 435
Registered: ‎09-20-2011
My Device: Z10 LE, Playbook, DevAlpha C, 9900, 9380

Re: How to change font size of a div dynamically.

Thanks for the help..... I have done something like this

 

var min=22;
var max=30;

function fontIncrease(){
var p = document.getElementById('newsContentDesc');
var s = "";
s = parseInt(p.style.fontSize.replace("px",""));
if(s!=max) {
s += 1;
}
p.style.fontSize = s+"px"
}
function fontDecrease(){

var p = document.getElementById('newsContentDesc');
var s = "";
s = parseInt(p.style.fontSize.replace("px",""));
if(s!=min){
s -= 1;
}
p.style.fontSize = s+"px"
}

Please use plain text.
Developer
peardox
Posts: 1,229
Registered: ‎03-20-2011
My Device: Playbook, Z10 LE, Dev Alpha B, 2x Dev Alpha C

Re: How to change font size of a div dynamically.

That's the basic idea

 

I tend to increment / decrement the font size by 2 each click

 

The other thing, although it won't affect your code as-is is to check > / < - this only matters if you change the size by a number bigger than one but is good practice




Click the like button if you find my posts useful!
Please use plain text.