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:

[codesyntax lang=”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"*/
}

[/codesyntax]

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.

[codesyntax lang=”javascript”]

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

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

[/codesyntax]

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ą.

[codesyntax lang=”javascript”]

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

[/codesyntax]

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.