30 replies to this topic

[Publicitario]

Galera, vi acho q no site da CNN o recurso de aumentar e diminuir fonte ... muito interesse inclusive para pessoas com algum problema de visão e q necessitam de fontes grande para ler ...

como faço pra inserir essa opção de aumentar ou diminuir fonte de acordo a vontade do usuário?

[Bruno Augusto]

Com CSS?

Dá não meu filho. Tem que ter um JavaScriptzinho pra controlar as ações.

Veja se isso ajuda:  tamanhofonte.zip   3.23KB   493 downloads

[]'s

[Publicitario]

era exatamente isso q eu estava procurando ... valeu!

[Allan Carvalho]

Poxa, aqui está corrompido...

Olha só:

<script>
var tamanho = "12";
function aumentaTexto() {
var texto = document.getElementById('texto');
var novoTamanho = tamanho+2;
if (novoTamanho < 20) {
tamanho = novoTamanho;
texto.style.fontSize = novoTamanho;
}
}
function diminuiTexto() {
var texto = document.getElementById('texto');
var novoTamanho = tamanho-2;
if (novoTamanho > 8) {
tamanho = novoTamanho;
texto.style.fontSize = novoTamanho;
}
}
</script>

<span id="texto" style="font-size: 12px;">Esse texto pode aumentar ou diminuir seu tamanho de fonte. Clique em [-] ou [+] para ver o efeito.</span>
<br/>
<span onclick="diminuiTexto()" style="cursor: pointer;">[-]</span> <span onclick="aumentaTexto()" style="cursor: pointer;">[+]</span>

Acabei de fazê-lo.

Beleza? Se o arquivo não funcionar... está aqui.

Até mais pessoal.


Fui!

Edição feita por: Allan Carvalho, 23/08/2006, 22:14.

[KBR]

Cara, funfou beleza, só que acho que tem um erro no código.

Quando carrega a página e vou direto no botão aumentar, ele não aumenta, para funcionar tenho que primeiro diminuir a letra para depois poder aumentar... percebe isso???

Teria como corrigir???

Abraços!

[_Samuca_]

é só usar o FireFox que você nem precisa disso tudo.

é só apertar CTRL+ ou CTRL- para controlar o tamanho da fonte

[Bruno Augusto]

Samuca, mas o usuário leigo quer tudo na mão, às vezes nem sabe que isso existe.

[]'s

[_Samuca_]

Samuca, mas o usuário leigo quer tudo na mão, às vezes nem sabe que isso existe.

[]'s

ah sim.
concordo contigo cara.

esse é um grande problema atualmente...
o IE tem uma grande parte (grande mesmo) do mercado ainda e isso dificulta tudo.

bem que os desenvolvedores da microsoft podiam arrumar esse IE e mandar uma atuazação para todos os usuários...

pq olha, não é facil, quando tu ve tudo rodando perfeitinho no FF e depois vai testar no IE e metade nao funciona... hehehe


abraço!

[KBR]

Bom... fui atrás em outros fóruns, e como esse saiu meio que do assunto, vou postar aqui o código correto:

<script>
	var tam=9;
					function FonteAcessivel(tipo){
					if (tipo=="maior"){		
						tam+=2;
					}else{
						tam-=2;
					} 
						document.getElementById('texto').style.fontSize=tam+'pt';
						
					}
	</script>

Abraços!

[PESSOA]

Olá. Eu uso o seguinte no meu sítio:

<script language="javascript" type="text/javascript">
//<![CDATA[
		<!--
				var valorInicial=1;
				var novoValor=1;
				var incremento = 0.1;
				var arg=+;
				function zoom(arg) 
				{
						novoValor=(arg=='+')?novoValor+incremento:valorInicial;
						document.getElementById("pagina").style.fontSize=novoValor+'em';
						if (novoValor > 1.5) 
						{ 
								alert("O tamanho das letras já foi em muito incrementado. Se desejas, podes aumentar  ainda mais, porém, a disposiçao do laioute da página será alterado. Contudo, não haverá perda alguma na compreenção da mesma");
						}
				}

 //-->

//]]>
</script>

Deu pra ver que que as letras a serem alteradas ficam no id=pagina.
Para aumentar, pode-se chamar a função zoom('+') ; com o argumento '+', que incrementa a fonte.
Diminuir a fonte? achei melhor possibilitar um retorno ao estado inicial, mas se assim desejar, chamando zoom('0') com um argumento diferente de +;neste caso 0; e complementando o incremento somado ao novoValor, chega-se no que deseja.

<script language="javascript" type="text/javascript">
//<![CDATA[
		<!--
				var valorInicial=1;
				var novoValor=1;
				var incremento = 0.1;
				var arg=+;
				function zoom(arg) 
				{
						novoValor=(arg=='+')?novoValor+incremento:novoValor-incremento;
						document.getElementById("pagina").style.fontSize=novoValor+'em';
				}

 //-->

//]]>
</script>

[TTC_VeNdEdOr]

desculpe reviver o topico, é que to precisando do script me redirecionaram pra ca...

Com CSS?

Dá não meu filho. Tem que ter um JavaScriptzinho pra controlar as ações.

Veja se isso ajuda:  tamanhofonte.zip   3.23KB   493 downloads

[]'s

aqui deu certinho... mas que queria aumentar ainda mais a FONTE, queria substituir, pq diminuindo fica muitoooo pequeno, e aumentando nao fica tao grande, ai eu gostaria de aumentar anda mais e diminuir menos...

qual parte eu mexo? tentei aqui mas sem sucesso :/

[Nicholas Pufal]

TTC,

tem como postar o código? Aqui pelo menos não carregou.

Edit: Acabei de ver que o código é o do post acima. Não tinha aberto ele ainda, tem muita coisa sem uso naquele código (tanto no CSS como no JS). Tá muito poluído.

Eu recomendaria tu fazer o teu mesmo, personalizado para as tuas necessidades para não ter muitas coisas sem necessidade (verificações e etc) inseridas.

Basicamente o que ele faz no código é setar um valor padrão para as fontes de diversos IDs da página. Sendo assim, basta você simplificar e fazer o mesmo na tua página.

Cria uma função para ser carregada no body OnLoad da tua page, e nessa função coloca o valor padrão que tu quer numa determinada ID. Exemplo:

JS:

function letra() {

var valor_inicial = "13px";


document.getElementById("corpo").style.fontSize = valor_inicial;
}

HTML:

<body onload="letra();">

Para fazer a função de aumentar/diminuir, é bem simples. Tu pode utilizar somente uma função e mudar o parâmetro dela. Fiz aqui como exemplo. Veja:

JS

function tamanhofonte(op) {

var incremento = 2;  

var local_alterado = document.getElementById("corpo").style.fontSize;

local_alterado = parseInt(local_alterado.replace(/px/,""));

if (op == "mais") {
local_alterado += incremento;
} else {
local_alterado -= incremento;
}

document.getElementById("corpo").style.fontSize = local_alterado + 'px';

}

Onde incremento é o quanto vai aumentar/diminuir a fonte quando o usuário clicar no teu link/botão.

HTML:

<A href="#" onclick="java script:tamanhofonte('mais');">+A</A> | <A href="#" onclick="java script:tamanhofonte('menos');">-A</A>

É só mudar para onde tem a tua ID

Código completo de exemplo em anexo. Testado no FF, IE 7 e Opera.

Se quiser deixar mais dinâmico ainda, dá até para fazer uma array com as IDs que você quer incrementar e colocar um For para se utilizar dela. Não precisa fazer o lance de por no body onload da página a fonte inicial. Dá pra definir diretamente no style do elemento se quiser.

Abraços

Attached Files

•  aumenta_diminui.html   2.5KB   94 downloads

Edição feita por: Firehalk, 16/02/2008, 13:51.

[TTC_VeNdEdOr]

ah sim, muito mais simples, brigadao veio

[Subzero]

OK mas utilizando junto com o php não funciona. Só com texto puro normal.

Boa tarde amigos do Wmonline

Estou utilizando esse código:

var tam=12;
moz = !(document.all); // Testar o navegador mozilla
nav = navigator.appName; // Armazena o nome do navegador
function fonte(x) {   
tam+=x;   
if(tam>20) tam=20;   
if(tam<8) tam=8;   
if(moz || nav == 'Opera') {
// Regras CSS para o Firefox, Safari e Opera
document.styleSheets[0].CssRules[0].style.fontSize=tam;
}else{
document.styleSheets[0].rules[0].style.fontSize=tam;
}
}

E chamando assim:

href="java script:void(0);" onclick="java script:fonte(-1);"
href="java script:void(0);" onclick="java script:fonte(1);"

No IE 6 e IE 7 está funcionando normalmente, porém no FF sem chance não executa a tarefa.
Dei uma pesquisada e não vi nada que ajudasse na execução desse código no FF.

Obrigado amigos deis de já pela força.

Edição feita por: Subzero, 07/10/2008, 18:16.

[Nicholas Pufal]

O código que eu postei aqui no tópico funciona com PHP... Aliás, não tem nada a ver PHP com a função que fiz. Você provavelmente não está fazendo a referência correta à sua div no código.

Onde tem:

document.getElementById("corpo").style.fontSize

"corpo" deve ser alterado pelo nome da div onde está texto que você quer que aumente ou diminua