Abrir dv dentro de option

Carcleo · Março 20, 2012

Pessoal.

Nesse site: http://www.minhaprimeiracasa.com.br/, tem um sistema de busca rápida na pagina inicial.

Nessa busca, tem o campo Dormintórios que é um select options.

Esse select, quando é aberto as options (clika sobre a seta), em vez de sair uma lista de options, é aberta, em cima desta lista de options, uma div. Acontece, que essa div sobrepoe à lista de options(só tem um option lá).

Como eu faço para:

1) Sobrepor a div à lista de option?

2) Quando clikar na seta do select, uma vez que a lista de options (no caso a div) estiver aberta, fechá-la?

Obrigado a quem puder ajudar.

Carlos Rocha

Carcleo · Março 20, 2012

Veja o que fiz e não funcionou:

 <label id="label_busca_rapida" for="form_busca_rapida"><h3>Busca Rápida:</h3></label>
 <div id="busca_rapida">
   <form action="busca.php?acao=busca_rapida" method="post" id="form_busca_rapida" onsubmit="return valida_pesquisa_rapida();">
       <label id="label_imovel_tipo" for="select_imovel_tipo">Tipo de Imóvel</label>
       <select id="select_imovel_tipo" onchange="libera_div_quantos_quartos();">
         <option selected="selected" value="#">Escolha o Tipo de Imóvel</option>
         <option value="apartamento">Apartamento</option>
         <option value="casa">Casa</option>
         <option value="chacara">Chácara</option>
         <option value="fazenda">Fazenda</option>
         <option value="kitnet">Kitnet</option>
         <option value="sala">Sala</option>
         <option value="sobrado">Sobrado</option>
         <option value="sobreloja">Sobreloja</option>
         <option value="terreno">Terreno/Lote</option>
         <option value="outros">Outros</option>
       </select><br />
       <div id="div_quantos_quartos" style="display:none;">  
         <div id="div_select_quantos_quartos" style="display:block;z-index:1;">  
           <label id="label_quantos_quartos" for="select_quantos_quartos">Quantos Quartos:</label>
           <select id="select_quantos_quartos"  onFocus="abre('div_quantos_quartos_escolhe')"; onBlur="fecha('div_quantos_quartos_escolhe')"; >
           <option value="#" selected="selected">Tanto Faz!</option>
        </select>          
        </div>
        <div id="div_quantos_quartos_escolhe" style="display:none; z-index:2;">  
           <p style="border-bottom: 1px solid #cacaca">
              <label id="label_quantos_quartos_escolhe">SELECIONE:</label>
              <a href="javascript:void(null);"><img src="img/ok.gif" /></a><br />
              <input type="checkbox" id="marca_todos_quartos" value="" onclick="marcar_todos_quartos();" />Marcar todos
           </p>
           <ul id="marca_quartos" style="list-style:none">
              <li><input type="checkbox" id="marca_quartos1" name="quartos[]" value="1" /> <span>1 Quarto</span> </li>
              <li><input type="checkbox" id="marca_quartos2" name="quartos[]" value="2" /> <span>2 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos3" name="quartos[]" value="3" /> <span>3 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos4" name="quartos[]" value="4" /> <span>4 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos5" name="quartos[]" value="5" /> <span>5 ou mais Quartos</span> </li>
           </ul>
         </div>
       </div>
   </form>
 </div>

A <div id="div_quantos_quartos_escolhe"..> deve sobrepor à <div id="div_select_quantos_quartos" style="display:block;z-index:1;"> quando a seta do <select......> for acionada. Isso, esta acontecendo. A div esta se abrindo normal. Porem, o select não esta sendo sobreposto.

Veja em http://www.dinamicaimoveis.com.br/novo

Na paste da busca, escolha nos tipos de imoveis, casa ou apartamento e vai abrir a div da quantidade de quartos. Quando voce clikar na seta, a lisa de opçoes vai aparecer mas não vai sobrepor à select. E é exatamente isso que eu preciso.

Tentei position:absolute ma não deu

Talvez esteja mais para CSS que JavaScript. Se for esse o caso, por favor monitor: mova esse tópico para CSS

Evandro Oliveira · Março 20, 2012

Você precisa remover a visibilidade do select. É um elemento problemático assim como os OBJECT e IFRAME

els_select = document.getElementByTagName('select');
for (var i = 0; i < els_select.length; i += 1) els_select.item(i).onfocus = function () {
   this.style.visibility = 'hidden';
}

E quando a DIV que contém as opções perder o foco, ela deve restaurar a visibilidade do SELECT oculto:

document.getElementById('div_do_select_dormitorios').onblur = function () {
   document.getElementById('select_dormitorios').style.visibility = 'visible';
}

Carcleo · Março 20, 2012

Entendi.

Mas eu não quero que o select perca visibilidade. Só o option do select deve perder a visibilidade dando o efeito de

que a div sobrepos ao option sem apagar o select.(ou seja, aparecendo apenas o selected no option);

A ideia é fazer igual ao select de Dormitórios nesse site: http://www.minhaprimeiracasa.com.br/

Mas, deixa eu melhorar um pouco mais a compreensão:

Tenho:

uma div id"div_quantos_quartos"

Dentro dela:

uma div id="div_select_quantos_quartos"

Dentro dela

um select id="select_quantos_quartos" com apenas uma option e selected que, ao ser clikado na seta do select, abre a div id="div_quantos_quartos_escolhe" justamente em cima do option que abriu.

uma div id="div_quantos_quartos_escolhe"

Dentro dela

alguns radio buttons com as opçoes de quantidade de quartos

Então: A ideia é fazer a div id="div_quantos_quartos_escolhe" aparecer (e tampar apenas) em cima do option do select. Não sumir com o select todo.

Gerciley · Março 21, 2012

na verdade nada do option perde a visibilidade, o select option tem apenas uma opção e posicionado abaixo dele a div com visible: hidden com o conteudo que deveria ser do option com as Checkbox, um simples javascript ou Ajax altera o atributo de visibilidade da div para que apareça ao clicar no select option.

Espero ter ajudado;

Abraços.

Carcleo · Março 21, 2012

Mas veja bem.

Se voce for em http://www.dinamicaimoveis.com.br/novo e escolher tipo de imovel casa ou apartamento e depois clikar no select Quantos quartos, verá que a div aparece sim abaixo do option, e exatamente e, cima dele que é o que eu pretendo.

Porem, se eu novamente clikar na seta do select, ai o option sobrepoe a div, mas não apaga, permitindo a visualização da div ao fundo, pois o option nãol possui background.

O que eu queria fazer é que, quando acionasse novamente a seta do select, em vez do option aparecer, que o select(e a div) se fechassem.

Mas, achp que estou chamando o javascript que abre a div no local errado:

<select id="select_quantos_quartos"  onFocus="abre('div_quantos_quartos_escolhe')"; onBlur="fecha('div_quantos_quartos_escolhe')"; >
              <option value="#" selected="selected">Tanto Faz!</option>
           </select>

function abre(div)
{
 document.getElementById(div).style.display = 'block';
}

Esta errado não esta?

Seria igual ao que acontence em http://www.minhaprimeiracasa.com.br/ no menu dormitórios

Gerciley · Março 21, 2012

Cara dei uma adaptada no seu código copia ele e ve se é isso ai que você quer, se não for tenta explicar de novo pra gente.

<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script type="text/javascript">
function abre(div)
{
 document.getElementById(div).style.visibility = 'visible';
}
function fecha(div){
 document.getElementById(div).style.visibility='hidden';	
}
</script>
<style type="text/css">
#div_quantos_quartos_escolhe{
width:100px;
height:80px;
background:#090;
visibility:hidden;}
</style>
</head>
<select id="select_quantos_quartos"  onFocus="abre('div_quantos_quartos_escolhe')"; onBlur="fecha('div_quantos_quartos_escolhe')"; >
              <option value="#" selected="selected">Tanto Faz!</option>
           </select>      

<div id="div_quantos_quartos_escolhe">opções de seleção com checbox</div>        
<body>
</body>
</html>

Carcleo · Março 21, 2012

O meu esta desse jeito tambem.

Caso voce insista e clique de novo na seta do select, verá que, ao invez de fechar a div(e o select), a option do select abrirá em cima da div.

O que eu to querendo fazer é o seguinte:

Nesse site: http://www.minhaprimeiracasa.com.br/, tem um sistema de busca rápida na pagina inicial.

Nessa busca, tem o campo Dormintórios que é um select options.

Esse select, quando se clika na seta para abrir as options (que só tem um option), em vez de sair uma lista de options, é aberta(rapidamente a unica óption e) em cima desta lista de options, abri-se a div com os radio buttons. Acontece, que Caso voce insista e clique de novo na seta do select, verá que, ao invez de fechar a div(e o select), a option do select abrirá em cima da div.

Entendeu ?

Gerciley · Março 21, 2012

então no caso você quer que a div abra por cima do option do select?

se for tenta Z-index:-1 no select ou z-index:100 na div.

Carcleo · Março 21, 2012

É isso. mas se eu colocar z-index no select, o select não aceita z-index.

se eu colocar uma div só no options, o html não aceita isso

se eu colocar uma div no select, aí o select vai sumir. E o que eu quero é que suma só o option.

Carcleo · Março 21, 2012

É isso. mas se eu colocar z-index no select, o select não aceita z-index.

se eu colocar uma div só no options, o html não aceita isso

se eu colocar uma div no select, aí o select vai sumir. E o que eu quero é que suma só o option.

Gerciley · Março 21, 2012

cara, ja que você não vai usar a check box porque não tira ela e coloca só um testo com uma imgem bacana, ou memso um print de uma check box, não vai ficar ecologicamente correto mas resolve o problema.

uma dica, use o firebug e estude o script que o programador desse site ai que você postou usou e tenta reverter mas é muito dificil faser uma checkBox não abrir nehuma option a não ser que você desabilite ela via javascript, mesmo assim não sei se ela vai aceitar o click estando desabilitada e se não tiver problema pra você deixar ela desabilitada né!

qualquer coisa posta ai denovo pra gente.

Evandro Oliveira · Março 21, 2012

É isso. mas se eu colocar z-index no select, o select não aceita z-index.

Você precisa remover a visibilidade do select. É um elemento problemático assim como os OBJECT e IFRAME

A exibição do OPTION, o comportamento do elemento SELECT é definido como padrão e imutável entre os browsers.

Você nunca se perguntou o motivo de não ser possível utilizar, por exemplo, um "position: absolute" no OPTION?

Removendo o foco do SELECT no momento do clique pode ser possível que aconteça o que você quer:

sel = getElementById('meu_select');

sel.focused = false;
sel.options = document.getElementById('meu_div');
sel.onclick = function () {
   if (this.focused) {
       this.options.style.display = 'none';
       this.focused = false;
       return this.blur();
   }
   this.options.style.display = 'block';
   this.focused = true;
   return this.options.focus();
}

Carcleo · Março 21, 2012

Mas hein!

Talves eu não esteja conseguindo me expressar bem.

Eu vou usar as checkbox sim.

Igual ao site modelo. Voce chegou a ver o site modelo? http://www.minhaprimeiracasa.com.br/?

Pois é. Quando se abre a select Dormitórios, aí, ao clikar na caixinha da select, abre-se(rapidamente) o único option que tem a select, e, em cima desse option, abre-se a div com as checkbox's.

É isso que eu quero fazer..

Gerciley · Março 21, 2012

Carcleo, me desculpe, é que eu tava abrindo o site que você me passou no Chrome, e o option da checkbox estava por cima da div, mas ao abrir no Firefox eu pude entender, vou tentar aki um pouco acompanhe o post ai qualquer coisa eu posto.

Carcleo · Março 21, 2012

Puxa valeu.

Fico no aguardo.

Gerciley · Março 21, 2012

o Evandro ta certo, pode remover o foco mas pode usar um código menor que o que ele postou, na function abre adicione

document.getElementById('btn').focus();

onde 'btn é o botão OK para clicar após selecionar as checkbox, eu testei aki e deu certo. Só no Chrome que não, deve ser algum bug pois nos outros funcionaram,

espero ter ajudado,

Abraços.

Carcleo · Março 21, 2012

Ta.

Mas como ja estou todo perdido com esse negocio de tableless mesmo, faz um favor para mim.

Dá uma entrada em www.dinamicaimoveis.com.br/novo e me diz onde coloco esse codigo.

Ta dificil viu!

Como tabelas era mais facil. Mas eu quero a forma correta.

Gerciley · Março 21, 2012

o código que você me passou tem uma function em javascript chamada "abre" certo? é só você adicionar a linha de código que eu te passei dentro dessa function, ela vai ser apenas um parâmetro a mais da function "abre", volto a dizer que isso pode não ser compatível com todos os Browsers, no Chrome por exemplo não funfou, nem aquele site que você me passou funcionaou mas no FireFoz deu certo, não testei no explorer e outros mas sugiro que faça o teste em todos antes de publicar qualquer trabalho, o layout com tableless é mais pratico e moderno e mais abrangente porém no quesito compatibilidade ainda falta melhorar, mas, enquanto existir os "Hacks", termo sofisticado para "Gambiarras" o programador Web Stardard está salvo. Vou postar abaixo todo código HTML do exemplo que eu fiz, talvez você entenda melhor, copie o código e teste ai.

<!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>Untitled Document</title>
<script type="text/javascript">
function abre(div)
{
 document.getElementById(div).style.visibility = 'visible';
 document.getElementById('btn').focus();
}
function fecha(div){
 document.getElementById(div).style.visibility='hidden';	
}
</script>
<style type="text/css">
#div_quantos_quartos_escolhe{
width:100px;
height:80px;
background:#090;
visibility:hidden;}

#select_quantos_quartos{
z-index:-100;}
</style>
</head>
<select id="select_quantos_quartos"  onclick="abre('div_quantos_quartos_escolhe');" >
              <option onclick="javascript:document.this.disabled=true">opção1</option>
           </select>      

<div id="div_quantos_quartos_escolhe"><input id="btn" name="ok" value="ok" type="button" onclick="fecha('div_quantos_quartos_escolhe')" /></div>      


<body>
</body>
</html>

Carcleo · Março 21, 2012

Olha o que eu fiz que deu certo:

js

function abre_checkbox_pesquisa(div)
{
 if (document.getElementById(div).style.display == 'block')
 {
  document.getElementById(div).style.display = 'none';
 }
 else
 {
  document.getElementById(div).style.display = 'block';
 }

}

html

       <div id="div_quantos_quartos" style="display:none;">  
         <div id="div_select_quantos_quartos" style="display:block";>  
           <label id="label_quantos_quartos" for="select_quantos_quartos">Quantos Quartos:</label>
           <select id="select_quantos_quartos"  onClick="abre_checkbox_pesquisa('div_quantos_quartos_escolhe')"; onBlur="fecha('div_quantos_quartos_escolhe')"; >
              <option value="#" selected="selected">Tanto Faz!</option>
           </select>          
         </div>
         <div id="div_quantos_quartos_escolhe" style="display:none;background: #FFF";>  
           <p style="border-bottom: 1px solid #cacaca">
              <label id="label_quantos_quartos_escolhe">SELECIONE:</label>
              <a href="javascript:void(null);"><img src="img/ok.gif" /></a><br />
              <input type="checkbox" id="marca_todos_quartos" value="" onclick="marcar_todos_quartos();" />Marcar todos
           </p>
           <ul id="marca_quartos" style="list-style:none">
              <li><input type="checkbox" id="marca_quartos1" name="quartos[]" value="1" /> <span>1 Quarto</span> </li>
              <li><input type="checkbox" id="marca_quartos2" name="quartos[]" value="2" /> <span>2 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos3" name="quartos[]" value="3" /> <span>3 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos4" name="quartos[]" value="4" /> <span>4 Quartos</span> </li>
              <li><input type="checkbox" id="marca_quartos5" name="quartos[]" value="5" /> <span>5 ou mais Quartos</span> </li>
           </ul>
         </div>
       </div>

CSS

          #div_select_quantos_quartos{
			   z-index:1;
	   }
          #select_quantos_quartos{
			   width:200px;
			   height:30px; 
	   }
	   #div_quantos_quartos_escolhe{
		       background: #FFF;
		       margin-top:-7px;
			   margin-left:184px;
			   width:191px;
			   height:150px;  			   		   
			   padding:3px;
	           border-radius:0px 0px 5px 5px;
	           border: 1.5px solid #95A9B3;
			   z-index:2;
	   }

Isso faz com que, quando cliko na seta do select uma vez, abrem-se a div(e o option) e quando cliko de novo, fecham-se a dive o option).

Mas, mesmo assim, fica aparecendo o option em cima da div.

Note que eu usei a-index;

Então, parece que ficou faltando só fechar o select sem fechar a div assim que a div é aberta.

Como faz isso?

Tentei assim:

// JavaScript Document
function abre_checkbox_pesquisa(div)
{
 if (document.getElementById(div).style.display == 'block')
 {
  document.getElementById(div).style.display = 'none';
 }
 else
 {
  document.getElementById(div).style.display = 'block';
  document.getElementById("select_quantos_quartos").options[0].style.display = "none";	
 }

}

Mas não fechou as options não.

Arquivado

Abrir dv dentro de option

Recommended Posts

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Evandro Oliveira 331

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4

Compartilhar este post

Link para o post

Compartilhar em outros sites

Gerciley 14

Compartilhar este post

Link para o post

Compartilhar em outros sites

Carcleo 4