jQuery ドキュメントの準備に関係している可能性のある奇妙な問題があります。以下は、通常のソーシャル ネットワーキング スクリプトを含む html およびスクリプト ブロックです。以下のJavascriptブロックdd_outerは本体のdivの左端にdivを表示し、ブラウザウィンドウを縮小するとdivがフェードアウト、dd_footerdivがフェードインします。
問題は 2 つあります。1 つの問題は、ブラウザー ウィンドウが全幅 (1200 ピクセル以上) の場合、Facebook スクリプトが読み込まれず、一貫して表示されないことです。表示される場合と表示されない場合があり、ページのリロード後に表示される場合と表示されない場合があります。(ブラウザーや .htaccess キャッシュは関与しません)。Facebook の共有だけが一貫して表示されません。他のすべてのサービスは OK を示します。
2 つ目の問題は、ブラウザー ウィンドウが狭い場合 (650 ピクセル程度)、dd_outerdiv が表示されておらず、div が表示されている場合dd_footer、ブラウザー ウィンドウが最小量移動されるまで、ページのリロード時にフッター div が表示されないことです。次に、div が表示され、Facebook の共有などが表示されます。dd_footerモバイル デバイスの場合、ブラウザ ウィンドウは最初から狭く、 div を表示するために「微調整」する必要がないため、これは問題です。
この問題はdd_outer、 div の位置とスクロールの高さを設定するオプションを使用する WordPress プラグインからこのコードを採用したために発生した可能性があります。これが、ドキュメントの準備完了呼び出しの上の変数の理由です。
これは、ドキュメントの準備ができているように見える問題ですか?
変数をスクリプト自体に統合するにはどうすればよいですか? ハードコーディングされているかどうかは問題ではありません。必要に応じて変更できます。
これをjsfiddleに入れてデモを行いますが、ウィンドウのサイズ変更でdivが現実的に浮かびません。
わかりやすくするために CSS は含めていません。
これは、html およびソーシャル スクリプト ブロックです。
<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> 、以下のスクリプトによってフェードインおよびフェードアウトされます。
これは、ソーシャル サービスを左側に配置し、dd_outerそれをフェードアウトしてdd_footerdiv内にフェードインする jQueryです。
<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>