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
Si hace poco comentaba el tema de Web SQL Database de HTML5, ahora encuentro un plugin para jQuery que nos facilita esta labor.
$.jStorage.set(key, value)
value = $.jStorage.get(key)Vía / Script & Style
Un sencillo script realizado con jQuery que nos permite cargar contenido cuando llegamos al final del contenido mediante el scroll. Algo parecido os presenté hace ya tiempo, pero sin uso de librerías. En este caso, jQuery reduce el código para implementarlo.
Es importante recordar que el contenido importante no se debería cargar mediante Ajax, y si se hace así es necesario ofrecer una alternativa clásica.
Load Content While Scrolling With jQuery
Vía / Ajaxline
Hace ya tiempo escribà en display: NONE cómo hacer que el texto se autocompletara en una caja de texto según se fuera escribiendo en ella. En esa entrada comentaba que la obtención de los datos, que era mediante Javascript, se podÃa realizar mediante AJAX. Hoy vamos a explicar cómo se harÃa esa llamada mediante AJAX.
Read More “AJAX paso a paso: autocompletado en cajas de texto”
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.
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).
Ya hace tiempo hablamos de una librerÃa 3D en Javascript, ahora se trata de otra librerÃa que trata elementos como puntos y trabaja sobre ellos.
Tan solo habrá que incluir la librerÃa y una capa que funciona como tapiz para que se pueda empezar a usar. Se pueden realizar rotaciones, traslaciones y escalas.
JS3D
Ejemplo
VÃa / dzone
Una interesante lista de plugins para usar en jQuery, organizado por temas:
37 More Shocking jQuery Plugins
Vía / aNieto2k