Lỗi tài liệu jQuery sẵn sàng với các dịch vụ chia sẻ xã hội

Question

Tôi có một vấn đề lạ có thể phải làm với tài liệu jQuery đã sẵn sàng. Dưới đây là khối html và tập lệnh chứa các tập lệnh mạng xã hội thông thường. Khối Javascript dưới đây hiển thị các div dd_outer trên cạnh trái của div cơ thể, và khi cửa sổ trình duyệt bị thu hẹp, div bị mờ đi và div dd_footer bị mờ dần. Fadein và fadeout giữa hai div hoạt động OK.

Vấn đề là hai lần: một vấn đề là khi cửa sổ trình duyệt có chiều rộng đầy đủ (1200px +), tập lệnh Facebook sẽ không tải và hiển thị nhất quán; đôi khi nó xuất hiện và đôi khi không, đôi khi sau khi tải lại trang và đôi khi không. (Không có trình duyệt hoặc bộ nhớ đệm .htaccess có liên quan). Chỉ có phần Facebook không hiển thị nhất quán; tất cả các dịch vụ khác hiển thị OK.

Vấn đề thứ hai rằng khi cửa sổ trình duyệt là hẹp - 650 px hoặc lâu hơn, khi dd_outer div không được hiển thị và dd_footer div là - div chân sẽ không hiển thị trên một tải lại trang cho đến khi cửa sổ trình duyệt là đã chuyển số tiền nhỏ nhất. Sau đó, div sẽ hiển thị, Facebook chia sẻ và tất cả. Đối với thiết bị di động, đây là một vấn đề vì cửa sổ trình duyệt sẽ bị thu hẹp để bắt đầu và không cần phải được "đặt nhẹ" để hiển thị màn hình div dd_footer.

Sự cố này có thể xảy ra vì tôi đã điều chỉnh mã này từ plugin WordPress sử dụng các tùy chọn để đặt vị trí của chiều cao cuộn và chiều cao dd_outer. Đó là lý do cho các biến trên cuộc gọi sẵn sàng của tài liệu.

Đây có phải là vấn đề với những gì có vẻ là vấn đề về tài liệu sẵn sàng không?

Làm cách nào để các biến có thể được tích hợp vào chính tập lệnh? Nó không quan trọng nếu chúng được hardcoded; Tôi có thể thay đổi chúng khi cần thiết.

Tôi sẽ ném điều này trong jsfiddle để demo nhưng các div sẽ không thực sự nổi với thay đổi kích thước cửa sổ.

Tôi chưa bao gồm CSS để làm rõ.

Đây là html và kịch bản xã hội khối:

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

Trong chân là<div id="dd_footer">that contains the same social scripts as above</div>và đang nhạt dần trong và ngoài bởi kịch bản dưới đây:

Đây là jQuery đặt các dịch vụ xã hội dd_outer ở bên trái và mờ dần và mờ dần trong dd_footer 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

Sự cố xảy ra với ý tưởng của bạn: $(document).ready() kích hoạt khi DOM sẵn sàng, không phải khi tất cả tập lệnh đã sẵn sàng!

ý tưởng sẽ là tìm kiếm trình kích hoạt của các API xã hội mà bạn đang sử dụng hoặc chỉ trì hoãn tính toán của bạn (ví dụ: qua setTimeout).

Hãy nhớ rằng chúng là asyncron, ngay cả khi bạn chỉ định "không đồng bộ" trên thẻ tập lệnh sai, bạn vẫn không biết thời điểm chúng sẽ kích hoạt hoặc kết thúc.

Answer 2

jQuery .ready() không chờ đợi iframe và phương tiện bên ngoài khác tải. Các nút xã hội này có xu hướng hoạt động bằng cách chèn khung nội tuyến. Sự kiện này tải không chờ iframe vv, vì vậy bạn có thể thử sử dụng sự kiện mà thay vào đó, tức là

jQuery(window).load(function() { 

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

}); 

Answer 3

tôi đề nghị sử dụng các sự kiện DOM tiêu chuẩn window.onload nếu bạn muốn chắc chắn rằng tất cả các tài sản bên ngoài, kịch bản, hình ảnh vv được nạp đầu tiên trước khi bạn làm điều gì đó:

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

tham khảo: https://developer.mozilla.org/en-US/docs/DOM/window.onload

Answer 4

tôi chỉ chạy vào vấn đề tương tự với kịch bản facebook ... tôi chỉ được sử dụng tích hợp trong các HEAD-phần với javascript một nd đã thêm một phần tử "không đồng bộ" vào tập lệnh nhúng javascript, sau đó sẽ kích hoạt một "không đồng bộ", hiện tại, facebook đã sẵn sàng, "-kết thúc với jQuery-eventqueue của tôi ...

Tôi không thể giúp bạn chi tiết, bởi vì tôi không hoàn toàn hiểu những gì bạn muốn làm và sẽ tổ chức lại toàn bộ mã A LOT ... vì vậy - liên hệ với tôi tư nhân (email/skype) hoặc cố gắng tìm ra ... Tôi đã sử dụng các dòng mã: pastie .org/private/9m4b9eet1dzzkl6duqpkrg