!DOCTYPE «Switch», document.body y document.documentElement

Navegando ayer por CSS Vault he visto una galería fotográfica implementada con CSS y JavaScript, que es lo que estaba buscando para alguna sección de esta web, como ocio/montaña.

Esta mañana me he puesto a ello y la he incorporado a uno de los posts de días anteriores, con la intención de comenzar a utilizarla en los posts en los que vaya a mostrar imágenes de excursiones o viajes.

He conseguido que funcione fácilmente en Mozilla y Firefox, salvando varios problemas que me ha causado el autop de WordPress. Sin embargo a la hora de probarlo en Explorer he visto como las imágenes ampliadas se me abrían siempre en la parte superior del contenido de la página, sin hacer caso a la posición de la barra de scroll.

Tras bastantes pruebas he encontrado, gracias a Google, que el problema se debía a que cuando el Explorer detecta una declaración de Doctype en la página, pasa a Strict Mode y determinados métodos de document.body pasan a document.documentElement.

Así por ejemplo, para calcular la cantidad de pixels de distancia con la parte superior de la página, en vez de utilizar document.body.scrollTop, habría que utilizar:

if (self.pageYOffset){ 
  // all except Explorer
  scrolTop = self.pageYOffset;
}
else if (document.documentElement && document.documentElement.scrollTop){ 
  // Explorer 6 Strict
  scrolTop = document.documentElement.scrollTop;
}
else if (document.body){ 
  // all other Explorers
  scrolTop = document.body.scrollTop;
}

Más información en:

Twitter Digg Delicious Stumbleupon Technorati Facebook Email

5 Respuestas para “!DOCTYPE «Switch», document.body y document.documentElement”

  1. Impresindible para quienes estamos migrando los desarrollos a xhtml!

  2. Hola, me llamo mucho la atencion tu galeria, es muy interesa, me gustaria saber si es posible, que me pudieras pasar el codigo, para hacer pruebas yo, o para implementarlo en mi pagina, ya que tengo una seccion de galeria, pero la que tu tienes me gusto mas. muchas gracias de antemano.

  3. Que tal, me Gusto mucho tu galeria , me podras pasar el codigo para implementarla en la pagina que estoy desarrolando?
    Ojala puedas pasarme el codigo, por que llevo mucho tiempo buscando una galeria.
    Gracias … espero respuesta

  4. window.scrollTo(0,76)

    Esta función os puede ser muy útil

  5. Muchas gracias por el código! me has quitado un buen dolor de cabeza mañanero 🙂 Un saludo