Se trata de mostrar distintas capas (por ejemplo, noticias) en un mismo recuadro, usando un efecto de fading entre cada capa. Es necesaria la librerÃa de script.aculo.us para que funcione. Un código sencillo que nos permite hacer un fundido entre varias capas.
A CSS Crossfader Demo
Demo
VÃa / Ajaxian
Para aquellos que no sean hábiles en el diseño y necesiten de ideas para mejorar el aspecto de las tablas, existe una galería con diseños de tablas mediante CSS.
Hasta ahora hay un total de 71 diseños, que se pueden visualizar en la misma lista, no son screenshots, ni popups, ni enlaces a otras páginas, cuando queremos ver uno de los estilos, se recarga la página y muestra la lista con el estilo seleccionado. También hay una serie de tutoriales sobre tablas y CSS que nos pueden ser de utilidad. Cualquier ayuda siempre es bienvenida.
Vía / Digg
Una forma sencilla de mostrar las distintas formas de posicionamiento mediante CSS: position:static, position:relative, position:absolute y float.
Learn CSS Positioning in Ten Steps
Vía / Vecindad Gráfica
Aunque es más fácil hacer copy/paste de un script o simplemente usarlo, que ver cómo funciona por dentro, os recomiendo que le echéis un ojo a este script para crear pestañas mediante AJAX.
Si os fijáis, se trata de una lista ul que mediante estilos forma las pestañas. En cada uno de los elementos li hay un enlace a cada una de las páginas que queremos mostrar. También habrá un div que contendrá la página que queremos mostrar en su interior.
Lo más interesante para mà es que la idea que se suele tener de que AJAX tiene que apuntar a un script no es cierta, apunta a una url y obtiene el resultado, si es un script, el resultado que este devuelva, y si es una página HTML, el contenido de esta.
La segunda cosa que resaltarÃa es una forma de programar que me parece muy limpia, escribir el HTML sin Javascripts añadidos que son complicados de seguir (sobre todo eventos: onclick, onmouseover, …) y luego que el script general se encargue de modificar los elementos HTML como corresponda, en este caso coge los enlaces y les añade el evento onclick, el cual depende del contenido del atributo href y el atributo rel.
Ajax Tabs Content script
VÃa / Digg
Una lista bastante interesante de aplicaciones que nos pueden ayudar a realizar nuestros estilos. Organizado en diferentes categorÃas, nos podemos encontrar aquellas centradas en el tipo de letra, formularios, layouts, navegación, optimizadores y otras varias que no se pueden reunir en una categorÃa completa.
Entre la lista destacarÃa las siguientes:
VÃa / dzone
Aprovechando la versión 1.2.0 de Snippet Block, comparto cómo añadir números de línea al código formateado por highlight.js.
El desarrollador del plugin pasa de añadir esta característica a la librería, lo cual me parece muy bien, que cada uno haga lo que quiera con su código. Pero como tampoco hay eventos o algo que permita añadir características, es necesario “hackear” la función antes de su uso.
document.addEventListener( 'DOMContentLoaded', () => {
const prevHighligth = window.hljs.highlightBlock;
window.hljs.highlightBlock = block => {
const newline = '<span class="sw_new_line"></span>';
// Replace all without regex
block.innerHTML = block.innerHTML
.split( newline )
.join( '' );
prevHighligth( block );
if ( block.classList.contains( 'sw_show_line_numbers' ) ) {
block.innerHTML = newline +
block
.innerHTML
.replace( /\n/g, `\n${ newline }` );
}
};
} );¿Qué es lo que hace este código? Primero guarda el método original highlightBlock para usarlo posteriormente. Y luego se modifica el método para apadir una clase para mostrar los números de línea al principio del código y después de cada salto de línea.
Ahora toca explicar la parte CSS, para ello usaremos CSS counters.
pre code {
counter-reset: linenumber;
}
pre code .sw_new_line::before {
content: counter(linenumber, decimal-leading-zero);
counter-increment: linenumber;
padding-right: 15px;
font-size: 0.8em;
opacity: 0.6;
}En el caso de que tengamos que usar tablas, cuando realmente se trate de una tabla, es conveniente tener en cuenta una propiedad CSS poco utilizada que nos podrá permitir mejorar la velocidad de render de las tablas.
La propiedad es table-layout y nos permite indicar si queremos que la tabla se dibuje con unos anchos fijos o dependientes del contenido:
.fixed_table {
table-layout: fixed;
}
.auto_table {
table-layout: auto;
}El valor fixed nos permite dibujar la tabla de una forma más rápida, ya que el ancho de las celdas depende de las columnas y no del contenido de ellas. Por ello, al no tener que mirar toda la tabla para ajustar los anchos, el render se hace más rápido. Es bueno usarlo cuando se trata de tablas muy grandes y mejor si tienen un contenido muy parecido.
El valor auto es dependiente del contenido de las celdas, por lo que es necesario leer toda la tabla. Se recomienda usarlo cuando las tablas tiene contenido muy variable o cuando se trata de pocas filas.
Use the table-layout CSS property to speed up table rendering
Vía / Posh CSS