CataBitsJS exibir e ocultar camada + escrever
2 participantes
Página 1 de 1
JS exibir e ocultar camada + escrever
wallyvianna 27/7/2010, 17:28
Preciso exibir e ocultar uma mesma camada com mais de um link, e, ao mesmo tempo, escrever nela textos diferentes.
Tenho um código que resolve a questão de forma simples (só não rola no FireFox):
<a href="#" onClick="mostraElemento1()">exibir texto1</a> para <a href="#" onClick="mostraElemento2()">exibir texto2</a></p>
<div id="elemento" style="display:none"><script>escreve1()</script> <script>escreve2()</script></div>
</body>
</html>
...
Queria:
- que cada link exibisse um texto diferente, na mesma camada
- saber porque o Firefox não exibe/oculta a camada
Tenho um código que resolve a questão de forma simples (só não rola no FireFox):
- Código:
...
exibeOcultaCamadaEscrevendoTexto.html
<html >
<head>
<title>JS exibe Oculta Camada Escrevendo Texto</title>
<script language="JavaScript">
function mostraElemento1() {
if (document.all.elemento.style.display == "")
{document.all.elemento.style.display = "none";}
else
document.all.elemento.style.display ="";}
function escreve1() {
document.write("lorem ipsum");
}
</script>
<script language="JavaScript">
function mostraElemento2() {
if (document.all.elemento.style.display == "")
{document.all.elemento.style.display = "none";}
else
document.all.elemento.style.display ="";}
function escreve2() {
document.write("dolor facilisi");
}
</script>
<style>
#elemento {
position: relative;
top:50px;
left:100px;
width:200px;
height:200px;
background-color:#FC9;
z-index:2
}
</style>
<body>
<a href="#" onClick="mostraElemento1()">exibir texto1</a> para <a href="#" onClick="mostraElemento2()">exibir texto2</a></p>
<div id="elemento" style="display:none"><script>escreve1()</script> <script>escreve2()</script></div>
</body>
</html>
...
Queria:
- que cada link exibisse um texto diferente, na mesma camada
- saber porque o Firefox não exibe/oculta a camada
wallyvianna- Mensagens : 91
Data de inscrição : 01/07/2010
Re: JS exibir e ocultar camada + escrever
Luferat 28/7/2010, 18:26
Amigo,
Para começar, sempre defina o DOCTYPE da página, pois a falta dele pode impedir que navegadores interpretem o DOM adequadamente...
Para começar, sempre defina o DOCTYPE da página, pois a falta dele pode impedir que navegadores interpretem o DOM adequadamente...
Luferat- Admin
- Mensagens : 85
Data de inscrição : 17/03/2010
Idade : 52 -
JS escrevendo por Get Element By ID
wallyvianna 10/8/2010, 20:12
resolvi a questão assim:
O problema é que não consegui ESCREVER uma imagem ou qulauqer outra marcação de HTML na DIV resposta. Quem me ajuda?
- Código:
<html>
<head>
<title>Exemplos de if e else + getElementById</title>
<script type="text/JavaScript">
function ifelse1(cor) {
document.getElementById('resposta').innerHTML = cor
}
function ifelse2(cor) {
document.getElementById('resposta').innerHTML = cor;
}
</script>
</head>
<body>
Exemplos de if e else + getElementById<br/>
<a href="javascript:ifelse1('azul');">A casa 1 é de que cor?</a>
<br>
<a href="javascript:ifelse2('vermelha');">A casa 2 é de que cor?</a>
<div id="resposta"></div>
</body>
</html>
O problema é que não consegui ESCREVER uma imagem ou qulauqer outra marcação de HTML na DIV resposta. Quem me ajuda?
wallyvianna- Mensagens : 91
Data de inscrição : 01/07/2010
CORRIGINDO: JS escrevendo por Get Element By ID
wallyvianna 17/8/2010, 01:57
Reescrevendo o post para que o codigo "faça mais sentido":
resolvi a questão assim:
O problema é que não consegui ESCREVER uma imagem ou qulauqer outra marcação de HTML na DIV resposta. Quem me ajuda?
resolvi a questão assim:
- Código:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>JS Escrevendo por getElementById</title>
<script type="text/JavaScript">
function escreve1(conteudo) {
document.getElementById('resposta').innerHTML = conteudo
}
function escreve2(conteudo) {
document.getElementById('resposta').innerHTML = conteudo;
}
</script>
</head>
<body>
Exemplos de if e else + getElementById<br/>
<a href="javascript:escreve1('A casa 1 é azul');">A casa 1 é de que cor?</a>
<br>
<a href="javascript:escreve2('A casa 2 é vermelha');">A casa 2 é de que cor?</a>
<div id="resposta"></div>
</body>
</html>
O problema é que não consegui ESCREVER uma imagem ou qulauqer outra marcação de HTML na DIV resposta. Quem me ajuda?
wallyvianna- Mensagens : 91
Data de inscrição : 01/07/2010
JS escreve vários HTMLs dentro da mesma DIV/TAG/marcação HTML
wallyvianna 21/12/2010, 16:23
Caros, sei que estas funcionalidades estão presentes na maioria dos editores de HTML e bibliotecas de JS do mercado, mas tenho necessidade de ter um código facil de ser compreendido e editado, na camado do usuario e na camada de código (cliente).
Consegui esta solução, baseado em código do mestre Andre (depois posto aqui o link do post "de origem"), para escrever HTMLs/conteuydos (textos e imagens) diferentes numa mesma DIV:
Aqui posso usar mais de um link para escrever na mesma DIV, mas imagino que possa chamar esse conteudo externamente ao HTML (de uma pagina HTMNL ou arquivo de textio.
Agora preciso adicionar a funcionalidade de exibir e ocultar a camada (link de "fechar").
Quem puder me ajudar, agradeco.
Consegui esta solução, baseado em código do mestre Andre (depois posto aqui o link do post "de origem"), para escrever HTMLs/conteuydos (textos e imagens) diferentes numa mesma DIV:
- Código:
<!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=UTF-8" />
<title>Js escreve vários conteúdos em uma única DIV</title>
<style type="text/css">
<!--
#camada1 {
background-color: #FFFFCC;
position: relative;
height: 200px;
width: 200px;
background-color: #FFCC00;
}
p { padding: 10px; }
-->
</style>
<script type="text/JavaScript">
<!--
function escreveDiv(nomeDiv,conteudo) {
document.getElementById(nomeDiv).innerHTML = conteudo;
}
//-->
</script>
</head>
<body>
<a href="javascript:escreveDiv('camada1','<p><b>texto link 1</b>
<img src=imagem.gif></p>')">Link 1 </a>
<a href="javascript:escreveDiv('camada1','<p><i>texto link 2</i>
<img src=imagem2.gif></p>')">Link 2 </a>
<div id="camada1"><p></p></div>
</body>
</html>
Aqui posso usar mais de um link para escrever na mesma DIV, mas imagino que possa chamar esse conteudo externamente ao HTML (de uma pagina HTMNL ou arquivo de textio.
Agora preciso adicionar a funcionalidade de exibir e ocultar a camada (link de "fechar").
Quem puder me ajudar, agradeco.
wallyvianna- Mensagens : 91
Data de inscrição : 01/07/2010
Fcehando/ocultando camada: problema
wallyvianna 27/3/2011, 02:49
Achei uma solucao para o fechamento/ocultamento da camada com conteudo (camada1) criando a função fechar:
No link de fechar incluí a tradicional barra \ antes da crase, parenteses e ponto-e-virgula para que o JS pudesse escrever caracteres especiais.
O problema é que, depois que o JS fecha/oculta a camada os links não abrem (ou escrevem) mais (n)a camada (camada1). Quem me ajuda?
Tenho um outro código que padece do mesmo problema (uma camada centralizada automaticamente na vertical e horizontal): ao fechar a camada o link de exibir camada deixa de funcionar. Acredito que esta explicação resolva este outro probelam também; se não, posto aqui depois.
- Código:
<!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=UTF-8" />
<title>Js escreve vários conteúdos em uma única DIV</title>
<style type="text/css">
<!--
#camada1 {
background-color: #FFFFCC;
position: relative;
height: 200px;
width: 200px;
background-color: #FFCC00;
}
p { padding: 10px; }
-->
</style>
<script type="text/JavaScript">
<!--
function escreveDiv(nomeDiv,conteudo) {
document.getElementById('camada1').innerHTML = conteudo;
}
function fechar(){
document.all.camada1.style.display = "none";
document.all.camada1.visibility ="hide";
}
//-->
</script>
</head>
<body>
<a href="javascript:escreveDiv('Layer1','<a href=\'javascript\:fechar\(\)\;\'>fechar</a><p><b>texto link
1</b>
<img src=imagem.gif></p>')">Link 1 </a>
<a href="javascript:escreveDiv('Layer1','<p><i>texto link 2</i>
<img src=imagem2.gif></p>')">Link 2
</a>
<div id="camada1"><p></p></div>
</body>
</html>
No link de fechar incluí a tradicional barra \ antes da crase, parenteses e ponto-e-virgula para que o JS pudesse escrever caracteres especiais.
O problema é que, depois que o JS fecha/oculta a camada os links não abrem (ou escrevem) mais (n)a camada (camada1). Quem me ajuda?
Tenho um outro código que padece do mesmo problema (uma camada centralizada automaticamente na vertical e horizontal): ao fechar a camada o link de exibir camada deixa de funcionar. Acredito que esta explicação resolva este outro probelam também; se não, posto aqui depois.
wallyvianna- Mensagens : 91
Data de inscrição : 01/07/2010
Tópicos semelhantes» JS/Javascript para exibir aleatoriamente qualquer conteúdo
» JS posiciona camada sempre no rodapé da página
» JS posiciona camada sempre no rodapé da página
Página 1 de 1
Permissões neste sub-fórum
Não podes responder a tópicos