HTML sobrepor elementos

11 de outubro de 2011 5 respostas

Igarashi1 11 de outubro de 2011

Então pessoal, eu gostaria de saber se há como sobrepor elementos numa jsp.

Eu tenho uma série de selects e input text’s dentro de uma tag

, que estão com o atributo visbility = hidden.
O que eu quero fazer é o seguinte, baseado em uma escolha do usuário eu mudo o atributo de um dos campos para visible.
Funciona com javascript, só que os campos, mesmo estando hidden, ficam um ao lado do outro, aumentando o tamanho do meu .
O que eu queria fazer é posicionar esses campos um em cima do outro, assim ocupariam somente o espaço de 1 elemento.
Espero que possam me ajudar!

Muito obrigado!
Abraços!

5 Respostas

charlesbraw 11 de out. de 2011

Não use visible, use display:none, assim o campo não irá oculpar o espaço.

Essa é basicamente a diferença entre os dois.

Igarashi1 11 de out. de 2011

charlesbraw

Valeu cara, eu usei o display, só que aconteceram algumas coisas estranhas.
Os campos que eu quero exibir e esconder são inputs(text) e select’s.
Quando eu executo a função que troca de acordo com a escolha do usuário, só funciona quando a escolha dele
é um select. Se a escolha dele é um input ele não esconde o campo anterior.

Por exemplo:

Tem um input sendo exibido, ai o usuario muda a escolha dele, então o input deve ser escondido e um novo elemento
deve aparecer no lugar dele ( um select ou um input). Mas quando é um input ele não esconde o elemento, simplesmente
acrescenta outro abaixo.

Muito obrigado

drsmachado 11 de out. de 2011

-Igarashi:
charlesbraw

Valeu cara, eu usei o display, só que aconteceram algumas coisas estranhas.
Os campos que eu quero exibir e esconder são inputs(text) e select’s.
Quando eu executo a função que troca de acordo com a escolha do usuário, só funciona quando a escolha dele
é um select. Se a escolha dele é um input ele não esconde o campo anterior.

Por exemplo:

Tem um input sendo exibido, ai o usuario muda a escolha dele, então o input deve ser escondido e um novo elemento
deve aparecer no lugar dele ( um select ou um input). Mas quando é um input ele não esconde o elemento, simplesmente
acrescenta outro abaixo.

D:

Muito obrigado

Medo do que será postado, mas, coloca o javascript aí e o elemento que chama ele, pra verificarmos

Igarashi1 11 de out. de 2011

Hahahaha segue o javascript:

<script type="text/javascript">

            var visibleField=-1;

            function showSelectField(){
                var index = document.getElementById("choice").selectedIndex;
                var auxIndex = index + 1;
                var opt = document.getElementById("choice").options[index].value;
                
                if(opt==2 || opt==4){
                    if(visibleField!=-1){
                    document.getElementById("element_"+visibleField).style.display = "none";
                    }
                    document.getElementById("element_"+auxIndex).style.display = "block";
                }else{
                    if(visibleField!=-1){
                    document.getElementById("element_"+visibleField).style.dislay = "none";
                    }
                    document.getElementById("element_"+auxIndex).style.display = "block";
                }

                setVisibleField(auxIndex);
            }

            function setVisibleField(index){
                visibleField = index;
            }

        </script>

choice = select com as opções que o usuário pode escolher, de acordo com essas opções é exibido um campo de texto ou um select preenchido.
element_“numero” = inputs e selects que estão na pagina com o display = none (assim, exibo-os conforme a escolha do usuário)
opt = valor que verifica se será exibido um select ou um input
index = índice do choice.
visibleIndex = guarda o id do campo que esta sendo exibido para escondê-lo quando houver uma troca.

E o chamado é

<select onchange="showSelectField();"  name="CHOICE" size="1" id="choice">
                            <c:forEach items="${contents}" var="content">
                                <option value="${content.type}">${content.title}</option>
                            </c:forEach>
 </select>

Igarashi1 13 de out. de 2011

Então, consegui resolver!

O if abaixo era desnecessário.

if(opt==2 || opt==4){  

                    if(visibleField!=-1){  
                    document.getElementById("element_"+visibleField).style.display = "none";  
                    }  
                    document.getElementById("element_"+auxIndex).style.display = "block";  
                     }else{  
                    if(visibleField!=-1){  
                    document.getElementById("element_"+visibleField).style.dislay = "none";  
                    }  
                    document.getElementById("element_"+auxIndex).style.display = "block";  
}

Daí, deixei apenas:

if(visibleField!=-1){  
                    document.getElementById("element_"+visibleField).style.display = "none";  
                    }  
                    document.getElementById("element_"+auxIndex).style.display = "block";
 }

Valeu charlesbraw e drsmachado!
O display funcionou perfeitamente!
Abraços

Criado 11 de outubro de 2011

Ultima resposta 13 de out. de 2011

Respostas 5

Participantes 3

5 Respostas

Topicos relacionados