Javascript

Drag&Drop de elementos en una tabla

ByLuis June 30, 2009

Interesante Javascript que nos permite mover elementos (drag&drop) de las celdas de una tabla a otras, o incluso a otra tabla.

Drag and drop table content with JavaScript
Vía / Script & Style

Desarrollo web | Flash

Incluye sonido en tu web

ByLuis October 9, 2006

Creo que no es necesario decir que cualquier exceso es malo, y que tampoco hay que demonizar ni al Flash ni al sonido en una web (esto me cuesta decirlo, pero es cierto). Pero en el caso de que queramos incluir sonido a nuestra pÃ¡gina web y controlarlo mediante Javascript, si nos puede ser Ãºtil esta librerÃa.

Se trata de Javascript Sound Kit, una clase Javascript que envuelve a un objeto ActionScript, en el cual se carga el sonido, que puede ser controlado por Javascript. Su uso parece bastante sencillo:

var mysound = new Sound();
mysound.loadSound("sonido.mp3", true);
mysound.setVolume(30);

Para aquellos que quieran criticar el uso ya sea de Flash o de sonido en la web (tienen todo mi apoyo), quizÃ¡s les interese un ejemplo en el que puede ser Ãºtil, cuando tengo abierto GMail todo el rato, me avisa si llega un mensaje nuevo mediante un bip. Claro, que no lo necesito porque en Firefox tengo instalada una extensiÃ³n que ya hace eso, pero no todo el mundo usa Firefox y no todo el mundo que usa Firefox tiene instalada la extensiÃ³n para GMail.

Javascript Sound Kit

VÃa / menÃ©ame

Javascript

inlineEdit: editor de contenidos con Mootools

ByLuis December 5, 2007

inlineEdit2 es un editor de contenidos inline realizado con Mootools.

Su uso es muy sencillo, tan solo es necesario aÃ±adir el siguiente cÃ³digo para poder utilizarlo:

$('element').inlineEdit();

Lo mÃ¡s asombroso es su tamaÃ±o, 20k sin comprimir, y para los que estÃ©n deseando mirar su funcionamiento, aquÃ va el cÃ³digo:

var inlineEdit = new Class({
getOptions: function(){
return {
onComplete: function(el,oldContent,newContent){
},
type: 'input'
};
},
initialize: function(element,options){
this.setOptions(this.getOptions(), options);
if(!element.innerHTML.toLowerCase().match('<'+this.options.type)){
this.editting = element;
this.oldContent = element.innerHTML;
var content = this.oldContent.trim().replace(new RegExp("<br>", "gi"), "\n");
this.inputBox = new Element(this.options.type).setProperty('value',content).setStyles('margin:0;background:transparent;width:99.5%;font-size:100%;border:0;');
if(!this.inputBox.value){this.inputBox.setHTML(content)}
this.setAllStyles(element,this.inputBox);
this.editting.setHTML('');
this.inputBox.injectInside(this.editting);
(function(){this.inputBox.focus()}.bind(this)).delay(300);
this.inputBox.addEvent('change',this.onSave.bind(this));
this.inputBox.addEvent('blur',this.onSave.bind(this));
}
},
onSave: function(){
this.inputBox.removeEvents();
this.newContent = this.inputBox.value.trim().replace(new RegExp("\n", "gi"), "<br>");
this.editting.setHTML(this.newContent);
this.fireEvent('onComplete', [this.editting,this.oldContent,this.newContent]);
},
setAllStyles: function(prevel,el){
if(prevel.getStyle('font'))el.setStyle('font', prevel.getStyle('font'));
if(prevel.getStyle('font-family'))el.setStyle('font-family', prevel.getStyle('font-family'));
if(prevel.getStyle('font-weight'))el.setStyle('font-weight', prevel.getStyle('font-weight'));
if(prevel.getStyle('line-height'))el.setStyle('line-height', prevel.getStyle('line-height'));
if(prevel.getStyle('letter-spacing'))el.setStyle('letter-spacing', prevel.getStyle('letter-spacing'));
if(prevel.getStyle('color'))el.setStyle('color', prevel.getStyle('color'));
}
});
Element.extend({
inlineEdit: function(options) {
return new inlineEdit(this, options);
}
});
inlineEdit.implement(new Events);
inlineEdit.implement(new Options);

Algo que nos puede ser Ãºtil en lugares como wikis o parecidos.

inlineEdit 2

Javascript

CodePress: resalta código mediante Javascript

ByLuis September 27, 2007

CodePress permite resaltar el cÃ³digo de diversos lenguajes de programaciÃ³n en nuestras pÃ¡ginas web mediante Javascript. El cÃ³digo se puede modificar en tiempo real y permite entre otras el autocompletado de comillas, parÃ©ntesis y parecidos, la inclusiÃ³n de trozos de cÃ³digo (por ejemplo los parÃ©ntesis y llaves en una sentencia if) y shortcuts (por ejemplo mostrar entidades html).

Los lenguajes que interpreta son PHP, Javascript, Java, Perl, SQL, HTML y CSS. Y existen fallos detectados son que los nÃºmeros no cambian de tamaÃ±o ya que son imÃ¡genes y que el copy/paste falla en algunas ocasiones en Internet Explorer.
CodePress
VÃa / OpenSourceCommunity.org

Javascript

Carga asíncrona de scripts en Webkit

ByLuis September 24, 2010

Webkit está implementando en la última versión la carga de scripts de forma asíncrona, para ello hace uso de los atributos async y defer. Esta carga de scripts se realiza sin detener el renderizado del HTML y añade el evento onLoad para ejecutar un método cuando acabe de cargarse:

La diferencia entre async y defer es que async se ejecuta a la primera oportunidad después de que finalice la carga y antes de que se ejecute el evento load del objeto window, por lo que con bastante posibilidad el script se ejecute asíncronamente y no en el orden en el que se muestra en al página. Los scripts defer se ejecutarán en el orden en el que se indica en la página, pero empezará despues del parseo completo pero antes de que ocurra el evento DOMContentLoaded del objeto document.

Running scripts in WebKit

Vía / CSS-Tricks

Javascript

Javascript para realizar drag y resize

ByLuis March 17, 2008

Buen script que nos permite mover nuestras capas mediante drag&drop y cambiarlas de tamaño.

Funciona con posicionamiento relativo y absoluto de los elementos en la página. Además permite personalizar los estilos mediante CSS. No es obtrusivo. Es posible indicar tamaños máximos y mínimos para las cajas y es compatible con la mayoría de los navegadores.
DragResize
Vía / Ajaxline