Resizing text in an HTML 5 page using JQuery

This is going to be the ninth post in a series of posts regarding HTML 5. You can find the other posts here, here , here , here, here , here , here and here.

In this post I will demonstrate how to implement a very common feature found in websites today, enabling the visitor to increase or decrease the font size of a page.

You can use the JQuery code I will write in this post for HTML pages which do not follow the HTML 5 standard.

As I said earlier we need to write JavaScript to implement this functionality.

I will use the very popular JQuery Library. Please download the library (minified version) from http://jquery.com/download

In this hands-on example I will be using Expression Web 4.0.This application is not a free application. You can use any HTML editor you like.You can use Visual Studio 2012 Express edition. You can download it here.

The HTML markup for the page follows.

<!DOCTYPE html>
<html lang="en">
  <head>
    <title>HTML 5, CSS3 and JQuery</title>
   
    <meta http-equiv="Content-Type" content="text/html;charset=utf-8" >
    <link rel="stylesheet" type="text/css" href="style.css">
     <script type="text/javascript" src="jquery-1.8.2.min.js">
        </script>
<script type="text/javascript">

$(function() {
    $('a').click(function() {
        var getfont = $('p').css('font-size');
        var mynum = parseFloat(getfont, 10);
        var newmwasure = getfont.slice(-2);
       
        $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);
        }
    })
   

})

</script>
    
  </head>
  <body>
 
    <div id="header">
      <h1>Learn cutting edge technologies</h1>
      <h2>HTML 5, JQuery, CSS3</h2>
    </div>
    <div id="resize">
    <a href="" id="increase">Increase Font</a>
       |
        <a href="" id="decrease">Decrease Font</a>
        </div>
   
    <div id="main">
   
      <h2>HTML 5</h2>
       
     
          <article>
          <p>
            HTML5 is the latest version of HTML and XHTML. The HTML standard defines a single language that can be written in HTML and XML. It attempts to solve issues found in previous iterations of HTML and addresses the needs of Web Applications, an area previously not adequately covered by HTML.
          </p>
          </article>
      </div>   
   
  
  </body>
 
</html>

 

There is nothing difficult or fancy in the HTML markup above. I have a link to the external JQuery library and the JQuery code is included inside the .html page.

I have two links on this page that will increase/decrease the font size of the contents enclosed inside the <p></p> tags.

Let me explain what the JQuery code does.

When the user clicks on the link, I store in a variable the current font size of the <p> element that I get back from the CSS function.

var getfont = $('p').css('font-size');

So now we have the original value. That will return a value like "16px" "1.2em".

Then I need to get the unit of measurement (px,em).I use the slice() function.

 var newmwasure = getfont.slice(-2);

Then I want to get only the numeric part of the returning value.I do that using the parseFloat() function.

Have a look at the parseFloat() function.

Finally with this bit of code I choose a ratio (I am devising a very simple algorithm for increasing and decreasing) and apply it to the <p> element. I still use the CSS function. You can get but also set the font size for a particular element with the CSS function.

So I check for the id=increase and if this matches I will increase the font size of the <p> element.If it does not match we will decrease the font size.

  $('p').css('font-size', mynum / 1.2 + newmwasure);
       
        if(this.id == 'increase') {
            $('p').css('font-size', mynum * 1.4 + newmwasure);

 

 

The code for the css file (style.css) follows

body

{
background-color:#eaeaea;

}

p{

font-size:0.8em;
font-family:Tahoma;

}

#resize

{

width:200px;
background-color:#dadada;

}

#resize a {

text-decoration:none;

}

The above CSS rules are very easy to understand. Now I save all my work.

I view my page on the browser for the first time.Have a look at the picture below

 

Now I increase the font size by clicking the respective link

Have a look at the picture below

 

Finally I decrease the font size by clicking on the respective link

Have a look at the picture below 

 

Once more we see that the power and simplicity of JQuery library enables us to write less code but accomplish a lot at the same time.

Hope it helps!!

 

No Comments