Javascript

Selector de hora con Mootools

ByLuis November 19, 2007

Cada dÃa son mÃ¡s los scripts que se realizan con frameworks de Javascript, estos, al estar ayudados por las funcionalidades del framework, son mÃ¡s sencillos de desarrollar, lo que aporta mÃ¡s riqueza a la web2.0. En este caso se trata de un selector de horas, que mediante un reloj se puede seleccionar la hora, moviendo las manillas o indicando si queremos AM o PM.

El script es sencillo de usar e implementar, controla independientemente las manillas de las horas y los minutos, permite mover las manillas para indicar la hora y usa CSS sprits para mejorar la velocidad de carga.
NoGray Time Picker
VÃa / WebAppers

Javascript

Geolocalización por IP mediante Javascript y JSON

ByLuis April 13, 2009

Sencillo script que nos devuelve un JSON con la geolocalización según la IP, usando los datos sacados de iplocationtools.com:

function getLocation(){
script = document.createElement('script')
script.src = 'http://www.nitinh.com/ip_query.php?callback=initialize'
document.body.appendChild(script)
}
function initialize(obj){
document.getElementById('spanLocation').innerHTML = obj['City'] + ', ' + obj['RegionName'] + ', ' + obj['CountryName'];
}

IP Address Geolocation Javascript API : JSON

Vía / korayem

Javascript

Ejemplos de javascripts optimizados

ByLuis February 27, 2007

Si el otro dÃa os contÃ¡bamos cÃ³mo agilizar tus javascripts, hoy os hacemos referencia a ejemplos sobre esos consejos.
Aunque si soy sincero, no tengo muy claro que se gane mucho tiempo cargando dinÃ¡micamente los scripts y retrasando la ejecuciÃ³n para esperar a que se cargue. O si realmente hay diferencia, que no serÃ¡ mucha y menos con las velocidades que suele tener actualmente la mayoria de la gente, si merece la pena tanta cosa. Si el script lo cargamos inicialmente y luego lo utilizamos en todas nuestras pÃ¡ginas, la optimizaciÃ³n serÃa suficiente.
Yo creo que la mejor soluciÃ³n es no tirar tanto de librerÃas y crear los scripts necesarios para tu aplicaciÃ³n.
Speed Up Your Javascript, Part 2: Downloadable Examples!
VÃa / Dzone

Javascript

Calcular la distancia entre dos direcciones usando Google Maps

ByLuis April 17, 2009

Interesante script que puede ser bastante útil en muchas aplicaciones2.0 en la que el se requiere conocer la distancia entre dos direcciones, por ejemplo buscar usuarios que se encuentre cerca de donde tú vives.
El script accede a Google Maps (es necesario tener una key) y mediante las dos direcciones introducidas obtiene la latitud y la longitud de ambas, luego mediante la teoría del gran círculo obtiene la distancia entre ambas coordenadas.
How to calculate distance with javascript and Google Maps API
Vía / @quenerapu

Javascript

Incrustar un SVG dentro del HTML directamente

ByLuis June 8, 2016June 9, 2016

Lo bueno de los SVG es que puedes modificarlos mediante CSS directamente en el HTML, el único problema es que el SVG debe estar incrustado en el HTML, no mediante una imagen <img>, ni mediante la propiedad content de CSS.

Encontré un script muy bueno que te modifica una etiqueta img que contiene un SVG por su contenido SVG real. El problema viene cuando yo añado el SVG como una propiedad content:

.class {
  content: url('imagen.svg');
}

Para ello he modificado el script anterior para que coja la propiedad content de los selectores CSS que se indiquen y añada el SVG directamente al elemento:

jQuery(document).ready(function() {
  var replaceWithSVG = function(selector, url) {
    jQuery('').appendTo('head');
    jQuery.get(url, function(data) {
      // Replace image with new SVG
      jQuery(selector).prepend(data.replace(/<\?xml[^>]+>/, ''));
    }, 'text');
  }
  var selectors = ['.site-title a', '.btn-video']
  for(var i in selectors) {
    var selector = selectors[i];
    var url = window.getComputedStyle(
    	document.querySelector(selectors[i]), ':before'
    ).getPropertyValue('content');
    url = url.replace(/url\(["']?([^'"\)]+)["']?\)/, '$1');
    replaceWithSVG(selectors[i], url);
  }
});

Javascript

curvyCorners: esquinas redondeadas mediante Javascript

ByLuis September 5, 2006

Ahora que estÃ¡n tan de moda las esquinas redondeadas, vemos una librerÃa javascript que nos ofrece esta posibilidad sin tener que usar imÃ¡genes.
Tan solo identificando las capas que queremos modificar y ejecutando un pequeÃ±o script, redondearemos las esquinas de nuestras capas, ya tengan borde o imagen de fondo, mostrando ademÃ¡s efecto anti-aliasing.

Me parece que nos va a facilitar la vida a muchos.
curvyCorners
VÃa / Bitelia

AJAX | Especiales | Javascript | PHP

AJAX paso a paso: autocompletado en cajas de texto

ByLuis May 18, 2006

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.

Similar Posts