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ã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ã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.
6 de setembro de 2009 at 15:31
Plugin jQuery Font Size 1.1. Atualização disponível no Blog:
7 de setembro de 2009 at 18:36
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?
8 de setembro de 2009 at 10:29
Nossa Ramon!!! Agora ficou perfeito. Adorei.
11 de setembro de 2009 at 10:02
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.
28 de março de 2010 at 23:56
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.
17 de março de 2011 at 9:17
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
17 de março de 2011 at 11:17
@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!
17 de março de 2011 at 22:15
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
18 de março de 2011 at 13:20
@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!?
19 de março de 2011 at 11:53
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!
20 de março de 2011 at 11:21
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….
15 de fevereiro de 2012 at 9:24
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
21 de agosto de 2012 at 21:41
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?
24 de março de 2013 at 0:50
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
29 de maio de 2013 at 10:19
@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.