jquery – How to count number of button clicks to increase fonts in accessibility bar?

Question:

I'm creating an accessibility bar and it has the options to increase and decrease the font. Here's the code for the buttons:

<button type="button" id="btnAumentar">A+</button>
<button type="button" id="btnDiminuir">A/</button>

And the jquery code.

var $btnAumentar = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body .content-center").find("*"); //encontra todos os elementos dentro do #content
var fonts = [];

function obterTamanhoFonte() {
  for (var i = 0; i < $elemento.length; i++) {
    fonts.push(parseFloat($elemento.eq(i).css('font-size')));
  }
}
obterTamanhoFonte();
$btnAumentar.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    ++fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

$btnDiminuir.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    --fonts[i];
    $elemento.eq(i).css('font-size', fonts[i]);
  }
});

However, the user can increase the fonts as much as they want, and/or decrease them. I would like to limit these clicks to 3, but they are relative to each other, with a total of 6 font sizes, if it is max size you can press to make it 6x for example and vice versa. Can anyone give me a hand? =)

Answer:

In my opinion a good approach to the problem would be to involve CSS, more specifically the relative size units em and rem . When applied to font-size it is relative to the font-size of the predecessor elements.

Use em as the font-size of the elements that will be changed and let the font-size of the body (or any parent element) adjust the size of all these elements.

You can define specific sizes with classes:

var $section = $('#content')

$('#fonte-menor').on('click', function () {
  $section.removeClass('fonte-grande').addClass('fonte-pequena');
});

$('#fonte-maior').on('click', function () {
  $section.removeClass('fonte-pequena').addClass('fonte-grande');
});

$('#fonte-normal').on('click', function () {
  $section.removeClass('fonte-grande fonte-pequena');
});
#content {
  font-size: 16px;
}

#content.fonte-pequena {
  font-size: 12px;
}

#content.fonte-grande {
  font-size: 20px;
}

#content p {
  font-size: 1em;
}

#content h1 {
  font-size: 1.5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


<button id="fonte-menor">A-</button>
<button id="fonte-normal">A</button>
<button id="fonte-maior">A+</button>


<section id="content">
  <h1>Título</h1>
  <p>Lorem ipsum dolor sit amet, deleniti perpetua splendide vim an, cu sapientem democritum qui. Vim in nobis exerci accommodare. Ea duo minim erant mediocritatem, mea ne maiestatis interpretaris. Nec ne latine habemus scripserit.</p>
  <p>Mei no euismod fabellas theophrastus, exerci aeterno ancillae his et. Regione consulatu et est, cu pri tempor eirmod. Vide phaedrum atomorum per te. Meliore insolens scripserit quo ex, cu agam causae aliquid mei, nisl dicta nullam ei his.</p>
  <p>Et omittam splendide mea, te dico postea oporteat sea, duo nulla consul conclusionemque cu. In mel utinam ullamcorper, erant soleat usu ad, wisi semper et vim. Usu quem veritus iudicabit ex. Ne utamur aeterno accusamus eum, vis ei tantas mediocrem adipiscing. Sea possit tibique ne. Vis appetere vituperatoribus id, audire recteque vis ut.</p>
</section>

Or by assigning it directly to the parent element's font-size property:

 function alteraTamanhoFonte(incremento) { var $section = $('#content'); var max = 20; var min = 12; return function () { var tamanho_atual = parseInt($section.css('font-size'), 10); var novo_tamanho = tamanho_atual + incremento; if (novo_tamanho < min || novo_tamanho > max) { return; } $section.css('font-size', novo_tamanho); } } $('#aumentar-fonte').on('click', alteraTamanhoFonte(1)); $('#diminuir-fonte').on('click', alteraTamanhoFonte(-1));
 #content { font-size: 16px; } #content p { font-size: 1em; } #content h1 { font-size: 1.5em; }
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <button id="diminuir-fonte">A-</button> <button id="aumentar-fonte">A+</button> <section id="content"> <h1>Título</h1> <p>Lorem ipsum dolor sit amet, deleniti perpetua splendide vim an, cu sapientem democritum qui. Vim in nobis exerci accommodare. Ea duo minim erant mediocritatem, mea ne maiestatis interpretaris. Nec ne latine habemus scripserit.</p> <p>Mei no euismod fabellas theophrastus, exerci aeterno ancillae his et. Regione consulatu et est, cu pri tempor eirmod. Vide phaedrum atomorum per te. Meliore insolens scripserit quo ex, cu agam causae aliquid mei, nisl dicta nullam ei his.</p> <p>Et omittam splendide mea, te dico postea oporteat sea, duo nulla consul conclusionemque cu. In mel utinam ullamcorper, erant soleat usu ad, wisi semper et vim. Usu quem veritus iudicabit ex. Ne utamur aeterno accusamus eum, vis ei tantas mediocrem adipiscing. Sea possit tibique ne. Vis appetere vituperatoribus id, audire recteque vis ut.</p> </section>
Post Views: 1
Scroll to Top