Sep 2

Font Controller – JQuery Plugin

jQuery , , , , Add Comment (49)

First post on my blog… YAY…

So, what have i got for you, well its a jQuery plugin, Font Controller allows you to add a little font changer widget to your site…

So, how do we use it, firstly if you haven’t done so already go down to the jQuery website and download the latest copy of jQuery, since this is a plugin we will be needing that first.

Using the plugin is simple, first we must import jQuery into our html… this is done like this…

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

Thats the first step done, now where are going to have to import the font controller jJQuery plugin. You can download this plugin from the jQuery plugins website… or just click here Now that we have to plugin… great, we can move on. The next step is to include the jQuery plugin in the html… this is done like so… 

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

so now so far we should have something like this…

<html >
<head>

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

<script type="text/javascript" src="js/jquery.fontsize.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
</head>
<body>
</body>
</html>

Note that the jQuery library is included before the plugin, this is essential as the plugin requires jQuery to work… its dependent on it.

Right, the next step. The plugin works by transforming an element into the font controller, the controller then gives the user control over the desired font size.

What we need to do is to add a div element (this doesn’t have to be a div element but it makes good sense for it to be one)


<div id="fontholder" align="centre"></div>

Now, we have the font holder div all set up all there is left to do is to add the JavaScript that makes all the magic happen.


$(function(){

$("#fontholder").fontsizemanager();

});

… and wallah, the magic happens.. simple hu?

But for those of you who are still trailing behind a bit, or just scrolled to the bottom in desperate hope of having a full code for you to copy over… here it is! or visit the demo page here…

<html >
<head>

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

<script type="text/javascript" src="js/jquery.fontsize.js"></script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>My Page</title>
<script type="text/javascript">
$(function(){
$("#fontholder").fontsizemanager();
});
</script>
</head>
<body>
<div id="fontholder" align="centre"></div>
</body>
</html>
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript” src=”js/jquery.fontsize.js”></script>
<script type=”text/javascript” src=”js/markitup/jquery.markitup.pack.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<script type=”text/javascript” src=”js/jquery.fontsize.js”></script>
<script type=”text/javascript” src=”js/markitup/jquery.markitup.pack.js”></script>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″ />
<title>Untitled Document</title>
</head>
<body>
</body>
</html>

This website uses IntenseDebate comments, but they are not currently loaded because either your browser doesn't support JavaScript, or they didn't load fast enough.

49 comments so far...

leave a reply

+(reset)-
+(reset)-