Correction de la position de l'arrière-plan dans IE

Je rencontre ce problème dans IE7 lors de l'exécution d'un morceau de code qui utilise jquery et 2 plugins jquery. Le code fonctionne en FF3 et Chrome.Correction de la position de l'arrière-plan dans IE

L'erreur complète est:

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

Cependant la ligne 33 est une ligne blanche. J'utilise 2 plugins: draggable et zoom.

Peu importe ce que je fais au code, c'est toujours la ligne 33 qui est en faute. Je vérifie la source a mis à jour via la source de vue, mais je pense que cela pourrait me mentir.

<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>

Essentiellement ce que je suis en train de faire est de recréer la carte Pragmatique Ajax démo avec jQuery.

Il semblerait que la deuxième ligne de cet extrait est la cause du problème:

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

Il semble essayer de sélectionner la propriété background-position de #draggable et ne pas le trouver? L'ajout manuel d'un background-position: 0 0; ne l'a pas résolu. Des idées sur la façon de contourner ce problème? J'ai essayé d'utiliser MS Script Debugger mais c'est presque inutile. Impossible d'inspecter les variables ou quoi que ce soit d'autre.

Source

2009-02-27 graham.reeds

Vous pouvez obtenir un plugin de connexion CSS pour cela - https://github.com/brandonaaron/jquery-cssHooks/ – Alnitak

Malheureusement quand j'avais besoin que ce n'était pas disponible, mais pourrait être utile pour ceux qui viennent de cette façon dans le avenir. –

Un peu plus fouiller sur l'Interweb a révélé la réponse: IE ne comprend pas le sélecteur background-position. Il comprend les non-standards background-position-x et background-position-y.

En train de pirater quelque chose ensemble pour contourner le problème.

Belle, Redmond.

Source

2009-02-27 16:51:52

Les propriétés CSS agrégées comme 'background' ne fonctionnent pas avec element.currentStyle (qui est la façon dont jQuery calcule les styles actuels sur IE). 'background-position' ne devrait pas être une propriété de raccourci en général, mais l'extension X/Y séparée d'IE en fait un. – bobince

Je ne suis pas vraiment sûr de ce que le code essaie de faire: il correspondrait à la chaîne '0% 0%' mais pas '1% 100px' ou à bien d'autres valeurs possibles. On dirait un code douteux, fragile pour moi ... – bobince

Okay. Je vais le modifier pour qu'il soit plus robuste. J'ai installé IE8 afin que je puisse déboguer plus facilement. –

Vous pouvez vérifier que vous chargez vos fichiers js dans le bon ordre afin que toutes les dépendances soient prises en compte.

Source

2009-02-27 14:05:40 jonstjohn

jquery suivi de draggable puis zoom. –

Le débogage est un problème dans IE. Essayez de l'isoler en chargeant seulement l'un des deux fichiers js (de draggable et de zoom). Vous devrez peut-être faire quelques alertes pour vraiment l'isoler :( – jonstjohn

Cependant, la ligne 33 est une ligne vide.

Ce sera la ligne 33 de l'un de vos fichiers .js, pas la ligne 33 du code HTML lui-même. IE ne parvient pas à signaler le fichier dans lequel l'erreur s'est produite. Regardez la ligne 33 de chaque fichier .js pour en savoir plus sur 'bg'; Si le pire se produit, vous pouvez commencer à insérer des nouvelles lignes au début de chaque fichier .js et voir si le numéro de ligne change.

Je vérifie la source a la mise à jour via la source de la vue, mais je pense que cela pourrait me mentir.

Afficher la source vous montrera toujours ce que IE a obtenu du serveur. Il ne montrera aucune mise à jour au DOM.

Source

2009-02-27 14:48:23 bobince

bg est référencé dans draggable.js mais ce n'est pas sur la ligne 33. Il est sur 34,35,39,40, et 41. Je suppose que je vais commencer à regarder Pity IE n'a pas de plugin FireBug :-( –

Ce sera 34 alors - la méthode de IE des nombres de ligne de comptage est généralement off-by-un par rapport aux éditeurs de texte. * Il y a * débogueurs JS pour IE, pour Par exemple, vous en avez un avec la version bêta d'IE8 – bobince

J'ai trouvé que les numéros de ligne référencés par IE sont totalement inutiles, je ne l'ai jamais vu nulle part près de l'endroit où le problème se trouve dans le code: – Herms

essayer backgroundPosition istead

Aussi, assurez-vous que « ceci » existe et que votre demande d'un attribut renvoie une valeur. IE va lancer ce genre d'erreur quand vous essayez d'appeler une méthode sur une propriété qui n'existe pas, donc bg est un objet nul ou nul. si vous ne vous souciez pas d'IE, vous pouvez faire bg = $ (this) ... || '' pour qu'il y ait toujours quelque chose de référencé.

Aussi, sans rapport avec l'erreur que vous obtenez, mais votre valeur d'index de 1 est-elle correcte? Vouliez-vous dire -1?

Source

2009-02-27 22:06:05

La plus petite valeur que vous pouvez avoir est 0% - donc le plus petit indice du symbole de pourcentage sera 1. Bobince a souligné que ce code est fragile, et la lecture autour du web signifie que je vais devoir le réécrire. Personnellement, je pensais que jQuery était censé normaliser cela à travers les navigateurs ?! –

Un peu de réflexion (et une tasse de thé) plus tard je suis venu avec:

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

Malheureusement, il retourne centre centre en dépit des ressources en ligne que je peux trouver indiquer qu'il doit retourner 0 0 si les valeurs sont indéfini. Commençant à se demander s'il existe un correctif/une solution de contournement réels à cela.

Beaucoup de gens ont essayé et tous jusqu'ici échouent à attraper tous les cas de bord. La version camelCase de backgroundPosition semble viable, mais je ne connais pas assez jQuery pour faire une évaluation précise de la façon de procéder - d'après ce que j'ai lu, vous ne pouvez utiliser camelCase comme getters que si la propriété a été définie précédemment. S'il vous plaît dites-moi si je me trompe.

Source

2009-02-27 23:45:55

Cela a fonctionné pour moi:

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

espèrent qu'il fait pour vous.

Source

2010-02-25 01:05:05 Pete

En fin de compte, le manque de conformité MSIE et la conversion de SVG en JPEG en PHP m'ont éloigné de l'astuce de l'image de fond et j'utilise maintenant Raphael et jQuery. Le bonus est que ça marche aussi dans IE6! –

Vous ne pouvez pas utiliser des tirets dans la fonction jquery css. Vous devez le faire en camelCase: .css('backgroundPosition') ou .css('backgroundPositionX') et .css('backgroundPositionY') pour IE

Source

2011-02-06 22:44:36 Esger

Oui, vous pouvez. Les deux '.css ('background-color', '# 000')' et '.css ({backgroundColor: '# 00f'})' fonctionneront; mais notez que l'exemple de cas de chameau doit être à l'intérieur d'un objet '{}' ... voir cette démo: http://jsfiddle.net/Mottie/guMdv/ – Mottie

Pour contourner le fait que Internet Explorer ne prend pas en charge l'attribut CSS « background-position », à partir de jQuery 1.4.3+ vous pouvez utiliser l'objet .cssHooks pour normaliser cet attribut entre les navigateurs. Pour économiser du temps, il existe un background position jQuery plugin disponible qui permet à la fois "background-position" et "background-position-x/y" de fonctionner comme prévu dans les navigateurs qui ne supportent pas l'un ou l'autre par défaut .

Source

2011-02-17 07:12:11 Fishizzle

C'est intéressant. IE8 ne comprend pas getter backgroundPosition, mais il comprend 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; 
});

Fonctionne très bien dans les vues compatibles IE8 et IE8.

Source

2011-10-23 01:44:23

Yupp,
Essayez plutôt la position d'arrière-plan ou définissez la position de l'arrière-plan avec jquery avant de l'appeler. Je suppose que l'on connaît souvent les positions à travers CSS avant de l'appeler. Il nest pas assez, mais en quelque sorte, il a fait l'affaire pour moi)

par exemple:.

//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

Source

2013-04-24 09:54:03

si rien ne permet, il est aussi possible de faire le tour suivant.

Nous pouvons remplacer un arrière-plan d'un élément par un élément interne absolument positionné (avec le même arrière-plan). Les coordonnées seront remplacées par les propriétés left et top. Cela fonctionnera dans tous les navigateurs.

Pour une meilleure compréhension, s'il vous plaît, vérifiez le code:

Avant

<div></div> 

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

Aprè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); 
}

Cette solution est très flexible, mais il m'a aidé à afficher les icônes en survolant l'état correctement.

Source

2013-07-06 10:40:55 Webars

Correction de la position de l'arrière-plan dans IE

Répondre

Questions connexes