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!
|
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.
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
[quote=-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[/quote]
Medo do que será postado, mas, coloca o javascript aí e o elemento que chama ele, pra verificarmos
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>
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