|

Laboratorio: evitar el scroll en los textarea con jQuery

ByLuis

Una cosa que he visto en una web que estoy usando y que me ha gustado bastante es que el alto de los textarea se adapta al contenido para evitar que aparezca el scroll vertical.

En plan rapidito he hecho un script jQuery que realizaría esta función:

$(document).ready(function () {
$('textarea').keypress(function() {
var ta = $(this);
var fontSize = ta.css('font-size').replace('px', '')*1.3; // Le añado un ratio para que sea más eficiente
var taWidth = ta.width();
var taHeight = ta.height();
var content = ta.attr('value').split('\n');
var lines = content.length;
for (var i=0; i<content.length; i++) {
if (content[i].length * fontSize > taWidth) lines += parseInt(content[i].length * fontSize / taWidth);
}
var ratioHeight = taHeight / fontSize;
if (lines * fontSize > taHeight) ta.height((lines * fontSize)+150); // Le sumo 150 para darle un margen y que no se agrande constantemente
});
});

Similar Posts

Agiliza la carga de tu Javascript

ByLuis

Una serie de consejos para que la carga de los javacripts no se demoren demasiado y hagan al usuario esperar, algo que no suele gustar, sobre todo ahora que cada vez hay mas efectos y funcionalidades que hacen que las páginas tarden más en cargarse.

  • Usa la extensión para Firefox Web-developer Toolbar o OctaGate SiteTimer para ver que es lo que se está comiendo el ancho de banda.
  • Comprime tus scripts con Rhino, aunque es recomendable tener una versión para pruebas sin comprimir ya que mirar un código comprimido es bastante complicado.
  • Situa el script al final del documento, así no habrá que esperar a que se cargue el script para ver el contenido de la página.
  • Carga los scripts cuando realmente los necesites: 
function $import(src){
var scriptElem = document.createElement('script');
scriptElem.setAttribute('src',src);
scriptElem.setAttribute('type','text/javascript');
document.getElementsByTagName('head')[0].appendChild(scriptElem);
}
// import with a random query parameter to avoid caching
function $importNoCache(src){
var ms = new Date().getTime().toString();
var seed = "?" + ms;
$import(src + seed);
}

Eso sí, retrasa la ejecución de los scripts para que de tiempo a cargarse.

  • Cachea tus scripts, cámbialo a un fichero php y modifica el header para que tenga caché.

Speed Up Your Javascript Load Time

Vía / dzone

|

PHP-Ext: librería PHP para Ext JS

ByLuis

PHP-Ext es una librería open source que nos permite potenciar la capa UI de Javascript en nuestras aplicaciones. Para ello nos ofrece una serie de librerías (compatibles con PHP 4 y 5) para integrar Ext JS en nuestro sistema. Funciona como un mapeado en clases de la librería JS.

Entre las posibilidades que ofrece nos encontramos con la creación de formularios, combos, grids o menus. A parte ayuda a la comunicación entre el cliente y el servidor mediante JSON y XML.

Un ejemplo de uso sería el siguiente:

<?php
header("Content-type:text/javascript");
include_once("../../php-ext/php-ext.php");
include_once(NS_PHP_EXTJS_CORE);
include_once(NS_PHP_EXTJS_PANELS);
$p = new ExtPanel();
$p->Title = "My Panel";
$p->Collapsible = true;
$p->RenderTo = Javascript::variable("Ext.get('content-box')");
$p->Width = 400;
$p->Html = Javascript::variable("Ext.example.bogusMarkup");
echo Ext::OnReady(
$p->getJavascript(false, "p")
);
?>

PHP-Ext

Vía / AjaxLine

Librería Javascript para crear un escritorio

ByLuis

Una buena librería Javascript para crear un entorno de escritorio en nuestra página web.
Permite crear ventanas, con sus opciones más comunes (maximizar, minimizar, mover, redimensionar, bloquear el tamaño, …). A parte una barra de tareas con las ventanas abiertas y un menú. Y por último la posibilidad de añadir iconos en el escritorio.
jsdesktop.png
Widget Environment
Vía / dzone

3D mediante Javascript

ByLuis

No sé si es por ser rebuscado o por otra cosa, pero me gusta hacer cosas con Javascript algo fuera de lo común, aunque no sirvan para mucho. Por eso, este script para crear render en 3D en tiempo real me ha parecido impresionante.
Mis conocimientos de 3D son los de una asignatura de la universidad, por eso quizás me dejo impresionar con poco, pero el modo de hacerlo, una vez que ves como es, te parece lo más sencillo del mundo.
3djavascript.png
Real-Time 3D in Javascript
Vía / Ajaxian

One Comment

Comments are closed.