Artykuł

wrz 07 2011
0

Przewijany pasek społecznościowy dla bloga w jQuery i CSS

Ostatnimi czasy przeglądając różne blogi (szczególnie te oparte o Wordpressa), natknąłem się na tzw. social slider. Social slider to specjalny pasek, który przewija się razem z artykułem/wpisem u boku strony i pozwala na polecenie treści wyświetlanej aktualnie na stronie w wybranych przez autora serwisach społecznościowych. Ponieważ osobiście nie korzystam z Wordpressa i nie mogę najzwyczajniej w świecie zainstalować sobie kolejnego rozszerzenia, postanowiłem że sam sobie coś takiego wykombinuję. W gruncie rzeczy okazało się, że to jest naprawdę banalna sprawa. Do realizacji celu, wykorzystałem jQuery oraz CSS.

Założenia

Na początek, musimy poczynić pewne założenia. Bazą dla naszych założeń, będzie layout Alt Control Delete. Tak więc nasza strona, składać się będzie z:

  • Nagłówka
  • Części centralnej
    • Artykułu
    • Sekcji społecznościowej
  • Stopki

Wszystko to, obrazowo prezentować będzie się następująco:

Dla nas, kluczowym punktem jest centralna część, będąca pojemnikiem dla artykułu oraz sekcji społecznościowej. W moim przypadku, liczy sobie ona 960 pikseli (warto zapamiętać szerokość tej sekcji na później - będzie nam jeszcze potrzebna.

Sekcja społecznościowa domyślnie będzie wyświetlana w swoim miejscu pod artykułem. Jeśli szerokość ekranu będzie wystarczająca, to za pomocą jQuery i CSS będziemy mogli ją przemieścić na lewo od artykułu.

Stworzony przez nas skrypt, będzie po załadowaniu przemieszczał sekcję (jeśli warunki zostaną spełnione), a także będzie reagował na zmiany wielkości okna przeglądarki. Dzięki temu, przyciski polecające nigdy nie znikną, a widziałem już takie przypadki na niektórych blogach.

Klasa CSS dla paska

Przy tworzeniu klasy dla paska, przydatny okaże się Firebug albo Narzędzia dla programistów w Chrome. Domyślnie pasek znajduje się pod artykułem i właśnie dla tego położenia powinien posiadać swoje wyjściowe style. Dlatego powinniśmy właśnie zacząć od normalnej lokalizacji paska społecznościowego - wystarczy zmniejszyć szerokość okna tej strony, by zobaczyć jak jest on domyślnie zaimplementowany na tym blogu.

Po utworzeniu domyślnego wyglądu, możemy zastosować zasadę progresywnego ulepszania. Za pomocą Firebuga/Narzędzi dla programistów dodajemy/modyfikujemy/usuwamy właściwości w oknie przeglądarki, by sprawdzić jak się zachowa nasz pasek (unikamy w ten sposób czasochłonnej zmiany pliku styli i ciągłego odświeżania strony). Uzyskane na tej podstawie rezultaty, osobiście zawarłem w klasie CSS:

.social-fixed{
	position: fixed;
	top: 135px;
	width: 97px;
	margin: 0 0 0 -110px !important;	
	padding: 0 !important;
	border: 0 !important;
}

Kluczowe w tym przypadku, są pierwsze cztery właściwości. Po pierwsze, ustalamy stałą pozycję. Position: fixed, powoduje że wybrany element pozostaje zawsze w tym samym miejscu okna - nawet podczas przewijania. Właściwość top, mówi nam że ma być on odsunięty o 135 pikseli od góry - w moim przypadku, jest to miejsce w którym zaczyna się część nawigacyjna.

Trzecia właściwość, określa szerokość naszej sekcji - jeśli odpowiednio rozplanowaliśmy elementy w niej zawarte, to powinny dopasować się w ten sposób, tak jak to się dzieje na Alt Control Delete.

Czwarta właściwość, określa odsunięcie naszej społecznościowej sekcji. Ponieważ domyślnie znajdujemy się w centralnej części, która jest wyśrodkowana, to aby z niej wyjść, musimy zastosować ujemny margines. W ten sposób odsuwamy się od lewej krawędzi na zewnątrz. Wartość -110px, oznaczać będzie zatem początek lewej krawędzi paska, który ma 97px szerokości, co powoduje że pomiędzy paskiem a artykułem, będzie jeszcze 13px pustej przestrzeni - taki mały bufor wizualny.

Linia 5 i 6 nie wpływają na pozycję, ale zapewniają dodatkowe właściwości wizualne. CSS i tak warto dopasować pod swój konkretny przypadek.

Finalizacja w jQuery

Mamy już sekcję społecznościową, mamy klasę, która przerabia naszą sekcję w pasek, czas na jQuery, które to wszystko zepnie w logiczną całość. Oto gotowy kod:

$(document).ready(function() {
	var oSocialRecommendations = $("#social-recommendations");
	if(1 != oSocialRecommendations.length){
		return;
	}
	var oResizeFunction = function(){
		if($(window).width() > 1180){
			oSocialRecommendations
				.addClass("social-fixed")
				.find("div:eq(0)")
				.css("margin-bottom", "5px");
			$("article").css("border-bottom", "1px solid #DFDFDF");
		}
		else {
			oSocialRecommendations
				.removeClass("social-fixed")
				.find("div:eq(0)")
				.css("margin-bottom", 0);
			$("article").css("border-bottom", 0);
		}
	}
	oResizeFunction();
	$(window).resize(oResizeFunction);
});

Zacznijmy zatem od początku. Kod umieszczamy w funkcji ready dla dokumentu, dzięki czemu zostanie aktywowany dopiero po wczytaniu HTMLa i CSS, a oto nam przecież chodzi. W linii 2, pobieramy element naszej sekcji społecznościowej (w przykładzie użyty mój identyfikator, ale można zastosować, dowolny selektor który zwróci wskazany przez Was element).

W linii 3-5, upewniamy się, że nasz selektor został odnaleziony i że znaleziono dokładnie jeden pasujący element.

W liniach 6-21, zdefiniujemy funkcję, która będzie aktywować, bądź dezaktywować nasz pasek. Funkcja ta powinna być w stanie zaaplikować i usunąć naszą klasę przygotowaną dla sekcji społecznościowej.

Najpierw, w liniach 7-13 obsługujemy sytuację gdy okno jest dostatecznie szerokie. Pamiętacie akapit o CSS? Pisałem tam, że nasz pasek zostanie wysunięty o 110 pikseli na lewo od artykułu. Ponieważ główna część strony jest wyśrodkowana, to aby na ekranie zmieścił się pasek w pełnym wymiarze wraz z buforem, potrzebujemy przynajmniej: 110 pikseli z lewej, 960 pikseli na część centralną oraz 110 pikseli pustej przestrzeni po prawej, ponieważ przeglądarka podczas rozciągania dodaje pikseli równomiernie po obu stronach.

Po zsumowaniu tego wszystkiego, wychodzi nam, że pasek możemy pokazywać dopiero przy rozdzielczości ekranu większej niż 1180 pikseli. Przy dzisiejszych panoramicznych ekranach, jest to sumarycznie niewiele:)

Zatem, jeśli aktualna szerokość okna, jest większa niż 1180, to dla sekcji społecznościowej dodajemy naszą klasę. Ponadto, ja w liniach 10-11, modyfikuję jeden z divów wewnątrz sekcji, celem poprawy wizualizacji paska.

W tym miejscu, możemy wykonać również inne działania. Np. osobiście dodaje tutaj dodatkowe obramowanie dolne dla artykułu.

Wszystko co zmodyfikowaliśmy w liniach 7-13, musimy być w stanie odwrócić gdy ekran się zwęża. W liniach 8-12, usuwamy zatem naszą klasę, dodane obramowanie i modyfikujemy marginesy. Dzięki temu, dopasowujemy się do zmiany szerokości okna przeglądarki w trakcie czytania wpisu przez czytelnika.

Po napisaniu funkcji, możemy ją od razu wywołać (pamiętajmy że jesteśmy w bloku kodu, który uruchamiany jest po załadowaniu się strony). Dodatkowo, w linii 23 bindujemy funkcję resize dla okna (czytaj więcej o obsłudze zdarzeń).

To tyle. Całościowy efekt, prezentuje się właśnie tak jak na Alt Control Delete. Oczywiście oprócz Facebooka i Google+, można dodać również np. przycisk do Twittera itp.

Niniejszy wpis, miał jedynie pokazać przepis, a sama realizacja należy do Was. O tym, że ten kod jednak działa, niech świadczy właśnie ten blog:)

W razie wątpliwości, polecam Firebuga, Chrome'a oraz komentarze:)

Data ostatniej modyfikacji: 28.11.2011, 18:35.

Podoba Ci się ten wpis? Powiedz o tym innym!

Send to Kindle

Komentarze

blog comments powered by Disqus