Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas
Mostrando entradas con la etiqueta javascript. Mostrar todas las entradas

viernes, 14 de octubre de 2011

Jugando con medidas y javaScript

Me está tocando realizar alguna que otra labor con javaScript y como yo pertenezco a la vieja escuela en este lenguaje, intento siempre sacarlo todo a través de las propiedades del propio lenguaje.

Esto, si bien tiene la ventaja de que aprendes javaScript puro y duro, tiene la desventaja de que hay que saber ciertos trucos si queremos obtener los mismos resultados independientemente del navegador que se esté usando. Y esto generalmente va referido a Internet Explorer que es el que más problemas causa y ha causado históricamente.

Por poner un ejemplo, para obtener la posición de la barra de scroll del navegador, en Firefox o Chrome nos valdrá con la propiedad window.pageXOffset; pero no en Internet Explorer 9 (y anteriores supongo) en el que hace falta coger el document.body.scrollLeft. De esta manera tenemos que empezar a hacer cosas como:
var hscroll = (document.all ? document.body.scrollLeft : window.pageXOffset);
var vscroll = (document.all ? document.body.scrollTop : window.pageYOffset);

Con esto hay que tener cuidado pues uno se puede ir a casa tranquilamente pensando que su trabajo funciona para encontrarse al día siguiente con que el cliente le dice "no funciona en Internet Explorer" y tu piense... ¿qué era Internet Explorer? ¿No lo habían prohibido ya? y te toque ponerte a buscar la solución para el navegador de los hacks.

Lo mismo pasa con otras propiedades como el ancho/alto del navegador o el ancho/alto del viewport de la página que estamos viendo: hay que dar varias vueltas para obtener el valor que de verdad queremos. Cansado de ello, he decidido pasarme a la nueva escuela e introducir jQuery para obtener todos estos valores. A través de sus funciones ya implementadas no es necesario preocuparnos del navegador, pues ellos lo hacen por nosotros.
Así por ejemplo, para obtener el scroll de la página nos vale con:
var hscroll = $(window).scrollTop();
var vscroll = $(window).scrollLeft();

O lo mismo para obtener el ancho y alto del navegador:
 var winW = $(window).width();
 var winH = $(window).height();

O para obtener el offset de un elemento con respecto a la ventana:
var imgOffset = $("#elementID").offset();
Conclusión: está muy bien saber por qué funcionan las cosas y jugar con las diferentes propiedades y en los diferentes navegadores, pero cuando hay que hacer algo serio que tiene que funcionar, es preferible usar alguna de las librerías fiables que existen en internet.

jueves, 11 de noviembre de 2010

Pasar fechas de PHP a JavaScript

En el post anterior contaba como realizar un contador de tiempo con JavaScript para llegar a una determinada fecha en concreto.
La fecha que yo tenía, estaba en el servidor, el cual funciona con PHP, pero como acabo de decir, el contador funciona con JavaScript. Aunque pudiera pensarse que ambos son compatibles, no es así.

En PHP utilizo la función strtotime() que convierte la mayoría de formatos de fechas al formato timestamp de UNIX (número de segundos desde 1970).
En JavaScript utilizo la función Date() que acepta como parámetro un string con la fecha o un número con el timestamp.

¿Pasar el strtotime() de PHP al Date() de JavaScript verdad? Pues no es suficiente, no son compatibles, para que funcione es necesario multiplicar por 1000, es decir (sintaxis JavaScript)

var fecha = new Date(<?php echo strtotime($nuestra_fecha)*1000;?>);