Sort and edit tables in javascript with EditableGrid

EditableGrid is an open source JavaScript library that allows us to convert a normal html table in a table and sorteable dynamic publishing. EditableGrid is focused on simplicity: Only a few lines of code can be put into operation.

Key Features

  • Loads a grid from an XML or adapted to existing HTML table.
  • It is easy to use and integrate into existing web applications
  • Each column can be defined as a string, integer, double, boolean, url, email, or date
  • Can modify the contents of each cell, according to the column type (for example, a checkbox for a boolean)
  • To sort the columns according to their types, by clicking on the column header
  • Insert and delete rows
  • It can be integrated with Open Flash Chart, to make plots of the data (which are dynamically updated when you edit the data)

Demo | EditableGrid (Live Demo)
Download | EditableGrid

Seen in Baluart

Share



Generating particles with HTML5

I've run into a great visual example showing potential of the new HTML5. The example shows a system of particles that can be customized by adjusting light infinite values ​​defining the color, size, amount and type of motion of the particles.

generando-particulas-html5

You can even move the whole particle dragging with the mouse.

Web: www.mrspeaker.net

Seen in wwwhatsnew.com

Share



Show ajax loading correctly

I read some advice, "tips", highly recommended to visually when reporting on ajax actions. The main idea is to help users easily identify the application that is what is happening in the website and prevent mistakes while using the application.

consejos al carga ajax

You can read the article in www.elwebmaster.com

Share



Sunday Morning, adds an instant translator in your site

Sunday Morning is a plugin for JQuery that using Google Translator lets you add floating menus specific words and translations on the items you select. You can even translate an entire Web page.

traductor

Sunday Morning lets you work in different ways: including a menu language options, translating word for word, allowing your users to enter text to be translated or via a bookmarklet with which access to localized versions of any website.

The drawback of these systems is dependent on the quality of automatic translator which is based on, in this case google translator .

Web: http://sundaymorning.jaysalvat.com/

Seen in: www.webmasterlibre.com

Share



Services reports and free charts

  • Geonames is a geo-database reverse would be interesting to combine it with this reverse geo tutorial with Google Maps API
  • I have been trying, and I highly recommend the new Google Charts API , simple, free by clicking, relaxed for the server, and for the whole family.
    chart
  • If you just in creating graphics, the Canvas in general, you might be interested this drawing library jQuery Canvas
  • For that matter ... Canvas also a mixture of the two, jQuery Chart - jQuery Plugin for Canvas Charts
  • CSS Text Wrapper allows you to create paragraphs of text that do not follow a square pattern, but adapted to almost anything you can think of. That if, at the cost of very heavy code.


Source: www.propiedadprivada.com

Share



IE6 transparent PNG with DD_belatedPNG

Something quite common with ie6 transparent PNGs is not displayed correctly. Thanks to DD_belatedPNG we can forget about most issues that cause us within seconds.

It is fairly simple to implement.

<!--[if IE 6]>
<script src="DD_belatedPNG.js"></script>
<script>
DD_belatedPNG.fix('.png_bg'); //EXAMPLE
</script>
<![endif]-->

Personalmente he probado muchísimos “png fix” y el actual es el único que ha cumplido medianamente con mis espectactivas. Su peso es de ~7kb comprimido, vistas al alternativas y los resultados nada mal.

Algunas de las cualidades de DD_belatedPNG son:

  • Emplear PNG de 24-bit con transparencia como fondo mediante la propiedad background-image de CSS
  • Posicionar esas imagenes mediante background-position o repetirlas con background-repeat
  • No usa AlphaImageLoader con lo que no encontraremos problemas con el z-index
  • Responde a element.style y a la pseudoclase :hover
  • Es muy sencillo de implementar y pesa muy poco

Web : http://dillerdesign.com/

Share



Pirobox – Jquery Plugin para simular Lightbox

Pirobox es un plugin de JQuery que permite crear galerías de imágenes transitables con el efecto lightbox.

Pirobox, ejemplo theme blanco.

Pirobox, ejemplo theme blanco.

Lo he utilizado en varios proyectos, es sencillo de utilizar y bastante personalizable. Trae por defecto 2 estilos, en blanco y en negro. Además permite tener dentro o fuera la navegación entre las diferentes imágenes de la galería. Personalmente le encuentro dos inconvenientes, su peso (14Kb pack) y la cantidad de código necesaria para organizar las galerías.

Web : www.pirolab.it

Share



Easy Tooltip, plugin de jquery

EasyTooltip es un plugin para JQuery muy simple y sobre todo muy ligero para añadir tooltips a tus diseños web.

Para los que no sepan que es un tooltip, decir que es información que se despliega al pasar el ratón por encima de un link.

Solamente pesa 2kb sin comprimir y comprimido con Online YUI Compressor menos de 1kb.

Pluging JQuery Easy Tooltip

Las opciones de EasyTooltip son pocas pero funcionales : D

  • xOffset - Indica la distancia del eje x a la que se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 10 .
  • yOffset – Indica la distancia del y a la se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 25 .
  • tooltipId – Si deseas asignar un identificador a tu tooltip puedes añadírselo. Así podrás tener varios tooltips en la misma página y con estilos diferentes añadiendo definiciones css al identificador en cuestión.. El valor por defento es “easyTooltip” .
  • clickRemove – Por defecto el tooltip se oculta cuando dejamos de seleccionar el elemento pero también podemos agregar la opción de que desaparezca al clickar sobre el elemento. El valor por defento es false .
  • content – Por defecto EasyTooltip captura el contenido del atributo title del elemento. Para asignarle un contenido personalizadebemos añadir la opción al llamar al tooltip. Usa esta opción para personalizar el contenido del tooltip. El valor por defento es “” (vacío).
  • useElement – Se puede asignar contenido de una capa indicándole el identificador. Resulta muy útil cuando quieres añadir código HTML complejo. La mejor manera de usar esta opción es crear un elemento estático en HTML, ocultarlo con css (display:none;) y llamarlo desde el pluging.

Ahora toca verlo en acción :

Si deseas descargarlo puedes hacerlo desde la página oficial cssglobe.com o directamente clickando AQUÍ .

En mi juego Kobox he decidido cambiar mi antiguo tooltip “wz_tooltip” por EasyTooltip principalmente porque ahora utilizo JQuery , pesa solamente 1kb y es muy sencillo de adaptar.

He realizado unas cuantas modificaciones para adaptar el código a mis necesidades, podéis ver un ejemplo AQUÍ .

Share



Parámetros opcionales en javascript



Pirobox – Jquery Plugin para simular Lightbox

Pirobox es un plugin de JQuery que permite crear galerías de imágenes transitables con el efecto lightbox.

Pirobox, ejemplo theme blanco.

Pirobox, ejemplo theme blanco.

Lo he utilizado en varios proyectos, es sencillo de utilizar y bastante personalizable. Trae por defecto 2 estilos, en blanco y en negro. Además permite tener dentro o fuera la navegación entre las diferentes imágenes de la galería. Personalmente le encuentro dos inconvenientes, su peso (14Kb pack) y la cantidad de código necesaria para organizar las galerías.

Web : www.pirolab.it

Share



Easy Tooltip, plugin de jquery

EasyTooltip es un plugin para JQuery muy simple y sobre todo muy ligero para añadir tooltips a tus diseños web.

Para los que no sepan que es un tooltip, decir que es información que se despliega al pasar el ratón por encima de un link.

Solamente pesa 2kb sin comprimir y comprimido con Online YUI Compressor menos de 1kb.

Pluging JQuery Easy Tooltip

Las opciones de EasyTooltip son pocas pero funcionales : D

  • xOffset - Indica la distancia del eje x a la que se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 10 .
  • yOffset – Indica la distancia del y a la se va a posicionar el tooltip del puntero del ratón. (En píxeles). El valor por defento es 25 .
  • tooltipId – Si deseas asignar un identificador a tu tooltip puedes añadírselo. Así podrás tener varios tooltips en la misma página y con estilos diferentes añadiendo definiciones css al identificador en cuestión.. El valor por defento es “easyTooltip” .
  • clickRemove – Por defecto el tooltip se oculta cuando dejamos de seleccionar el elemento pero también podemos agregar la opción de que desaparezca al clickar sobre el elemento. El valor por defento es false .
  • content – Por defecto EasyTooltip captura el contenido del atributo title del elemento. Para asignarle un contenido personalizadebemos añadir la opción al llamar al tooltip. Usa esta opción para personalizar el contenido del tooltip. El valor por defento es “” (vacío).
  • useElement – Se puede asignar contenido de una capa indicándole el identificador. Resulta muy útil cuando quieres añadir código HTML complejo. La mejor manera de usar esta opción es crear un elemento estático en HTML, ocultarlo con css (display:none;) y llamarlo desde el pluging.

Ahora toca verlo en acción :

Si deseas descargarlo puedes hacerlo desde la página oficial cssglobe.com o directamente clickando AQUÍ .

En mi juego Kobox he decidido cambiar mi antiguo tooltip “wz_tooltip” por EasyTooltip principalmente porque ahora utilizo JQuery , pesa solamente 1kb y es muy sencillo de adaptar.

He realizado unas cuantas modificaciones para adaptar el código a mis necesidades, podéis ver un ejemplo AQUÍ .

Share



Parámetros opcionales en javascript

A diferencia de otros lenguajes javascript no posee la opción de crear funciones con parámetros con valores por defecto.
El asunto tiene un arreglo bastante “sencillo”.

La vía rápida es crear las funciones con la siguiente estructura :

function mi_funcion(parametro1, parametro2){
   //queremos que parametro1 tenga por defecto el valor 33
   parametro1 = parametro1 || 33;
   //queremos que parametro2 tenga por defecto el valor false
   parametro2 = parametro2 || false;
   // ... resto código ...
}

Si además deseamos controlar algunos valores que contienen las variables en determinados momentos como puede ser el valor ‘undefined’ podemos apañar el código anterior de la siguiente manera.

function mi_funcion(parametro1, parametro2){
   //queremos que parametro1 tenga por defecto el valor 33 pero que respete posibles valores undefined
   parametro1 = (typeof parametro1 == 'undefined') ? 33: parametro1 ;
   //queremos que parametro2 tenga por defecto el valor false
   parametro2 = parametro2 || false;
   // ... resto código ...
}

¿A quién no le gusta tener una función que le facilite las cosas?

//valores por defecto 
//valor (contiene el valor actual del parámetro), defecto (contiene el valor por defecto)
//quiero_null (especifica si deseamos controlar algo especial, en este caso el valor 'undefined' , 
//                posibles valores true o false, por defecto adquiere false)
function defecto(valor, defecto, quiero_null){
	quiero_null = quiero_null || false;   
	if (quiero_null){
		valor = (typeof valor == 'undefined') ? defecto : valor;
	}else{
		valor = valor || defecto;
	}	
	return valor;
}

El código se puede “comprimir” todavía más, personalmente prefiero conservar claridad antes que ahorrarme un par de bytes.
Apliquemos la nueva función para otorgar valores por defecto a los parámetros de nuestras funciones.


//valores por defecto 
function defecto(valor, defecto, quiero_null){
	quiero_null = quiero_null || false;   
	if (quiero_null){
		valor = (typeof valor == 'undefined') ? defecto : valor;
	}else{
		valor = valor || defecto;
	}	
	return valor;
}

//nuestra función con valores por defecto
function mi_funcion(parametro1, parametro2){
   //queremos que parametro1 tenga por defecto el valor 33 pero que respete posibles valores undefined
   parametro1 = defecto(parametro1, 33, true);
   //queremos que parametro2 tenga por defecto el valor false
   parametro2 = defecto(parametro2 , false);
   // ... resto código ...
}

Share



Enviar un formulario desde una imagen o link con javascript

Supongamos que deseamos enviar un formulario pero deseamos hacerlo en vez de desde el típico botón submit (TYPE=”submit”) desde un enlace o una imagen.

Desde un enlace :

<form action="dondequierasir" method="post"> 
<input name="texto_1" type="text" />
//indicamos la acción de enviar el formulario
<a href="javascript:document.nombre_formulario.submit();">Enviar formulario</a>
</form>

Desde una imagen :


<form action="dondequierasir" method="post"> 
<input name="texto_1" type="text" />
//añadimos al evento onClick la acción de enviar el formulario
<img onclick="javascript:document.nombre_formulario.submit();" src="ruta_imagen" alt="" />
</form>

Share