JavaScript

Didactics

Download

Manage the size of the fonts ... with a slider!

Home > JavaScript > Articles > Managing the font size ... with a slider!

Article written by Riccardo Brambilla
Page 1 of 2

Implementation of a modern site and you should be aware not only of graphics and content but also of 'accessibility.

Are there any guidelines about the W3C, you can find the translation here .

Among other things it is also important to allow those who visit us to be able to zoom the text of a particular page or section.

This feature in addition to being enjoyed by people with visual problems can become the flagship of our work if implemented in a creative way.

The solution

I thought this time using the jQuery UI slider component to create our fontSize-switchers, making use also of course a few lines of CSS.

To give an idea of the final result we want to achieve a look the image below:

The required

Here is an 'image of a simple folder structure Example:

jQuery and jQuery Ui

We download first the latest version of jQuery from here (1.6.1 at the time of writing)

The next step is to download jQuery UI , and in particular the slider component, following the same steps that we described here for the progressbar.

The index.html

There is then a simple HTML structure, which we call a page just index.html






 <! DOCTYPE html PUBLIC "- / / W3C / / DTD XHTML 1.0 Transitional / / EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">









 <html>







 <head>



  



 Sliders <title> jQuery Ui centre-equestre-lepuy.com and font-size </ title>





  



 href="css/style.css" <link rel="stylesheet" type="text/css" />



  



 href="css/ui-lightness/jquery-ui-1.8.13.custom.css" <link rel="stylesheet" type="text/css" />



  



 src="js/jquery.1.6.1.js" <script type="text/javascript"> </ script>



  



 src="js/jquery-ui-1.8.13.custom.min.js" <script type="text/javascript"> </ script>



  



 src="js/index.js" <script type="text/javascript"> </ script>



    





 </ Head>







 <body>



  



 Sliders <h3> jQuery Ui centre-equestre-lepuy.com and font-size </ h3>



  

  



 <div id="fontLabels">



    



 <div id="normal"> A </ div>



    



 <div id="big"> A </ div>



    



 <div id="bigger"> A </ div>



    



 <div id="biggest"> A </ div>



  



 </ Div>



  

  



 <div id="sliderCont"> <div id="slider" class="ui-widget-header"> </ div> </ div>



  



 <div id="textcontent">



    



 Lorem ipsum dolor sit amet, consectetur adipiscing elit.

 

    



 Quisque sem risus, eget CONGU most worthy eget, pharetra in jars.

 

    



 In hac dictumst habitare audience.



  



 </ Div>







 </ Body>







 </ Html>

The page includes all the necessary files, css and js files we need. Inside the body tag we just define a div with id = fontLabels inside with four div that will contain the "A" sample with a different font-size.

Just below we define a container (div id = "sliderCont") we need to put ourselves in the middle of the page and within a div with id = "slider" in which we will build with jQuery UI slider itself.

I added the text container with id = "TextContent" on which we will act to increase / decrease the font size.

In the same category ...

E-Learning

	CSS (Course) Web Design and Accessibility according to W3C CSS and XHTML. Starting from 29 €.
	HTML (Course) The markup language for the Web from 29 €.
	Javascript (Course) Complete guide to client-side scripting. From 39 €.