Desactivar o Activar botón en formulario con JQUERY y Validate

Cuando validamos un formulario usando JQUERY y el plugin VALIDATE quizás necesitemos que el botón de ENVIAR esté desactivado hasta que el formulario esté completo y valide correctamente. Lo podemos lograr con el siguiente script:

<script type="text/javascript">

$('#formulario').bind('change keyup', function() {

    if($(this).validate().checkForm()) {

        $('#boton_enviar').attr('disabled', false);

    } else {

        $('#boton_enviar').attr('disabled', true);

    } });

</script>

 

Recuerden reemplazar #formulario por la ID de su formulario  y #boton_enviar por la ID de su botón.

 

 

El acordeón no acordeona

Terminé de diseñar un sitio, en el cual una de las secciones, más precisamente la de enlaces, posee un hermoso acordeón que permite dividir los mismos en categorías.  Como desarrollo basándome en Firefox, ya sabía que en ese navegador funcionaba.  Decidí probar el sitio en Chrome, y descubrí que el sitio se veía como corresponde.

Luego, y para finalizar el trabajo, le pedí a un amigo una amiga que probara el sitio en Internet Explorer.  Obviamente, y como te estás imaginando, el sitio explotaba completamente, todo se veía corrido y fuera de lugar y las tipografías horribles.

Comencé el proceso de hack de la hoja de estilos CSS.  Luego de media hora, el sitio se veía bien en todos los navegadores. Hasta que descubrí una falla, que se producía solo en IE y no en los demás.  El acordeón, (realizado en JavaScript mediante Mootools) no funcionaba.

Luego de revisar varias veces el código buscando algún conflicto con otro JS, probar una docena de modificaciones, volver a bajar el framework, etc, etc ,etc  pude dar con la falla que provocaba el error: el Document Type.  Alcanzó con cambiar el mismo por el que pongo a continuación para que todo funcionara a la perfección.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
 "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

códigos / entidades HTML

Muchas veces al crear o editar sitios nos encontramos con que ciertos caracteres no se representan como deberían, sobre todo vocales tildadas, la eñe, etc. Esto se debe a problemas con la codificación de los caracteres.

Una forma de solucionar esto es utilizar entidades html para representar los caracteres que traen problemas.
Veamos: Si tengo que mostrar la palabra esdrújula en vez de escribir dentro del código la letra con tilde como haríamos en un procesador de texto, vamos a reemplazar esa letra por un código que la represente. Con esto no se dejan dudas sobre cuál es el carácter que se debe mostrar al usuario en su navegador.

Ejemplo:   Esdrújula -> Esdr&uacute;jula

Luego, necesitamos saber cuales son los códigos de cada letra o caracter. Aquí dejo los más usados.
Entidades html

usando Tablas

Las tablas son una herramienta muy eficaz para presentar datos tabulados ( NO para maquetar, para eso existen las etiquetas DIV y SPAN). Una tabla consta de una o varias filas, cada una de las cuales consta, a su vez, de una o más celdas de datos.
Al definir una tabla, se debe pensar en primer lugar en las filas que la forman y a continuación en las columnas.
Creando una tabla

La etiqueta <table> encierra todas las filas y columnas de la tabla. Las etiquetas <tr> (del inglés “table row”) definen cada fila de la tabla y encierran todas las columnas. Por último, la etiqueta <td> (del inglés “table data cell”) define cada una de las columnas de las filas.Normalmente, algunas de las celdas de la tabla se utilizan como
cabecera de las demás celdas de la fila o de la columna.
En este caso, HTML define la etiqueta <th> (en inglés “table header cell”) para indicar que una celda es cabecera de otras celdas.

El atributo SUMMARY nos sirve para definir una descripción del contenido de la tabla.

<table summary = 'Esta es una tabla de ejemplo.'>
<th colspan='2'> Cabecera de la tabla </th>
<tr>
<td>Producto 1</td>
<td>Descripción 1</td>
<td>Precio 1</td>
</tr>
<tr>
<td>Producto 2</td>
<td>Descripción 2</td>
<td>Precio 2</td>
</tr>
</table>

Unión de Celdas

Con el atributo COLSPAN definimos el número de columnas que ocupa una celda.
Por ejemplo:
tablaA

<table>
<tr>
<td colspan="2">A</td>
</tr>
<tr>
<td>B</td>
<td>C</td>
</tr>
</table>

Con el atributo ROWSPAN definimos el número de filas que ocupa una celda.
Por ejemplo:
tablaB

<table>
<tr>
<td>A</td>
<td rowspan="2">B</td>
</tr>
<tr>
<td>C</td>
</tr>
</table>

Una vez creada la estructura semántica de la tabla, podemos darle el estilo que queramos mediante CSS.
Nos alcanzará con definir tres estilos, todos para selectores etiqueta, más o menos así:

table {
font:normal 76%/150% "Lucida Grande", "Lucida Sans Unicode", Verdana, Arial, Helvetica, sans-serif;
border-collapse:separate;
border-spacing:0;
border-width:1px 0;
margin:0 0 1em;
color:#000;
}
td {
padding:0.25em 0.5em;
text-align:left;
vertical-align:top;
padding:10px;
}
th {
font-weight:bold;
line-height:normal;
adding:0.25em 0.5em;
text-align:center;
background-color:#bbb;
border-width:0px;
padding:8px;
}

Luego, un último detalle, si queremos que al pasar el mouse sobre una celda esta cambie su color de fondo, podemos agregar este estilo:

td:HOVER { background-color:#f00; }
Si querés probar si entendiste qué es una tabla y como hacerla, intentá crear el HTML para la siguiente tabla:

ejercicio_tabla

Queda pendiente la parte de DISEÑO CSS para las tablas. Completo el post hoy a la noche o mañana :D