Oggi vediamo come chiudere un div o un elemento quando si clicca fuori da esso in qualsiasi punto dello schermo, molto utile per rendere dinamica l’user experience del vostro sito!
Base e funzionamento
Il funzionamento e la logica dello script sono molto semplici: far chiudere un div o elemento html in generale quando si clicca fuori da esso, in qualsiasi parte dello schermo. Per prima cosa montiamo lo scheletro HTML:
<p style="display: none">Viva Targetweb</p> <button id="pulsante">Apri</button>
Ed ecco un primo,elementare, esempio di script:
$("#pulsante").click(function (e) {
$("p").show();
e.stopPropagation();
});
$(document).click(function() {
$("p").hide();
});
Il funzionamento non è molto complesso, perlomeno in questo esempio: cliccando sul pulsante (notare l’associazione della “e”, un evento associato alla funzione per poterla usare in seguito), appare il paragrafo di testo. Cliccando su qualsiasi parte o elemento del documento (“selettore: document”) il paragrafo si chiude. Da notare come oltre a document, avrei potuto usare anche il selettore “window”.
La funzione event.stopPropagation() è un pò più complessa e puramente tecnica, vi invito a visionare la pagina ufficiale a questo indirizzo per maggiori informazioni.
Esempio 2: Versione avanzata per searchbox a scomparsa
E se volessimo realizzare qualcosa di più complesso? Bhè dipende molto da quello che volete realizzare ma, come vedrete di seguito, il funzionamento e la logica rimangono invariate.
//appear search box by Targetweb
$(".search-nav-btn").click(function(e) {
$('.site-search').hide().css("width","0px");
$('.site-search').show().css("width","auto");
setInterval(function() {
if ($(".site-search").is(":visible")) {
$('.site-search').hide().css("width","0px");
} else {}
},10000);
e.stopPropagation();
});
$(document).click(function() {
$('.site-search').hide().css("width","0px");
});
In questo caso .search-nav-btn è il nostro trigger di apertura, mentre .sitesearch è la parte nascosta. In realtà in questo esempio voglio far apparire il box con un’animazione di larghezza come se si aprisse. Al posto di hide() quindi ho specificato come:
Stato apertura: css(width,auto).
Stato chiusura:css(width,0px).
Fallback di Chiusura
Come avrete notato nell’esempio appena sopra ho predisposto anche un fallback nel caso che l’utente non clicchi fuori (di fatto l’elemento rimarrebbe aperto), un’ipotesi davvero improbabile, ma possibile. Pertanto ho predisposto un timer (setInterval) che mi permette di chiudere il div se è visibile.
setInterval(function() {
if ($(".site-search").is(":visible")) {
$('.site-search').hide().css("width","0px");
} else {}
},10000); //10000 è il timer
Conclusioni
Questo script è la soluzione ottimale per rendere dinamici alcuni elementi fondamentali del vostro sito come search box, pubblicità e qualsiasi cosa di cui abbiate bisogno. Insomma date una scossa dinamica agli elementi del vostro sito!
Se ti è piaciuto l’articolo, condividilo sui tuoi social network preferiti! oppure lasciami un commento, sono sempre ben accetti 😉
