Interesante librería que he descubierto gracias a q-interactiva 😉
Sirve para detectar los eventos de touch, drag, swipe, etc… *todos* los dispositivos (escritorio, iPad y otras tabletas, móviles…), y parece que funciona muy bien 🙂
http://eightmedia.github.io/hammer.js/
Funciona como plugin de jQuery o de forma independiente y pesa ná y menos 🙂
Si queremos detectar el click en alguna parte de nuestra ventana en un iPad, no nos funcionará el evento click normal, sino que hay que escuchar el touch.
Para simplificarlo en una línea podemos hacer esto, y en cada dispositivo ya cogerá el que le corresponda:
var clickEvent = ('ontouchstart' in document.documentElement) ? 'touchstart' : 'click'; jQuery("body").bind(clickEvent, funcionClick); |
Estoy trasteando un poco y las transformaciones 3D que permiten las CSS3 y jugando un poco con la posición del cursor.
He utilizado este plugin de jQuery de Rico Sta. Cruz que facilita las transformaciones 3D
Básicamente capturo la posición del ratón cada vez que se mueve y hago el cálculo del ángulo.
$(document).bind("mousemove", (function(e){
mouseX = e.pageX;
mouseY = e.pageY;
})); |
Y en iPad simulo la posición del cursor con la inclinación del dispositivo. Sorprendentemente va muy fluido!! 🙂
// En iPad la rotacion la determina la inclinacion del dispositivo
window.addEventListener("deviceorientation", function(e) {
mouseX = $(document).width()*0.5 + e.beta*10;
mouseY = $(document).height()*0.5 - e.gamma*5;
}, true); |
He encontrado este plugin de jQuery para hacer el típico scroll que desaparece cuando no se está usando. Sobre todo mola porque es super fácil de usar y de tunnear 🙂
http://areaaperta.com/nicescroll/demo.html
jQuery(".contenedor").niceScroll({cursorwidth:"8px", cursoropacitymax:0.5}); |
A veces las CSS te dan alegrías como esta. Si queremos que no aparezca la barra de scroll en nuestra página es tan sencillo como crear un estilo con overflow:hidden:
.no_scroll{ overflow:hidden; } |
y asignarselo al body con jQuery:
$("body").addClass("no_scroll"); |
Luego para que vuelvan a aparecer:
$("body").removeClass("no_scroll"); |
Esto me ha resultado muy útil en una página con un lightbox que al estar visible, no quería que el fondo reaccionase a la rueda del ratón. Cuando muestro el lightbox bloqueo el scroll y cuando se cierra lo vuelvo a activar 🙂
Cuando tratamos de cargar imágenes o xmls de otros dominios, nos encontramos con el problema de que por seguridad no es posible hacerlo directamente. Si tenemos acceso al otro dominio, podemos usar el “crossdomain.xml”, pero si no, podemos recurrir a un proxy.
Para entenderlo mejor, aquí hay un tutorial muy explicativo.
La forma de saltarse el problema es cargar las cosas con un php intermedio que se encuentra en nuestro servidor (proxy), y que sencillamente nos devuelve lo que le hemos pedido en el formato que corresponde. Así, con este php en nuestro servidor (proxy.php):
<?php header("Access-Control-Allow-Origin: *"); if (isset($_GET['url'])) { $url = urldecode($_GET['url']); } else { die('error=1'); } $ext = pathinfo($url, PATHINFO_EXTENSION); switch ($ext) { case "jpg": header('Content-Type:image/jpeg'); readfile($url); break; case "gif": header('Content-Type:image/gif'); readfile($url); break; case "png": header('Content-Type:image/png'); readfile($url); break; default: header('Content-Type:text/html; charset=utf-8'); readfile($url); break; } ?> |
En lugar de llamar a:
http://www.otrodominio.com/imagen1.jpg |
Lo haremos a:
http://www.midominio.com/proxy.php?url=http://www.otrodominio.com/imagen1.jpg |
Y si queremos cargar un HTML completo de otra página, solo tenemos que tener cuidado si lleva variable en la url:
var proxy = 'proxy.php?url=' + encodeURIComponent('http://www.otrodominio.com/search.php?q=programacion+as3'); //Para evitar la ? jQuery.get(proxy, resultadosOk); // Formateo el resultado function resultadosOk(data) { } |
De esta manera nos saltaremos el problema del sandbox 🙂
