Learn jQuery Part4: Increasing and Decreasing font of paragraph text using jQuery

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery


In this post we will learn applying CSS on HTML Elements using jQuery. On click of event of button we will increase or decrease FontSize of the text. See the below video for the expected output

You may come across scenario when you need to apply CSS styling on DOM element at the run time. For example on click event of button you may want to increase or decrease font size of the Paragraph Text. jQuery allows to apply or remove CSS on HTML elements.

image

Assume we have HTML as following. There are two buttons on the HTML, one to increase the font of the text in paragraph element and another to decrease the font size.

Code Listing 1


<body>
<h1>CSS styling using jQuery</h1>
<p id="infopara">
Cricket is a bat-and-ball game played between two teams of 11 players on a field,
at the centre of which is a rectangular 22-yard long pitch. One team bats,
trying to score as many runs as possible while the other team bowls and fields,
trying to dismiss the batsmen and thus limit the runs scored by the batting team.
A run is scored by the striking batsman hitting the ball with his bat,
running to the opposite end of the pitch and touching the crease there without being dismissed.
The teams switch between batting and fielding at the end of an innings.
</p>
<button id="btnincreasefont" type=button onclick="">Increase Font</button>
<button id="btndecreasefont" type=button onclick="">Decrease Font</button>
</body>

In browser you should get rendered HTML as following

image

Now on the click event of the buttons we want to increase and decrease the font size of the paragraph text. First attach a click event to the button. Click event can be bind to button as below,

image

After attaching click event to button we need to read current font size of the text. To read that value select HTML element <p> with id and apply css selector with fontSize attribute to read current font size applied. You can read current font size as given below

image

If you alert divcurrentfont , you will get font size as following

image

Now we need to convert current font size to an integer value and we can do that as following

image

If you alert divcurrentfontinnumber, you will get integer part of font size as following

image

Next we need to extract unit part of font. We can do that as following

image

On alert you will get unit as following

image

After this we need to modify font size value as per our requirement. In this case I am going to increase font size twice with each button click. We can multiply font size by 2 as following

image

Last but not least we need to set fontSize value. To do this select element with id and set fontSize argument in css function. We can set fontSize as following

image

On consolidating codes from above discussion we may have following jQuery code to increase font size of paragraph text on click event of button.

image

To decrease font size we need to follow same steps but rather than multiplying font size by 2, we will divide by 2.

image

Find full jQuery source code to increase and decrease the font size in CodeListing2. CodeListing1 is used as HTML for CodeListing2.

CodeListing2


<script type="text/javascript">
$(document).ready(function () {
$('#btnincreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseInt(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber *= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});

$('#btndecreasefont').click(function () {
var divcurrnetfont = $('#infopara').css('fontSize');
var divcurrentfontinnumber = parseFloat(divcurrnetfont, 10);
var unitusedinfont = divcurrnetfont.slice(-2);
divcurrentfontinnumber /= 2;
$('#infopara').css('fontSize', divcurrentfontinnumber + unitusedinfont);
});
});
</script>

I hope you find this post useful. You may find previous posts of this series useful too.

 

Part3: How to Filter in jQuery
Part 2: How to Select Elements or Nodes in jQuery
Part1: Introduction to jQuery

 

Thanks for reading.

 

One thought on “Learn jQuery Part4: Increasing and Decreasing font of paragraph text using jQuery

  1. Pingback: Dew Drop – October 3, 2012 (#1,414) | Alvin Ashcraft's Morning Dew

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s