jQuery Font Switcher

Question 1

I have some code here that changes the font size depending on what link you clicked and it works perfectly, I now want to add another feature but need some help. I want to add current font size which changes as you press bigger or smaller.

jQuery:

$(document).ready(function() {
 function change_size(element, size) {
 var current = parseInt(element.css('font-size'));
 if (size == 'smaller') {
 var new_size = current - 4;
 } else if (size == 'bigger') {
 var new_size = current + 4;
 }
 element.css('font-size', new_size + 'px'); 
 }
 $('#smaller').click(function() {
 change_size($('p'), 'smaller');
 });
 $('#bigger').click(function() {
 change_size($('p'), 'bigger');
 });
});

HTML:

<body>
Font size: <a href="#" id="smaller">Smaller</a> | <a href="#" id="bigger">Bigger</a> Current Font Size:<span class="current_size"></span>
<p>This is some text</p>
<p>This is some more text</p>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
<script type="text/javascript" src="external.js"></script>
</body>

Question 2

I'm a bit confused on what the post is saying. Is the problem that it doesn't work? Or that you're looking for suggestions on how to improve the code? The code looks like it should work.

Question 3

Sorry I didn't explain it well, the code works perfectly.. I just want to add another feature to it. I want to have a current font size div that shows the current size as you change it

Question 4

Ah ok! Rereading it, I can see that now. Guess I was somehow missing that :). Just add code that pulls the size, then use that to put it in a div. You can then do that on document ready and whenever you change the size.

Question 5

All you need to do to add the size is set it right after setting the element size.

Question 6

I felt that this code would be good as a jQuery plugin, so I went ahead and altered your code until I was satisfied. I left in some comments that are applicable to your code, but I would encourage someone else (and may do it myself still, I don't know yet) to give an actual review.

(function (,ドル console) {
 'use strict';
 var defaultOptions = {
 //markup is what will be used to create the font sizer widget; you can do this a million better ways, but I felt this was easy to understand.
 //I'd consider enhancing it to take a jQuery object or a function that returns a string or a jQuery object, but all of that would make this more complex.
 //At the very least, this way makes for progressive enhancement as opposed to breakage when JS is disabled.
 markup: 'Font size: <a href="#smaller" data-make="smaller">Smaller</a> | <a href="#bigger" data-make="bigger">Bigger</a> Current Font Size:<span data-id="current_size"></span>',
 markupClickFilter: 'a', //if you change the markup of this widget to something where you use elements other than A tags for buttons, you may wish to change this
 affects: null, //required: this is a jQuery object representing the elements that this widget affects
 size: null, //override for initial size of affected elements
 increment: 4
 };
 $.fn.fontSizer = function (options) {
 //initialize / preconditions
 var opts = $.extend({}, defaultOptions, options),
 $currentSize, //$ for element in markup if it exists
 sizeChange = function () {}; //noop to avoid null check when using this, meh...
 if (!opts.affects || !opts.affects.length) {
 //should always UI test in a modern browser that provides console
 console.error('failed to initialize fontSizer: must provide affects property');
 return this; //jQuery plugins are expected to follow this convention
 }
 //widget setup
 this.html(opts.markup); //again, this setup functionality could be done better in many ways
 $currentSize = this.find('[data-id=current_size]'); //for example to not use magic strings like this
 if ($currentSize.length) {
 sizeChange = function () { //this could also be a trigger
 $currentSize.html(opts.affects.css('font-size'));
 };
 }
 //set initial size and update $currentSize
 if (opts.size !== null) {
 opts.affects.css({
 'font-size': opts.size
 });
 }
 sizeChange();
 return this.on('click', opts.markupClickFilter, function (e) {
 var size = parseFloat(opts.affects.css('font-size')), //parseFloat is more correct than parseInt
 make = $(this).data('make'),
 fixed = parseFloat(make); //minor enhancement: allow fixed sizing
 if (make === 'smaller') { //preference: always use ===
 size -= opts.increment; //a new variable was unnecessary, if you feel you must, you should at least declare it at the top of the function
 } else if (make === 'bigger') {
 size += opts.increment;
 } else if (fixed !== 0) {
 size = make; //using make instead of fixed here allows things like make === '1.5em'
 }
 //update size (and set $currentSize)
 opts.affects.css({
 'font-size': size
 });
 sizeChange();
 //this prevents the annoying hashchange and extra history step that isn't doing anything useful
 e.preventDefault();
 });
 };
}(jQuery, console || {error: function () {}}));

Usage:

(function ($) {
 'use strict';
 $(function () {
 $('#sizer').fontSizer({
 affects: $('p.basic')
 });
 $('#sizer2').fontSizer({
 affects: $('p.custom'),
 markup: 'Font size: <a href="#small" data-make="12px">Small</a> | <a href="#lg" data-make="24px">Large</a> | <a href="#xl" data-make="36px">XL</a> Current Font Size:<span data-id="current_size"></span>'
 });
 });
}(jQuery));

Html for usage example:

<div id="sizer">Enable Javascript for a font resizer</div>
<p class='basic'>some text</p>
<p class='basic'>some text</p>
<p class='basic'>some text</p>
<div id="sizer2">Enable Javascript for a font resizer</div>
<p class='custom'>some text</p>
<p class='custom'>some text</p>
<p class='custom'>some text</p>

JsFiddle

Bill Barry Bill Barry 2,30614 silver badges18 bronze badges · Accepted Answer · 2012-06-15 01:53:06Z

I felt that this code would be good as a jQuery plugin, so I went ahead and altered your code until I was satisfied. I left in some comments that are applicable to your code, but I would encourage someone else (and may do it myself still, I don't know yet) to give an actual review.

(function (,ドル console) {
 'use strict';
 var defaultOptions = {
 //markup is what will be used to create the font sizer widget; you can do this a million better ways, but I felt this was easy to understand.
 //I'd consider enhancing it to take a jQuery object or a function that returns a string or a jQuery object, but all of that would make this more complex.
 //At the very least, this way makes for progressive enhancement as opposed to breakage when JS is disabled.
 markup: 'Font size: <a href="#smaller" data-make="smaller">Smaller</a> | <a href="#bigger" data-make="bigger">Bigger</a> Current Font Size:<span data-id="current_size"></span>',
 markupClickFilter: 'a', //if you change the markup of this widget to something where you use elements other than A tags for buttons, you may wish to change this
 affects: null, //required: this is a jQuery object representing the elements that this widget affects
 size: null, //override for initial size of affected elements
 increment: 4
 };
 $.fn.fontSizer = function (options) {
 //initialize / preconditions
 var opts = $.extend({}, defaultOptions, options),
 $currentSize, //$ for element in markup if it exists
 sizeChange = function () {}; //noop to avoid null check when using this, meh...
 if (!opts.affects || !opts.affects.length) {
 //should always UI test in a modern browser that provides console
 console.error('failed to initialize fontSizer: must provide affects property');
 return this; //jQuery plugins are expected to follow this convention
 }
 //widget setup
 this.html(opts.markup); //again, this setup functionality could be done better in many ways
 $currentSize = this.find('[data-id=current_size]'); //for example to not use magic strings like this
 if ($currentSize.length) {
 sizeChange = function () { //this could also be a trigger
 $currentSize.html(opts.affects.css('font-size'));
 };
 }
 //set initial size and update $currentSize
 if (opts.size !== null) {
 opts.affects.css({
 'font-size': opts.size
 });
 }
 sizeChange();
 return this.on('click', opts.markupClickFilter, function (e) {
 var size = parseFloat(opts.affects.css('font-size')), //parseFloat is more correct than parseInt
 make = $(this).data('make'),
 fixed = parseFloat(make); //minor enhancement: allow fixed sizing
 if (make === 'smaller') { //preference: always use ===
 size -= opts.increment; //a new variable was unnecessary, if you feel you must, you should at least declare it at the top of the function
 } else if (make === 'bigger') {
 size += opts.increment;
 } else if (fixed !== 0) {
 size = make; //using make instead of fixed here allows things like make === '1.5em'
 }
 //update size (and set $currentSize)
 opts.affects.css({
 'font-size': size
 });
 sizeChange();
 //this prevents the annoying hashchange and extra history step that isn't doing anything useful
 e.preventDefault();
 });
 };
}(jQuery, console || {error: function () {}}));

Usage:

(function ($) {
 'use strict';
 $(function () {
 $('#sizer').fontSizer({
 affects: $('p.basic')
 });
 $('#sizer2').fontSizer({
 affects: $('p.custom'),
 markup: 'Font size: <a href="#small" data-make="12px">Small</a> | <a href="#lg" data-make="24px">Large</a> | <a href="#xl" data-make="36px">XL</a> Current Font Size:<span data-id="current_size"></span>'
 });
 });
}(jQuery));

Html for usage example:

<div id="sizer">Enable Javascript for a font resizer</div>
<p class='basic'>some text</p>
<p class='basic'>some text</p>
<p class='basic'>some text</p>
<div id="sizer2">Enable Javascript for a font resizer</div>
<p class='custom'>some text</p>
<p class='custom'>some text</p>
<p class='custom'>some text</p>

JsFiddle

Stack Exchange Network

jQuery Font Switcher

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Hot Network Questions

jQuery Font Switcher

1 Answer 1

Your Answer

Sign up or log in

Post as a guest

Post as a guest

Related

Hot Network Questions