Web and WebWorks Development

[SumiGhosh]

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.

[astanley · Accepted solution]

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.

[peardox · Accepted solution]

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

[SumiGhosh]

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"
}

[peardox]

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