Solución para la posición de fondo en IE

Obtengo este problema en IE7 cuando ejecuto un fragmento de código que usa jquery y 2 complementos jquery. El código funciona en FF3 y Chrome.Solución para la posición de fondo en IE

El error completo es:

Line: 33 
Char: 6 
Error: bg is null or not an object 
Code: 0 
URL: http://localhost/index2.html

Sin embargo la línea 33 es una línea en blanco.

Estoy usando 2 complementos: arrastrables y zoom. No importa lo que haga con el código, siempre es la línea 33 la culpable. Compruebo que la fuente tiene una actualización a través de la fuente de la vista, pero siento que esto podría estar mintiéndome.

<body> 
<div id="zoom" class="zoom"></div> 
<div id="draggable" class="main_internal"><img src="tiles/mapSpain-smaller.jpg" alt=""></div> 

<script type="text/javascript"> 
$(document).ready(function() { 
    $('#draggable').drag(); 
    $('#zoom').zoom({target_div:"draggable", zoom_images:new Array('tiles/mapSpain-smaller.jpg', 'tiles/mapSpain.jpg') }); 
}); 
</script> 

</body>

Básicamente lo que estoy tratando de hacer es volver a crear el mapa de demostración pragmática Ajax con jQuery.

Parecería que la segunda línea de este fragmento es la causa del problema:

bg = $(this).css('background-position');      
if(bg.indexOf('%')>1){

Parece estar tratando de seleccionar la propiedad background-position de #draggable y no encontrarlo? Agregar manualmente un background-position: 0 0; no lo solucionó. ¿Alguna idea sobre cómo solucionar este problema?

Intenté usar MS Script Debugger, pero eso es casi inútil. No puedo inspeccionar variables ni nada más.

Fuente

2009-02-27 graham.reeds

Puede obtener un complemento de gancho de CSS para esto - https://github.com/brandonaaron/jquery-cssHooks/ – Alnitak

Desafortunadamente cuando lo necesitaba no estaba disponible, pero podría ser útil para quienes pasen de esta manera en el futuro. –

Un poco más de investigación sobre Interweb ha revelado la respuesta: IE no comprende el selector background-position. Comprende el no estándar background-position-x y background-position-y.

Actualmente hackear algo para solucionarlo.

Nice one, Redmond.

Fuente

2009-02-27 16:51:52

Buena captura. En general, el 'atajo' 'las propiedades agregadas de CSS como' fondo 'no funcionan usando element.currentStyle (que es como jQuery calcula los estilos actuales en IE).' background-position 'no debería ser una propiedad de atajo en general, sino la extensión X/Y de IE separada efectivamente lo hace uno. – bobince

No estoy muy seguro de lo que el código realmente está tratando de hacer - coincidiría con la cadena '0% 0%' pero no '1% 100px' u otros muchos valores posibles. Parece un código frágil y poco fiable para mí ... – bobince

Bien. Lo modificaré para que sea más robusto. He instalado IE8 para que pueda depurar más fácilmente. –

Es posible que desee comprobar para asegurarse de que está cargando sus archivos js en el orden correcto para que las dependencias se tengan en cuenta.

Fuente

2009-02-27 14:05:40 jonstjohn

jquery seguido de arrastrar y luego ampliar. –

La depuración es una molestia en IE. Intente aislarlo cargando solo uno de los dos archivos js (de arrastrar y acercar). Es posible que necesite hacer algunas alertas para aislarlo realmente :( – jonstjohn

Sin embargo, la línea 33 es una línea en blanco.

Será la línea 33 de uno de sus archivos .js, no la línea 33 del propio HTML. IE no puede informar en qué archivo real se encuentra el error. Mire la línea 33 de cada .js para obtener información sobre 'bg'; si sucede lo peor, puede comenzar a insertar nuevas líneas al inicio de cada .js y ver si el número de línea cambia.

Compruebo que la fuente tiene una actualización a través de la fuente de visualización, pero creo que esto podría estar mintiéndome.

Ver fuente siempre le mostrará qué IE obtuvo del servidor. No mostrará ninguna actualización del DOM.

Fuente

2009-02-27 14:48:23 bobince

bg se hace referencia en draggable.js pero no está en la línea 33. Está en 34,35,39,40, y 41. Supongo que comenzaré a buscar allí. Pity IE no tiene un plugin FireBug :-( –

Será entonces 34 - El método de IE para contar números de línea generalmente es uno por uno en comparación con los editores de texto. Hay * depuradores * JS para IE, para Por ejemplo, obtienes uno con la versión beta de IE8. – bobince

He encontrado que los números de línea a los que hace referencia el IE son completamente inútiles. Nunca lo he visto en ninguna parte cerca de donde está el problema en el código. – Herms

intento backgroundPosition Istead

Además, asegúrese de que 'esto' existe y que su solicitud para un atributo devuelve un valor. IE lanzará este tipo de errores cuando intente llamar a un método en una propiedad que no existe, por lo tanto, bg es un objeto nulo o nulo. si no te importa IE, puedes hacer bg = $ (esto) ... || '' por lo que siempre hay algo referenciado.

Además, no relacionado con el error que está recibiendo, ¿pero su valor de índice es 1 correcto? ¿Querías decir -1?

Fuente

2009-02-27 22:06:05

El valor más pequeño que puede tener es 0%, por lo que el índice más pequeño del símbolo de porcentaje será 1. Bobince ha señalado que ese código es frágil y está leyendo alrededor de la web significa que tendré que volver a escribirlo. Personalmente, pensé que jQuery debía normalizar esto en todos los buscadores? –

Un poco de pensamiento (y una taza de té) más tarde se me ocurrió:

if(bg == 'undefined' || bg == null){ 
    bg = $(this).css('background-position-x') + " " + $(this).css('background-position-y'); 
}

desgracia vuelve centro de centro a pesar de los recursos en línea que puedo encontrar estatales tenía que devolver 0 0 si los valores son indefinido

Comenzando a preguntarse si hay una solución/solución real a esto. Mucha gente lo ha intentado y hasta ahora no han podido detectar todos los casos extremos.

La versión de camelCase de backgroundPosition parece viable, pero no sé lo suficiente de jQuery para hacer una evaluación precisa de cómo hacerlo. Por lo que he leído, solo se puede utilizar camelCase como getters si la propiedad se ha configurado previamente. Por favor, dime si estoy equivocado.

Fuente

2009-02-27 23:45:55

Esto funcionó para mí:

if (navigator.appName=='Microsoft Internet Explorer') 
    { 
    bg = $(drag_div).css('backgroundPositionX') + " " + $(drag_div).css('backgroundPositionY'); 
    } 
    else 
    { 
    bg = $(drag_div).css('background-position'); 
    }

esperanza lo hace por usted.

Fuente

2010-02-25 01:05:05 Pete

Al final, la falta de compatibilidad con MSIE y la conversión de SVG a JPEG en PHP me alejaron del truco de la imagen de fondo y ahora uso Raphael y jQuery. ¡La ventaja es que también funciona en IE6! –

No se pueden usar guiones en la función jquery css. Tienes que hacerlo en camelCase: .css('backgroundPosition') o .css('backgroundPositionX') y .css('backgroundPositionY') para IE

Fuente

2011-02-06 22:44:36 Esger

Sí, puedes. Ambos '.css ('background-color', '# 000')' y '.css ({backgroundColor: '# 00f'})' funcionarán; pero tenga en cuenta que el ejemplo de la caja de camello debe estar dentro de un objeto '{}' ... vea esta demostración: http://jsfiddle.net/Mottie/guMdv/ – Mottie

Para moverse por el hecho de que Internet Explorer no admite el "background-position" atributo CSS, a partir de jQuery que 1.4.3+ puede usar el objeto .cssHooks para normalizar este atributo entre los navegadores.

Para ahorrar algo de tiempo, hay un background position jQuery plugin disponible que permite que tanto la "posición de fondo" como la "posición de fondo-x/y" funcionen como se espera en los navegadores que no admiten uno u otro de manera predeterminada .

Fuente

2011-02-17 07:12:11 Fishizzle

Es interesante. IE8 no entiende getter backgroundPosition, pero entiende setter.

$('.promo3').mousewheel(function(e,d){ 
    var promo3 = $(this); 
    var p = promo3.css('backgroundPosition'); 
    if (p === undefined) { 
    p = promo3.css('backgroundPositionX') + ' ' + promo3.css('backgroundPositionY'); 
    } 
    var a = p.split(' '); 
    var y = parseInt(a[1]); 
    if (d > 0) { 
    if (y < -1107) y += 1107; 
    y -= 40; 
    } 
    else { 
    if (y > 1107) y -= 1107; 
    y += 40; 
    } 
    promo3.css('backgroundPosition', a[0] + ' ' + y + 'px'); 
    return false; 
});

Funciona muy bien en la vista compatible de IE8 e IE8.

Fuente

2011-10-23 01:44:23

Yupp,
Pruebe la posición de fondo en su lugar o simplemente establezca la posición de fondo con jquery antes de llamar. Creo que uno a menudo sabe las posiciones a través de CSS antes de llamarlo. Se isnt bastante, pero de alguna manera lo hizo el truco para mí)

por ejemplo:.

//set it in with javascript. 
$("someid").css("background-position", "10px 0"); 
... 
//do some funky stuff 
//call it 
$("someid").css("background-position"); 
//and it would return "10px 0" even in IE7

Fuente

2013-04-24 09:54:03

si nada ayuda, también es posible hacer el siguiente truco.

Podemos reemplazar un fondo de un elemento por un elemento interior absolutamente posicionado (con el mismo fondo). Las coordenadas serán reemplazadas por las propiedades left y top. Esto funcionará en todos los navegadores.

Para una mejor comprensión, por favor, compruebe el código:

Antes

<div></div> 

div { 
    background: url(mySprite.png); 
    background-position: -100px 0; 
}

Después

<div> 
    <span></span> 
</div> 

div { 
    position: relative; 
    overflow: hidden; 
    width: 100px;  /* required width to show a part of your sprite */ 
    height: 100px;  /* required height ... */ 
} 

div span { 
    position: absolute; 
    left: -100px;  /* bg left position */ 
    top: 0;    /* bg top position */ 
    display: block; 
    width: 500px;  /* full sprite width */ 
    height: 500px;  /* full sprite height */ 
    background: url(mySprite.png); 
}

Esta solución no es muy flexible, pero me ayudó a muestra los íconos al pasar el cursor sobre el estado correctamente.

Fuente

2013-07-06 10:40:55 Webars

Solución para la posición de fondo en IE

Respuesta

Cuestiones relacionadas