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

Patxi Echarte, 26. Feb, 2005, 5 Comentarios JavaScript

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. Devian 03. Nov, 2005 en 10:11 pm

    Impresindible para quienes estamos migrando los desarrollos a xhtml!

  2. Gerardo Ruelas 17. Ene, 2006 en 8:29 am

    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. Sebastian Castaneda morales 15. Mar, 2006 en 8:00 pm

    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. camelott 09. Ene, 2008 en 12:18 pm

    window.scrollTo(0,76)

    Esta función os puede ser muy útil

  5. Marcos 15. Oct, 2010 en 11:02 am

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