Foros del Web » Programando para Internet » Javascript »

Boton cerrar en banner flotante

Estas en el tema de Boton cerrar en banner flotante en el foro de Javascript en Foros del Web. Hola muy buenas! tengo un problema con mi boton cerrar para un banner flotante y consiste en que debo hacer clic dos veces para que ...
  #1 (permalink)  
Antiguo 05/09/2011, 04:50
 
Fecha de Ingreso: septiembre-2011
Ubicación: Madrid
Mensajes: 3
Antigüedad: 10 años, 9 meses
Puntos: 0
Pregunta Boton cerrar en banner flotante

Hola muy buenas! tengo un problema con mi boton cerrar para un banner flotante y consiste en que debo hacer clic dos veces para que se cierre y en el primer clic me manda la página para arriba!!!! no se que puede estar pasando!

os pongo codigos!

<script language="JavaScript">
function hide(fixme) {
var state = document.getElementById(fixme).style.display;
if (state == 'block') {
document.getElementById(fixme).style.display = 'none';
} else {
document.getElementById(fixme).style.display = 'block';
}
}
</script>


HTML

<div style="height: 120px; width: 100%;" id="fixme">
<div id="fermer" style="text-align:right; width:100%"><a href="#" onclick="hide('fixme');">Fermer</a></div><div align="center" style="float:none; text-align:center; background:#FFF; position:fixed; bottom:0; width:100%"><img src="../images/autre/catfish_rentree_01.jpg" height="92" border="0" align="middle" /></div></div>


INSISTO! el codigo, salvo por el error de los dos clics funciona!

Si alguien puede ayudarme le estaria eternamente agradecido!
  #2 (permalink)  
Antiguo 05/09/2011, 07:16
Avatar de Naahuel  
Fecha de Ingreso: marzo-2011
Ubicación: localhost
Mensajes: 796
Antigüedad: 11 años, 3 meses
Puntos: 192
Respuesta: Boton cerrar en banner flotante

Te explico lo que está sucediendo.

Primero, tu elemento no tiene explícito el estilo display:block. De forma que esto:
Código Javascript:
Ver original
  1. var state = document.getElementById(fixme).style.display;

No devolverá block la primera vez. La segunda si, porque en tu condición se lo asignás en caso de no tenerlo!
Código Javascript:
Ver original
  1. if (state == 'block') {
  2.   document.getElementById(fixme).style.display = 'none';
  3. } else {
  4.   document.getElementById(fixme).style.display = 'block';
  5. }

¿Se entiende?

Podés solucionar eso poniendo el display:block explícito en e tu elemento:
Código HTML:
Ver original
  1. <div style="height: 120px; width: 100%; display:block;" id="fixme">....</div>

Respecto a lo segundo (Que la página se va para arriba) es más que normal. Es porque estás usando un anchor (<a>) y se está comportando como debe. Para solucionarlo, asegurate de hacer return false; si no querés que haga su acción por defecto. Así:
Código HTML:
Ver original
  1. <a href="#" onclick="hide('fixme'); return false;">..</a>

Espero esté claro. Un saludo.
__________________
nahueljose.com.ar
  #3 (permalink)  
Antiguo 05/09/2011, 07:41
 
Fecha de Ingreso: septiembre-2011
Ubicación: Madrid
Mensajes: 3
Antigüedad: 10 años, 9 meses
Puntos: 0
Respuesta: Boton cerrar en banner flotante

Muchas gracias hermano!
funcionó a la primera!

Etiquetas: banner, close, flotante, hide, html, toggle
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 22:31.