jQuery: .css(“background-position”) falla en Internet Explorer
Me iba a poner a explicar porque falla y todo lo que tuve que hacer hasta darme cuenta del problema y la forma de solucionarlo, pero prefiero por esta vez simplemente dejarles la función que hice para arreglar el problema:
El siguiente método se acopla a jQuery por lo que lo pueden cargar justo después de jQuery y usarlo normalmente.
|
1 2 3 4 5 6 7 |
/** * Devuelve un array con la posicion X e Y respectivamente. */ $.fn.bgPosition = function() { var bgp = "background-position"; return $.browser.msie ? [parseInt($(this).css(bgp + "-x").split(" ")[0]), parseInt($(this).css(bgp + "-y").split(" ")[0])] : [parseInt($(this).css(bgp).split(" ")[0]), parseInt($(this).css(bgp).split(" ")[1])]; } |
Y como mencione, el uso es bastante sencillo.
|
1 2 3 4 |
//Para usarlo: alert("las posiciónes X e Y del fondo son: " + $("#cajaConFondo").bgPosition()); //muestra [posX, posY] alert("La posición X del fondo es: " + $("#cajaConFondo").bgPosition()[0]); //muestra posX alert("La posición Y del fondo es: " + $("#cajaConFondo").bgPosition()[1]); //muestra posY |
Para cerrar el post el problema en resumen es que internet explorer no reconoce la propiedad “background-position” del metodo .css(). En su lugar hay que usar “background-position-x” y “background-position-y”
Y una cosita mas: el método solo funciona con pixeles porque es lo que me hacía falta, porcentajes y demases yerbas quedan excluidas salvo que alguien quiera aportar esa parte 😉
He visto que desde IE9 este problema sigue, en fin porque será que este navegador siempre da problemas, ah si será porque no respeta los éstándares. Bueno en todo caso muchas gracias por tu aporte, es de utilidad. Saludos!
En IE se debe dividir la posición obtenida por 8 es decir:
$.browser.msie ? [xPosition = parseInt($(“#muestras”).css(bgp + “-x”).split(” “)[0]) / 8, yPosition = parseInt($(“#muestras”).css(bgp + “-y”).split(” “)[0]) / 8] :
[xPosition = parseInt($(“#muestras”).css(bgp).split(” “)[0]), yPosition = parseInt($(“#muestras”).css(bgp).split(” “)[1])];
Espero les sirva!
Existe una forma mas fácil de poder burlar este error de nuestro antagonista IE y es la siguiente: el primer argumento del metodo css() debe ser solamente ‘background’ y el segundo, la posicion en top - left - right - bottom, según corresponda. Ejemplo: $(this).css(‘background-position’,’top left’);