Ir para conteúdo

POWERED BY:

Arquivado

Este tópico foi arquivado e está fechado para novas respostas.

suxz

Aumentar e diminuir fonte de texto dinâmico

Recommended Posts

Bom dia galera!

 

Depois de mto pesquisar e não encontrar a solução, recorro a vocês novamente:

Estou fazendo uma página de "Cursos" para um site. Nele haverá uma lista com os nomes dos cursos diponiveis, que, ao ser clicado, abrirá a página com o respectivo curso.

Estou usando javascript para aumentar e diminuir as fontes:

var tam = 12;

function mudaFonte(tipo,elemento){
	if (tipo=="mais") {
		if(tam<18) tam+=1;
		createCookie('fonte',tam,365);
	} else {
		if(tam>9) tam-=1;
		createCookie('fonte',tam,365);
	}
	document.getElementById("tamanho").style.fontSize = tam+'px';

}
Acontece que não consigo alterar a fonte desses links, apenas do resto do conteudo da página.

Como devo proceder para que a fonte desses links seja editável?

Coloquei a id "tamanho" dentro do link (<a href=pagina.asp id=tamanho) mas como o elemento tem q ser unico, ele soh edita o primeiro link. Coloquei uma div antes do loop, mas também não funciona.

<div id=tamanho>
<table>
<%
While Not rec.EOF %>
<tr>
<td>
<a href=cursos_detalhe.asp?curso=<%=rec("ID") %>><%=rec("titulo")%></a>
</td>
</tr>
<%
 rec.MoveNext
 Wend
%>
</table>
</div>

Alguém pode me esclarecer?

Muito Obrigado!

Compartilhar este post


Link para o post
Compartilhar em outros sites

Faço assim e funciona de boa para todos os elementos que estão dentro da div mencionada (tamanho):

<a href="#" onclick="document.getElementById('tamanho').style.fontSize='2em';return false;">aumentar</a><br />
<a href="#" onclick="document.getElementById('tamanho').style.fontSize='1em';return false;">diminuir</a>
Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Valeu Public2004, mas ta acontecendo a msm coisa...

Só aumenta o texto estático da página, ou então apenas o 1° link

Compartilhar este post


Link para o post
Compartilhar em outros sites

Engraçado, testei aqui e funcionou com todos elementos na DIV pai (tamanho) - Tabela, parágrafos, links, etc...

Você por acaso não tem outros elementos identados dentro desta div tamanho os quais não sofrem as alterações??

 

Att.

Compartilhar este post


Link para o post
Compartilhar em outros sites

Engraçado mesmo...aqui não funciona nem com reza braba

 

Troquei a div de lugar, troquei o nome dela pra nao confundir com com outro script, troquei até o código asp pra testar, mas nada.

Segue o código (a div pai agora chama-se 'acessibilidade'):

 

<body>
<a href="#" onclick="document.getElementById('acessibilidade').style.fontSize='2em';return false;">aumentar</a><br />
<a href="#" onclick="document.getElementById('acessibilidade').style.fontSize='1em';return false;">diminuir</a>

<div class="style4" align="center">Cursos</div>
<br />
<div align="center">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Duis placerat, sapien sed <br />
  vehicula laoreet, nisl erat feugiat elit, 
  vitae blandit est ligula a urna.</div>
<br />
<div id=acessibilidade>
<b class="nav">
<table align="center">
<%
 While Not rec.EOF 
%>
	<tr>
		<td cellpadding=0 cellspacing=0 height=27 width=15 align="left" valign="center">
		 <a href=cursos_detalhe.asp?curso=<%=rec("ID")%>><img src=imagens/layout/marcador.gif border=0></a>
		</td>
		<td cellpadding=0 cellspacing=0 height=27 align="left" valign="center">
		 <a href=cursos_detalhe.asp?curso=<%=rec("ID") %>><%=rec ("titulo")%></a>
		</td>
	</tr>
<%
 rec.MoveNext
 Wend
%>
</table>
</b>
</div>

</body>

Quando coloco a div pai logo abaixo do body, apenas o Lorem ipsum altera. Assim, como esta no código postado, nada altera.

Compartilhar este post


Link para o post
Compartilhar em outros sites

ponha um texto 'teste' antes da <table>, ele pode nao estar jogando a alteração pro elemento da tabela

 

 

 

 

como esta seu css? esta usando !important?

 

o !important nao permite alteração

Compartilhar este post


Link para o post
Compartilhar em outros sites

Eh isso memo desisto. Na vdd não foi só isso. A table e a tag "b" estavam atrapalhando.

 

Resolvido! valeu aos dois ae!

Compartilhar este post


Link para o post
Compartilhar em outros sites

beleza :)

 

 

 

 

a tag B é usada pra palavras

 

a tag strong é pra frases

 

 

 

 

mas evite coloca-las antes de qq coisa, elas são usadas dentro e não fora

 

<div><b>palavra</b>

 

<div><strong>minha frase</strong>

Compartilhar este post


Link para o post
Compartilhar em outros sites

olha este exemplo:

 

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
 
<script type="text/javascript">
// Início do código de Aumentar/ Diminuir a letra
 
// Para usar coloque o comando: "javascript:mudaTamanho('tag_ou_id_alvo', -1);" para diminuir
// e o comando "javascript:mudaTamanho('tag_ou_id_alvo', +1);" para aumentar
 
var tagAlvo = new Array('p'); //pega todas as tags p//
 
// Especificando os possíveis tamanhos de fontes, poderia ser: x-small, small...
var tamanhos = new Array( '9px','10px','11px','12px','13px','14px','15px' );
var tamanhoInicial = 2;
 
function mudaTamanho( idAlvo,acao ){
  if (!document.getElementById) return
  var selecionados = null,tamanho = tamanhoInicial,i,j,tagsAlvo;
  tamanho += acao;
  if ( tamanho < 0 ) tamanho = 0;
  if ( tamanho > 6 ) tamanho = 6;
  tamanhoInicial = tamanho;
  if ( !( selecionados = document.getElementById( idAlvo ) ) ) selecionados = document.getElementsByTagName( idAlvo )[ 0 ];
  
  selecionados.style.fontSize = tamanhos[ tamanho ];
  
  for ( i = 0; i < tagAlvo.length; i++ ){
    tagsAlvo = selecionados.getElementsByTagName( tagAlvo[ i ] );
    for ( j = 0; j < tagsAlvo.length; j++ ) tagsAlvo[ j ].style.fontSize = tamanhos[ tamanho ];
  }
}
// Fim do código de Aumentar/ Diminuir a letra
 
</script>
</head>
 
<body>
<a class="menos" href="javascript:mudaTamanho('texto', -1);">Diminuir</a>
<a class="mais" href="javascript:mudaTamanho('texto', 1);">Aumentar</a>
 
<div style="font-size: 11px;" id="texto">
    <p>texto... </p>
</div>
 
</body>
</html>

Compartilhar este post


Link para o post
Compartilhar em outros sites

×

Informação importante

Ao usar o fórum, você concorda com nossos Termos e condições.