Boton cerrar en banner flotante

[idriss]

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!

[Naahuel]

Te explico lo que está sucediendo.

Primero, tu elemento no tiene explícito el estilo display:block. De forma que esto:

Código Javascript:

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:

if (state == 'block') {
  document.getElementById(fixme).style.display = 'none';
} else {
  document.getElementById(fixme).style.display = 'block';
}
 

¿Se entiende?

Podés solucionar eso poniendo el display:block explícito en e tu elemento:

Código HTML:

<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:

<a href="#" onclick="hide('fixme'); return false;">..</a>
 

Espero esté claro. Un saludo.

[idriss]

Muchas gracias hermano!
funcionó a la primera!