3

Estou criando uma barra de acessibilidade e nela tem as opções de aumentar e diminuir a fonte. Segue o código dos botões:

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

E o codigo do jquery.

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

Porém o usuário pode aumentar o quanto quiser as fontes, e ou diminuir. Eu gostaria de limitar estes cliquem em 3, mas que fossem relativos um ao outro, com um total de 6 tamanhos de fontes, se estiver no máx de tamanho pode apertar para diminuir 6x por exemplo e vice-versa. Alguem consegue me dar uma ajuda? =)

2
  • Você quer armazenar a contagem para analise posterior ou apenas enquanto o site estiver sendo utilizado por um usuário? 20/02/2016 às 18:46
  • só enquanto esta sendo usado, tipo, abriu ta no tamanho padrao. pode clicar 3x no botao de diminuir ele desabilita, dai se clicar no de aumentar o de diminuir habilita devolta, ai se tiver no minimo to tamanho tem 6 cliques pra hegar no tamanho maximo, ate desabilitar.... mas cara eu consegui achar uma solucao, amanha quabdo chegar no trabalho eu posto ;)
    – luisaddor
    21/02/2016 às 23:00

3 Respostas 3

2

Na minha opinião uma boa abordagem do problema seria envolvendo CSS, mais especificamente as unidades de tamanho relativas em e rem. Quando aplicada ao font-size ela é relativa ao font-size dos elementos antecessores.

Utilize em como unidade de tamanho do font-size dos elementos que serão alterados e deixe que o font-size do body (ou de algum elemento pai) regule o tamanho de todos estes elementos.

Pode-se definir tamanhos específicos com 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>


Ou atribuindo diretamente à propriedade font-size do elemento pai:

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>

0

Crie um mapa para os tamanhos:

    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
     }

}

Crie um controle utilizando o mapa.

1
  • entao cara eu nao entendi como isso se aplicaria as funcoes dos botoes ja criados, mas eu dei um jeito la, amanha coloco aqui o codigo todo funcionando ;)
    – luisaddor
    21/02/2016 às 23:01
0
//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);
    }    
}); 

Essa função que utilizei para contar os clicks e desativar os botões, ai utilizo outra para controlar o tamanho das fontes. mais valeu pela ajuda ;)

1
  • Marca a resposta como aceita para que o sistema arquive a pergunta.
    – Sam
    17/10/2017 às 9:31

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .