Acasa Tehnologie >jQuery – Marire/micsorare font

>jQuery – Marire/micsorare font

by Dragos Schiopu

Desi am auzit de foarte mult timp de jQuery, astazi am inceput sa lucrez cu acest framework. Avand nevoie de cateva functii pentru marirea/micsorarea fontului dintr-o anume zona, am tot cautat pe internet dupa cateva solutii. Cum niciuna nu mi-a fost de ajutor, a trebuit sa improvizez ceva…

Pentru cei care vor sa isi creeze pe site o sectiune ce are clasa „continutRedim” unde textul se poate mari/micsora, folosind jQuery:

$(document).ready(function(){
//se memoreaza dimensiunea curenta a fontului
var originalFontSize = $('.continutRedim').css('font-size');

//se adauga eventul click elementului ce are clasa .resetFont
//(adica butonul de resetare al fontului la dimensiunile originale)
$(".resetFont").click(function()
{
$('.continutRedim').css('font-size', originalFontSize);
});

//marire font
$(".increaseFont").click(function()
{
var currentFontSize = $('.continutRedim').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
if(currentFontSizeNum<30) //nu vrem sa facem scrisul mai mare de 30
{
var newFontSize = currentFontSizeNum+2;
//adaugam inca 2 pixeli la dimensiunea curenta a fontului
$('.continutRedim').css('font-size', newFontSize);
}
return false;
});

//micsorare
$(".decreaseFont").click(function(){
var currentFontSize = $('.continutRedim').css('font-size');
var currentFontSizeNum = parseFloat(currentFontSize, 10);
if(currentFontSizeNum>8) //nu vrem sa facem scrisul mai mic de 8px
{
var newFontSize = currentFontSizeNum-2;
//scadem 2 pixeli din dimensiunea curenta a fontului
$('.continutRedim').css('font-size', newFontSize);
}
return false;
});
});

Acum nu ramane decat de plasat 3 butoane, pentru marire, micsorare si resetare dimensiune font…ceva de genul:

Stilurile CSS:

.continutRedim
{font-family:Arial,Helvetica,sans-serif;font-size:15px;line-height:100%;color:#000000;}

ATENTIE! Scriptul functioneaza doar pentru marimea fontului exprimata in pixeli!

s-ar putea sa-ti placa