Outbook

HTML+CSS+JS, Accesibilidad, PHP y más

Datos de búsqueda

Archive for Diciembre, 2007

Javascript: Secciones desplegables

Fecha de publicación: 2007/12/29

He montado un ejemplo de secciones de página desplegables.

Al cargar la página esas secciones se pliegan automáticamente, y el encabezado que las precede adquiere forma de enlace para poder desplegarlas y plegarlas. Si Javascript no está disponible, no habrá enlace en el encabezado ni se plegarán las secciones.

El bloque de secciones es precedido por un menú con dos enlaces: uno para plegar todas las secciones y otro para desplegarlas todas. Este menú se inserta mediante Javascript, por lo que en ausencia de Javascript no se mostrará.

Su funcionamiento se ha comprobado en Internet Explorer (versiones 5.5, 6 y 7), Firefox 2.0.0.11 (Windows XP), Iceweasel 2.0.0.8 (Debian 4.0), Opera 9.25 (Windows XP), Opera 9.24 (Debian 4.0), Konqueror 3.5.5 (Debian 4.0) y Safari 3.0.4 (Windows XP).

Ejemplos

Ver ejemplos de funcionamiento:

Descarga

Descargar ejemplos (archivo ZIP)

Datos del artículo:

QTTabBar: añade pestañas a Windows Explorer

Fecha de publicación: 2007/12/24

QTTabBar añade funcionalidad de pestañas a Windows Explorer, algo habitual en navegadores pero no en aplicaciones de exploración de archivos. La única aplicación de ese tipo en la que lo había visto es Konqueror.

Parece que funciona para XP y Vista, necesitando en XP el .NET Framework 2.0.

Captura de pantalla de QtTab Bar

Descargar QTTabBar.

Datos del artículo:

QTTabBar: add tabs in Windows Explorer

Fecha de publicación: 2007/12/24

QTTabBar add tabs funcionality to Windows Explorer. Tabs are usual in web browsers, but not in file explorers (I’ve only seen it in Konqueror).

It works on XP and Vista. XP needs to install .NET Framework 2.0.

QtTab Bar Screenshot

Download QTTabBar.

Datos del artículo:

CSS3: target-new property

Fecha de publicación: 2007/12/22

The target-new CSS property allows the target of a link to be set to a new window or new tab in the browser. It is equivalent to the target HTML attribute.

It have three possible values

  • window: opens in new window.
  • tab: opens in new tabof browser (the most interesting usage).
  • none.

Example:

div p a {target-new: tab;}

The link which fits the selector will open in new tab.

Know more

  • Original article in spanish: CSS 3: propiedad target-new
  • Datos del artículo:

    Javascript: get page dimensions (width and height)

    Fecha de publicación: 2007/12/22

    In order to get the page height:

    document.body.scrollHeight;

    And in order to get the page width:

    document.body.scrollWidth;

    More comprehensive at Javascript Get Page Height With Scroll (Webdev Entry)

    Original article in spanish: Javascript: Halllar las dimensiones de la página (altura y anchura)

    Datos del artículo:

    • Etiquetas: ,
    • Publicado en categorías: Sin categoría
    • Comentarios desactivados en Javascript: get page dimensions (width and height)

    How to detect the Internet Explorer version in Javascript

    Fecha de publicación: 2007/12/22

    It’s very easy:

    var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 3; case 3.0:return 4; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; }}()||@*/0;

    /*@cc_on opens the conditional, while @*/ closes it. The code inside conditional comment is only read by Internet Explorer.

    The code inside conditional comment establishes that every Internet Explorer version returns a number. The 0 number is outside of the conditional comment, so that other browsers will take 0 value.

    If we want a desired function works only in Internet Explorer 6 and older we write a condition which requires an equal or lower to 6 value for the ieVer value:

    if (ieVer<=6) {executedFunction();}

    Know more

    Datos del artículo:

    Javascript: Halllar las dimensiones de la página (altura y anchura)

    Fecha de publicación: 2007/12/21

    Para hallar la altura:

    document.body.scrollHeight;

    Para hallar la anchura:

    document.body.scrollWidth;

    Más completo en Javascript Get Page Height With Scroll (Webdev Entry)

    Datos del artículo:

    • Etiquetas:
    • Publicado en categorías: Desarrollo web
    • Comentarios desactivados en Javascript: Halllar las dimensiones de la página (altura y anchura)

    Detectar la versión de Internet Explorer en Javascript

    Fecha de publicación: 2007/12/17

    Actualizado 2008-08-28: Actualizado para Internet Explorer 8 (funciona en la beta 2).

    Actualizado 2009-03-03: Incompatibilidad con IE6 XP SP3.

    Supersencillo:

    var ieVer=/*@cc_on function(){ switch(@_jscript_version){ case 1.0:return 3; case 3.0:return 4; case 5.0:return 5; case 5.1:return 5; case 5.5:return 5.5; case 5.6:return 6; case 5.7:return 7; case 5.8:return 8; }}()||@*/0;
    if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

    /*@cc_on abre el comentario condicional, y @*/ lo cierra. Lo que hay ahí dentro solo lo lee Internet Explorer.

    Dentro de la zona de comentario condicional se establece que cada versión de Internet Explorer retorne un número. El 0, que queda fuera del comentario condicional, sirve para el resto de navegadores.

    Si por ejemplo queremos que una determinada función funcione solo para Internet Explorer 6 y anteriores se le da una condición de que la ejecute solo para el valor de variable ieVer igual o menor que 6:

    if (ieVer<=6) {funcionEjecutada();}

    Internet Explorer 6 en XP SP3

    En esta configuración Internet Explorer 6 devuelve los mismos valores que Internet Explorer 7, por lo que este script pierde en gran medida su sentido.

    De todas formas se puede solventar añadiendo la siguiente línea:

    if(/MSIE 6.0/i.test(navigator.userAgent)) {ieVer=6;}

    Saber más

    Datos del artículo:

    CSS 3: propiedad target-new

    Fecha de publicación: 2007/12/05

    La propiedad target-new sirve para definir el destino del enlace a ventana nueva o a nueva pestaña (se podría decir que equivale al atributo target).

    Tiene tres posibles valores:

    • window: abre en una ventana nueva.
    • tab: abre en una nueva pestaña del navegador (quizá la utilidad más interesante de esta propiedad).
    • none.

    Un ejemplo:

    div p a {target-new: tab;}

    El enlace que corresponda al selector del ejemplo abrirá en una nueva pestaña.

    Saber más

    Datos del artículo:

    Previsualización de archivos PSD en Windows

    Fecha de publicación: 2007/12/05

    Con Photoshop CS3 los archivos PSD no muestran previsualización en el explorardor de Windows, como imágenes JPEG, GIF, PNG, etc. Pero existe una forma de que si aparezca esa previsualización.

    En primer lugar se mete la siguiente información en el registro de Windows:

    [HKEY_LOCAL_MACHINESOFTWAREMicrosoftWindowsCurrentVersionSharedDLLs]
    "C:\Archivos de Programa\Archivos Comunes\Adobe\Shell\psicon.dll"=dword:00000001
    

    [HKEY_CLASSES_ROOT.psdShellEx]

    [HKEY_CLASSES_ROOT.psdShellEx{BB2E617C-0920-11d1-9A0B-00C04FC2D6C1}] @="{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}"

    [HKEY_CLASSES_ROOTCLSID{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}] @="Photoshop Icon Handler"

    [HKEY_CLASSES_ROOTCLSID{0B6DC6EE-C4FD-11d1-819A-00C04FB69B4D}InProcServer32] @="C:\Archivos de Programa\Archivos Comunes\Adobe\Shell\psicon.dll" "ThreadingModel"="Apartment"

    Y se copia el fichero psicon.dll a la carpeta "C:Archivos de ProgramaArchivos ComunesAdobeShell".

    Tanto en el texto para el registro de Windows, como en la ruta para el archivo psicon.dll recuerda cambiar la letra de la unidad si tu Windows está instalado en una unidad distinta de C.

    Los archivos necesarios pueden descargarse en Leemiblog.

    Datos del artículo:

    • Etiquetas: ,
    • Publicado en categorías: Sin categoría
    • Comentarios desactivados en Previsualización de archivos PSD en Windows

    Información del sitio