Forum Webmasterskie: [HTML] Wtyczka Facebook'a poszerza mi stronę. - Forum Webmasterskie

Skocz do zawartości

Strona 1 z 1
  • Nie możesz napisać tematu
  • Nie możesz odpowiedzieć

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

#1 Użytkownik nie jest zalogowany   kosel07 Ikona

  • Przedszkolak
  • Pip
  • Grupa Members
  • Postów 2
  • Rejestracja 27-grudzień 11

Ikona posta  Napisano 27 grudzień 2011 - 12:50

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!


[code=text]<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>




[/code]

Pozdrawiam, Kosel.
0

#0 Reklama

  • WebForum.pl
  • Grupa Advert

Napisano --



#2 Użytkownik nie jest zalogowany   mervin Ikona

  • Administrator
  • Ikona
  • Grupa Administrators
  • Postów 143
  • Rejestracja 17-lipiec 09

Napisano 27 grudzień 2011 - 21:52

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

0

#3 Użytkownik nie jest zalogowany   kosel07 Ikona

  • Przedszkolak
  • Pip
  • Grupa Members
  • Postów 2
  • Rejestracja 27-grudzień 11

Napisano 28 grudzień 2011 - 00:13

Bardzo dziękuję za pomoc.

P.S. O dziwo pasek zniknął już po zmianie pozycji na fixed i nie trzeba było nic więcej zmieniać. Jeśli komuś może się przydać ta wtyczka, to kopiujcie. ;)

Pozdrawiam, Kosel.
0

Strona 1 z 1
  • Nie możesz napisać tematu
  • Nie możesz odpowiedzieć

Użytkownicy przeglądający ten temat: 1
0 użytkowników, 1 gości, 0 anonimowych