CODEWITHSUNDEEP
javascriptjquerycss
asprin
asprin

Reputation: 9823

Effective Way of Increasing/Decreasing Font Size of All Elements on Page

In order to improve UX, I'm planning to have a font size increase/decrease/reset tool on all the pages of my website (A-, A, A+)

The problem I'm facing is that the font size used by different elements on the page is not uniform. Some are 14px, some are 18px, some are 12px and some are 15px.

As such, using the body tag for manipulating the font size will not get the desired result.

Is there a solution which will go through each element (get its present size) and increase its font size by 1 if A+ was clicked or decrease the size by 1 if A- was clicked and reset back to the originals if A was clicked?

PS: I'm open to jQuery solutions too.

Upvotes: 13

Views: 22841

Answers (2)

Jeremy Thille
Jeremy Thille

Reputation: 26360

That's why em and rem units were invented instead of px. rem refer to the root font size, which then makes increasing and decreasing the whole document's font size super easy using body{ font-size : 120% };

But, since you can't use rem, here's a dirty solution using jQuery :

var $affectedElements = $("p"); // Can be extended, ex. $("div, p, span.someClass")

// Storing the original size in a data attribute so size can be reset
$affectedElements.each( function(){
  var $this = $(this);
  $this.data("orig-size", $this.css("font-size") );
});

$("#btn-increase").click(function(){
  changeFontSize(1);
})

$("#btn-decrease").click(function(){
  changeFontSize(-1);
})

$("#btn-orig").click(function(){
  $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , $this.data("orig-size") );
   });
})

function changeFontSize(direction){
    $affectedElements.each( function(){
        var $this = $(this);
        $this.css( "font-size" , parseInt($this.css("font-size"))+direction );
    });
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
  <p style="font-size : 30px">This text is initially 30px</p>
  <div>
    <p style="font-size : 20px">This text is initially 20px</p>
    <p style="font-size : 10px">This text is initially 10px</p>
    
  </div>  
</div>

<button id="btn-decrease">A-</button>
<button id="btn-orig">A</button>
<button id="btn-increase">A+</button>

Upvotes: 20

Hybrid
Hybrid

Reputation: 7049

Your best and cleanest bet is using rem mixed with jQuery.

The difference between my answer and the one above/what you are asking for, is that instead of increasing/decreasing all of the font-sizes by 1, this will only change the root font-size, which will cascade down and make all the other fonts scale accordingly.

$('#_biggify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)+1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_smallify').on('click', function() {
  var fontSize = $('html').css('font-size');
  var newFontSize = parseInt(fontSize)-1;
  
  $('html').css('font-size', newFontSize+'px')
})

$('#_reset').on('click', function() {
  $('html').css('font-size', '32px')
})
html {
  font-size: 32px;
}

.smaller {
  font-size: 0.5rem;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div>
Here is a regular piece of text in your document
</div>

<div class="smaller">
Here is text that should be smaller than the rest
</div>

<button id="_biggify">
Make Bigger
</button>

<button id="_smallify">
Make Smaller
</button>

<button id="_reset">
Make Default
</button>

Here is a JSFiddle: https://jsfiddle.net/Hybridx24/L3yzuvjr/

Upvotes: 1

Related Questions