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.
Strona 1 z 1
[HTML] Wtyczka Facebook'a poszerza mi stronę.
#2
Napisano 27 grudzień 2011 - 21:52
do body dodaj
a zniknie pasek przewijania na dole.
aby wtyczka przesuwała się wraz ze stroną dodaj do poniższej linijki position: fixed;:
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; ">
Strona 1 z 1

Logowanie
Rejestracja
Pomoc

Cytuj
