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/downloadIn 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) followsbody{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 linkHave a look at the picture below Finally I decrease the font size by clicking on the respective linkHave 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!!
