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

Sty 06
2012

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 komentarzy w “Jak zrobić wysuwany panel z przyciskiem „lubię to””

  1. Julian Pszczołowski napisał/a:

    W DEMO zamiast „Powrót” jest „Powrtot”. 😛
    (po zmianie możesz usunąć ten komentarz)

  2. bvcgfjh napisał/a:

    nie działa pod IE9, ff ok

  3. beti napisał/a:

    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? 🙂

  4. Robert napisał/a:

    Mam problem zrobiłem tak jak w opisie lecz mi sie nie chce wysuwac prosił bym o pomoc moje gg 13781842 Strona internetowa na której to mam http://www.Miasto-Skilla.pl

  5. Robert napisał/a:

    a mógłbyś mi napisac ten cały kod html bo jestm zielony w tym

  6. Paweł napisał/a:

    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.

  7. inspir napisał/a:

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

  8. Joachim napisał/a:

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

  9. Madras79 napisał/a:

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

    co nie tak robię ?

  10. Bartek napisał/a:

    wycofuje się, działa 🙂 problem był u mnie

  11. Metrans napisał/a:

    super działa! dzięki Ci 🙂

Dodaj komentarz

Twój adres email nie zostanie opublikowany. Pola, których wypełnienie jest wymagane, są oznaczone symbolem *