Facebook Podobnie jak przyciski nie wyświetlające się po załadowaniu ukryte

Question

Jestem trochę związany z tym. Mam listę artykułów z fragmentami, które prowadzą do pełnego artykułu. po najechaniu kursorem na każdą reklamę pojawia się pasek u dołu bloga z przyciskami udostępniania społecznościowego (FB, Twitter & G + 1).

http://jsfiddle.net/6Ukmb/

Należy pamiętać, że formatowanie została okrojona w jsfiddle przykład i G + 1 nie działa - nie ważne na to pytanie.

Mój problem polega na tym, że przycisk FB nie ładuje się prawidłowo. W Chrome wszystko działa zgodnie z oczekiwaniami. W FF lub IE przyciski FB ładują "ukryte" i nie mogę ich wyświetlić.

Jeśli po załadowaniu strony mysz znajduje się nad jednym z przycisków artykułów, przycisk FB tego artykułu ładuje się prawidłowo Jeśli efekt unoszący się ukryje, gdy FB zakończy ładowanie, nie pojawi się z miłości ani pieniędzy.

Wybrałem go od siebie i okazało się, że jeśli usunę css display: none; z content-box .story-hover, ładuje się dobrze. Oczywiście oznacza to również, że ukryte panele ładują się, dopóki ktoś się na nich nie zakryje, co nie zadziała.

Nie mogę wymyślić, jak rozwiązać ten problem. Ponadto, ze względu na ilość przycisków podobnych do FB, jest trochę wolniej w mojej kompilacji dev, więc opóźnienie ładowania display:none do końca strony nie zadziała.

Answer 1

Korzystanie z CSS opacity jest dobrym rozwiązaniem tutaj .. coś podstawowy tak:

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); 
    } 

Stamtąd można dodać przejścia, aby wyglądać miły!

Answer 2

Każda przeglądarka działa inaczej na jsfiddle. Jeśli spróbujesz załadować kod do testowego pliku html, który możesz spreparować. To może nadal działać. Po prostu nie na js fiddle .. Czasami jquery nie nadpisuje kodu css w plikach css lub tagach. Tak więc, jeśli tak zrobi. Prawdopodobnie utknął w ukryciu.

Widziałem to przypadkowo, gdy pracuję nad moimi skrzypcami na komputerach i przeglądarkach.

Answer 3

Metoda krycia działa, jednak przyciski są aktywne na stronie, tylko niewidoczne.

Jeśli masz element div z kryciem 0, który nakłada się na wszystko, co musisz kliknąć, klikniesz ukryte przyciski przypadkiem.

Miałem nadzieję, że ta metoda zadziała, niestety dla mojej witryny to nie jest z tego powodu.

Answer 4

To nie jest odpowiedź, to jest komentarz! Mam nadzieję, że wrócę i popracuję nad tym i przekształcę go w odpowiedź.

Radzenie sobie z tym samym problemem. Firefox + ukryty kontener. Jedyną różnicą jest to, że używam onclick slideDown/slideUp do odkrywania/ukrywania, ale myślę, że to nieistotne.

Stripped dół, mój html wygląda tak:

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

Zauważyłem, że różnica między ukrytym i nieskrywaną pojemnika, czyli usunięcie moją klasę 'hide' z div # fb_like_button The <span> i że facebook umieszcza wewnątrz div.fb-like zmienia atrybuty stylu szerokość i wysokość.

Więc, gdy strona jest renderowane (znów mocno okrojona html)

zostały odkryte:

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

ukryty:

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

Grając z szerokością i wysokością stylu przy użyciu firefox developer narzędzia po pełnym renderowaniu pozwoliły mi zhakować podobny przycisk z powrotem do widocznego.

Brak rozwiązania, ale będę aktualizować, ponieważ znajdę więcej informacji. Będę się bardzo starał nie dodawać dodatkowego javascriptu, który przywróci te atrybuty stylu, ale raczej dekoduje wtf facebook. Mam tylko nadzieję, że to pomoże komuś.

Answer 5

Mieliśmy ten sam problem i rozwiązać go przez ustawienie początkowe szerokość i wysokość elementu div do zera z CSS, a następnie, gdy spust jest aktywna, użyj jQuery:

• ustawionej krycie do zera (aby ukryć div, gdy jest on rozszerzony)
• szerokość zadaną i wysokość (rozszerzenia div)
• ożywione krycie do 1 (Fade In div)

podczas wygaszania, nie ma potrzeby, aby zresetować wid th i wzrost do zera. Po prostu ustaw wyświetlanie: brak po animacji krycia na zero. Po załadowaniu przycisku Facebook i ustawieniu jego wymiarów nie ulegnie zmianie.

Answer 6

Alternatywą że kiedyś było nie czynią FB jak przycisk, aż pojawi się pojemnik ten można osiągnąć za pomocą

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

następnie renderować Przycisk jak można użyć

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

lub poniżej znajduje się przykład jQuery, w jaki sposób uczynić wszystko XFBML obrębie elementu

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

lub zwykły javascript

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

Answer 7

Ustawianie przezroczystości 0 nie jest rozwiązaniem dla mnie, bo to ukrywa i pokrywa wszystko, czego potrzeba, aby kliknąć na i również jquery fadein funkcja wykorzystuje właściwość wyświetlania css nie nieprzezroczystości.

, więc rozwiązaniem, które wymyśliłem, jest wyświetlenie kontenera jako bloku, ale z okna po lewej: -9999px, a następnie ustawię timer na 1s ~ 2s (czas potrzebny na renderowanie wszystkich przycisków społecznościowych) i zmienić wyświetlacz sobie równych i z powrotem do pierwotnej pozycji:

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

$(window).load(function() { 

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

}); 

Kliknij przycisk + Share here przetestować to rozwiązanie.

Answer 8

Zamiast ustawić wyświetlacz: brak, spróbuj ukryć go za pomocą marginesu górnego lub z-indeksu. Oba te elementy nie złamią przycisku podobnego do FB.

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

Answer 9

wolę, aby to absolutna wewnątrz pojemnika

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

Answer 10

Korzystanie ten CSS:

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

technic za: Ty nadpisać dane teleadresowe z Facebooka z CSS za pomocą " ! important "