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

Napisano już 2 komentarze/y. Dyskusja powoli się rozwija...
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

fatymaebach pisze...

Casino & Sports Betting
Casino & Sports 시흥 출장샵 Betting 서산 출장마사지 in Michigan is live! Now 제주 출장마사지 live! Find online 양산 출장마사지 casino games, sports wagering, bingo, roulette, and so 제주 출장안마 much more at Rivers Casino.

Prześlij komentarz

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