2012-12-16 2 views
-3

Я тоже задал этот вопрос, но у меня не было никакого решения. Я столкнулся с проблемой с моего сайта, где facebook устанавливается на абсолютно правую сторону страницы и будет перемещаться и отображаться при наведении мыши на нее. Пожалуйста, [спам ссылка удалена], чтобы увидеть его.facebook javascript не работает

Проблема в том, когда я наводил на нее надпись один раз и снова, если я на два или три раза больше не показываю ничего. Иногда даже в первой мыши мы ничего не будем показывать.

Я хочу сделать это как другой веб-сайт [спам ссылка удалена], где он будет отображаться снова и agian, и нет проблем.

Мой HTML код

<div id="fb-root"></div> 
<script>(function(d, s, id) { 
    var js, fjs = d.getElementsByTagName(s)[0]; 
    if (d.getElementById(id)) return; 
    js = d.createElement(s); js.id = id; 
    js.src = "//connect.facebook.net/en_US/all.js#xfbml=1"; 
    fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

<div id="facebook_tab"> 
    <a id="facebooklink" href="https://www.facebook.com/fe driksa" title="Fe dri on Facebook" onmouseover="document.getElementById('showme').style.display = 'block';this.style.display='none';"></a> 
    <div id="showme" onmouseout="document.getElementById('facebooklink').style.display='block';this.style.display='none';"> 
     <div class="fb-like-box" data-href="http://www.facebook.com/fe driksa" data-width="292" data-show-faces="false" data-stream="true" data-header="true"></div> 
    </div> 
</div> 

и мой CSS код

#facebook_tab 
{ 
    display: block; 
    width: 38px; 
    height: 102px; 
    background: url("{T_THEME_PATH}/images/facebook_tab.png") no-repeat 0 0; 
    right:0px; 
    top:200px; 
    position:fixed; 
} 

#facebook_tab span 
{ 
    display: none; 
} 

#facebook_tab:hover { 
width:292px; 
padding-left:32px; 
} 

#facebook_tab:hover span 
{ 
    display:block; 
background-color:#fff; 
border:2px solid #999; 
border-radius:5px; 
} 
+0

Мы не собираемся посещать ваш сайт, чтобы помочь вам устранить проблему. Предоставьте минимальную демонстрацию неприятного кода * здесь *. – Charles

+0

Я нашел, и я добавил код, могу ли вы предложить мне сейчас .. – user1820652

ответ

0

это может быть сделано полностью с помощью CSS (за исключением загрузки контента facebook).

даже плавная анимация должно быть сделано с css transitions

HTML и загрузка Facebook, как коробки:

<div id="facebook-wrapper"> 
    <a id="facebooklink" href="https://www.facebook.com/fedriksa" title="Fedri on Facebook"></a> 
    <div id="fb-root"></div> 
</div> 
<script>(function(d, s, id) { 
var js, fjs = d.getElementsByTagName(s)[0]; 
if (d.getElementById(id)) return; 
js = d.createElement(s); js.id = id; 
js.src = "//connect.facebook.net/de_DE/all.js#xfbml=1"; 
fjs.parentNode.insertBefore(js, fjs); 
}(document, 'script', 'facebook-jssdk'));</script> 

ваш CSS:

#facebook-wrapper { 
    position: fixed; 
    top: 50%; 
    width: 220px; // put the width of your facebook box + width of your facebook link here 
    right: -200px; // this should be the width of your facebook box 
} 

#facebook-wrapper:hover { 
    right: 0 
    transition: right 2s; 
    -moz-transition: right 2s; /* Firefox 4 */ 
    -webkit-transition: right 2s; /* Safari and Chrome */ 
    -o-transition: right 2s; /* Opera */ 
} 

нота, это проверялось, но должно дать вам представление о том, как это сделать!

+0

привет здесь, теперь, пожалуйста, объясните мне. Я не знаю больше кодов. Что я должен добавить в эти коды, которые вы предоставили. И, спасибо вам за ваш ответ .. что я должен добавить в обертку: hover ?? для firefox и других browers – user1820652

+0

просто поместите первую часть своего кода в свой html, вторую часть внутри вашего css и оттуда. – hereandnow78

+0

Да, я сделал то, что вы сказали, но теперь он ничего не показывает. – user1820652

Смежные вопросы