Fóruns sobre PHP, JavaScript, HTML, MySQLi, jQuery, Banco de Dados, CSS


Moderador: web

 
Mais de 100 postagens
Mais de 100 postagens
Tópico Autor
Mensagens: 286
Nome: Vinícius Muniz
Descrição do site: As últimas notícias sobre "Harry Potter" em um só lugar.
Sexo: Masculino
Localização: Vargem Grande Paulista, SP
Contato:

Barra de pesquisa simples e funcional

15-04-2018 01:53

Olá! Eu gostaria de saber como faço para que o código abaixo seja funcional: ao clicar no ícone de pesquisar, a caixa de digitação é exibida; ao clicar fora dela (em qualquer parte do documento ao redor), a caixa é oculta, voltando ao estado inicial. O ícone funcionaria com o evento "slideToggle", exibindo e ocultando a caixa de pesquisa sempre ao ser clicado.

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js' type='text/javascript'></script> <img src='https://image.flaticon.com/icons/svg/34/34097.svg' id='search-icon'/> <div id='nav-search'> <form action='/search' id='searchform' method='get'> <input id='s' name='q' placeholder='Digite e dê enter para pesquisar...' type='search'/> </form> </div> <style>#search-icon{position:absolute;right:0;top:0;display:block;line-height:40px;height:40px;width:40px;color:red;font-size:16px;padding:0;text-align:center;cursor:pointer;border-left:1px solid #272727} #search-icon:hover{background-color:#CD2122;color:#fff} #nav-search{position:absolute;right:0;top:40px;z-index:50;display:none;width:300px;height:54px;background-color:#272727;border:0;border-top:0;border-radius:0;transition:all 0s ease;-webkit-transition:all 0s ease;-moz-transition:all 0s ease;-o-transition:all 0s ease;box-sizing:border-box} #nav-search #searchform{width:100%;position:relative;margin:10px 0;padding:0 10px;box-sizing:border-box;height:34px;overflow:hidden;border-radius:0} #nav-search #s{width:100%;box-sizing:border-box;position:relative;height:34px;float:left;padding:0 10px;margin:0;border:0;background-color:rgba(255,255,255,0.05);font-size:12px;font-family:inherit;color:#F2F2F2;border-radius:0} #nav-search #s:focus{color:#F2F2F2;outline:none}.featured{margin:0 auto;position:relative}</style> <script> $("#search-icon").on("click", function() { $("#nav-search").slideDown(250) }); $('#s').focusout(function() { $("#nav-search").hide(); $("#nav-search").fadeIn(250); $("#nav-search").val(''); }); </script>

Desde já, agradeço a atenção! :)
0
As melhores notícias sobre "Harry Potter" organizadas em um só lugar. Bastidores, fotos e vídeos das gravações de "Harry Potter e as Relíquias da Morte".

Ordem da Fênix Brasileira
http://www.ordemdafenixbrasileira.com/
 
Avatar do usuário
ADMIN
ADMIN
Mensagens: 17777
Nome: Kleber
Descrição do site: Onde você encontra scripts grátis para o seu site
Sexo: Masculino
Localização: RJ / RJ / Brasil
Contato:

Re: Barra de pesquisa simples e funcional

15-04-2018 15:21

A forma mais simples de fazer isso é adicionando um evento ao body "área fora da div", onde ao clicar no mesmo feche a div.
E adicionar um outro evento onde ao clicar sobre a div não aconteça nada.

<style> body{background-color:black} #div{background-color:white} </style> <script src="jquery.js"></script> <script> $(function() { // EVENTO AO CLICAR NA DIV $("#div").click(function(event){ event.preventDefault(); return false; }); // EVENTO AO CLICAR FORA DA DIV $("body").click(function(){ $("#div").hide(); }); }); </script> <div id="div">div</div>

0
A melhor hospedagem para o seu site HostGator!

Quem está online

Usuários navegando neste fórum: Bing [Bot]