Question

I’m having trouble to get a font increase/decrease jquery function done. It has 3 sizes: large, medium (default one) and small. Issue here is theres no “reset” button as it on many examples on the web, instead just two buttons to increase or decrease the font size.

The problem came up when I change to larger font and I want to drecrease to the middle one. It doesnt go back to middle, it changes to the smaller value or backwards (smaller to larger). Is there any way to accomplish this? I’ll appreciate any help you can give me, thanks

Answer 1

Here’s what I use:

<script>
$(document).ready(function() { 
  var size = $('#container').css('font-size'); 
  $("#largeFont").click(function(){ 
      $('#container').css('font-size', '30px');
      return false; 
  });
  $("#resetFont").click(function(){ 
      $('#container').css('font-size', size);
      return false; 
  });
  $("#increaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)+2); 
      return false;
  });
  $("#decreaseFont").click(function() { 
      var size = $('#container').css('font-size');
      $('#container').css('font-size', parseInt(size)-2); 
      return false;
  }); 
  $("#smallFont").click(function(){ 
      $('#container').css('font-size', '10px');
      return false; 
  });
});

</script>

And in the HTML (in this case, i use Increase, Decrease and Reset) but you can set to custom fonts.

<a id="largeFont">Large Font</a> - 
<a id="increaseFont">Increase Font</a> - 
<a id="decreaseFont">Decrease Font</a> - 
<a id="smallFont">Small Font</a> - 
<a id="resetFont">Reset</a>

<div id="container">
 Here's some text
</div>

Here’s the JSFiddle