Autor Tema: ocultar div al hacer click fuera de el (Leído 5811 veces)

lorddelioncourt · « **en:** 27 de Octubre de 2012, 04:04:56 am »

Buenas noches.
Mi duda es la siguiente:
Tengo un div que muestro y oculto con una etiqueta <a>. Lo que quiero hacer es que se oculte al hacer click fuera del div.
Me podrian ayudar con esto??
Gracias y saludos desde México

ferdi342 · « **Respuesta #1 en:** 27 de Octubre de 2012, 13:38:37 pm »

Hola, lo que pides es simple.

Debes crear un div que ocupe el 100% de la pantalla con un z-index menor a la etiqueta <a> que quieras mostrar/ocultar.

Ahora creas unas funciones en javascript que hagan que al hacer clic en tal sitio o en tal otro muestren u oculten una cosa o otra, ejemplo:

Código: [Seleccionar]

<script type="text/javascript">
function mostrar_box() {
	$('#nombre del div a mostrar').fadeIn('slow');
}

function quitar_box() {
	$('#nombre del div a ocultar').fadeOut('slow');
}
</script>

Espero haberte ayudado, si algo no te ha quedado claro o tienes cualquier problema/duda no dudes en comentar,

Saludos.

filiscode · « **Respuesta #2 en:** 27 de Octubre de 2012, 13:50:43 pm »

Esto no es así ferdi, eso que muestras es un código con la librería jQuery y encima no mencionas nada sobre el tema tio...

lorddelioncourt, te recomiendo utilizar algo como esto:

<body onClick="ocultar()">

<script type="text/javascript" language="javascript">
function ocultar()
{
document.getElementById("div").style.display = "none";
}
</script>

Saludos!

javipilo · « **Respuesta #3 en:** 27 de Octubre de 2012, 17:53:22 pm »

¿Sabías que los div siempre quedan por encima de body?, entonces si pulsa fuera del recuadro vale, pero si pulsa en otro div...

filiscode · « **Respuesta #4 en:** 27 de Octubre de 2012, 20:02:49 pm »

Claro que lo sé, el body es la base del sitio, eso ya lo tendría que ver el, además, es lógico lo que acabas de decir :|

SoyJoaquin. · « **Respuesta #5 en:** 27 de Octubre de 2012, 20:48:50 pm »

Cita de: filiscode en 27 de Octubre de 2012, 13:50:43 pm

Esto no es así ferdi, eso que muestras es un código con la librería jQuery y encima no mencionas nada sobre el tema tio...

lorddelioncourt, te recomiendo utilizar algo como esto:

<body onClick="ocultar()">

<script type="text/javascript" language="javascript">
function ocultar()
{
document.getElementById("div").style.display = "none";
}
</script>

Saludos!

jQuery esta tan integrado actualmente que ya llega a formar parte de HTML5 de alguna u otra forma.
No existe un solo sitio web que no use jQuery.

Saludos.

filiscode · « **Respuesta #6 en:** 27 de Octubre de 2012, 20:55:23 pm »

Eh?! Qué estás diciendo por dios, si jQuery es una librería, si no la llamas, nada de jQuery! Y eso de que "casi cualquier pagina lleva jQuery" (?) Ésta página no lleva jQuery. (El foro)

Saludos.

SoyJoaquin. · « **Respuesta #7 en:** 27 de Octubre de 2012, 21:03:59 pm »

Cita de: filiscode en 27 de Octubre de 2012, 20:55:23 pm

Eh?! Qué estás diciendo por dios, si jQuery es una librería, si no la llamas, nada de jQuery! Y eso de que "casi cualquier pagina lleva jQuery" (?) Ésta página no lleva jQuery. (El foro)

Saludos.

Se que es una librería, no me hagas pasar por tonto y mas cuando llevo años manejándola.
El sentido de que "casi cualquier pagina lleva jQuery" es por que para serte sincero, es total y absolutamente indispensable para un desarrollo optimo de alto rendimiento en tu sitio web cuando esta se basa de artas lineas de Javascript tradicional.

Saludos!

CarlosRdrz · « **Respuesta #8 en:** 27 de Octubre de 2012, 22:20:11 pm »

Lo que pides es complicado.

Lo que yo haría es darle un evento click al body, y otro al evento click al div.
Cuando le hagas click al div, pones una bandera en true.

En el click del body compruebas si la bandera está en true, si lo está ocultas el div y la pones en false.

¿Lo entiendes?

Cita de: SoyJoaquin. en 27 de Octubre de 2012, 21:03:59 pm

Se que es una librería, no me hagas pasar por tonto y mas cuando llevo años manejándola.
El sentido de que "casi cualquier pagina lleva jQuery" es por que para serte sincero, es total y absolutamente indispensable para un desarrollo optimo de alto rendimiento en tu sitio web cuando esta se basa de artas lineas de Javascript tradicional.

Saludos!

No estoy de acuerdo. jQuery es muy famoso y logra muchas cosas, pero puedo darte miles de ejemplos de sitios sin jQuery, y si ningún framework de JS.
Al final jQuery te sirve para tres cosas: AJAX, Validar datos de inputs y efectos chulos.

AJAX y validar datos se hace muy fácil con JS, y los efectos chulos no son necesarios "para un desarrollo optimo de alto rendimiento".

jQuery es útil, pero no es dios.
Es simplemente una herramienta más.

Saludos!

filiscode · « **Respuesta #9 en:** 28 de Octubre de 2012, 02:07:02 am »

Cita de: SoyJoaquin. en 27 de Octubre de 2012, 21:03:59 pm

Se que es una librería, no me hagas pasar por tonto y mas cuando llevo años manejándola.
El sentido de que "casi cualquier pagina lleva jQuery" es por que para serte sincero, es total y absolutamente indispensable para un desarrollo optimo de alto rendimiento en tu sitio web cuando esta se basa de artas lineas de Javascript tradicional.

Saludos!

Totalmente de acuerdo con Carlos.

Que tienen que ver los años que la estés manejando? Tu a lo mejor has estado utilizándola 100 años, pero si te quedas estancado en un lado toda tu vida, crees que avanzarás? :|

Pues te digo que hay gente que prefiere utilizar puro JavaScript antes que usar la librería Y NADA de lo que tu dices es correcto... eso de "absolutamente indispensable para un desarrollo optimo de alto rendimiento en tu sitio web cuando esta se basa de artas lineas de Javascript tradicional." no tiene nada que ver! pff, ya no respondo más mensajes porque no merece la pena ! eso de que se necesita jQuery para un alto rendimiento en tu sitio web... me quedo sin comentarios. Saludos.

Saludos.

Warlox · « **Respuesta #10 en:** 03 de Noviembre de 2012, 06:52:57 am »

jQuery no es indispensable en ningún sitio web como dicen los compañeros. Si bien es una librería muy útil hay veces que se debe de evitar utilizar, por ejemplo cuando se diseña un sitio que va a ser ejecutado en un dispositivo móvil y este cuenta con banda ancha 3g, haría que el consumo de datos sea mayor.

Para los más puristas; jQuery es pensado específicamente para permitir manipular de manera más eficiente el DOM de la página (aquí van los "efectos chulos" y demás), y facilitar las llamadas AJAX.

El ver esta conversación me ha dado la idea de crear un nuevo tema dedicado a Frameworks de JS. Quizás en un rato lo haga, si no lo hago, me jalan la oreja, para recordarme

Saludos.

Physlet · « **Respuesta #11 en:** 04 de Noviembre de 2012, 17:37:22 pm »

Eso es fanatismo. Aún no me veo importando jQuery cada vez que quiero trabajar un proyecto que involucre la web.

lorddelioncourt · « **Respuesta #12 en:** 04 de Diciembre de 2012, 01:45:13 am »

gracias a todos por responder, voy a experimentar y ya les cuento como me fue.
gracias

rulo · « **Respuesta #13 en:** 26 de Marzo de 2013, 12:09:12 pm »

Hola. A pesar de que ya lleva demasiado tiempo desde la última vez que estuvieron con este tema, quiero aportar mi granito colocando como solucioné este tema.
En el head coloqué:

<script type="text/javascript">
document.onclick = clickEnDoc;

var _clickEnDiv = false;
function ClickEnDiv()
{
_clickEnDiv = true;
}

function clickEnDoc(e)
{
if(!_clickEnDiv)
{
var bND = document.getElementById('div');
bND.style.visibility = "hidden";
}

_clickEnDiv=false;
}
</script>

Espero que esta simple solución (y hecha sin jQuery) le sirva a alguien algún día.
Saludos

Animus · « **Respuesta #14 en:** 29 de Marzo de 2013, 12:38:08 pm »

Cita de: filiscode en 28 de Octubre de 2012, 02:07:02 am

Totalmente de acuerdo con Carlos.

Que tienen que ver los años que la estés manejando? Tu a lo mejor has estado utilizándola 100 años, pero si te quedas estancado en un lado toda tu vida, crees que avanzarás? :|

Pues te digo que hay gente que prefiere utilizar puro JavaScript antes que usar la librería Y NADA de lo que tu dices es correcto... eso de "absolutamente indispensable para un desarrollo optimo de alto rendimiento en tu sitio web cuando esta se basa de artas lineas de Javascript tradicional." no tiene nada que ver! pff, ya no respondo más mensajes porque no merece la pena ! eso de que se necesita jQuery para un alto rendimiento en tu sitio web... me quedo sin comentarios. Saludos.

Saludos.

Tampoco hay que ponerse así, madre mía, la que estáis liando. Joaquin simplemente dice que es indispensable utilizar jQuery para alguien que esté programando 100 años y esté harto de repetir siempre el código, mi profesor, lleva 20 años programando, y da igual el lenguaje (domina más de 20 lenguajes diferentes) vaya al lenguaje que vaya, lo primero que hace es buscar un buen framework. Yo aún estoy "harto", y mi opinión es programar el máximo sin frameworks, aprendes mucho más.

Noticias:

Autor Tema: ocultar div al hacer click fuera de el (Leído 5811 veces)

lorddelioncourt

ocultar div al hacer click fuera de el

Comunidad PHPeros

ocultar div al hacer click fuera de el

ferdi342

Re:ocultar div al hacer click fuera de el

filiscode

Re:ocultar div al hacer click fuera de el

javipilo

Re:ocultar div al hacer click fuera de el

filiscode

Re:ocultar div al hacer click fuera de el

SoyJoaquin.

Re:ocultar div al hacer click fuera de el

filiscode

Re:ocultar div al hacer click fuera de el

SoyJoaquin.

Re:ocultar div al hacer click fuera de el

CarlosRdrz

Re:ocultar div al hacer click fuera de el

filiscode

Re:ocultar div al hacer click fuera de el

Warlox

Re:ocultar div al hacer click fuera de el

Physlet

Re:ocultar div al hacer click fuera de el

lorddelioncourt

Re:ocultar div al hacer click fuera de el

rulo

Re:ocultar div al hacer click fuera de el

Animus

Re:ocultar div al hacer click fuera de el