jCryption: encriptación mediante javascript

ByLuis

jCryption es una librería javascript que utiliza jQuery y que nos permite encriptar los datos de un formulario sin necesidad de utilizar SSL. Para ello utiliza la encriptación del algoritmo de clave pública de RSA.
Muy útil para aquellos que no puedan disponer de conexión SSL.
jCryption
Vía / DZone

Similar Posts

Popcorn.js librería Javascript que permite sincronizar vídeo y contenido en HTML5

ByLuis

Popcorn.js es una librería que permite sincronizar la etiqueta <video> de HTML5 con contenido que deseemos mostrar. Para ello utiliza las propiedades, métodos y eventos nativos de HTMLMediaElement. Además ofrece un sistema de plugins desarrollados por la comunidad:

document.addEventListener("DOMContentLoaded", function () {
      // Create a popcporn instance by calling Popcorn("#id-of-my-video")
      var pop = Popcorn("#video");
      // play the video right away
      pop.play()
      // add a footnote at 2 seconds
        .footnote({
          start: 2,
          end: 6,
          text: "This footnote is the stepping stone of progress!",
          target: "footnotediv"
        });
    }, false);

Podéis ver algunos ejemplos bastante interesantes. Una librería muy útil para presentaciones y vídeos corporativos.

Popcorn.js

| |

HTML5 Boilerplate

ByLuis

HTML5 Boilerplate is the professional badass’s base HTML/CSS/JS template for a fast, robust and future-proof site. After more than two years in iterative development, you get the best of the best practices baked in: cross-browser normalization, perfo …

Post original

FancyBox: zoom de imágenes mediante Javascript

ByLuis

Buen script creado en jQuery que permite añadir zoom a imágenes. Está testado en IE6, IE7 y Firefox. Entre las características muestra en una ventana lightbox la imagen en un tamaño mayor, pudiendo ajustarse al tamaño de la ventana y mostrando un marco alrededor de la imagen. Además permite mostrar un grupo de imágenes de forma común.

fancybox.png

Un ejemplo de uso sería el siguiente:

$(function() {
$("div#test_zone a").fancybox();
});

FancyBox

JS Bin: edita, testea y haz debug de Javascript online

ByLuis

JS Bin es una aplicación que nos permite crear nuestros scripts y testearlos o hacerles debug de forma colaborativa. Su interfaz es muy sencilla, consta de tres pestañas: javascript, el html en el que se incluye el javascript y la salida del HTML y el Javascript.

Además, permite añadir librerías javascript con jQuery o YUI, y exportar el trabajo a una URL propia.

JS Bin

Vía / WebAppers

Flashing de elementos con Mootools

ByLuis

Una librería para MooTools que permite realizar flash en los elementos. Permite indicar el color de origen, final, el número de repeticiones y el tiempo del efecto y la posibilidad de incluir propiedades al elemento (por ejemplo backgroud-color).

Su uso es sencillo y nos ofrece ejemplos de cómo utilizarlo:

/* flash on click */
$('flash-link').addEvent('click', function () {
$('flash-me').flash('#fff','#fffea1',5,'background-color',500);
});
/* flash on ajax complete */
$('flash-link-ajax').addEvent('click', function () {
//make the ajax call
var req = new Request({
method: 'get',
url: 'element-flashing.php',
data: { 'do' : '1' },
onRequest: function() {  },
onComplete: function(response) {
$('flash-me-ajax').set('text', response).flash('#fff','#fffea1',5,'background-color',500);
}
}).send();
});
/* flash on scroll completion */
$('flash-link-scroll').addEvent('click', function() {
var scroller = new Fx.Scroll(window, {
onComplete: function() {
$('scroll-to-me').flash('#fff','#fffea1',10);
}
}).toElement('scroll-to-me');
});

Eso sí, no olvidar que no hay que abusar de este efecto.

MooTools Gone Wild: Element Flashing

Vía / CSS Globe

Laboratorio: índice lateral con jQuery

ByLuis

Algo que me gusta bastante de algunos editores tipo Netbeans es que cuando hay algún error en una línea aparece un enlace en el lateral en la posición relativa de la línea respecto al alto del editor.

Algo parecido se me ha ocurrido hacer con jQuery, obtener los elementos cabecera (H1..H6) y crear un índice, y mediante estilos y jQuery repartirlos por el lateral de la ventana.

indice_lateral.png

El código es sencillito, recupero los elementos h1..h6, calculo su posición X y luego ordeno el array por esta posición, creo una lista ordenada y anidada con OLs y LIs y con CSS y Javascript coloco los elementos donde corresponde.

		  $(document).ready(function() {
var ids = 0;
var haches = new Array();
for (var i=1; i<7; i++) {
$('#content h'+i).each(function () {
if (!this.id) this.id = 'haches_'+ids++;
if ($(this).css('display') != 'none') {
haches.push(new Array($(this).offset().top, $(this).text(), this.id, i));
}
});
}
haches.sort(function(a,b){return a[0]>b[0];});
var ant = 1;
var html = '<ol class="indice">\n'
for(var i=0; i<haches.length; i++) {
if (haches[i][3] > ant) {
html += '\n<ol>';
} else if (haches[i][3] < ant) {
html += '\n</ol>';
}
html += '<li id="haches'+i+'" class="indice'+haches[i][3]+'"><span><a href="#'+haches[i][2]+'">'+haches[i][1]+'</a></span></li>\n';
ant = haches[i][3];
}
html += '</ol>\n';
$(document.body).prepend(html);
$('#indice').css('position: absolute; top: 0px');
var alto = $(window).height();
var max = $(document).height();
for(var i=0; i<haches.length; i++) {
console.log(parseInt(alto*haches[i][0]/max));
$('#haches'+i).css('top', parseInt(alto*haches[i][0]/max)+"px");
$('#haches'+i).css('left', ($(window).width()-50)+"px");
}
});

Ni que decir tiene que le faltan cosas por hacer, como por ejemplo moverlo según se mueve el scroll, pero para hacerlo en un rato no está tampoco muy mal. Los distintos tipos de enlaces a cabecera tienen sus estilos propios (feos pero propios) y cuando te pones sobre uno de ellos aparece el título enlazando al elemento en cuestión (esto también habría que refinarlo).

Ejemplo