즉, 배경 위치에 대한 수정

StackOverflow https://stackoverflow.com/questions/594870

문제

jQuery와 2 개의 jQuery 플러그인을 사용하는 코드 조각을 실행할 때 IE7 에서이 문제가 발생합니다. 코드는 FF3 및 Chrome에서 작동합니다.

전체 오류는 다음과 같습니다.

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

그러나 33 행은 빈 줄입니다.

Draggable 및 Zoom의 2 개의 플러그인을 사용하고 있습니다. 내가 코드에 대해 무엇을하든 항상 결함이있는 33 행입니다. 소스가 뷰 소스를 통해 업데이트가 있는지 확인하지만 이것이 나에게 거짓말을 할 수 있다고 생각합니다.

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

본질적으로 내가하려고하는 것은 jQuery로 실용적인 Ajax 맵 데모를 재현하는 것입니다.

이 스 니펫의 두 번째 줄은 문제를 일으키는 것으로 보입니다.

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

그것은 배경 위치 속성을 선택하려고하는 것 같습니다. #draggable 그리고 그것을 찾지 않습니까? 수동으로 추가 a background-position: 0 0; 그것을 고치지 않았습니다. 이 문제를 해결하는 방법에 대한 아이디어가 있습니까?

MS 스크립트 디버거를 사용해 보았지만 거의 쓸모가 없습니다. 변수 나 다른 것을 검사 할 수 없습니다.

도움이 되었습니까?

해결책

인터 웹에 대한 조금 더 파는 것은 답을 공개했습니다. 즉, 선택자를 이해하지 못합니다. background-position. 비표준을 이해합니다 background-position-x 그리고 background-position-y.

현재 작업을 수행하기 위해 함께 무언가를 해킹하고 있습니다.

좋은 사람, 레드몬드.

다른 팁

jQuery 1.4.3+에서 인터넷 익스플로러가 "배경 위치"CSS 속성을 지원하지 않는다는 사실을 해결하려면 .csshooks 개체 브라우저 간에이 속성을 정규화합니다.

시간을 절약하려면 a가 있습니다 배경 위치 jQuery 플러그인 "배경 위치"와 "배경 위치 -x/y"가 모두 기본적으로 하나 또는 다른 브라우저에서 예상대로 작동 할 수있는 사용 가능합니다.

흥미 롭습니다. IE8은 Getter BackgroundPosition을 이해하지 못하지만 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;
});

IE8 및 IE8 호환보기에서 훌륭하게 작동합니다.

이것은 나를 위해 효과가있었습니다.

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

그것이 당신을 위해하기를 바랍니다.

종속성이 고려되도록 JS 파일을 올바른 순서로로드하고 있는지 확인할 수 있습니다.

약간의 사고 (그리고 차 한 잔) 나중에 나는 다음과 같이 생각했다.

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

불행히도 온라인 자원에도 불구하고 센터 센터를 반환합니다.

이것에 대한 실제 수정/해결 방법이 있는지 궁금해하기 시작했습니다. 많은 사람들이 시도했고 지금까지 모든 엣지 케이스를 잡지 못했습니다.

Camelcase 버전 backgroundPosition 실행 가능한 것처럼 보이지만 jQuery를 충분히 알지 못한다. 내가 착각했는지 말 해주세요.

그러나 33 행은 빈 줄입니다.

HTML 자체의 33 행이 아닌 .js 파일 중 하나의 33 행입니다. 즉, 오류가 어떤 실제 파일에 있는지보고하지 않습니다. 각 .js의 33 행을 'bg'에 대해보십시오. 최악의 상황이 최악이되면 각 .js의 시작 부분에 신생을 삽입하고 줄 번호가 변경되는지 확인할 수 있습니다.

소스가 뷰 소스를 통해 업데이트가 있는지 확인하지만 이것이 나에게 거짓말을 할 수 있다고 생각합니다.

소스보기는 항상 서버에서 얻은 내용을 보여줍니다. DOM에 대한 업데이트가 표시되지 않습니다.

BackgroundPosition istead를 시도하십시오

또한 '이'가 존재하고 속성 요청이 값을 반환하는지 확인하십시오. 즉, 존재하지 않는 속성에서 메소드를 호출하려고 할 때 이런 종류의 오류를 던질 것이므로 BG는 널리이거나 객체를 null합니다. IE에 관심이 없다면 BG = $ (this)를 수행 할 수 있습니다 ... || ``그래서 항상 언급 된 것이 있습니다.

또한, 오류와 관련이 없지만 인덱스 값이 1이 맞습니까? -1을 의미 했습니까?

네,
대신 배경 위치를 시도하거나 jQuery로 배경 위치를 설정하기 전에 배경 위치를 설정하십시오. CSS를 통한 입장을 종종 알기 전에 자주 알고 있다고 생각합니다. 예쁘지는 않지만 어떻게 든 그것은 나를 위해 속임수를 썼습니다.)

예 :

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

아무것도 도움이되지 않으면 다음과 같은 트릭을 만들 수도 있습니다.

요소 배경을 내부 배경으로 절대적으로 배치 된 요소 (동일한 배경으로)로 바꿀 수 있습니다. 좌표는 대체됩니다 left 그리고 top 속성. 이것은 모든 브라우저에서 작동합니다.

더 잘 이해하려면 코드를 확인하십시오.

전에

<div></div>

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

후에

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

이 솔루션은 그다지 유연하지는 않지만 아이콘 호버 상태를 올바르게 표시하는 데 도움이되었습니다.

jQuery CSS 기능에서 대시를 사용할 수 없습니다. Camelcase에서해야합니다..css('backgroundPosition') 또는 .css('backgroundPositionX') 그리고 .css('backgroundPositionY') ~을 위한 즉

라이센스 : CC-BY-SA ~와 함께 속성
제휴하지 않습니다 StackOverflow
scroll top