2009-02-27 22 views
13

में पृष्ठभूमि-स्थिति के लिए ठीक करें मुझे jquery और 2 jquery plugins का उपयोग करने वाले कोड का एक टुकड़ा चलाते समय आईई 7 में यह समस्या मिलती है। कोड एफएफ 3 और क्रोम में काम करता है।आईई

पूर्ण त्रुटि है:

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

हालांकि लाइन 33 एक रिक्त पंक्ति है।

मैं 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 के साथ व्यावहारिक अजाक्स नक्शा डेमो पुन: है।


ऐसा लगता है कि इस स्निपेट की दूसरी पंक्ति मुसीबत खड़ी कर रहा है:

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

यह #draggable की पृष्ठभूमि स्थिति प्रॉपर्टी चुनने के लिए कोशिश कर रहा हो सकता है और यह नहीं मिल रहा है? background-position: 0 0; मैन्युअल रूप से जोड़ने से इसे ठीक नहीं किया गया। इस समस्या को हल करने के बारे में कोई विचार?

मैंने एमएस स्क्रिप्ट डीबगर का उपयोग करने की कोशिश की लेकिन यह लगभग बेकार है। चर या कुछ और का निरीक्षण नहीं कर सकते हैं।

+1

आप इसके लिए एक सीएसएस हुक प्लगइन प्राप्त कर सकते हैं - https://github.com/brandonaaron/jquery-cssHooks/ – Alnitak

+0

दुर्भाग्य से जब मुझे यह आवश्यक था कि यह उपलब्ध नहीं था लेकिन इस तरह से आने वाले लोगों के लिए उपयोगी हो सकता है भविष्य। –

उत्तर

34

एक थोड़ा और अधिक Interweb पर के बारे में खुदाई जवाब से पता चला है: आईई चयनकर्ता background-position को नहीं समझता। यह गैर-मानक background-position-x और background-position-y को समझता है।

वर्तमान में इसे हल करने के लिए कुछ मिलकर हैकिंग करना।

अच्छा एक, रेडमंड।

+0

अच्छी पकड़। आम तौर पर 'शॉर्टकट 'पृष्ठभूमि' जैसे समेकित सीएसएस गुण तत्व.currentStyle (जो कि jQuery पर वर्तमान शैलियों की गणना कैसे करता है) का उपयोग नहीं करते हैं। 'पृष्ठभूमि-स्थिति' सामान्य रूप से शॉर्टकट गुण नहीं होनी चाहिए, लेकिन आईई का अलग एक्स/वाई एक्सटेंशन प्रभावी ढंग से इसे बनाता है। – bobince

+0

मुझे सच में यकीन नहीं है कि कोड वास्तव में क्या करने की कोशिश कर रहा है - यह '0% 0%' स्ट्रिंग से मेल खाता है लेकिन '1% 100px' या कई अन्य संभावित मान नहीं। मुझे डोडी, नाजुक कोड की तरह लग रहा है ... – bobince

+0

ठीक है। मैं इसे संशोधित करूंगा ताकि यह अधिक मजबूत हो। मैंने आईई 8 स्थापित किया है इसलिए मैं आसान डीबग कर सकता हूं। –

2

आप यह सुनिश्चित करने के लिए जांच कर सकते हैं कि आप अपनी जेएस फाइलों को सही क्रम में लोड कर रहे हैं ताकि किसी भी निर्भरता को ध्यान में रखा जा सके।

+0

jquery के बाद ड्रैगगेबल और फिर ज़ूम करें। –

+0

डीबगिंग आईई में इतनी परेशानी है। केवल दो जेएस फ़ाइलों (ड्रैग करने योग्य और ज़ूम) में से एक को लोड करके इसे अलग करने का प्रयास करें। आपको वास्तव में इसे अलग करने के लिए कुछ चेतावनी देने की आवश्यकता हो सकती है :( – jonstjohn

1

हालांकि लाइन 33 एक रिक्त पंक्ति है।

यह आपकी .js फ़ाइलों में से एक लाइन 33 होगा, न कि HTML की लाइन 33। आईई रिपोर्ट करने में विफल रहता है कि त्रुटि किस वास्तविक फ़ाइल में थी। 'बीजी' के बारे में कुछ के लिए प्रत्येक .js की लाइन 33 देखें; यदि सबसे बुरी स्थिति सबसे खराब होती है तो आप प्रत्येक .js की शुरुआत में न्यूलाइन डालने शुरू कर सकते हैं और देख सकते हैं कि लाइन नंबर बदलता है या नहीं।

मैं स्रोत को स्रोत के माध्यम से अद्यतन करता हूं, लेकिन मुझे लगता है कि यह मुझसे झूठ बोल सकता है।

देखें स्रोत हमेशा आपको दिखाएगा कि आईई सर्वर से क्या प्राप्त हुआ है। यह डोम को कोई अपडेट नहीं दिखाएगा।

+0

बीजी को draggable.js में संदर्भित किया गया है लेकिन यह लाइन 33 पर नहीं है। यह 34,35,39,40, और 41 पर है। मुझे लगता है कि मैं दिखना शुरू कर दूंगा वहाँ। Pity IE में फ़ायरबग प्लगइन नहीं है :-( –

+0

यह 34 होगा - आईई की लाइन संख्याओं की गिनती करने की विधि आमतौर पर पाठ संपादकों की तुलना में ऑफ-बाय-वन होती है। * * आईई के लिए जेएस डिबगर्स हैं उदाहरण के लिए आप आईई 8 बीटा के साथ एक प्राप्त करते हैं। – bobince

+0

मुझे पता चला है कि आईई द्वारा संदर्भित लाइन नंबर पूरी तरह से बेकार हैं। मैंने इसे कहीं भी कहीं भी नहीं देखा है जहां समस्या कोड में है। – Herms

0

कोशिश backgroundPosition istead

इसके अलावा, यह सुनिश्चित करें कि 'इस' मौजूद है और एक विशेषता के लिए आपके अनुरोध एक मान देता है कि सुनिश्चित करें। आईई इस तरह की त्रुटियों को फेंक देगा जब आप उस प्रॉपर्टी पर एक विधि को कॉल करने का प्रयास करते हैं जो मौजूद नहीं है, इसलिए बीजी एक ऑब्जेक्ट शून्य या शून्य है। यदि आप आईई के बारे में परवाह नहीं करते हैं तो आप बीजी = $ (यह) कर सकते हैं ... || '' ताकि हमेशा कुछ संदर्भित किया जा सके।

इसके अलावा, आपको जो त्रुटि मिल रही है उससे संबंधित नहीं है, लेकिन क्या आपका सूचकांक मूल्य 1 सही है? क्या आपका मतलब -1 था?

+0

आपके पास सबसे छोटा मूल्य 0% है - इसलिए प्रतिशत प्रतीक का सबसे छोटा सूचकांक 1 होगा। बॉबिस ने इंगित किया है कि वह कोड नाजुक है, और पढ़ना वेब के आस-पास का मतलब है कि मुझे इसे फिर से लिखना होगा। व्यक्तिगत रूप से मैंने सोचा कि jQuery को ब्राउज़र में इसे सामान्यीकृत करना था ?! –

2

सोच (और एक कप चाय) की एक थोड़ी देर बाद मैं के साथ आया था:

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

दुर्भाग्य से यह ऑनलाइन संसाधनों के बावजूद केंद्र केंद्र रिटर्न मैं राज्य यह 0 0 लौटना चाहिए अगर मान हैं पा सकते हैं अपरिभाषित।

आश्चर्य की बात है कि इस पर कोई वास्तविक फिक्स/वर्कअराउंड है या नहीं। बहुत से लोगों ने कोशिश की है और अब तक सभी किनारे के मामलों को पकड़ने में असफल रहा है।

backgroundPosition का ऊंटकेस संस्करण व्यवहार्य लगता है लेकिन मुझे इसके बारे में सटीक मूल्यांकन करने के लिए पर्याप्त jQuery नहीं पता है - मैंने जो पढ़ा है उससे आप केवल कैमेलकेस का उपयोग कर सकते हैं अगर संपत्ति सेट हो गई है पहले। कृपया मुझे बताएं कि क्या मैं गलत हूं।

3

यह मेरे लिए काम किया:

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

वह आपके लिए करता है उम्मीद है।

+0

अंत में एमएसआईई अनुपालन की कमी और एसवीजी को PHP में जेपीईजी में कनवर्ट करने से मुझे पृष्ठभूमि छवि चाल से दूर कर दिया गया और अब मैं राफेल और jQuery का उपयोग करता हूं। बोनस यह है कि यह आईई 6 में भी काम करता है! –

0

आप jquery css फ़ंक्शन में डैश का उपयोग नहीं कर सकते हैं। आप CamelCase में यह क्या करना है: .css('backgroundPosition') या .css('backgroundPositionX') और के लिए .css('backgroundPositionY') आईई

+2

हाँ आप कर सकते हैं। '.css ('पृष्ठभूमि-रंग', '# 000') 'और' .css ({backgroundColor:' # 00f '} दोनों' काम करेंगे; लेकिन ध्यान दें कि ऊंट केस उदाहरण किसी ऑब्जेक्ट के अंदर होना चाहिए '{} '... इस डेमो को देखें: http://jsfiddle.net/Mottie/guMdv/ – Mottie

4

तथ्य यह है कि इंटरनेट एक्सप्लोरर "पृष्ठभूमि स्थिति" सीएसएस गुण का समर्थन नहीं करता, jQuery आप 1.4.3+ के रूप में चारों ओर पाने के लिए ब्राउज़र के बीच इस विशेषता को सामान्य करने के लिए .cssHooks ऑब्जेक्ट का उपयोग कर सकते हैं।

अपने आप को कुछ समय बचाने के लिए, background position jQuery plugin उपलब्ध है जो "पृष्ठभूमि-स्थिति" और "पृष्ठभूमि-स्थिति-एक्स/वाई" दोनों ब्राउज़रों में अपेक्षित काम करने की अनुमति देता है जो डिफ़ॉल्ट रूप से एक या दूसरे का समर्थन नहीं करते हैं ।

4

यह दिलचस्प है। आईई 8 गेटर पृष्ठभूमि संरचना को समझ में नहीं आता है, लेकिन यह सेटटर को समझता है।

$('.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; 
}); 

यह आईई 8 और आईई 8 संगत दृश्य में बहुत अच्छा काम करता है।

0

यूप,
इसके बजाए पृष्ठभूमि-स्थिति का प्रयास करें या बस इसे कॉल करने से पहले jquery के साथ पृष्ठभूमि-स्थिति सेट करें। मुझे लगता है कि इसे अक्सर कॉल करने से पहले सीएसएस के माध्यम से पदों को पता है। यह बहुत is not, लेकिन किसी भी तरह यह मेरे लिए चाल किया था)

जैसे:।

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

अगर कुछ मदद करता है, यह भी निम्नलिखित चाल बनाने के लिए संभव है।

हम एक तत्व की पृष्ठभूमि को एक आंतरिक बिल्कुल स्थित तत्व (उसी पृष्ठभूमि के साथ) द्वारा प्रतिस्थापित कर सकते हैं। निर्देशांक 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); 
} 

यह समाधान बहुत लचीला नहीं है के बाद, लेकिन यह मेरे लिए मदद की आइकन ठीक से राज्य होवर दिखाओ।