BJET Design » Font Size http://bjetdesign.com/blog Our blog Wed, 02 Jun 2010 11:17:15 +0000 http://wordpress.org/?v=2.9.2 en hourly 1 Font Controller Version 3 http://bjetdesign.com/blog/index.php/2009/11/18/font-controller-version-3/ http://bjetdesign.com/blog/index.php/2009/11/18/font-controller-version-3/#comments Wed, 18 Nov 2009 18:02:54 +0000 admin http://bjetdesign.com/blog/?p=72 Just released version 3 of the Font Controller Wordpress plug-in. Its nice to say that its had over 700 downloads to date

Version 3 has added widget support and an admin control panel. you can now disable the font controller in areas of the page.

Thanks to ‘Benjamin Jancewicz’ for the suggestions for this update (Themes are planned for the next release)

]]> http://bjetdesign.com/blog/index.php/2009/11/18/font-controller-version-3/feed/ 1 Font Controller – Wordpress Plugin http://bjetdesign.com/blog/index.php/2009/10/22/font-controller-wordpress-plugin/ http://bjetdesign.com/blog/index.php/2009/10/22/font-controller-wordpress-plugin/#comments Thu, 22 Oct 2009 19:33:12 +0000 admin http://bjetdesign.com/blog/?p=63 Font controller is a Wordpress plugin that adds a small font size controller into the footer of your blog.

This elegant little Wordpress plugin works with any theme

” Font-Controller places a small font size controller in the footer of your blog, it has three options, increase, decrease and reset. It is based on the Font-Controller jQuery plugin “

You can download the plugin from the Wordpress plugin directory (http://wordpress.org/extend/plugins/font-controller/)

Here is an example of the controller

+(reset)-

]]> http://bjetdesign.com/blog/index.php/2009/10/22/font-controller-wordpress-plugin/feed/ 39 Font Controller – JQuery Plugin http://bjetdesign.com/blog/index.php/2009/09/02/font-controller-jquery-plugin/ http://bjetdesign.com/blog/index.php/2009/09/02/font-controller-jquery-plugin/#comments Wed, 02 Sep 2009 16:27:10 +0000 admin http://bjetdesign.com/blog/?p=4 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>
]]> http://bjetdesign.com/blog/index.php/2009/09/02/font-controller-jquery-plugin/feed/ 68