Widget zależny od wyszukiwanej etykiety



Ten widget jest zależny od etykiet i wyświetlany tylko podczas wyszukiwania wybranych - Zobacz opis

poniedziałek, 18 marca 2013

Wydrukuj to...

Strony - gadzet w googlowskim stylu

Ostatnio moda na chwytanie obiektów podczas przewijania strony.
Prawie każda www dziwnym trafem przytrzymuje na górze pasek nawigacji. Trend zapoczątkowany w Google+ przyjął się na dobre nawet Allegro.pl podchwyciło ten pomysł :)

A wystarczy kilka linijek kodu w sekcji <Head> by uzyskać taki efekt :)
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.0/jquery.min.js"> </script>
<script>
jQuery("document").ready(function($){
    var nav = $('.PageList');
        $(window).scroll(function () {
        if ($(this).scrollTop() > 237) {
            nav.addClass('f-PageList');
        } else {
            nav.removeClass('f-PageList');
        }
    });
 });
</script>
<style>
.f-PageList {z-index: 999; position: fixed; top: 1px; }
</style>
Jak widać po kodzie używamy biblioteki jQuery do załadowania nowego stylu dla naszego elementu o klasie .PageList
Po przewinięciu o 237px chwytamy w CSS nasze menu i ustawiamy wg nowego stylu .f-PageList - wartość tą należy określić doświadczalnie lub zmierzyć w dowolnym programie graficznym printscrean strony i wyciąć od góry do paska stron. Wysokość wyciętego elementu to odpowiednia wartość.
z-index: 9999; position: fixed; to obligatoryjne style css dla nowej klasy reszta jest opcjonalna i może być dowolnie ustawiana tak by efekt końcowy był satysfakcjonujący.

U mnie zatem styl wygląda tak:
<style>
.f-PageList {z-index: 10; position: fixed; top: -1px; left: 0px; background: #eeeeee url(http://i.imgur.com/rRW788j.png) no-repeat scroll 0 0; width: 100%;}
.f-PageList ul {margin:0px auto !important; width: 970px;}
/* --------------------- opcjonalnie ---------------- */
.PageList .szukajka, .f-PageList .headrollers {display:none;}
.f-PageList .szukajka {display:inline; float:right; margin-top:-30px; margin-right:5px;}
</style>
Oprócz tła z logo dołożyłem też wyszukiwarkę która jest ładowana z tego samego CSS, oraz małą poprawkę dla użytkowników obrazów w widoku Lightbox z bloggera, maksymalny z-index: 10 fotki mają 11. Mam nadzieję że komuś się przyda ten opis...

Pozdrawiam blogowiczów...
10010010001000101010111011101011010101011100111101111000011011100010111011011100011111000010101010101010111001110000000011001110101111000111110

Pierwszy wpis już się pojawił. Zapraszamy do oddawania kolejnych...
Już teraz przyłącz się do dyskusji i dodaj nowy komentarz


Podoba ci się modyfikacja sekcji komentarzy - opis znajdziesz tutaj: Tuning komentarzy

Anonimowy pisze...

Hej:)
Mam problem. Jak zrobic zeby nad postami wyswietlaly sie zakladki? Wiem ze trzeba dodac 'strony' i tam nazwac nasza podstrone/zakladke. Jednak mi chodzi o to zeby po kliknieciu na dana zakladke wyswietlaly sie posty z danej kategori.
Pozdrawiam

Prześlij komentarz

Zapraszam do komentowania i wyłapywania ew. błędów... Twoje IP:

Losowy post