Respetar el maquetado de un TEXTAREA en un DIV con CSS

Problema:

tengo algunos formularios donde la gente escribe texto en un TEXTAREA y, lógicamente separa párrafos, líneas, identa o tabula, etc…. El lío viene cuando se graba dicho valor en una base de datos y, posteriormente, queremos mostrar dicho valor en pantalla, dentro de, por ejemplo, un DIV.

Entonces, como el texto explicitamente no contiene ninguna etiqueta HTML para maquetarla, si lo mostramos en el DIV saldrá una «masa» de frases en un sólo párrafo (no respeta los fines de línea \n ni los tabuladores \t).

Solución 1 (en javascript, a evitar):

Sencillamente cambiar el DIV por una etiqueta PRE, o bien, añadir PRE como único hijo directo de DIV (DIV > PRE > texto..), lógicamente usando javascript.

Solución 2 (en css):

Hacer que DIV se comporte como un PRE.

Para ello existe en FF2+, IE8:

• white-space: pre-wrap

En IE7- (no está implementado del todo white-space):

• white-space : pre
• word-wrap : break-word

Solución 3 (implementar 2 en jquery):

jQuery.fn.element2pre = function(){
return this.css((jQuery.browser.msie) ? {whiteSpace: 'pre',wordWrap : 'break-word'} : {whiteSpace: 'pre-wrap'})};

donde se puede aplicar, por ejemplo a un DIV del tipo:

$('div.textarea').element2pre();

Pestañas (Tabs) sin tocar HTML natural: ¿prueba superada?

Bueeno. Tengo mis pruebas en:

http://www.ita.es/jquery/tabs_only_css.htm

, donde prácticamente he utilizado el mismo HTML para las 8 combinaciones de Pestañas posibles. El resultado es compatible para IE6, IE7, FF y Opera. Hay varias advertencias a tener en cuenta para cuando tenga tiempo en implementarlas en un plugin Jquery (como es mi deseo):

• Sólo las versiones topRight, topLeft, leftTop y rightTop son 100% automáticas (con el CSS no depende del número de Pestañas).
• Las versiones leftBottom, rightBottom, bottomLeft y bottomRight dependen del número de pestañas y del ancho y/o alto que se les haya asignado (Esto huele a una implementación en Javascript posterior con ayuda de Jquery)
• Se ha utilizado formato QUIRK (ver doctype del HTML) en IE: es el mismo CSS para IE6 e IE7, pero en formato STRICT, sólo funcionaría con IE7 (el IE6 no he encontrado forma humana de controlarlo, por ahora…)
• La altura del cuerpo de las pestañas es fijo (1oopx) y aparece SCROLL cuando el contenido no cabe. En el caso de pestañas no líquidas, con anchura fija, se podría via jquery-script, calcular las alturas del contenido sin scroll automáticamente. Se me ocurren tres posibilidades:
  1. altura fija: definiendo la altura en pixels del cuerpo de pestaña, como está ahora.
  2. altura max: calculando la altura máxima, del cuerpo de pestaña, sin scroll y poniéndolo como fijo para todas las pestañas.
  3. altura auto: calculando la altura del cuerpo de cada pestaña, sin scroll.

 Con esto, los siguientes pasos serían: investigar un poco más para el caso IE6 en modo STRICT y crear un plugin para JQuery (¿con el css generado dinámicamente?). En ambos casos, creo que me tomaré un respiro, por ahora.

Cualquier comentario, sugerencia, ideas, críticas son bienvenidas.

Nuevo Reto: Pestañas (tabs) sin tocar HTML natural

No he empezado a resolver el anterior reto y ya estoy poniendo otro. En fin, el caso es que en Jquery existen algunos plugins (entre ellos el «oficial» UI tabs) que tratan el tema de creación de «pestañas» (tabs) a partir de una estructura de HTML (extraido directamente de su ejemplo) tal que:

<div id="example" class="flora">
    <ul>
       <li><a href="#fragment-1" mce_href="#fragment-1"><span>One</span></a></li>
       <li><a href="#fragment-2" mce_href="#fragment-2"><span>Two</span></a></li>
       <li><a href="#fragment-3" mce_href="#fragment-3"><span>Three</span></a></li>
    </ul>
    <div id="fragment-1">
        <p>First tab is active by default:</p>
        <pre><code>$('#example > ul').tabs();</code></pre>
    </div>
    <div id="fragment-2">2 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ...</div>
    <div id="fragment-3">3 Lorem ipsum dolor sit amet, consectetuer adipiscing elit, ...</div>
</div>

Pues bien, de manera personal diré que no me parece correcta. Esto es así porque…, a ver, de entre todos vosotros que levante la mano quien escriba ese código de forma habitual, al estructurar el contenido de una página. Yo desde luego no. Para mí, lo más natural, si no aplicas nada, sería escribir el ejemplo anterior como:

<div class="container">
    <div class="antes"> pre - aslkf alskf </div>
    <div class="tabs">
        <div class="header">Header one</div>
        <div class="body">1 Lorem ipsum dolor sit amet, consectetuer adipiscing...</div>
        <div class="header">Header two</div>
        <div class="body">2 Lorem ipsum dolor sit amet, consectetuer adipiscing...</div>
        <div class="header">And Header three</div>
        <div class="body">3 Lorem ipsum dolor sit amet, consectetuer adipiscing...</div>
    </div>
    <div class="despues"> post - aslkf alskfj añlsfj askl</div>
</div>

, donde, a lo sumo, los <div class=»header»> podrían sustituirse por <h2>, por ejemplo. Creo que el HTML anterior se aproxima más a lo que nos devolverá nuestro más entrañable CMS de nuestra Base de Datos.

Por ello, el nuevo reto consiste en, partiendo de este último código HTML, cómo «jugar» sólo con CSS para que dejemos todo preparado para crear pestañas (tabs) a su alrededor SIN CAMBIAR dicho HTML. Uf, casi nada…

Nuevo Reto: tablas con columnas y filas fijas…

Hace muy poco, en la lista de correos de Jquery, alguien lanzó un plugin para hacer que una simple tabla Html tenga su primera y última fila fija (independientes del scroll vertical) y la primera columna fija (independiente del scroll horizontal):

http://grover.open2space.com/files/dev/fixedheader/plugin2.htm

Pues bien, me parece que la solución adoptada es muy «farragosa»: añade 4 divisores y 4 tablas al Dom. Para mí, esa no es la solución. Mi propuesta o reto es buscar e investigar soluciones que permitan lo mismo usando sólo HTML, CSS y, con un poco de suerte, nada o algo de javascript. El objetivo es no añadir NADA al HTML. ¿lo conseguiré?.

La verdad es que parto de cierta experiencia que tengo respecto al uso en IE (en FF sé que es completamente diferente) pero, bueno, miraré qué soluciones han aplicado otros al respecto y los mostraré por aquí.

Cualquier ayuda vuestra es más que bienvenida… la suerte está echada.

[jquery plugin] una preview de «jquery.kikeGrid…»

 

Pues el tema, como comenté anteriormente es, con ayuda de los otros 2 plugins, realizar un GRID donde pueda, entre otras cosas, navegar vía TECLADO además de usar el ratón, y poder editar contenidos y enviar/recibir los cambios via AJAX. Todo ello está presente en el siguiente ejemplo (es una maqueta o “mock-up“):

http://www.ita.es/jquery/kikegrid.htm,

por supuesto es una versión pre-alfa pues, aunque funciona (y bastante bien, modestia aparte), le falta mogollón de cosas como actualizaciones, optimizaciones y demás. De todas formas es curioso que ya se puedan ver cosas que (corregirme si me equivoco) NO HE VISTO hechas por ahí fuera (ni siquiera en soluciones comerciales), al menos de una forma tan simple (como el uso del teclado, por ejemplo, para editar).

Aquí se juntan otros plugins de tipo “navegación” y “hover”. El primero permite movimientos y acciones con teclado+ratón y el segundo que cambie (se ilumine) la celda activa, enfocada, cambiada, etc… así como su fila, primera celda de fila, columna y primera celda de columna. Las soluciones que he visto de otros cambian drásticamente el HTML original, y además suelen ser muy lentos en su respuesta. Yo principalmente juego con el CSS original y con el uso racional de la librería jQuery sólo donde se requiera.

En el ejemplo se pueden ver los dos tipos de comportamiento que he contemplado:

• Comportamiento “conservativo” (lo he bautizado así, se aceptan sugerencias) : Primero navegas moviendo el puntero del ratón sobre las celdas o con las teclas Flecha, y luego editas una celda bien con doble click bien presionando la tecla INTRO (enter). Para terminar la edición se puede pulsar otra vez ENTER (graba cambios), ESCape (sale sin guardar cambios) o clicando en cualquier sitio externo (tampoco guarda cambios).
• Comportamiento “Hoja de cálculo” (tipo Excel): Primero debes clicar sobre una celda y luego usar a destajo las teclas de tipo FLECHA y escribir antes de cambiar de posición con dichas teclas.

Lo mejor es que lo probéis y me comentéis.Por cierto, los 2 plugins de comentarios anteriores se pueden acceder también desde la página oficial de plugins de jQuery, en la categoría de TABLEs.

[jquery plugin] jquery.grid.rowSizing

http://www.ita.es/jquery/jquery.grid.rowSizing.htm

Otro plugin para jquery con las siguientes características:

Hace que en la primera celda de cada fila se cree un botón (imagen «+» y «-«) con el comportamiento de expandir/colapsar las filas.

Es rápido incluso para tablas enormes (su utilidad, sobre todo, es para mostrar datos en Intranet).

En el caso de Internet Explorer, existe la posibilidad de realizar un movimiento/animación al expandir/colapsar las filas.

Se hace un uso extensivo de CSS, más que modificar el HTML original de la tabla.

Como en el anterior plugin, también queda mucho por hacer. Principalmente actualizarlo para la última versión de jQuery (> v.1.2.1) así como cambiar su dependencia del anticuado jQuery Interface a jQuery UI v.1.1 (saldrá el proximo 18 de Diciembre; la versión anterior 1.0 está llena de errores según comentan), por lo que habrá que esperar otro poquillo…

[jquery plugin] jquery.grid.columnSizing v.0.5

http://www.ita.es/jquery/jquery.grid.columnSizing.htm

Este es un primer plugin que realizé teniendo en mente una meta final: realizar un plugin jquery total, que convierta una simple tabla (TABLE) html en un GRID (tipo hoja de cálculo, editable). Esto último es importante porque todo lo que he visto hasta ahora por ahí fuera (corregirme por favor) son modificaciones bastante fuertes del código HTML original (las tablas se transforman en cientos de DIVs anidados o, en los mejores casos, en más de una tabla).

Las características principales de este plugin son:

Hace que las columnas de la primera fila (del encabezado o HEADER de la tabla) se cree una zona caliente (un DIV) en la parte izquierda de cada celda con un comportamiento de cambiar el ancho de las columnas arrastrando el puntero del ratón sobre dicha zona caliente como en cualquier aplicación.

Es rápido incluso para tablas enormes (su utilidad, sobre todo, es para mostrar datos en Intranet).

Si, en vez de arrastrar con el ratón, haces doble click sobre la zona caliente entonces dicha columna se colapsa (hasta su propiedad de mínima anchura); si se repite el doble click, entonces la columna vuelve a su anchura anterior

si está presente el plugin de Cookies, entonces la anchura de cada columna se preserva cada vez que se vuelva a cargar la página.

Queda mucho por hacer. Principalmente actualizarlo para la última versión de jQuery (> v.1.2.1) así como cambiar su dependencia del anticuado jQuery Interface a jQuery UI v.1.1 (saldrá el proximo 18 de Diciembre; la versión anterior 1.0 está llena de errores según comentan), por lo que habrá que esperar un poquillo…

Mis intenciones con este Blog…

Con este blog simplemente quiero compartir ideas, conocimientos y descubrimientos sobre tecnologías de programación en Web y, en especial, sobre Javascript (con la librería «jQuery» a la cabeza), HTML (XHTML), CSS y algo de ASP, ADO, Transact SQL (Server), etc…

Principalmente programo mi propio CMS (¿otro más?¿por qué?) y todas sus herramientas necesarias; siguiendo los estándares propuestos por W3C. A nivel profesional estoy comprometido con la Intranet de mi empresa así como con todos los proyectos Web relacionados.

En fín, que arranco ya…