(function($){
$.fn.scaledFont = function(options) {
var validate = {
prefix : '0.0', // ensures that everything is scaled by hundredths of a percent
scalar : 5 // default scale ratio
};
var settings = $.extend({
container : this[0].parentNode,
scale : validate.scalar, // default is 5
get multiplier() {
return validate.prefix + this.scale; // returns 0.05
}
}, options);
// Check if container is specified or default
if ( settings.container !== this[0].parentNode ) {
return this.css({
fontSize : parseInt( settings.container.width() * settings.multiplier ) + 'px'
});
} else {
return this.css({
fontSize : parseInt( settings.container.clientWidth * settings.multiplier ) + 'px'
});
}
};
}(jQuery));
A very simple snippet (and my first authored plugin!) that I use all the time to keep my font responsive across all devices. Simply target the element with the font you want autoscaled, determine the scale ratio (e.g. 1-9999999999) and choose the element container to reference. By default the plugin will reference the target element's parent. TIP: Assigning IDs and classes to your elements makes this plugin VERY useful!
Example: $("h3").scaledFont();
Options: container, scale
Example: $("h3").scaledFont();
Options: container, scale
Be the first to comment
You can use [html][/html], [css][/css], [php][/php] and more to embed the code. Urls are automatically hyperlinked. Line breaks and paragraphs are automatically generated.