Dar ao usuário a opção de aumentar ou diminuir a fonte no momento da leitura é algo que devemos dar um certo tipo de atenção, principalmente se o seu site recebe visitas de diversos tipos de público – você deve procurar atender a todos eles.

Hoje trabalharemos com esse tipo de ação em Jquery. Utilizarei as imagens abaixo para produzir o efeito de página:

     

Para criar nosso código teremos que identificar o tamanho atual da fonte e então aumenta-la ou diminui-la conforme o link que foi clicado. Da mesma forma que conseguimos passar um novo valor CSS para qualquer elemento da tela, também conseguimos o retorno desse valor – basta não informar um novo valor para o parâmetro. Por exemplo:

[sourcecode language=”html”] var tamanhoFonte = $(‘p’).css(‘font-size’);
[/sourcecode]

O retorno do código acima seria algo do tipo “16px”, por exemplo. Para que possamos informar um novo tamanho de fonte precisaríamos somente da parte númerica dessa string. Como sabemos que necessariamente os dois últimos caracteres de retorno serão letras, armazenaremos essa unidade de medida na variável ‘unidade’, com o auxilio do comando slice() e transformaremos o tamanho da fonte em um tipo ‘float’ para que possamos realizar operações com essa variável.

[sourcecode language=”html”] var tamanho = parseFloat(tamanhoFonte,10);
var unidade = tamanhoFonte.slice(-2);
[/sourcecode]

O restante do código é simples: Basta verificar qual link foi clicado e passar à p um novo valor de font-size. Lembre-se que você também deve passar a unidade de medida – no caso px, que está armazenada na variável unidade. Para um aumento/redução de 40% do tamanho da fonte, o código final de página criada foi:

[sourcecode language=”html”] <html>
<head>
<title>Aumentar e Diminuir Letras</title>
<script language="javascript" type="text/javascript" src="jquery-1.5.2.js"></script>

<style type="text/css">
body {
color: purple;
background-color: #d8da3d; }

.header
{
width: 410px;background-color:orange; color:white; font-family:’Kristen ITC’
}

.content
{
background-color: #eeeeee;
border: 1px dashed #2F4F4F;
border-top: none;
padding: 5px;
padding-top: 10px;
height: auto;
color:teal;
}

</style>

<script type="text/javascript" >

$(function() {

$(‘a’).click(function(){
var tamanhoFonte = $(‘p’).css(‘font-size’);
var tamanho = parseFloat(tamanhoFonte,10);
var unidade = tamanhoFonte.slice(-2);

if(this.id == ‘maior’){
$(‘p’).css(‘font-size’, tamanho *1.4 +unidade );}

if(this.id == ‘menor’){
$(‘p’).css(‘font-size’, tamanho /1.4 +unidade );}

})

});

</script>

</head>

<body>
<h1>Aprendendo Jquery</h1>

<div style="width: 397px">
<div align="right">
<a href="#" id="menor"><img src="images/btn_diminuir_fonte.gif" alt="diminuir"></a>

<a href="#" id="maior"><img src="images/btn_diminuir_fonte.gif" alt="aumentar"></a>

</div>
<p>Lorem ipsum dolor sit amet, consectetuer
adipiscing elit. Aenean commodo ligula eget dolor. Aenean massa. Cum sociis
natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus.
Donec quam felis, ultricies nec, pellentesque eu, pretium quis, sem.</p>
</div>

</body>
</html>
[/sourcecode]

// Comente!

comentários