Ir para conteúdo

POWERED BY:

Arquivado

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

Daniel-Lopes

Mudar uma tag <DIV> sem perder a formação css

Por , em Javascript

Recommended Posts

Daniel-Lopes    1

Daniel-Lopes
Postado

Caro senhores,

 

Estou criando um código javascript para alterar um texto dentro de uma tag <DIV> depois de muito pesquisar na web cheguei ao meu objetivo. Só que ainda estou insatisfeito, pois quando altero o texto no navegador FF o texto alterado perde toda formatação CSS.

 

Já no IE e o fica perfeito, bem aceitável já que o mesmo não segue muitos os padrões, mas tentei abrir no Chrome e nele abriu do jeitinho que eu queria, testei por ultimo no Konkeror e tambem deu.

 

O que pode ta errado ? o código que eu desenvolvi ou o FF (creio que é meu código mas não sei onde está o erro!)

 

vejam o link para teste http://www.945fm.com.br/admin/news.php

Para testar faça o seguinte

 

Selecione no combo: "Destaque Principal"

no campo Título digite qualquer coisa e verá que o título do lado será alterado no IE da certo (mantém formatado com css) no FF não dá (muda mas perde a formatação anterior).

 

Bom pessoal desde já agradeço a todos!

 

Daniel Lopes

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexandre R    0

Alexandre R
Postado

Se tu reparar, no FF pelo meno,s teu código está inserindo uma div dentro da div já existente e o texto está perdendo a formatação css pq o texto alterado está sendo inserido dentro de uma tag <A>

 

Codigo Original:

 

<div align="right">
	<a class="titMtbl10" href="#">
		 <div class="titMtbl10" id="titulo[1]">Titulo</div>
	</a>
   <a class="texMtbl10" href="#">
		  <div id="sub_titulo1">Sub Titulo</div>
   </a> 
</div>

Código depois da execução do teu script:

 

<div align="right">
	  <a class="titMtbl10" href="#">
		   <div class="titMtbl10" id="titulo[1]">
				<div class="titMtbl10" id="titulo[1]">
					   <a>teste</a>
				</div>
		   </div>
	  </a>
	  <a class="texMtbl10" href="#">
			  <div id="sub_titulo1">Sub Titulo</div>
	   </a> 
</div>

Ai me surgiu uma dúvida:

Pq diabos tu colocou uma div dentro de uma tag <A>??

Compartilhar este post

Link para o post
Compartilhar em outros sites

Daniel-Lopes    1

Daniel-Lopes
Postado

Por incrivel que pareça eu tb não sei onde está essa tag veja meu codigo

 

<!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>
<script language="JavaScript">
<!--
function muda_elemento(texto,elemento) {
alert(texto);
document.getElementById(elemento).innerHTML=texto;
}
//-->
</script>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<style type="text/css">
<!--
.style1 {
	font-family: "Segoe UI", Tahoma, Arial;
	font-size: 12px;
	color: #333333;
	font-weight: bold;
}
.CampoForm {
	color: #000000;
	font: 12px "Segoe UI", Tahoma, Arial;
}
-->
</style>
<link href="../css_index.css" rel="stylesheet" type="text/css" />
</head>

<body>
<form id="news" name="news" method="post" action="">

<table width="770" border="0" cellspacing="0" cellpadding="0">
  <tr>
	<td width="127"><span class="style1">Modelo de Notícia:</span></td>
	<td width="190" height="30">
		<select name="Modelo_News" class="CampoForm" id="Modelo_News">
			<option value="1">Destaque Principal</option>
			<option value="2">Destaque Secundário</option>
			<option selected="selected">Escolha</option>
				</select>
	</label></td>
	  <td width="449" rowspan="5"><table width="449" height="252" border="0" cellpadding="0" cellspacing="0" background="../img_index/tbl_449.png">
		<tr>
			<td height="28" colspan="3"><img src="../img_index/text_rolando.gif" width="200" height="26" /></td>
		</tr>
		<tr>
			<td width="224" height="182" valign="top"><table width="224" height="220" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td height="107" valign="top"><div align="right"> <a href="#" class="titMtbl10"><div id="titulo[1]" class="titMtbl10">Titulo</div></a><a href="#" class="texMtbl10"><div id="sub_titulo1">Sub Titulo</div></a> </div></td>
						<td width="97" height="107" align="left" valign="middle"><div align="right"><img src="funcoes/img_news.php?img=<? echo $img[0]; ?>&w=95&h=95&m=1" width="95" height="95" /></div></td>
					</tr>
					<tr>
						<td colspan="2" valign="top"><img src="../img_index/5x5px.png" width="5" height="5" /></td>
					</tr>
					<tr>
						<td valign="top"><div align="right"><a href="../noticia.php?id=<? echo $id[1]; ?>" target="_blank" class="titMtbl10"><? echo $titulo[1];  ?></a><br />
								<a href="../noticia.php?id=<? echo $id[1]; ?>" target="_blank" class="texMtbl10"><? echo $sub_titulo[1]; ?></a><a href="noticia.php?id=<? echo $id[1]; ?>"><span class="texMtbl10"></span></a> </div></td>
						<td height="107" align="center" valign="middle"><div align="right"><img src="funcoes/img_news.php?img=<? echo $img[1]; ?>&w=95&h=95&m=1" width="95" height="95" /></div></td>
					</tr>
			</table></td>
			<td width="5" valign="top"> </td>
			<td width="220" valign="top"><table width="220" height="220" border="0" cellpadding="0" cellspacing="0">
					<tr>
						<td width="72" height="70" align="left" valign="middle"><img src="funcoes/img_news.php?img=<? echo $img[2]; ?>&w=70&h=70&m=2" width="70" height="70" /></td>
						<td height="70" valign="top"><a href="#" class="titMtbl10"><span id="titulo2">Titulo</span></a><br />
							<a href="#" class="texMtbl10"><span id="sub_titulo2">Sub Titulo</span></a></td>
					</tr>
					<tr>
						<td height="5" colspan="2" background="../img_index/5x5px_dot.png"><img src="img_index/5x5px.png" width="5" height="5" /></td>
					</tr>
					<tr>
						<td height="70" align="left" valign="middle"><img src="funcoes/img_news.php?img=<? echo $img[3]; ?>&w=70&h=70&m=2" width="70" height="70" /></td>
						<td height="70" valign="top"><a href="../noticia.php?id=<? echo $id[3]; ?>" target="_blank" class="titMtbl10"><? echo $titulo[3];  ?></a><br />
							<a href="../noticia.php?id=<? echo $id[3]; ?>" target="_blank" class="texMtbl10"><? echo $sub_titulo[3]; ?></a></td>
					</tr>
					<tr>
						<td height="5" colspan="2" background="../img_index/5x5px_dot.png"><img src="img_index/5x5px.png" width="5" height="5" /></td>
					</tr>
					<tr>
						<td height="70" align="left" valign="middle"><img src="funcoes/img_news.php?img=<? echo $img[4]; ?>&w=70&h=70&m=2" width="70" height="70" /></td>
						<td height="70" valign="top"><a href="../noticia.php?id=<? echo $id[4]; ?>" target="_blank" class="titMtbl10"><? echo $titulo[4];  ?></a><br />
							<a href="../noticia.php?id=<? echo $id[4]; ?>" target="_blank" class="texMtbl10"><? echo $sub_titulo[4]; ?></a></td>
					</tr>
			</table></td>
		</tr>
	</table></td>
  </tr>
  <tr>
	<td height="30" class="style1">Titulo</td>
	<td><label>
		<input type="text" name="Titulo" id="Titulo"  onkeyup="muda_elemento(this.value,'titulo['+Modelo_News.value+']');")/>
	</label></td>
	  </tr>
  <tr>
	<td width="127" class="style1">Sub-Título (descrição da notícia)</td>
	<td><input type="text" name="Titulo2" id="Titulo2" /></td>
	  </tr>
  <tr>
	<td height="30" class="style1">Foto</td>
	<td> </td>
	  </tr>
  <tr>
	<td><p>30</p>
		<p> </p></td>
	<td> </td>
	  </tr>
  <tr>
	<td> </td>
	<td colspan="2"> </td>
  </tr>
</table>
</form>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Alexandre R    0

Alexandre R
Postado

é meu amigo o problema está na tag <A> que está fora da div.

 

na linha 51 do código:

 

<td height="107" valign="top"><div align="right"> <a href="#" class="titMtbl10"><div id="titulo[1]" class="titMtbl10">Titulo</div></a><a href="#" class="texMtbl10"><div id="sub_titulo1">Sub Titulo</div></a> </div></td>

se tu tirar a tag <a> de fora da div vai resolver o teu problema.

 

minha sugestão para que não seja necessário muitas mudanças é a que segue abaixo

 

<td height="107" valign="top"><div align="right"><div class="titMtbl10"><a href="#" class="titMtbl10" id="titulo[1]">Titulo</a></div>
<div><a href="#" class="texMtbl10" id="sub_titulo1">Sub Titulo</a></div> </div></td>

ou seja, coloca a tag <a> dentro da div e passa o id da div para a tag <a>, acho q isso deve resolver. (reirando a tag <a> resolveu nos meus testes)

Compartilhar este post

Link para o post
Compartilhar em outros sites
Ir para a lista de tópicos Javascript
×

Informação importante

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

  Aceito