Facebook喜歡的按鈕不顯示時加載隱藏

我有點卡住了這一個。我有一個鏈接到完整文章的片段列表。當你將鼠標懸停在每個街區時，酒吧底部會出現一個包含社交分享按鈕（FB，Twitter & G + 1）的底部。Facebook喜歡的按鈕不顯示時加載隱藏

http://jsfiddle.net/6Ukmb/

請注意格式已經在例子的jsfiddle被剝了下來，G + 1不工作 - 這個問題並不重要。

我的問題是FB按鈕加載不正確。在Chrome中，一切都按預期工作。在FF或IE中，FB按鈕加載「隱藏」，我無法讓它們出現。

如果頁面仍在加載時鼠標位於文章按鈕之一上，則該文章的FB按鈕加載正常。如果懸停效果在FB完成加載時隱藏，則不會出現愛情或金錢。

我挑選了它，發現如果我從content-box .story-hover刪除css display: none;，它加載正常。當然，這也意味着隱藏的面板可以加載可見，直到有人懸停在它們上面隱藏，這是行不通的。

我想不出如何解決這個問題。另外，由於像按鈕這樣的FB的體積，它在開發版本上稍慢，所以延遲display:none直到頁面加載結束也不起作用。

來源

2012-09-05 TH1981

它似乎在那個小提琴中工作正常......？你有沒有想過使用'opacity'而不是'display'和「淡入」從'0'到'100'的社交欄？ – tcd

對我來說，在Firefox中小提琴不起作用。將嘗試'不透明度:) :)謝謝 – TH1981

無關，但爲什麼Facebook圖標包含一個iFrame，其中含有大量HTML？ –

使用CSS opacity這裏是一個不錯的選擇..一些基本的東西是這樣的：

HTML

<div class="div"> 
    <div class="social"></div> 
</div>

CSS

.div { 
    opacity: 0; 
    filter:alpha(opacity=0); 
    } 
.div:hover .social { 
    opacity: 1.0; 
    filter:alpha(opacity=100); 
    }

從那裏你可以添加過渡，使它看起來太好了！

來源

2012-09-08 18:57:49 tcd

CSS'visibility'是另一種選擇，當你需要元素對於鼠標點擊等是透明的時候，它是有益的。 – artfulrobot

偉大的提示！謝謝。 –

或使用不透明度並將高度從0更改爲初始值。這也會隱藏鼠標點擊。 –

每個瀏覽器在jsfiddle上的工作方式都不相同。如果您嘗試將代碼加載到您可以製作的測試html文件中。它可能仍然有效。只是不在js小提琴..有時jquery不會覆蓋css文件或標籤中的css代碼..所以，如果這樣做。它可能被卡住了。

我已經看到它隨機發生，當我在電腦/和瀏覽器上工作時，我的小提琴。

來源

2012-09-06 22:25:35 CoasterChris

不透明度方法的作品，但是，按鈕是活在頁面上，只是不可見。

所以，如果你有不透明度0的div與你需要點擊的任何其他部分重疊，你將意外點擊隱藏的按鈕。

我希望這種方法可以工作，可悲的是我的網站並不是由於這一點。

來源

2012-10-15 23:36:34

這不是一個答案，這是一條評論！希望我能回過頭來研究它，並把它變成一個答案。

處理同樣的問題。 Firefox +隱藏容器。唯一不同的是我使用滑動滑塊/滑動來取消隱藏/隱藏，但我認爲這是無關緊要的。

剝離下來，我的HTML看起來像這樣：

<div id="fb_like_button" class="hide"> 
    <div class="fb-like" data-action="recommend" ...></div> 
</div>

我注意到，隱藏和取消隱藏容器之間的區別，也就是從格＃fb_like_button刪除我的「隱藏」類中，<span>和表示facebook裏面div.fb-like改變樣式屬性的寬度和高度。

所以，當呈現頁面（再次，大力精簡HTML）

取消隱藏：

<div id="fb_like_button" class=""> 
    <div class="fb-like" data-action="recommend" ...> 
    <span style="height: 61px; width: 97px;"> 
     <iframe style="height: 61px; width: 97px;">

隱藏：

<div id="fb_like_button" class="hide"> 
    <div class="fb-like" data-action="recommend" ...> 
    <span style="height: 0px; width: 0px;"> 
     <iframe style="height: 0px; width: 0px;">

寬度和高度風格播放使用Firefox的開發者完成渲染後的工具允許我將類似按鈕修改爲可見。

還沒有解決方案，但我會繼續更新，因爲我發現更多的信息。我會盡量不要添加額外的JavaScript來設置這些風格屬性，而是解碼wtf facebook正在做的事情。只希望這可以幫助別人。

來源

2012-10-18 22:08:42 FlipMcF

我們有同樣的問題，並用CSS解決它通過設置含有div的初始寬度和高度爲零，然後，當觸發器被激活時，使用jQuery：

組不透明度爲零（隱藏DIV而它膨脹）
設定寬度和高度（展開DIV）
有生不透明度爲1（在div褪色）

淡出時，沒有必要重新設置婦女參與發展th和高度爲零。在將不透明度設置爲零之後，只需設置爲顯示：無。現在Facebook按鈕已經加載並且其尺寸已經設置好了，它不會改變。

來源

2012-11-20 22:04:55

，我曾經是不會呈現像按鈕FB，直到顯示容器使用

window.fbAsyncInit = function() { 
    FB.init({ 
     xfbml:false // Will stop the fb like button from rendering automatically 
    }); 
};

然後呈現類似按鈕，這樣可以來達到的一種替代，你可以使用

FB.XFBML.parse(); // This will render all tags on the page

或以下是關於如何呈現元素內的所有XFBML的jquery示例

FB.XFBML.parse($('#step2')[0]);

或普通的JavaScript

FB.XFBML.parse(document.getElementById("step2"));

來源

2012-12-03 01:25:43 Mike

偉大的建議。你也可以在你顯示一個包含fb like按鈕的元素之後調用'FB.XFBML.parse（）;然後再渲染它。 – kontur

質量。這是一種享受。謝謝邁克。 – 2014-04-08 05:33:10

設置不透明度爲0，是不是我的解決方案，因爲它隱藏和重疊任何你需要點擊上，也jQuery的淡入功能使用的CSS顯示屬性不透明度。

所以我想出的解決方案是顯示容器爲塊，但不在窗口左側：-9999px，然後我設置了1s〜2s的定時器（所有社交按鈕呈現所需的時間）和改變顯示爲無，並返回到原來的位置：

#bnts_container 
{ 
    left:-9999px; 
    display:block; 
} 

$(window).load(function() { 

    setTimeout(function() { 
    $('#bnts_container').css("display", "none"); 
    $('#bnts_container').css("left", "50%"); 
    } , 2000); 

});

點擊+共享按鈕here來測試該溶液中。

來源

2013-02-28 08:27:45

而不是設置顯示：無，嘗試通過使用margin-top或z-index來隱藏它。這些都不會像按鈕一樣打破FB。

.hide2 { 
    margin-top: -1000px !important; 
    position: relative ; 
    z-index: -1 !important; 
}

來源

2013-04-19 15:27:36

我寧願讓它絕對容器

iframe{ 
    position: absolute !important; 
    height: 500px !important; 
    }

來源

2013-12-09 02:14:36 kplates

使用該CSS中：

.fb_iframe_widget span, 
iframe.fb_iframe_widget_lift, 
.fb_iframe_widget iframe { 
    width:80px !important; 
    height:20px !important; 
    position:relative; 
}

背後的工藝：通過使用覆蓋從Facebook的DATAS你的CSS「！重要「

來源

2014-09-20 13:38:27 TonkBerlin

當然，它完成了。 – TonkBerlin

Facebook喜歡的按鈕不顯示時加載隱藏

回答

相關問題