Skocz do zawartości

[HTML] Wtyczka Facebook'a poszerza mi stronę.


kosel07

Recommended Posts

Witam.

Przygotowuję stronę (a właściwie forum) na podstawie PHP-Fusion v7, ale problem nie dotyczy tego oprogramowania, samego kodu HTML, który chcę wstawić na stronę, dlatego piszę w tym dziale.

Ostatnio sklejając w całość kilka kodów, zrobiłem sobie wtyczkę do Facebooka.

Działa ona mniej więcej tak:

Po prawej stronie jest ikonka Facebooka, a po najechaniu na nią myszką, wysuwa się całość, czyli panel z osobami, które to lubią itd.

Wszystko się niby poprawnie animuje, ale problem jest taki, że kiedy dodatek jest zsunięty, to na dole strony pojawia się scrollbar do poziomego przewijania strony (czyt. kiedy wtyczka nie jest wysunięta, to strona się poszerza).

Jeśli coś niejasno zobaczyłem, to możecie zobaczyć tę wtyczkę, wchodząc na moją stronę: http://www.psm.aq.pl - nie traktujcie tego, jako reklama/spam, bo strona jeszcze nawet nie rozpoczęła swojej działalności.

Czy ktoś z Was jest w stanie tak przerobić ten kod, żeby wtyczka zsuwała się poza obszar strony, nie burząc przy tym budowy strony (nie rozszerzając jej)?

P.S. Aktualnie ten dodatek "wisi" sobie kilkaset pikseli od góry strony. Jeśli ktoś wie, jak zrobić, żeby przesuwał się wraz ze stroną, to również bardzo proszę o pomoc.

Poniżej wklejam kod wtyczki. Z góry wielkie dzięki za pomoc!

<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/pl_PL/all.js#xfbml=1";
fjs.parentNode.insertBefore(js, fjs);
}(document, 'script', 'facebook-jssdk'));</script>



<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<title></title>
<meta http-equiv="content-type" content="text/html;charset=utf-8;" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript">
var moved = false;
function moveIn() {
if(!moved) {
$('#facebook').stop();
$('#facebook').animate({
right: '0px'
}, 1000);
moved = true;
}
}
function moveOut() {
if(moved) {
$('#facebook').stop();
$('#facebook').animate({
right: '-251px'
}, 1000);
moved = false;
}
}
</script>
<style type="text/css">
#facebook {
width: 310px;
position: absolute;
top: 100px;
right: -251px;
}
#facebook-button {
width: 60px;
height: 111px;
float: left;
background: url('http://www.psm.aq.pl/images/fbbuttonv.png');
}
#facebook-content {
width: 250px;
height: 384px;
float: right;
background: url('http://www.psm.aq.pl/images/fbbg.png');
}
</style>
</head>
<body>
<div id="facebook" onmouseover="moveIn();" onmouseout="moveOut();">
<div id="facebook-button"></div>
<div id="facebook-content">

<br />
<br />
<center><div class="fb-like-box" data-href="http://www.facebook.com/pages/PSMaqpl-Podkarpacka-Scena-Muzyczna/287926797926159" data-width="240" data-height="330" data-colorscheme="dark" data-show-faces="true" data-border-color="000000" data-stream="false" data-header="true"></div></center>


</div>
</div>
</body>
</html>




Pozdrawiam, Kosel.

Link do komentarza
Udostępnij na innych stronach

do body dodaj

overflow-x:hidden;

a zniknie pasek przewijania na dole.

aby wtyczka przesuwała się wraz ze stroną dodaj do poniższej linijki position: fixed;:

<div id="facebook" onmouseover="moveIn();" onmouseout="moveOut();" style="position: fixed; right: -251px; ">

Link do komentarza
Udostępnij na innych stronach

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Gość
Odpowiedz...

×   Wkleiłeś treść z formatowaniem.   Usuń formatowanie

  Only 75 emoji are allowed.

×   Twój link będzie automatycznie osadzony.   Wyświetlać jako link

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Wczytywanie...
×
×
  • Utwórz nowe...