Created
November 22, 2012 22:00
-
-
Save guizmo/4133082 to your computer and use it in GitHub Desktop.
Text resizer
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
//http://wp.tutsplus.com/tutorials/theme-development/creating-a-wordpress-post-text-size-changer-using-jquery/ | |
// This prevents the execution of the code before the document is finished loading. | |
jQuery(document).ready(function() { | |
// The 'A+' element in the page is associated with the jQuery click() event. | |
jQuery('#increase-font').click(function(event) { | |
// This prevents the default action of the click() event from being triggered. | |
event.preventDefault(); | |
// The jQuery each() event interates over each elements belonging to the 'resize' class | |
jQuery('.resize').each(function() { | |
// Call to a custom function to increase the text size | |
changeTextSize(this, change); | |
}); | |
}); | |
// The 'A-' element in the page is associated with the jQuery click() event. | |
jQuery('#decrease-font').click(function(event) { | |
// This prevents the default action of the click() event from being triggered. | |
event.preventDefault(); | |
// The jQuery each() event interates over each elements belonging to the 'resize' class | |
jQuery('.resize').each(function() { | |
// Call to a custom function to decrease the text size | |
changeTextSize(this, -change); | |
}); | |
}); | |
}); | |
// Three variables have been used to define range of the text size and the increment/decrement value respectively. | |
var min = 8, max = 100, change = 2; | |
// Defines a custom function with two parameters determining the element to be resized and the size | |
function changeTextSize(element, value) { | |
var currentSize = parseFloat(jQuery(element).css('font-size')); | |
var newSize = currentSize + value; | |
if (newSize <= max && newSize >= min) { | |
jQuery(element).css('font-size', newSize + 'px'); | |
} | |
} |
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment