Ramon Victor

Plugin jQuery Font Size 1.1

| 15 Comments

Depois de publicar a primeira versão do plugin recebi várias sugestões de melhoria e acabei detectando também algumas funcionalidades que poderiam ser acrescentadas. Inicialmente só poderíamos utilizar 4 opções ( alvo , tipoPaiLink , setCookie e variacoes ) com a atualização ganhamos mais uma nova, opResetar , que iremos entender mais a frente sua função.

Demo da versão 1.0
Demo da versão 1.1

O que há de novo?

  • 1. Opção de criar botão para restaurar o tamanho original.

    Essa opção foi solicitada por pessoas que estão utilizando o plugin. E para implementá-la é bastante simples, só precisamos declarar o novo parâmetro da seguinte maneira:

    opResetar: true

    Perceba no demo que foi acrescentado um novo link, entre o que aumenta e diminui, que tem a função de resetar a fonte para o seu tamanho inicial.

  • 2. Inserir os links manualmente

    Antes só era possível inserir os links de controle pelo plugin, declarando o tipoPaiLink como ‘ul’ ou ‘p’. Agora o desenvolvedor tem a opção de inserir manualmente o seu código XHTML  para dar maior flexibilidade na customização. Observe o exemplo abaixo.

    XHTML

    <ul>
      <li>tamanho da fonte:</li>
      <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
      <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
      <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
    </ul>

    Perceba que é preciso manter o nome das classes que controlam o tamanho: menos , resetar e mais .

    Na chamada da função teremos que modificar algumas coisas: iremos deixar o parâmetro principal vazio (já que não vamos inserir via DOM os links); não devemos declarar mais o tipoPaiLink e opResetar . Vejo o exemplo:

    $(document).ready(function() {
      $().fontSize({
         alvo: '#content',
         setCookie: true
      });
    });
  • 3. Classe “desabilitar” para quando o link chegar ao limite

    Nessa nova opção você precisa configurar apenas o CSS dando estilo a classe desabilitar , que será adicionada no link quando ele não estiver mais mudando o tamanho do texto.

    CSS

    #font_size li .disabilitar {
      color: #AFAFAF;
      background-color: #DFDFDF
    }

Resumidamente temos duas opções:

Inserir manualmente os links de controle.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $().fontSize({
    alvo: '#content',
    setCookie: true
  });
});
</script>

XHTML

<ul>
  <li>tamanho da fonte:</li>
  <li><a href="javascript:;" class="menos" title="Diminuir tamanho da letra">A-</a></li>
  <li><a href="javascript:;" class="resetar" title="Tamanho padr&atilde;o">A</a></li>
  <li><a href="javascript:;" class="mais" title="Aumentar tamanho da letra">A+</a></li>
</ul>

Ou deixar o script fazer tudo sozinho.

<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="cookie.js"></script>
<script type="text/javascript" src="font_size.js"></script>
<script type="text/javascript">
$(document).ready(function() {
  $('#font_size').fontSize({
    alvo: '#content',
    setCookie: true,
    opResetar: true,
    tipoPaiLink: 'ul'
  });
});
</script>

XHTML

<div id="font_size"></div>

Faça o ou leia o post da primeira versão para entender melhor o funcionamento.

Author: ramonvictor

Designer de Interação e Desenvolvedor Frontend. Especialista em Design da Informação pela UFPE e graduado em Sistemas para Internet pela Faculdade Marista.

15 Comments

  1. Plugin jQuery Font Size 1.1. Atualização disponível no Blog:

  2. No Safari do Mac não ta rolando muito legal. Quando clica ele aumenta uma vez, na próxima clicada ele não funciona. Testou no Chrome pra ver se é o Webkit que não ta entendendo bem o script?

  3. Nossa Ramon!!! Agora ficou perfeito. Adorei.

  4. Muniz,

    Eu dei uma conferida. O problema estava no CSS, como a porcentagem de algumas classes estavam modificando apenas 5% os browsers baseados no Webkit não estavam conseguindo exibir visualmente essa pequena diferença. Como solução coloquei todas as variações como 10%.

    Agora ta funcionando beleza.

    :)

  5. Parabéns!!!! Muito bom mesmo…

    Estou procurando fazer meus sites pensando mais na acessibilidade e esse plugin é fantástico e fácil de instalar e configurar…

    Um grande abraço.

  6. Boas!

    Parabéns por compartilhar !

    Sou leigo….fiz um pequeno site de aprendizagem em xhtml e css e queria implantar o font size, mas não funfa!
    fiz desta forma:
    TESTE SITE

    $(document).ready(function() {
    $(‘#font_size’).fontSize({
    alvo: ‘#miolo’,
    setCookie: true,
    opResetar: true,
    tipoPaiLink: ‘ul’
    });
    });

    E minha DIV ontem o texto, o alvo é o “miolo”

    Tb joguei

    Tô muito estúpido para entender oq ue está acontecendo de errado, se puder dar uma bola, agradeço.

    t+
    Vlad

  7. @vlad,

    Para chamar a função dessa forma, utilize as instruções do tópico “Ou deixar o script fazer tudo sozinho”, descrito no final do post.
    Cheque se o atributo ‘src’, da tag <script>, está lincando corretamente.
    Lembre-se também que no html deverá existir a div: ‘<div id=”font_size”></div>’.

    Após revisar tudo, se ainda não funcionar, observe o console de erros do browser que ele lhe dará uma pista de onde se encontra o erro.

    Grato pelos parabéns!

  8. pô Ramon, tá complicado aqui !

    O site está com includes, na pagina header.php onde coloquei as linhas, coloquei o alvo como a minha div pai, só há mudança no meu do topo e no footer, o conteúdo não é alterado, o conteúdo é o #miolo, mas não há divs dele no header. Será que é aqui o problema ?

    Mudei para body, html, ..e népias…estou testando enquanto tc…

    O header.php tá na raiz, os scripts estão numa pasta e os arquiivos do site (quem somos, contato..) em outra pasta….

    até tentei dentro de contato.php chamar todos os arquivos…seria tipo isso não é

    voltava para raiz e depois subia outro nível, correto ?

    Nada !

    Testando numa pagina corrida funciona, o lance do include que deve tá pegando…

    Será que tu consegue imaginar o meu erro ?

    brigadão!

    Vlad

  9. @vlad,

    Seu problema em relação ao php deve ser nos links para os arquivos.
    Quando você usa php, os scripts devem ser lincados absolutamente.

    Por exemplo:
    Se o atributo “src” tinha apenas “font_size.js”,
    para projetos em php ele deverá ter o caminho ‘completo’,
    como por exemplo: “http://localhost/nome_do_projeto/font_size.js”.

    Tenta ajustar isso e vê se funciona!?

  10. ramon,

    agradeço mais uma vez, mas realmente é uma outra coisa, os links sempre estiveream ok.

    fUI testar uns sliders e tb não funcionaram, é alguma coisa dos includes..creio eu…único teste que funcionou foi do lightbox,

    prototype.js
    scriptaculous.js?load=effects,builder
    scripts/js/lightbox.js

    mas até deixei como comentátrio, mas não funfou o font e nem os sliders. Existe algum script.js que pode ser conflitante com outros?

    Vou tentando….

    brigadao novamente!

  11. RAMON,

    Matei a charada, era no css, tam,anho da font. Como no meu teste tinha especificado tamanho da fonte em uns “ps” e com isso ele travava o scriopt, pq diosso, não sei !

    So que peguei o css e fui retirando pedaços e pedaços até fuincionar e lá achei….

    brigadão!

    E isso fica pra galera tb, caso não funcione, verifique no css se definiu o tamanho por lá.

    t+

    UFA!

    adendo: ops…então pq os sliders ..os mesmo, pois testei vários..não funcionaram ? depois verei isso tb com calma….

  12. Muito bom, melhor seria quase impossivel.
    Uma das vantagens é que o tamanho é aumentado/diminuido por porcentagem, a maioria dos scripts na net, a fonte é aumentada de px em px, causando assim meio que um lag na tela.

    Sites do governo deveriam ultilizar esse script, assim como um que esta precisando muito melhorar a acessibilidade é o http://camara.rj.gov.br

    Recomendo

  13. Muito bom seu plugin.

    Agora, estou com uma dificuldade: precisaria implementar ele em uma tabela onde as classes estão na tr.

    O que preciso alterar para isso?

  14. Ramon,

    Show, funciona dentro das normas de acessibilidade do governo,

    porem encontro um problema por incompatibilidade com o jquery mais atual…1.9
    gerando conflitos com outras bibliotecas jquery

  15. @claudio,

    Saiu a versão 2.0 do plugin. Você pode ver o demo e fazer o download aqui:
    http://www.ramonvictor.com/demo/fontsize/fontsize2.0/

    Nessa nova versão há várias melhorias, inclusive a compatibilidade com o jquery mais recente.

    Qualquer dúvida fique à vontade para perguntar.

Deixe uma resposta