[Resolvido] Mudar tamanho da fonte (Font size changer)

[Henrique Barcelos 290]

Boas galera...

 

Acabou de sair do forno aqui um script que faz aquela 'famosa' mudança no tamanho das fontes, mto comum em sites de notícias...

 

Segue aí o código:

 

Javascript (usando jQuery):

function showFontChanger(){
		$("ELEMENTO ANTES DO QUAL INSERIR O FONT CHANGER").before("<div id='font_changer'></div>");
		$("#font_changer").append("<a href='javascript:void(0);' class='font-inc'>A<sup>+</sup></a>");
		$("#font_changer").append("<a href='javascript:void(0);' class='font-reset'>A</a>");
		$("#font_changer").append("<a href='javascript:void(0);' class='font-dec'>A<sup>-</sup></a>");
		
		var original = 10;
		var current = original;
		var max = 18;
		var min = 8;
		
		$(".font-inc").click(function(){
			if (current < max) {
				current++;
				$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
			}
			(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
			(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
		});
		
		$(".font-dec").click(function(){
			if (current > min) {
				current--;
				$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
			}
			(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
			(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
		});
		
		$(".font-reset").click(function(){
			current = original;
			$("ELEMENTO QUE TERÁ O TAMANHO DA FONTE ALTERADO").css("font-size", current + "pt");
			(current >= max) ? $(".font-inc").addClass("inactive") : $(".font-inc").removeClass("inactive");
			(current <= min) ? $(".font-dec").addClass("inactive") : $(".font-dec").removeClass("inactive");
		});
}

CSS:

 

#font_changer {
	clear: both;
	float: right;
	margin-right: 2px;
	background: #FFF;
	padding: 4px;
}

#font_changer a {
	display: inline-block;
	height: 20px;
	width: 20px;
	line-height: 20px;
	text-align: center;
	text-indent: -999px;
	overflow: hidden;
	background: url(../images/icons_font_changer.png) no-repeat;
}

#font_changer a.font-inc {
	background-position: left top;
}

#font_changer a.font-inc:hover {
	background-position: left center;
}

#font_changer a.font-inc.inactive {
	background-position: left bottom;
}

#font_changer a.font-dec {
	background-position: right top;
}

#font_changer a.font-dec:hover {
	background-position: right center;
}

#font_changer a.font-dec.inactive {
	background-position: right bottom;
}

#font_changer a.font-reset {
	background-position: center top;
}

#font_changer a.font-reset:hover {
	background-position: center center;
}

Imagem dos links:

http://img705.images...fontchanger.png

 

Isso é tudo pessoal =D