Month: January 2009

We are ethical swinger javascript coders. That means - we are people who practice the swinging lifestyle and support/advocate it. 10% of our time we support swingers related websites - swingers clubs directories, social networks, events lists and do it for free. If you didn't get into our 10% window and you are representing any alternative relationship/sex lifestyle (polyamory, swing, kink, BDSM, casual sex) - we would be glad to serve you by 50% of market prices. Also, we doing an effort to spread the information about lifestyle and anything related to it. At this blog, we would make posts sometimes about our swingers related projects. One of project which we support is https://allswingersclubs.org/ - pls, support it either - visit it, comment, add your clubs.

Most of the web2.0 design allows the user to change the font size of the main content area. This is indeed a good usability. So I thought, I should contribute something here. The result is a small jQuery code which can be used to generate a font size changer interface.

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