Ir para conteúdo

POWERED BY:

Arquivado

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

Holyspear

[Resolvido] Sobrepor div's

Por , em Javascript

Recommended Posts

Holyspear    0

Holyspear
Postado

Boa tarde pessoal;

 

Estou recorrendo ao fórum de vocês para pedir ajuda, pois passei a tarde inteira pesquisando e testando mas não consegui o resultado esperado.

 

Sou novato em JavaScript, mas sou esforçado. Preciso que ao clicar em um Botão Radio de um formulário uma DIV com opções diferentes seja mostrada ao usuário. Para isso desenvolvi os seguintes códigos:

 

JavaScript:

function visualizaDiv (div) {
	
document.getElementById(div).style.display = 'block';
parent.document.getElementById("conteudo_central").height = document.getElementById("web").scrollHeight + 0;

}

HTML + CSS

<style>

#opcao1, #opcao2, #opcao3 {
	position: absolute;
	display: none;
	background: #0e9f0b;
 }

</style>  
    <input name="webservico"   type="radio" value="Novo Site" onclick="visualizaDiv('opcao1')"/>
    <label for="webservico">Novo Site</label>
    <input name="webservico" type="radio" value="Layout para Site" onclick="visualizaDiv('opcao2')"/>
    <label for="webservico">Layout para Site</label>
    <input name="webservico" type="radio" value="Manutenção" onclick="visualizaDiv('opcao3')"/>
    <label for="webservico">Manutenção</label>

    <div id="opcao1">Mostrar texto de "Novo Site"</div>
    <div id="opcao2">Mostrar texto de "Layout para Site"</div>
    <div id="opcao3">Mostrar texto de "Manutenção"</div>

Até um certo momento a sobreposição de DIV's fica boa, mas se eu retornar a clicar em um Radio que foi clicado anteriormente, a DIV não sobrepõe. Ou seja, Só vai sobrepor se eu clicar ordenadamente.

 

Preciso que o código sobreponha a DIV clicada independente da ordem. É possível pessoal? Alguém pode me ajudar? Ficarei no aguardo ansioso.

 

Obrigado a todos e abraços!

Compartilhar este post

Link para o post
Compartilhar em outros sites

klonder    14

klonder
Postado

No código que criei, eu não estou sobrepondo as divs, mas sim ocultando as desnecessárias e tornando visível as necessárias.

 

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div.opcoes {position: absolute; display: none; background: #0e9f0b;}
</style>  
<script type="text/javascript">
function visualizaDiv (div) {
//Especifique quantas divs serão utilizadas no total:
var divTotal = 3;

var objDiv = document.getElementById("opcao"+div);  

//Ocultando todas as divs que poderiam estar visíveis:
for (var i=1; i<=divTotal; i++) {
	var objDivOcultar = document.getElementById("opcao"+i);
	objDivOcultar.style.display = "none";
}

//Tornado visível apenas a div com o parâmetro passado pelo evento:
objDiv.style.display = 'block';
}
</script>
</head>
<body>
<input type="radio" name="webservico" value="Novo Site" onclick="visualizaDiv(1)" /> Novo Site
<input type="radio" name="webservico" value="Layout para Site" onclick="visualizaDiv(2)"/>Layout para Site
<input type="radio" name="webservico" value="Manutenção" onclick="visualizaDiv(3)"/>Manutenção

<br><br>
    <div id="opcao1" class="opcoes">Mostrar texto de "Novo Site"</div>
    <div id="opcao2" class="opcoes">Mostrar texto de "Layout para Site"</div>
    <div id="opcao3" class="opcoes">Mostrar texto de "Manutenção"</div>
</body>
</html>

Compartilhar este post

Link para o post
Compartilhar em outros sites

Holyspear    0

Holyspear
Postado

No código que criei, eu não estou sobrepondo as divs, mas sim ocultando as desnecessárias e tornando visível as necessárias.

 

<html>
<head>
<title>Untitled Document</title>
<style type="text/css">
div.opcoes {position: absolute; display: none; background: #0e9f0b;}
</style>  
<script type="text/javascript">
function visualizaDiv (div) {
//Especifique quantas divs serão utilizadas no total:
var divTotal = 3;

var objDiv = document.getElementById("opcao"+div);  

//Ocultando todas as divs que poderiam estar visíveis:
for (var i=1; i<=divTotal; i++) {
	var objDivOcultar = document.getElementById("opcao"+i);
	objDivOcultar.style.display = "none";
}

//Tornado visível apenas a div com o parâmetro passado pelo evento:
objDiv.style.display = 'block';
}
</script>
</head>
<body>
<input type="radio" name="webservico" value="Novo Site" onclick="visualizaDiv(1)" /> Novo Site
<input type="radio" name="webservico" value="Layout para Site" onclick="visualizaDiv(2)"/>Layout para Site
<input type="radio" name="webservico" value="Manutenção" onclick="visualizaDiv(3)"/>Manutenção

<br><br>
    <div id="opcao1" class="opcoes">Mostrar texto de "Novo Site"</div>
    <div id="opcao2" class="opcoes">Mostrar texto de "Layout para Site"</div>
    <div id="opcao3" class="opcoes">Mostrar texto de "Manutenção"</div>
</body>
</html>

Puxa vida cara!!! Perfeito!!!

 

Affff... é tanta coisa que a gente acaba pensando curto. Mas valeu como experiência, não saco nada de objetos do JavaScript. E pensar que um simples laço iria resolver todo o problema. Hehehehe!

 

Mais uma vez amigo, te agradeço mesmo. Está funcionando perfeitamente. Qualquer coisa eu grito aqui denovo.

 

Abraços!!!

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