jquery font resizer by Simpler IT Solutions | JavaScriptSource

jquery font resizer by Simpler IT Solutions

Simpler IT Solutions Apr 3, 2012

Abstract

Want to change the font size of all elements on your site with a single mouse click ? Want it to be fully customizable ? ok, look no further....

Description

http://simpleritsolutions.com/font-resizer

Code Snippet

/**  * Cookie plugin  *  * Copyright (c) 2006 Klaus Hartl (stilbuero.de)  * Dual licensed under the MIT and GPL licenses:  * http://www.opensource.org/licenses/mit-license.php  * http://www.gnu.org/licenses/gpl.html  *  */  /**  * Create a cookie with the given name and value and other optional parameters.  *  * @example $.cookie('the_cookie', 'the_value');  * @desc Set the value of a cookie.  * @example $.cookie('the_cookie', 'the_value', { expires: 7, path: '/', domain: 'jquery.com', secure: true });  * @desc Create a cookie with all available options.  * @example $.cookie('the_cookie', 'the_value');  * @desc Create a session cookie.  * @example $.cookie('the_cookie', null);  * @desc Delete a cookie by passing null as value. Keep in mind that you have to use the same path and domain  *       used when the cookie was set.  *  * @param String name The name of the cookie.  * @param String value The value of the cookie.  * @param Object options An object literal containing key/value pairs to provide optional cookie attributes.  * @option Number|Date expires Either an integer specifying the expiration date from now on in days or a Date object.  *                             If a negative value is specified (e.g. a date in the past), the cookie will be deleted.  *                             If set to null or omitted, the cookie will be a session cookie and will not be retained  *                             when the the browser exits.  * @option String path The value of the path atribute of the cookie (default: path of page that created the cookie).  * @option String domain The value of the domain attribute of the cookie (default: domain of page that created the cookie).  * @option Boolean secure If true, the secure attribute of the cookie will be set and the cookie transmission will  *                        require a secure protocol (like HTTPS).  * @type undefined  *  * @name $.cookie  * @cat Plugins/Cookie  * @author Klaus Hartl/klaus.hartl@stilbuero.de  */  /**  * Get the value of a cookie with the given name.  *  * @example $.cookie('the_cookie');  * @desc Get the value of a cookie.  *  * @param String name The name of the cookie.  * @return The value of the cookie.  * @type String  *  * @name $.cookie  * @cat Plugins/Cookie  * @author Klaus Hartl/klaus.hartl@stilbuero.de  */ jQuery.cookie = function(name, value, options) {     if (typeof value != 'undefined') { // name and value given, set cookie         options = options || {};         if (value === null) {             value = '';             options.expires = -1;         }         var expires = '';         if (options.expires && (typeof options.expires == 'number' || options.expires.toUTCString)) {             var date;             if (typeof options.expires == 'number') {                 date = new Date();                 date.setTime(date.getTime() + (options.expires * 24 * 60 * 60 * 1000));             } else {                 date = options.expires;             }             expires = '; expires=' + date.toUTCString(); // use expires attribute, max-age is not supported by IE         }         // CAUTION: Needed to parenthesize options.path and options.domain         // in the following expressions, otherwise they evaluate to undefined         // in the packed version for some reason...         var path = options.path ? '; path=' + (options.path) : '';         var domain = options.domain ? '; domain=' + (options.domain) : '';         var secure = options.secure ? '; secure' : '';         document.cookie = [name, '=', encodeURIComponent(value), expires, path, domain, secure].join('');     } else { // only name given, get cookie         var cookieValue = null;         if (document.cookie && document.cookie != '') {             var cookies = document.cookie.split(';');             for (var i = 0; i < cookies.length; i++) {                 var cookie = jQuery.trim(cookies[i]);                 // Does this cookie string begin with the name we want?                 if (cookie.substring(0, name.length + 1) == (name + '=')) {                     cookieValue = decodeURIComponent(cookie.substring(name.length + 1));                     break;                 }             }         }         return cookieValue;     } };    /*!  * fontResize JavaScript   * http://simplersolutions.biz  *  * resize the font  *   * LICENSE:   Creative Commons â?? Attribution required  *  * author    simpler solutions <info@simplersolutions.biz>  * license   Creative Commons â?? Attribution required  * version   CVS: $Id$  * link      http://simplersolutions.biz  */  /**  * Resize the font on your page  *   * @example $('#fontResizer').fontResize();  * @desc Add the font resizer logic into node 'fontResizer'.  * @example $('#fontResizer).fontResize({defaultLabels :'<a href="" class="decreaseFont fontresize">smaller</a><a href="" class="normalizeFont fontresize">normal</a><a href="" class="increaseFont fontresize">bigger</a>'});  * @desc Add the font resizer logic into node 'fontResizer' and change how the html looks  * @example $('#fontResizer').fontResize({defaultSize :'16px'});  * @name $.cookie  * @cat Plugins/Cookie  * @author simplersolutions.biz  */ ( function($) { 	$.fn.fontResize = function(parms) {  		// set the options include any overrides 		var opts = $.extend( {}, $.fn.fontResize.defaults, parms);  		 		this.each( function() { 			 				// create the node with the links 				$(this).append(opts.defaultLabels);  				// if the cookie exists then use it 				if ($.cookie(opts.defaultCookieName)) { 					$.fn.fontResize.reSize(false, $.cookie(opts.defaultCookieName)); 				}  				// bind increases 				$('.' + opts.defaultIncreaseClass).click( function() { 					$.fn.fontResize.reSize(true); 					return false; 				});  				// bind decreases 				$('.' + opts.defaultDecreaseClass).click( function() { 					$.fn.fontResize.reSize(false); 					return false; 				});  				// bind reset to default size 				$('.' + opts.defaultNormalizeClass).click( function() { 					$.fn.fontResize.reSize(false, opts.defaultSize); 					return false; 				}); 			}); 	};  	$.fn.fontResize.reSize = function(increase, absoluteValue) { 		  		// if setting absolute value use that rather than calculating new value 		if (absoluteValue) { 			$($.fn.fontResize.defaults.defaultTargetNode).css("font-size", 					absoluteValue); 			// delete the cookie if it is the default size anyway 			if (absoluteValue == $.fn.fontResize.defaults.defaultSize) { 				$.cookie($.fn.fontResize.defaults.defaultCookieName, null,$.fn.fontResize.defaults.defaultcookieParms); 			} 			return; 		}  		// calculate change factor 		var changeFactor = increase ? 1 + ($.fn.fontResize.defaults.defaultChangePercent / 100) 				: 1 - ($.fn.fontResize.defaults.defaultChangePercent / 100);  		// find existing target element to resize 		var nodeCurrentSize = $($.fn.fontResize.defaults.defaultTargetNode).css( 				"font-size");  		// split out the numeric element 		var numericPart = parseInt(nodeCurrentSize);  		// if we got garbage leave now 		if (isNaN(numericPart)) { 			return; 		}  		// split out the units eg %,px,em 		var unitsPart = nodeCurrentSize.replace(numericPart, "");  		// calculate new font size 		var newFontSize = Math.round(parseInt(nodeCurrentSize) * changeFactor) 				+ unitsPart;  		// resize 		$($.fn.fontResize.defaults.defaultTargetNode) 				.css("font-size", newFontSize); 		return $.cookie($.fn.fontResize.defaults.defaultCookieName, newFontSize, 				$.fn.fontResize.defaults.defaultcookieParms);  	}; })(jQuery);    /* 	 * ! Abstract defaults into properties, change if you wish note that 	 * available defaultcookieParms are { expires: n, path: '/abc', domain: 	 * 'yourdomain', secure: boolean } 	 * place function outside of closure so that it can be overriden 	 *  	 */ 	$.fn.fontResize.defaults = {  		defaultTargetNode :"body", 		defaultChangePercent :5, 		defaultSize :"12px", 		defaultLabels :'<a href="" class="decreaseFont fontresize">A-</a><a href="" class="normalizeFont fontresize">A</a><a href="" class="increaseFont fontresize">A+</a>', 		defaultDecreaseClass :"decreaseFont", 		defaultIncreaseClass :"increaseFont", 		defaultNormalizeClass :"normalizeFont", 		defaultInsertionNode :"fontResizer", 		defaultCookieName :"fontResizer", 		defaultcookieParms : { 			expires :3, 			path :'/' 			} 	};

Download

Download

Leave a Response

(0 comments)