Reset button for font size control (accessibility)

Asked

Viewed 46 times

1

Good morning,

I am using this code to increase and decrease the font, I wanted to know how I can do so when click a third button (A) it return to the standard size of the font, also need to lock and allow click the button increase and decrease only 3 times.

var $btnAumentar = $("#btnAumentar");
var $btnReset = $("#btnAumentar");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body").find("*");
var fonts = [];

console.log($btnAumentar);

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]);
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="text-right myContainer d-print-none d-none d-lg-block">  
    <button class="btn btn-primary mr-2 mt-2" type="button" id="btnDiminuir">A-</button>
    <button class="btn btn-primary mr-2 mt-2 normal" type="button" id="btnReset">A</button>
    <button class="btn btn-primary mr-2 mt-2" type="button" id="btnAumentar">A+</button>
  </div>


  <div class="banner-conteudo_txt">
    <h1 data-aos="fade-up-right" class="titulo-web-aulas cor-fundo aos-init aos-animate" tabindex="6">Tema base
    </h1>
      <h2 data-aos="fade" class="tx-branco mb-4 mt-2 subtitulo-web-aulas aos-init aos-animate" tabindex="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
    <p data-aos="fade" class="descricao-web-aulas mt-0 aos-init aos-animate" tabindex="8">Unidade 0 - Seção 0</p>
  </div>
</body>

javascript front-end

  • I believe there are two variables pointing to the same button.

1 answer

0


Make another array to save the original value, store that value in it next to the first data collection for the fonts array, and then make the same logic.

var $btnAumentar = $("#btnAumentar");
var $btnReset = $("#btnReset");
var $btnDiminuir = $("#btnDiminuir");
var $elemento = $("body").find("*");
var fonts = [];
var reset = [];

(function obterTamanhoFonte() {
  for (var i = 0; i < $elemento.length; i++) {
    fonts.push(parseFloat($elemento.eq(i).css('font-size')));
    reset.push(parseFloat($elemento.eq(i).css('font-size')));
  }
})()

$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]);
  }
});

$btnReset.on('click', function() {
  for (var i = 0; i < $elemento.length; i++) {
    $elemento.eq(i).css('font-size', reset[i]);
    fonts[i] = reset[i];
  }
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<body>
  <div class="text-right myContainer d-print-none d-none d-lg-block">  
    <button class="btn btn-primary mr-2 mt-2" type="button" id="btnDiminuir">A-</button>
    <button class="btn btn-primary mr-2 mt-2 normal" type="button" id="btnReset">A</button>
    <button class="btn btn-primary mr-2 mt-2" type="button" id="btnAumentar">A+</button>
  </div>


  <div class="banner-conteudo_txt">
    <h1 data-aos="fade-up-right" class="titulo-web-aulas cor-fundo aos-init aos-animate" tabindex="6">Tema base
    </h1>
      <h2 data-aos="fade" class="tx-branco mb-4 mt-2 subtitulo-web-aulas aos-init aos-animate" tabindex="7">Lorem ipsum dolor sit amet, consectetur adipiscing elit.
    </h2>
    <p data-aos="fade" class="descricao-web-aulas mt-0 aos-init aos-animate" tabindex="8">Unidade 0 - Seção 0</p>
  </div>
</body>

There’s not much secret, you could have thought of it yourself, did most of the work.

  • Thank you Máttheus Spoo I was almost coming to this result.

  • I just edit and add a line in the reset function, had forgotten a detail, take a look.

  • Mine had given the same problem when I clicked to decrease it decreased more caught the information of the largest that was, missing this detail. Thanks for your help.

Browser other questions tagged javascript front-end

You are not signed in. Login or sign up in order to post.