Jak zrobić wysuwany panel z przyciskiem „lubię to”

Na wielu stronach Internetowych można dostrzec widget w postaci małego paska po jednej ze stron odwiedzanego serwisu. Po najechaniu paska kursorem (często w postaci pliku graficznego) rozsuwa się on i umożliwia odwiedzającym kliknięcie przycisku „lubię to”. Napisanie takiego skryptu jest bardzo proste, a zarazem może się on przyczynić do wzrostu oglądalności i atrakcyjności naszej strony.

Przygotowanie grafiki i pliku HTML

Nasz przycisk powinien składać się z elementu widocznego, względnie małego, aby nie przykrywał dużej części strony oraz tła, na którym wyświetlimy nasz like button. Jeśli pole po rozsunięciu ma być wyższe od przycisku to nie możemy zapomnieć o dodaniu przeźroczystości pod nim. Przykładowy gotowy plik może wyglądać tak:

Z założenia będzie on się rozwijał od prawej do lewej.

Stwórzmy kontener (<div id=”fejsik”></div>), któremu jako tło ustawimy powyższy obrazek. Przy okazji ukryjemy go stosując ujemny margines.

Kod CSS:

* {margin:0;padding:0;} /*piszmy poprawnie :)*/
#fejsik {
	display: block; /*pozycja blokowa*/
	position: fixed; /*obrazek nieruchomy*/
	z-index: 666; /*tak na wszelki wypadek*/
	margin-top: 100px; /*maly odstep od gory*/
	background-image: url(back1.png); /*plik tla*/
	width: 200px; /*szerokosc*/
	padding-left: 60px; /*odstep zawartosci od lewej krawedzi*/
	/*laczna szerokosc 200+60 = 260px*/
	height: 295px; /*wysokosc*/
	padding-top: 5px; /*maly odstep od gory*/
	/*laczna wysokosc obrazka 295+5 = 300px*/
	right: -210px; /*ukrywamy 210px obrazka od prawej krawedzi*/
	float: right; /*do prawej*/
	/*zostaje 50px napisu "facebook"*/
}

Wewnątrz naszego znacznika o identyfikatorze fejsik należy umieścić like box, który można wygenerować za darmo w strefie dla developerów facebooka. Można oczywiście umieścić tam dowolną treść jak dane kontaktowe, albo zbiór ciekawych linków.

DEMO z ukrytym like box’em.

Piszemy skrypt

Do pełni szczęścia brakuje nam już tylko animacji, która po najechaniu na obrazek rozsunie jego dalszą część. Do realizacji zadania skorzystamy jak zawsze z biblioteki jQuery.

$(document).ready(function() {
	$("#fejsik").mouseover(function() {
		$(this).stop().animate({
			right: '0',
		}, 300);
	})
 
	$("#fejsik").mouseout(function(){
		$(this).stop().animate({
			right: '-210px',
		}, 200);
	});
});

DEMO

Po najechaniu myszką na nasz kontener $(„#fejsik”).mouseover(function() { zatrzymujemy wszystkie aktywne animacje i uruchamiamy własną $(this).stop().animate({, która zmniejsza prawy margines do zera right: '0′,. Animacja trwa 300ms }, 300);. W analogiczny sposób korzystamy ze zdarzenia mouseout, aby schować nasz panel po opuszczeniu kursora z kontenera.

Zmieniamy zdarzenie na bardziej przyjemne

Większa ilość wysuwanych elementów na stronie może przeszkadzać użytkownikowi w nawigacji po niej. Zwłaszcza, jeśli do animacji dochodzi po najechaniu na jakiś element kursorem. Proponuje zatem zmodyfikować zdarzenie z powyższego przykładu z najechania kursorem na kliknięcie myszką.

$("#fejsik2").click(function() {
	var stan = $(this).css("left");
	if(stan == "-210px") {
		$(this).stop().animate({
			left: '0',
		}, 300);
	} else {
		$(this).stop().animate({
			left: '-210px',
		}, 200);
	}
})

DEMO – w zademonstrowanym przykładzie po prawej stronie znajduje się standardowy panel, natomiast po lewej przykład zmodyfikowany, na który trzeba kliknąć, aby się rozwinął.

Aby po drugim kliknięciu na obrazek nasz panel się schował skorzystaliśmy z instrukcji warunkowej, która sprawdza aktualny odstęp selektora od lewej krawędzi.

20 thoughts on “Jak zrobić wysuwany panel z przyciskiem „lubię to”

  1. Witam,
    nie jestem twórcą stron internetowych ale amatorsko administruję stroną w typo3.

    Mam tam możliwość wpisania jedynie pełnego skyptu w html jako element strony – niestety z html jestem noga :(. Czy ktoś może pomóc kobiecie i wpisać mi pełny przykładowy skrypt takiego banera, żebym mogła podmienić tylko poszczególne elementy? 🙂

      1. Wkleja się pięknie ale nie animuje po najechaniu myszą…:/ może w typo3 to trzeba jakoś inaczej niż wpisując tekst do edytora html. Tło wgrałam na serwer i zrobiłam odwołanie w treści kodu, który mi podałeś bezpośrednio do wgranego zdjęcia. Chyba, że masz jeszcze jakiś pomysł:)

        Efekt końcowy widać wąski pasek z boku z napisem facebook.

  2. Jeśli ktoś ma bloga postawionego na WordPress i chciałby zrobić wysuwanego likeboxa to polecam zastosowanie bardzo prostej wtyczki, a mianowicie wtyczki Free Social Slider By ARScode. Wymagane jest podanie URL Twojego funpage, ustawienie pozycji: w lewo lub w prawo, pokazywanie twarzy lub nie, pokazywanie strumieni lub nie i gotowe. Szybko, darmowo i skutecznie 🙂 Pozdrawiam.

  3. nie wiem czy tamta wiadomosc sie wpisala czy nie, ale raz jeszcze pomocny ten kod byl, dzieki za pomoc

  4. Kolego, a jak zrobić aby ten box, który rozsuwa się po kliknięciu był po prawej stronie?

  5. Wszystko fajnie działa, ale jeżeli wklejam mój link do fanpage to nie czyta go w tym „okienku”

    co nie tak robię ?

Dodaj komentarz

Twój adres e-mail nie zostanie opublikowany. Wymagane pola są oznaczone *