Similar Posts
Crear nuestros propios checkboxes y radio buttons mediante CSS
A veces dependemos del navegador en aspectos de diseño, un caso bastante común es con los checkboxes y radio buttons, no son como nosotros queremos y difieren según el navegador que usemos.
Esto se puede solucionar mediante CSS, para ello deberemos crearnos una imagen que contenga todos los estados del botón (seleccionado, no seleccionado, con foco y sin foco). Como se puede apreciar, la imagen contiene todos los posibles estados uno debajo del otro, ya que mediante estilos, usaremos una porción de la imagen para mostrar el estado correspondiente.
Para poder realizar este efecto es necesario usar la etiqueta label, la cual hará referenia al checkbox o al radio button, los cuales son necesarios ocultar para poder sustituirlos por la imagen (que estará ligada al elemento label).
Tenemos estos elementos HTML:
<input type="checkbox" id="opc1"/><label for="opc1">Opcion 1</label>
Los estilos iniciales para el input y para el label son los siguientes:
input[type="checkbox"] {
visibility: hidden;
width: 0px;
height: 0px;
padding: 0px;
margin: 0px;
}
label {
padding-left: 20px;
height: 16px;
}
Y por último, los estilos para los distintos estados del input son los siguientes:
input[type="checkbox"] + label{
background: url("imagen.png") 0 0 no-repeat;
}
input[type="checkbox"]:focus + label{
background-position: 0 -16px;
}
input[type="checkbox"]:checked + label{
background-position: 0 -32px;
}
input[type="checkbox"]:checked:focus + label{
background-position: 0 -48px;
}
Styling Checkbox and Radio Graphics With Only CSS
VÃa / Digg
DocumentFragments en Javascript
Nunca se para de aprender, y de John Resig menos. DocumentFragments son contenedores ligeros que pueden almacenar objetos DOM de Javascript. Yo ni había oído hablar de ellos y la verdad es que su uso es sencillo y mucho más potente que trabajar con el DOM normalmente (de 2 a 3 veces más rápido).
El ejemplo que muestra John lo dice todo y muy fácil. Primero creamos unos elementos para luego insertarlos (de forma normal y con DocumentFragments):
var elems = [
document.createElement("hr"),
text( document.createElement("b"), "Links:" ),
document.createTextNode(" "),
text( document.createElement("a"), "Link A" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link B" ),
document.createTextNode(" | "),
text( document.createElement("a"), "Link C" )
];
function text(node, txt){
node.appendChild( document.createTextNode(txt) );
return node;
}
Y luego la inserción normal:
var div = document.getElementsByTagName("div");
for ( var i = 0; i < div.length; i++ ) { for ( var e = 0; e < elems.length; e++ ) { div[i].appendChild( elems[e].cloneNode(true) ); } }Y por último el nuevo método:
var div = document.getElementsByTagName("div");
var fragment = document.createDocumentFragment();
for ( var e = 0; e < elems.length; e++ ) { fragment.appendChild( elems[e] ); } for ( var i = 0; i < div.length; i++ ) { div[i].appendChild( fragment.cloneNode(true) ); }Resumiendo, mucho más eficiente y sencillo de usar. Seguro que para la próxima versión de jQuery nos ofrece esta implementación.
Floatutorial
Un impresionante tutorial que nos va enseñando paso a paso como posicionar elementos HTML con float y clear. Nos enseña con ejemplos:
- Información general, definición de conceptos, explicación de float y clear.
- Posicionamiento de una imagen a la derecha, añadiéndole márgenes y bordes.
- Posicionamiento de la imagen y su pie de foto, aplicando bordes.
- Crear thumbnails.
- Usar listas de elementos para crear botones “Anterior” – “Siguiente”.
- Usar listas de elementos para crear pestañas.
- Crear efecto de letra inicial de párrafo de tamaño superior al resto.
- Estilo de dos columnas.
- Estilo de tres columnas.
VÃa / Dzone
Ajax Fancy Captcha: ajax interactivo con jQuery
No soy muy amigo de los CAPTCHAS (aunque son necesarios) y menos aún si no son accesibles, pero no quita que este captcha sea interesante y que a alguien le pueda gustar.
El CAPTCHA funciona de la siguiente manera: aparece unas imágenes aleatorias y unas instrucciones que indican que una de las imágenes debes ponerlo en una capa.
Ajax Fancy Captcha – jQuery plugin
Vía / WebAppers
Recopilación de utilidades Javascript
Una interesante lista de utilidades Javascript, agrupadas por acciones sobre enlaces (buscar enlaces, ocultar visitados, eliminar redirecciones, …), interactuación con formularios (transformar POST en URLs, mostrar ocultos, …), uso de texto y datos (resaltar, ordenar tablas, …), reemplazar objetos (mostrar el texto alternativo de las imágenes en lugar de estas, quitar plugins, …), desarrollo web (shell, modificar estilos, …), validaciones (urls de imágenes incorrectas, validacion de HTML, …) y por último un grupo de utilidades varias (traducir la página, editarla, …).
Bookmarklets
VÃa / aNieto2K
Algunos scripts para jQuery
He encontrado en Script & Style algunos scripts/pluigns para jQuery que son interesantes:
- Linkselect: transforma elementos select en listas de enlaces con forma de select.
- URL parser: nos permite obtener datos de una URL: protocolo, query, puerto, …
- Virtual jQuery Keyboard: añade un teclado virtual a cajas de texto
- Word-counter for textarea: el título lo dice todo, cuenta las palabras que hay en un textarea
- Smooth popup: crear un popup no modal
- idTabs: ayuda a crear pestañas de forma sencilla
- dwFadingLinks: crea el efecto fadding en los links cuando se produce un onmouseover
- ColorPicker: selector de color