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

Question

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

Navigation

#1 by (2 votes)
#2 by (0 votes)
#3 by (0 votes)

3

I'm creating an accessibility bar and it has the options to increase and decrease the font. Here is 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, you can increase fonts as much as you want, and decrease them. I would like to limit these by clicking on 3, but that they are relative to each other, with a total of 6 font sizes, if it is at max size you can press to decrease 6x for example and vice versa. Can someone help me? =)

jquery acessibilidade

asked by anonymous 20.02.2016 / 13:12

3 answers

Store ListMenu In Memory or in Cookie Entity Framework - Data Access Tips

score 2 · Answer 1

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

Use em as a unit of size of font-size of elements that will be changed and let font-size of body (or some 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><buttonid="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 assigning directly to the font-size property of the parent element:

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><buttonid="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>

score 0 · Answer 2

Create a map for sizes:

    var mapa = new Object();
    mapa[fonte1] = tamanhoX;
    mapa[fonte2] = tamanhoY;

    function obterTamanho(fonte) {
        return mapa[fonte];
    }

if(obterTamanho(fonte)==null){
//inserir tamanho original
     mapa[fonte]=1;
}else{
     var tam = obterTamanho(fonte);
     if(tam<6){
       tam++;
       mapa[fonte]=tam;

     }else{
        //tamanho maximo atingido
     }

}

Create a control using the map.

score 0 · Answer 3

//Função de contar numero de clicks para desativar o botao  
var countA = 0;
$('#btnAumentar').click( function() {
    countA++;
    if(countA == 3) {
        $('#btnAumentar').prop("disabled", true);
    }
    if($('#btnDiminuir').prop( "disabled" ))  {
        $('#btnDiminuir').prop("disabled", false);
    }    
});    
$('#btnDiminuir').click( function() {
               countA--;
    if(countA == -3) {
        $('#btnDiminuir').prop("disabled", true);
    }

    if($('#btnAumentar').prop( "disabled" ))  {
        $('#btnAumentar').prop("disabled", false);
    }    
});

This function I used to count the clicks and disable the buttons, I use another to control the size of the fonts. more thanks for the help;)