|

GlassBox: bordes transparentes mediante Javascript y CSS

ByLuis

GlassBox es una librería Javascript que permite añadir bordes transparentes, con transparencias y con sombreado. Es muy sencillo de usar, admite skins, bien documentado y funciona en IE 6, Firefox 2, Opera 9 y Safari 3.

glassbox.png

GlassBox

Vía / CSS Globe

Similar Posts

Evitar errores de producción debidos a Firebug

ByLuis

Aquellos que usamos Firebug para depurar nuestras aplicaciones, podemos cometer el error de dejar una traza (console.log())y que al subirlo a producción el usuario tenga un error de Javascript. Para evitar esto, podemos incluir en nuestro script lo siguiente:

if(!window.console) {
window.console = {
log: function() {}
}
}

Visto en este ejemplo

Introducción a JSON

ByLuis

JSON (JavaScript Object Notation) es un formato para intercambiar datos sencillos, entendiendo como sencillos el texto, los números y los valores lógicos, pudiendo estar organizados en estructuras.

La información en JSON se envia mediante un objeto, el cual está formado por pares atributo–valor. El atributo es un identificativo, y el valor puede estar formado por texto, números, valores lógicos (true o false), el valor vacío (null), otros objetos o arrays. Por ejemplo, un objeto puede tener sus propiedades de texto, de números, una propiedad que tenga un array de números y una propiedad que tenga un objeto parecido a sí mismo.

Read More “Introducción a JSON”

| |

Laboratorio: listas con descripción en HTML

ByLuis

Muchas veces el diseño que creamos nos hace usar listas no ordenadas, las cuales queremos que tengan descripción, pero por la falta de espacio, queremos que esta ocupe poco espacio.

lista-descripcion.png

Para crear este efecto, usaremos una lista y una capa por cada descripción que queremos mostrar, a parte de un script que mostrará la descripción cuando pasamos el ratón sobre el elemento de la lista.

Read More “Laboratorio: listas con descripción en HTML”

Márgenes redondeados mediante CSS

ByLuis

borde-redondo.gif Seguimos con bordes redondeados.
Siempre que añadimos imágenes en nuestra página web, el texto cuando se ordena alrededor de ella lo hace tomándola como una caja, lógicamente, porque es así su forma real. Pero, ¿qué pasa cuándo la imagen tiene transparencias y tiene un contorno no recto?, pues que da igual, sigue tomándolo como una caja. En estos casos, el efecto que causa es un poco feo, ya que queda mucho espacio sobrante.
En publicaciones de prensa, sobre todo en revistas, muchas veces aparece la imagen de un personaje y el texto se ordena según la figura de la persona. Aunque en prensa usan un diseño estático e introducen saltos de línea cuando les interesa, el efecto que crean es de mucha vistosidad.
Si estás interesado en esta forma de presentación, puedes ver en couchfort cómo lo hacen. Debido a que la explicación quizás no sea suficiente para algunas personas, en Sentido Web vamos a incluir un howto que explique cómo hacerlo paso a paso.
Vía / del.icio.us

jQuery 1.3

ByLuis

Leo en aNieto2K que ha salido a la luz la versión 1.3 de jQuery. Entre las novedades nos encontramos con un nuevo selector de elementos (Sizzle), delegación de eventos, el elemento Event, inyección HTML reescrita.
Andrés lo cuenta muy bien en su blog.
jQuery 1.3
Vía / aNieto2k

inlineEdit: editor de contenidos con Mootools

ByLuis

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