2011-09-08 7 views
7

मैं फ्लाई बाहर मेनू के लिए इस प्लगइन का उपयोग कर रहा:jQuery स्थिति() फोन

<div class="stuff"> 
some stuff 
<a class="quickfire">menu</a> 
</div> 

मैं कुछ करने के लिए इसे लागू करने हूँ: http://www.filamentgroup.com/lab/jquery_ipod_style_and_flyout_menus/

बटन ऐसे ही एक div के अंदर है इस प्रकार लिंक:

jQuery('.quickfire').menu({ 
     content: jQuery('#search-engines').html(), // grab content from this page 
     showSpeed: 400 
    }); 

जहां .quickfire लिंक का वर्ग नाम है। अब तक बहुत अच्छा है, काम करता है।

हालांकि उपयोगकर्ता एजेक्स कॉल भी ट्रिगर कर सकता है, जो सर्वर से एचटीएमएल का एक गुच्छा लाएगा और नई सामग्री के साथ div "सामान" को प्रतिस्थापित करेगा (जिसमें स्वयं एक क्विकफायर लिंक होगा)।

jQuery.ajax({ 
      url: 'ajax_file.php', 
      data: { 
       action: 'create_option_new_version', 
       id: jQuery('#qid').val(), 
       div: jQuery("#addMoreOptions").parent().parent().attr('id'), 
       cleanOutput: true 
      }, 
      success: function(data, textStatus, jqXHR){         
       jQuery(".stuff").html(data); 


      } 
     }); 

जैसा कि अपेक्षित है, क्विकफायर लिंक अब jQuery मेनू से जुड़ा हुआ नहीं है। इसलिए, मैं इसे हर बार फिर से जोड़ रहा हूं:

jQuery.ajax({ 
      url: 'ajax_file.php', 
      data: { 
       action: 'create_option_new_version', 
       id: jQuery('#qid').val(), 
       div: jQuery("#addMoreOptions").parent().parent().attr('id'), 
       cleanOutput: true 
      }, 
      success: function(data, textStatus, jqXHR){         
       jQuery(".stuff").html(data); 

       var position = jQuery('.quickfire').position(); 
       console.log("left: " + position.left + " top: " + position.top); 


       jQuery('.quickfire').menu({ 
        content: jQuery('#search-engines').html(), // grab content from this page 
        showSpeed: 400 
       }); 


      } 
     }); 

लगभग वहां!

मुद्दा यह है कि, जब मैं नव निर्मित quickfire बटन पर क्लिक करें, यह काम करता है है, लेकिन मेनू बटन के आगे के बजाय, अपनी स्क्रीन के ऊपरी बाएं कोने में दिखाई देता है!

मैं quickfire बटन के "स्थिति" प्रिंट करने की कोशिश की। प्रारंभिक लोड एक के लिए, यह 361 x 527. बाद में लोगों के लिए कहा, वे सब कहते हैं कि 0 x 320

यहाँ वास्तविक कोड है:

jQuery("#addMoreOptions").live('click',function(){ 
     jQuery(".lastPollOptionInput").removeClass("lastPollOptionInput"); 

     jQuery.ajax({ 
      url: 'ajax_file.php', 
      data: { 
       action: 'create_option_new_version', 
       id: jQuery('#qid').val(), 
       div: jQuery("#addMoreOptions").parent().parent().attr('id'), 
       cleanOutput: true 
      }, 
      success: function(data, textStatus, jqXHR){         
       jQuery("#addMoreOptions").parent().parent().html(data); 

       jQuery('.quickfire').fgmenu({ 
        content: jQuery('#search-engines').html(), // grab content from this page 
        showSpeed: 400 
       }); 


      } 
     }); 


    }); 
+0

मैं सही सामग्री की जगह से पहले, फिर उसे पुन: सम्मिलित "अलग" करने के लिए quickfire बटन की कोशिश की। अब यह मेनू को बाईं ओर नहीं रखता है, इसके बजाय यह मेनू को बिल्कुल ठीक कहता है जहां मैंने AJAX कॉल किया था (जो मुझे लगता है कि समझ में आता है)। बिल्कुल सही स्थान नहीं है, लेकिन कम से कम भौगोलिक दृष्टि से बहुत करीब –

+0

क्या आप उस पृष्ठ से लिंक कर सकते हैं जहां आप यह समस्या देख रहे हैं? Jsfiddle (http://jsfiddle.net/6VrgD/3/) पर एक प्राथमिक परीक्षण से पता चलता है कि आपके कोड में कहीं और कुछ गलत हो सकता है ... – Chris

+0

दुर्भाग्य से नहीं, यह मेरे कंप्यूटर पर रहता है और क्लाइंट मुझे साझा नहीं करना चाहता बहुत। लेकिन मैंने कुछ कोड जोड़ा। –

उत्तर

0

यह हो सकता है कि आप fgmenu() बजाय का उपयोग कर रहे बस menu()? (अपडेट: आपने कहा है कि आपने मेनू से fgmenu को फ़ंक्शन का नाम बदल दिया है, इसलिए यह संभव है कि यह $.fn.menu पर कॉल कर रहा है - दूसरे शब्दों में, विरोधाभासी jQuery UI फ़ंक्शन - आंतरिक रूप से स्थानों में ...)

कंसोल की जांच करें त्रुटियां, बस वहां कुछ भी स्पष्ट होने पर।

मेरा अगला अनुमान यह होगा कि jQuery("#addMoreOptions").parent().parent() वह तत्व नहीं हो सकता है जिसकी आप अपेक्षा करते हैं, और वास्तव में <html> तत्व या कुछ अन्य समान अप्रत्याशित नोड हो सकता है।

दूसरी बात यह है कि क्योंकि आप $(something).parent().html("blah") पर कॉल कर रहे हैं इसका मतलब है कि आप $(something) नोड को बदल रहे हैं, जो बाद के कॉल पर मौजूद नहीं हो सकता है।

अगर वहाँ पता लगाने और इरादा नोड के लिए एक संदर्भ रखने के लिए एक बेहतर तरीका है, मैं बजाय कर रही सुझाव है।

+0

कोई उद्देश्य नहीं है, मैंने मेनू को fgmenu में बदल दिया क्योंकि यह jquery-ui "autocomplete" –

+0

से विवादित है, समस्या का प्रदर्शन करने वाले एक काम करने वाले उदाहरण को देखने में सक्षम होने के बिना, मुझे डर है कि मुझे कोई नया विचार नहीं मिला है कि क्या हो सकता है समस्या हो: \ – Chris

1

मैं आसान तरीका जाना होगा। AJAX कॉल के बाद

var x = $('#old-div').offset().left; 
var y = $('#old-div').offset().top; 

नए तत्व के लिए स्थिति लागू होते हैं:: बस AJAX कॉल करने से पहले तत्व की स्थिति को प्राप्त

$('#new-div').css({ "left" : x, "top" : y }); 

इसके अलावा, मैं समझ में नहीं आया, तो मेनू स्थिति है : पूर्ण, या जो भी हो। इसके लिए भी जांचें। उम्मीद है कि मैं उपयोगी, चीयर्स और शुभकामनाएं थी!

0

यदि तत्व को पुन: सम्मिलित/पुनः प्राप्त करने के बाद गलत स्थान पर दिखाया जा रहा है, तो आपको ऑब्जेक्ट का सीएसएस जांचना होगा। फायरबग इस उद्देश्य के लिए उपयोग करने का एक आसान टूल है, और सीएसएस मुद्दों के साथ काम करते समय मुझे अनगिनत घंटे बचाए हैं। जब सामग्री को पढ़ा जा रहा है, तो दो चीजें बदल गई हैं:

1) नई सामग्री के लिए मूल कंटेनर बदल गया है, और इसलिए संदर्भ मेनू मेनू की स्थिति कैसे बदल गई है। 2) मेनू का सीएसएस बदल गया है, शायद पूर्ण से संबंधित या विरासत से?

आमतौर पर, सबसे आसान जवाब इस मामले में सही है, लेकिन फ़ायरबग इसे ढूंढने का तरीका होगा। आप इसके साथ जुड़े सीएसएस को देखने के लिए इसके साथ किसी भी तत्व का चयन कर सकते हैं ... बस परिवर्तन को खोजने की जरूरत है।

http://getfirebug.com/layout

संबंधित मुद्दे