सामाजिक दस्तावेज़ साझा करने के साथ jQuery दस्तावेज़ तैयार छोटी गाड़ी

Question

मेरे पास एक अजीब समस्या है जिसे jQuery दस्तावेज़ तैयार करने के साथ करना पड़ सकता है। नीचे एक HTML और स्क्रिप्ट ब्लॉक है जिसमें सामान्य सोशल नेटवर्किंग स्क्रिप्ट शामिल हैं। नीचे जावास्क्रिप्ट ब्लॉक शरीर div के बाएं किनारे पर dd_outer div प्रदर्शित करता है, और जब ब्राउज़र विंडो कम हो जाती है, तो div को फीका कर दिया जाता है और dd_footer div में फीका होता है। दो divs के बीच fadein और fadeout ठीक काम करता है।

समस्या दो गुना है: एक समस्या तब होती है जब ब्राउज़र विंडो पूर्ण चौड़ाई (1200px +) होती है, तो फेसबुक स्क्रिप्ट लगातार लोड नहीं होती और प्रदर्शित नहीं होती है; कभी-कभी प्रकट होता है और कभी-कभी नहीं होता है, कभी-कभी पेज रीलोड के बाद और कभी-कभी नहीं होता है। (कोई ब्राउज़र या .htaccess कैशिंग शामिल है)। केवल फेसबुक शेयर लगातार दिखाने में विफल रहता है; अन्य सभी सेवाएं ठीक दिखती हैं।

दूसरी समस्या कि जब ब्राउज़र विंडो संकीर्ण है - 650 पिक्सल या तो, dd_outer div प्रदर्शित नहीं किया जाता जब और dd_footer div है - पाद लेख div एक पृष्ठ पुनः लोड पर नहीं दिखाया जाएगा जब तक ब्राउज़र विंडो है सबसे छोटी राशि ले जाया गया। फिर div प्रदर्शित होगा, फेसबुक शेयर और सब कुछ। किसी मोबाइल डिवाइस के लिए, यह एक समस्या है क्योंकि ब्राउज़र विंडो dd_footer डिव डिस्प्ले बनाने के लिए शुरू करने के लिए संकीर्ण होगी और उसे "nudged" की आवश्यकता नहीं है। क्योंकि मैं एक WordPress प्लग इन कि विकल्प का इस्तेमाल किया dd_outer div और स्क्रॉल ऊंचाई की स्थिति निर्धारित करने से इस कोड को ढाल लिया है

यह समस्या खेलने में आया हो सकता है। दस्तावेज तैयार कॉल के ऊपर चर के लिए यही कारण है।

क्या यह समस्या एक दस्तावेज़ तैयार मुद्दा प्रतीत होता है?

चर को स्क्रिप्ट में कैसे एकीकृत किया जा सकता है? इससे कोई फर्क नहीं पड़ता कि वे हार्डकोड हैं; जरूरत पड़ने पर मैं उन्हें बदल सकता हूं।

मैं इसे जेएसफ़िल्ड में डेमो में फेंक दूंगा लेकिन divs वास्तविक रूप से विंडो आकार बदलने के साथ फ्लोट नहीं करेगा।

मैंने स्पष्टता के लिए सीएसएस शामिल नहीं किया है।

<div class='dd_outer'><div class='dd_inner'><div id='dd_ajax_float'> 

<div class="sbutton"><script src="http://connect.facebook.net/en_US/all.js#xfbml=1"></script><fb:like layout="box_count" show_faces="false" font=""></fb:like></div> 

<div class="sbutton"> 
<a href="http://twitter.com/share" class="twitter-share-button" data-url="" data-count="vertical" data-via="#">Tweet</a><script type="text/javascript" src="http://platform.twitter.com/widgets.js"></script></div> 

<div class="sbutton"><script type="text/javascript" src="https://apis.google.com/js/plusone.js"></script><g:plusone size="tall"></g:plusone></div> 

<div class="sbutton"><script src="http://platform.linkedin.com/in.js" type="text/javascript"></script> 
<script type="IN/Share" data-counter="top"></script></div> 

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

पाद लेख में<div id="dd_footer">that contains the same social scripts as above</div>है और अंदर और बाहर नीचे स्क्रिप्ट से फीका कर रहे हैं:

यह वह जगह है

यह एचटीएमएल और सामाजिक स्क्रिप्ट ब्लॉक है jQuery जो बाईं ओर dd_outer सामाजिक सेवाओं को स्थान देता है औरमें फ़ेड्स करता है और फ़ेड्स करता हैdiv।

<script type="text/javascript"> 

var dd_top = 0; 
var dd_left = 0; 

var dd_offset_from_content = 70; var dd_top_offset_from_content = 10; 

jQuery(document).ready(function(){ 

    var $floating_bar = jQuery('#dd_ajax_float'); 

    var $dd_start = jQuery('#dd_start'); 
    var $dd_end = jQuery('#dd_end'); 
    var $dd_outer = jQuery('.dd_outer'); 

    // first, move the floating bar out of the content to avoid position: relative issues 
    $dd_outer.appendTo('body'); 

    dd_top = parseInt($dd_start.offset().top) + dd_top_offset_from_content; 

    if($dd_end.length){ 
     dd_end = parseInt($dd_end.offset().top); 
    } 

    dd_left = -(dd_offset_from_content + 55); 

    dd_adjust_inner_width(); 
    dd_position_floating_bar(dd_top, dd_left); 

    $floating_bar.fadeIn('slow'); 

    if($floating_bar.length > 0){ 

     var pullX = $floating_bar.css('margin-left'); 

     jQuery(window).scroll(function() { 

      var scroll_from_top = jQuery(window).scrollTop() + 30; 
      var is_fixed = $dd_outer.css('position') == 'fixed'; 

      if($dd_end.length){ 
       var dd_ajax_float_bottom = dd_end - ($floating_bar.height() + 30); 
      } 

      if($floating_bar.length > 0) 
      { 
       if(scroll_from_top > dd_ajax_float_bottom && $dd_end.length){ 
        dd_position_floating_bar(dd_ajax_float_bottom, dd_left); 
        $dd_outer.css('position', 'absolute'); 
       } 
       else if (scroll_from_top > dd_top && !is_fixed) 
       { 
        dd_position_floating_bar(30, dd_left); 
        $dd_outer.css('position', 'fixed'); 
       } 
       else if (scroll_from_top < dd_top && is_fixed) 
       { 
        dd_position_floating_bar(dd_top, dd_left); 
        $dd_outer.css('position', 'absolute'); 
       } 
      } 
     }); 
    } 
    }); 

jQuery(window).resize(function() { 
    dd_adjust_inner_width(); 
}); 

var dd_is_hidden = false; 
var dd_resize_timer; 
function dd_adjust_inner_width() { 

    var $dd_inner = jQuery('.dd_inner'); 
    var $dd_floating_bar = jQuery('#dd_ajax_float') 
    var width = parseInt(jQuery(window).width() - (jQuery('#dd_start').offset().left * 2)); 
    $dd_inner.width(width); 
    var dd_should_be_hidden = (((jQuery(window).width() - width)/2) < -dd_left); 
    var dd_is_hidden = $dd_floating_bar.is(':hidden'); 

    if(dd_should_be_hidden && !dd_is_hidden) 
    { 
     clearTimeout(dd_resize_timer); 
     dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeOut(); }, -dd_left); 
         jQuery('#dd_footer').fadeIn(); 

    } 
    else if(!dd_should_be_hidden && dd_is_hidden) 
    { 
     clearTimeout(dd_resize_timer); 
     dd_resize_timer = setTimeout(function(){ jQuery('#dd_ajax_float').fadeIn(); }, -dd_left); 
         jQuery('#dd_footer').fadeOut(); 
    } 
} 

function dd_position_floating_bar(top, left, position) { 
    var $floating_bar = jQuery('#dd_ajax_float'); 
    if(top == undefined) top = 0 + dd_top_offset_from_content;; 
    if(left == undefined) left = 0; 
    if(position == undefined) position = 'absolute'; 

    $floating_bar.css({ 
     position: position, 
     top: top + 'px', 
     left: left + 'px' 
    }); 
} 

</script> 

Answer 1

समस्या अपने विचार के साथ आता है: $(document).ready() आग DOM के तैयार होने, जब नहीं सभी स्क्रिप्ट तैयार हैं!

कोई विचार उस सामाजिक-एपीआई के ट्रिगर की खोज करना होगा जो आप उपयोग कर रहे हैं या बस अपनी गणना में देरी करें (उदा। setTimeout के माध्यम से)।

ध्यान रखें कि वे एसिंक्रॉन हैं, भले ही आप स्क्रिप्ट-टैग पर "async" निर्दिष्ट करते हैं, फिर भी आप नहीं जानते कि वे कब सक्रिय होंगे या समाप्त हो जाएंगे।

Answer 2

jQuery .ready() आईफ़्रेम और अन्य बाहरी मीडिया लोड करने की प्रतीक्षा नहीं करता है। ये सोशल बटन एक आईफ्रेम डालने से काम करते हैं। लोड घटना iframes आदि के लिए प्रतीक्षा करता है, इसलिए आप के बजाय उस घटना का उपयोग कर, की कोशिश कर सकते यानी

jQuery(window).load(function() { 

    /* put the code you had inside .ready() here */ 

}); 

Answer 3

मैं मानक डोम घटना window.onload उपयोग करने के लिए आप यह सुनिश्चित करना चाहते हैं, तो पता चलता है कि सभी बाहरी संपत्ति, लिपियों, छवियों , आदि पहले लोड किए गए हैं इससे पहले कि आप कुछ करना:

window.onload = function() { 
    // your script that needs to run after all the external assets are loaded 
} 

संदर्भ: https://developer.mozilla.org/en-US/docs/DOM/window.onload

Answer 4

मैं सिर्फ फेसबुक स्क्रिप्ट के साथ इसी तरह की समस्याओं में भाग ... मैं तो बस एकीकरण जावास्क्रिप्ट के साथ सिर अनुभाग में इस्तेमाल किया ए nd ने "एसिंक्रोनस" - जावास्क्रिप्ट-एंबेडिंग स्क्रिप्ट में योगदान दिया जो तब एसिंक्रोनस "हेई, फेसबुक अब भी तैयार है" - मेरे jQuery-eventqueue के लिए ...

मैं आपकी सहायता नहीं कर सकता विस्तार, क्योंकि मैं पूरी तरह से समझ नहीं पा रहा हूं कि आप क्या करना चाहते हैं और पूरे कोड को फिर से व्यवस्थित कर देंगे ... तो - मुझे निजी (ईमेल/स्काइप) से संपर्क करें या पता लगाने का प्रयास करें ... मैंने कोड की उस पंक्ति का उपयोग किया: pastie .org/private/9m4b9eet1dzzkl6duqpkrg