Only thing you need to make is a holder element for the controller and then call the function like

fontSize("#holder", "#content", 9, 12, 20);
// holder is the id of the element where the font size controller interface will be shown
// content is the id of the element where the font size changes will take place.
// The next three arguments are Minimum font size, Default font size and Maximum font size respectively

Yes, all done and it will automatically generate all required buttons. It also supports jquery cookie plugin. So when you open the page again, the preferred font size will be restored automatically. (Cookie plugin is not required, but recommended)

After the function is called, the controllers will be generated in the specified area like the following.

Advantages

• Small size, built on jQuery
• Fully skinnable using css
• Multiple interface can be used in the same page for two different content areas
• Support jQuery Cookie plugin for remembering the preferred font size
• Very easy to use

The logic

• The function will be called with the holder element and target element with default, maximum and minimum font size
• Create three elements for decreasing, default and increasing font size
• Style the elements using CSS so that it will be fully skinnable
• Upon clicking read the current font size for the target and calculate the new font size. Then apply it to target element
• Save the modified font size value to cookie, so that the preferred font size can be saved and restored

The CSS

We need some buttons for the backgrounds and the best places to search is Icon look, Icon Finder and Icon Let as usual. I found the above images, but you can use another or design yours.

Now we need to style the elements. Mainly we need 5 styles – Button for smaller font, default font and larger font. We need two more styles for the disabled state of buttons. (If current font size is the minimum or maximum allowed, we need to show a disabled state).

 
 
.smallFont {
	outline: none; /*for making it look nice in FF */
	background: url(images/font-down.png);
	text-indent: -9999px;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.defaultFont {
	/*if you want to hide the default font button, use display:none */
	background: url(images/font-default.png);
	text-indent: -9999px;
	outline: none;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.largeFont {
	background: url(images/font-up.png);
	outline: none;
	text-indent: -9999px;
	display: block;
	float: left;
	width: 32px;
	height: 32px;
}
 
.ldisabled,.sdisabled { /*Styles for disabled buttons*/
	opacity: 0.3;
	-ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=30)";
	/*This is for IE8 */
	filter: alpha(opacity = 30);
}

As you can see I’ve used three background images for the three buttons. Need to set the display:block property as the buttons are of 32px height. I could have optimized the css more by applying common styles to elements. For eg: For the three styles only background is different, so it could’ve declared like the following.

 .smallFont, .defaultFont, .largeFont { 
.... /*common properties*/
}
 
.smallFont { background: url(...) } 
...

But I didn’t use that because it will be easier to declare as is now, if you want to use different sized images or different styles for each button.

If you want to have multiple styles in the same page, just use the CSS scope

For eg:

 #container1 .smallFont { ... }
#container2 .smallFont { ... }

Now for the disabled state I used same style for all buttons. Using opacity filter is the easiest way to imitate a disabled button. Here for IE8, I have used an extra style after googling around.

The jQuery function

I didn’t write it as a jQuery plugin because I didn’t find it useful to have the chainable functionality.

function fontSize(container, target, minSize, defSize, maxSize) {
	/*Editable settings*/
	var minCaption = "Make font size smaller"; //title for smallFont button
	var defCaption = "Make font size default"; //title for defaultFont button
	var maxCaption = "Make font size larger"; //title for largefont button
 
 
	//Now we'll add the font size changer interface in container
	smallFontHtml = "<a href='javascript:void(0);' class='smallFont' title='" + minCaption +"'>" + minCaption + "</a> ";
	defFontHtml = "<a href='javascript:void(0);' class='defaultFont' title='" + defCaption +"'>" + defCaption + "</a> ";
	largeFontHtml = "<a href='javascript:void(0);' class='largeFont' title='" + maxCaption +"'>" + maxCaption + "</a> ";
	$(container).html(smallFontHtml + defFontHtml + largeFontHtml);
 
	//Read cookie &amp; sets the fontsize
	if ($.cookie != undefined) {
		var cookie = target.replace(/[#. ]/g,'');
		var value = $.cookie(cookie);
		if (value !=null) {
			$(target).css('font-size', parseInt(value));
		}
	}
 
	//on clicking small font button, font size is decreased by 1px
	$(container + " .smallFont").click(function(){ 
		curSize = parseInt($(target).css("font-size"));
		newSize = curSize - 1;
		if (newSize >= minSize) {
			$(target).css('font-size', newSize);
		} 
		if (newSize <= minSize) {
			$(container + " .smallFont").addClass("sdisabled");
		}
		if (newSize < maxSize) {
			$(container + " .largeFont").removeClass("ldisabled");
		}
		updatefontCookie(target, newSize); //sets the cookie 
 
	});
 
	//on clicking default font size button, font size is reset
	$(container + " .defaultFont").click(function(){
		$(target).css('font-size', defSize);
		$(container + " .smallFont").removeClass("sdisabled");
		$(container + " .largeFont").removeClass("ldisabled");
		updatefontCookie(target, defSize);
	});
 
	//on clicking large font size button, font size is incremented by 1 to the maximum limit
	$(container + " .largeFont").click(function(){
		curSize = parseInt($(target).css("font-size"));
		newSize = curSize + 1;
		if (newSize <= maxSize) {
			$(target).css('font-size', newSize);
		} 
		if (newSize > minSize) {
			$(container + " .smallFont").removeClass("sdisabled");
		}
		if (newSize >= maxSize) {
			$(container + " .largeFont").addClass("ldisabled");
		}
		updatefontCookie(target, newSize);
	});
 
	function updatefontCookie(target, size) { //Private function for setting cookie
		if ($.cookie != undefined) { //If cookie plugin available, set a cookie
			var cookie = target.replace(/[#. ]/g,'');
			$.cookie(cookie, size);
		} 
	}
}

I think the code is self explanatory. If you’ve any doubt in code, please feel free to ask here

Usage

Include the css file, then after including jQuery include this script like the following (Don’t forget to change the path as required. Also, you need to copy the images in correct folder as specified in CSS file or edit the CSS file to make it correct.

<link rel="stylesheet" type="text/css" href="font-controller.css" />
<script src="jquery-1.2.6.pack.js"></script> 
<script src="font-controller.js"></script>
<script src="jquery.cookie.js"></script>

The function can be called inside a $document.ready() as usual. For eg:

fontSize("#container", "#content", 9, 12, 20);

Then inside your html create the empty container for holding the elements. Give it an ID or class, if possible ID.

<div id="container"></div> ... 
<div id="content">... Font size of this element can be controlled.... </div>

Do not copy paste the code from this page. Instead download the full demo from below link

Demo

View Demo | Download full demo

Please feel free to post your comments and suggestions for improvement

Related posts:

1. Vertical alignment of contents inside an element using jQuery One of the old problems! Vertical alignment of contents inside...
2. Add icons to your links automatically using jQuery & CSS You want to show a particular icon to a particular...
3. Make curved corners with jQuery Corner plugin If you want a curved edge for your element, the...

Related posts brought to you by Yet Another Related Posts Plugin.

Why jQuery?

Yes, it is not that difficult with css. Just declare some classes and give background images then assign that class to the links as required. Then why we need jQuery. The answer is, for simplicity. Who ever entering the content should be cautious to add the right classes for the right links. Also adding classes are difficult in a blog platform – you will need to switch to HTML view instead of the editor view.

Using jQuery we’ll make sure that the right icon is showing for a particular link.

Step 1 – Find the right icons

Getting a free icon describing your file type is easy. You might need to search for free icon sets, or better search in any of the three following icon search engines. For eg: search for the term “pdf” and you will see a lot of images in different dimensions, select the one that suits your need. Just make sure you’re not using a copyrighted icon

1. Icon Look – http://www.iconlook.com
2. Icon Let – http://www.iconlet.com
3. Icon Finder – http:www.iconfinder.net

Here I am using five icons – One for pdf files, one for txt documents, one for zip files, one for email links and one for external links. You may add any number of icons for any file type as I am going to describe in the next sections.

I’ve selected icons of 16px in size because it look better in content. If you need large icons, you will need to use the css display:block property.

CSS styles

Now we’ve have the right icons. Now we need to add classes with background image.

a.pdf { /*The background image*/
	background: url(images/pdf.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px; /* To center the text vertically with the icon */
}
 
a.txt { /*The background image*/
	background: url(images/txt.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.email {
	background: url(images/email.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}
 
a.external {
	background: url(images/ext_link.png) no-repeat left center;
	padding-left: 20px;
	line-height: 16px;
}

Eg:

 
.download a.zip { /*The background image*/
	background: url(images/zip.png) no-repeat left center;
	height: 48px;
	padding-left: 55px;
	line-height: 48px; /* Center the text vertically with image */
	vertical-align: bottom; /* to align the text with image bottom, line height property required */
	display: block; /* Need this to show the images fully */
	float: left; /* You might need this as well for aligning it with the parent element */
}

JQuery

Now, we can write the jQuery statements.

$(document).ready(function() {
 
 
	// Add pdf icons to pdf links
	$("a[href$='.pdf']").addClass("pdf");
 
	// Add txt icons to document links (doc, rtf, txt)
	$("a[href$='.doc'], a[href$='.txt'], a[href$='.rft']").addClass("txt");
 
	// Add zip icons to Zip file links (zip, rar)
	$("a[href$='.zip'], a[href$='.rar']").addClass("zip"); 
 
	// Add email icons to email links
	$("a[href^='mailto:']").addClass("email");
 
	//Add external link icon to external links - 
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external");
	//You might also want to set the _target attribute to blank
	/*
	$('a').filter(function() {
		//Compare the anchor tag's host name with location's host name
	    return this.hostname && this.hostname !== location.hostname;
	  }).addClass("external").attr("target", "_blank");
	*/
});

For determining the links, we’re using jQuery’s attribute syntax. For eg: To identify PDF links, we check whether the href attribute ends with a ‘.pdf’ extension.

To find external links we’ll compare the anchor tag’s host name with the location host name

Do not copy paste from the above code. It is formatted for viewig. Please download the full source code at the end

demo
It will look like the below image. For an actual demo check the below links.

Demo & Download
Demo
Download full examples (24 KB)

Related posts:

1. Vertical alignment of contents inside an element using jQuery One of the old problems! Vertical alignment of contents inside...
2. Building a reusabe font size controller interface using jQuery Most of the web2.0 design allows the user to change...
3. Make curved corners with jQuery Corner plugin If you want a curved edge for your element, the...

Related posts brought to you by Yet Another Related Posts Plugin.

• For eg; there is an area (e.g. <div> or <p>) with known height in the page (For eg: 300px;)
• an internal object (typically a paragraph, image etc) is inside the area and the height is unknown(May be this content is from a table – we don’t know how much is the text)
• This object should be centered vertically inside the required area.
• Tables should not be used.

Though there is a CSS property vertical-align, it won’t work like attribute valign in HTML tables. CSS property vertical-align doesn’t seem to be able to solve this vertical alignment problem.

There were ofcourse a couple of solutions using css. But all involves elements inside an element (For eg: <div>inside another <div> and style). But this may be difficult for bloggers, who want to show some content in special formatting (For eg: In my site, notes are shown in a special style). For eg: you want to give a 200px height to a <p> element and vertically center the elements (Same was the case with mine).

So the simplest method is to use javascript. Here I am describing how to solve the vertical alignment issue with jQuery.

The logic:

1. Find the content inside the element
2. Create another element inside it and assign the content to the newly created element
3. Find the height of the new element
4. Adjust the height of the parent if required (the new height may be more than the given one)
5. Find the margin, and assign it to the new element using css margin-top property.

Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20

(function ($) {
    $.fn.vAlign = function(container) {
        return this.each(function(i){
	   if(container == null) {
	      container = 'div';
	   }
	   var paddingPx = 10; //change this value as you need (It is the extra height for the parent element)
	   $(this).html("<" + container + ">" + $(this).html() + "</" + container + ">");
	   var el = $(this).children(container + ":first");
	   var elh = $(el).height(); //new element height
	   var ph = $(this).height(); //parent height
	   if(elh > ph) { //if new element height is larger apply this to parent
	       $(this).height(elh + paddingPx);
	       ph = elh + paddingPx;
	   }
	   var nh = (ph - elh) / 2; //new margin to apply
	   $(el).css('margin-top', nh);
        });
     };
})(jQuery);

A little explanation of function

• First three lines are for the normal jQuery chainable methods
• If no container is given, <div> is used
• Line # 7 is for the padding height. It will make sure that there is enough padding even if the height of the new element is larger than the parent. For eg: If you want to ensure that 5px width should be there for top and bottom give the value 10
• Line # 8 creates the new container with the existing content
• Line #9 – 11 finds the height of the new element, and newly created element
• Line #12 – 15 ensures that the parent div has enough height and padding to hold the new element
• Next lines calculates the center value and applies it to the newly created element using the css margin-top property

Usage

Include the jQuery library and then include this function in your script file or html.

Do not copy from the above code, it is formatted for display and will not work as javascript. Please download the files (Scroll below)

Just call the function vAlign() with the required element. The contents inside will be automatically aligned vertically. You may optionally speciy the new element to be created. Useful, if you want to create a <p> element inside instead of a <div>. By default <div> elements will be created.

Eg:

$("p.special").vAlign();
$("div.info").vAlign("p"); //This will create <p> as the holder element.
$("p.warn").vAlign("span"); //This will create a <span> element.
$("p.warn").vAlign().css("color","red"); //Yes, you can chanin methods.

<span>selements are inline elements, the block properties do not apply to them. So if you want to use inline elements like <span>, <a> then the display:block property should be applied.

For eg:

p.warn span {
   display: block;
}

Advantages:

1. No need to worry about additional mark ups and style. All required styles and markups will be generated automatically
2. Content can grow
3. Simple for content entry

Disadvantages:

• The only disadvantage is it is javascript based and if javascript is turned off it will not work. But this is a very rare case in the modern world. Even the hand held devices support javascript and there is no reason to turn it off.

Demo

This one is a demo of vertical aligning with jQuery. Or you can view a demo here

Download

Download the demo

Hope it was useful

Related posts:

1. Building a reusabe font size controller interface using jQuery Most of the web2.0 design allows the user to change...
2. Add icons to your links automatically using jQuery & CSS You want to show a particular icon to a particular...
3. jQuery seekAttention plugin to get the users attention The “seekAttention” plugin gracefully get’s your users attention by fading...

Related posts brought to you by Yet Another Related Posts Plugin.