Wysuwany widget na stronę

Kojarzycie niewielkie okienko wyjeżdżające z boku strony? Jestem pewien, że tak. Zwykle jest to link do serwisu społecznościowego lub wklejka z Facebookowym Likeboxem. Rozwiązanie to cieszy się coraz większą popularnością, a co za tym idzie powstaje wiele lepszych i gorszych implementacji, często przeładowanych jQuery. W niniejszym tutorialu wykorzystamy dobrodziejstwa CSS3, które pozwolą uniknąć tworzenia niepotrzebnych skryptów.

DemoPobierz

Lista „zakupów”

Bazą dla naszego poligonu doświadczalnego będzie niezastąpiony Twitter Bootstrap. Wykorzystamy też ikonki popularnych serwisów społecznościowych z fantastycznego generatora IcoMoon, który poskłada je w jedną czcionkę.

icomoon

HTML

Potrzebny kod HTML jest bardzo prosty. Cały widget składa się z uchwytu z ikonką, który będzie widoczny cały czas na stronie, treści wjeżdżającej na stronę i kontenera, który wszystko będzie trzymał w kupie.

CSS

Widget może być wykorzystany w dowolny sposób, stwórzmy więc uniwersalny styl.

Jak już wspomniałem, często widget zawiera link do Facebooka – ostylujmy go odpowiednio.

Zróbmy też style dla Google+ i Twittera.

Jeśli widget ma zawierać większą treść, typu wklejka Likebox, przyda się jego szersza wersja.

Przy niskich rozdzielczościach, gdy treść strony zajmuje całą szerokość ekranu, widgety mogą niepotrzebnie zasłaniać widok, co często irytuje użytkowników. Ukryjmy więc widgety w rozdzielczościach „mobilnych”.

Podsumowanie

To wszystko. Jako że widget jest bardzo prosty i łatwy w konfiguracji, nic nie stoi na przeszkodzie, by dopasować go do każdej strony.

Obsługiwane przeglądarki: Firefox 16+ Chrome 26+ Opera 12.1+ i IE 10+. W poprzednich wersjach konieczne będzie dodanie prefixów lub wykorzystanie automatycznych rozwiązań, takich jak -prefix-free.

DemoPobierz

Programista (PHP/MySQL, Node.js/MongoDB), koder (HTML/CSS/JS), ale od biedy nawet layout machnie ;)

  • Łukasz Migut

    Właśnie coś takiego chciałem zamieścić na stronie super sprawa, że jest to sam css bez jQuery. Dzięki wielkie!

    • sbl

      z jQuery jest taki problem, że on kolejkuje eventy i gdy najedziesz bardzo szybko na dany element powiedzmy 10 razy to jQuery wykona to 10 razy jedno po drugim. CSS jest lepsze.

      • Lewiatan

        w jQuery można kolejkę wyłączyć i nie ma takiego problemu 😉

        • Tomasz Żełudziewicz

          Można wyłączyć kolejkę? A ja zawsze głupi robił flagę i timeout 🙁

      • Daredzik

        animate -> complete
        oraz stop(true,true) :))

  • Kriss

    a ja myślałem ze to plugin do wordpressa, nie chciał mi się zainstalować – wprowadzacie ludzi w błąd 😉 Dlatego poczekam na wersję łatwą w instalacji 😛

  • Daredzik

    jest tylko jedno małe ale ie8… a pisząc coś dla jakiejś korporacji niestety trzeba zapewnić im wsparcie dla ich własnej podwórkowej przeglądarki. Niestety o ie8 jeszcze długo nie zapomnimy ….

    • Marcin Bazanowski

      Ie8 to dzis tylko 5%, biorac jeszcze pod uwage ze nie wszyscy wymagaja zeby na ie8 strona dzialala w 100% poprawnie, to raczej mala strata, jesli nie zobacza tej animacji.

      A dalej idac jeszcze na tym konkretnym przykladzie, roznica miedzy chromem a ie8 jest taka, ze w chrome bedzie animacja, a w ie8 po prostu sie pojawi nagle cala zakladka. Strata animacji? najwyzszy czas zmienic przegladarke 😀

      Koniec wspierania dinozaurow!

      • nrm

        zależy kto ma jaką publikę, dla przykładu na mastahu wygląda to tak:

        Chrome 42% (w tym 29.0 – 40%, 28.0 – 2%, reszta poniżej procenta) Firefox (w tym: 23.0 – 33%, 22.0 – 0.9%, reszta marginalnie), Opera – 6%, Mobile – 9%, IE – 2% (!!!), w tym 10.0 – 0.9%, 9.0 – 0.5%), Safari – 1.6%

        • Łukasz Migut

          Tak ale mastah jest dla webmasterów więc to specyficzna grupa jeśli chodzi o używanie przeglądarek.

          • nrm

            Zgadza się, dlatego podałem to jako ciekawostkę 😉 Ogólnokrajowe trendy można sprawdzić na ranking.pl

          • Łukasz Migut

            przyda się dzięki

      • Daredzik

        Niestety ale ie8 jest obecna na komputerach korporacyjnych gdzie siedzi xp wiec… jeśli klient zleca Ci napisanie czegoś gdzie 50% to ładne animacje i u niego to nie działa to uwierz z jaką frustracją zadzwoni do Ciebie następnego dnia tuż po 7 😉 tak więc musiałem przepisywać css3 na jquery 😉

  • MrShemek

    IcoMoon poskłada nam font ale chyba dopiero po opłaceniu, tak?:>
    Przydałby się tutorial o sliding doors, wykorzystaniu 2-3 grafik na całą stronę.
    Czasem przeglądając pracę innych, na szybkim łączu, widzę efekt „przeskoku”…

    • mck

      IcoMoon jest darmowy. Płatne są tylko niektóre zestawy ikon i hosting CDN.

      • MrShemek

        Jakoś poprzednim razem nie mogłem znaleźć miejsca gdzie generuje się font, teraz już mi się udało. Dzięki!

  • bastek

    Czemu po dodaniu mam http://brandujemy.pl/znaczki.jpg ?

    • mck

      To we wszystkich przeglądarkach? Jeśli tak, to ścieżki do fontów są niepoprawne. Jeśli zaś działa w Chrome, to problem leży w ładowaniu fontów z serwera i wówczas do katalogu z fontami należy dorzucić plik .htaccess z następującą treścią:

  • Tomek

    Witam,
    Pomoże mi ktoś zaimplementować taki widget na stronę pod prestashop? 🙂
    Pozdrawiam
    TM

  • pawel

    W ie10 nie działa poprawnie (skacze)

  • Daniel Bobrowski

    jak to zainstalowac?

Send this to friend

webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL
webmastah.weekly
Cotygodniowa porcja linków ze świata WEBDEV BEZ spamu, TYLKO samo mięcho!
Zobacz poprzednie wydania. Dołącz do 2 tysięcy webdeveloperów!
HTML5, CSS3, JS (React, Angular, Ember, Vue), PHP, SQL