Kod:Wysuwany likebox
Z ToProste
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>Jak zrobić wysuwany likebox</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.3.2/jquery.min.js"></script> <link rel="stylesheet" type="text/css" href="style.css" /> <script type='text/javascript'>
$(function(){ $('#fb_rozwin').css('left','-205px'); $('#fb_rozwin').hover( function () { $('#fb_rozwin').animate({left: '0px'}, 800 ); // szybkosc wysuwania $(this).addClass('zwin'); }, function () { $('#fb_rozwin').animate({left: '-205px'}, 700 ); // szybkosc ukrywania $(this).removeClass('zwin'); } ); });
</script> <style type="text/css" >
/* Styl dla wysuwanego likebox'a */ #fb_rozwin { height: 402px; width: 235px; top: 50%; left: 0px; position: fixed; margin-top: -201px; /* = wysokosc panelu / 2 (polozenie panelu w pionie) */ padding: 10px; /**************************************************************************** Wybierz lokalizacje pliku tla. Pozostale niepotrzebne wiersze mozesz usunac. *****************************************************************************/ /* url pliku tla na dysku hosta - zalecane */ /* podaj url pliku na twoim hoscie */ background: url("images/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; /* url pliku tla na odleglym serwerze udostepniajacym pliki obrazow */ /* tlo pierwsze */ background: url("http://img841.imageshack.us/img841/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; /* tlo drugie */ background: url("http://img17.imageshack.us/img17/5074/bglikeboxfacebookfanpag.png") no-repeat scroll 0 0 transparent; } .zwin {background-position: 0px 0px -242px 0px;} #fb_zawartosc { height: 357px; width: 182px; display: block; float: left; background-color: #FFFFFF; }
</style> </head> <body> <div id='fb_rozwin'><!-- Facebook --> <div id='fb_zawartosc'> <script src="http://connect.facebook.net/pl_PL/all.js#xfbml=1"></script> <fb:like-box href="http://www.facebook.com/apps/application.php?id=444351772241962" width="182" height="340" colorscheme="dark" show_faces="true" stream="false" header="false"></fb:like-box> <!-- Tego nie wolno usuwac --> <div style="text-align:center; font-size:xx-small"> <a target="_blank" title="Wysuwany likebox" href="http://skrypt.uni.me/news.php?readmore=6">likebox</a> </div> <!-- Tego nie wolno usuwac --> </div> </div> </body> </html>
Zobacz też
<htmlet>zobacz-tez</htmlet>
