Warning: Redis::get(): php_network_getaddresses: getaddrinfo for localhost failed: No address associated with hostname in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php on line 665

Warning: Cannot modify header information - headers already sent by (output started at /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php:665) in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/dw-question-answer/inc/Posts/Base.php on line 20

Warning: Cannot modify header information - headers already sent by (output started at /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-content/plugins/litespeed-cache/src/object-cache.cls.php:665) in /home/klient.dhosting.pl/michalko/webroad.pl/public_html/wp-includes/feed-rss2-comments.php on line 8
Komentarze do: Nie każ szukać wyszukiwarki, czyli tworzenie wysuwanego panelu wyszukiwania w CSS3 i jQuery https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery blog dla webmasterów, na którym piszemy o HTML5, CSS3, JavaScript, webdesign, UX, CMS Sat, 26 Sep 2020 15:48:44 +0000 hourly 1 https://wordpress.org/?v=6.9.5 Autor: Damian https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-32 Wed, 26 Mar 2014 14:54:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-32 przycisk Zobacz DEMO on-line nie działa a w paczce z kodem źródłowym jest jakaś grafika

]]>
Autor: Michał Kortas https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1 Tue, 18 Mar 2014 09:30:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1 To tylko front panelu w HTML i CSS. Obsługę wyszukiwania musisz zapewnić sobie już sam.

]]>
Autor: Pawelelo520 https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1560 Thu, 13 Mar 2014 12:39:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1560 Gdzie jest link do pliku w którym będzie wyszukiwany plik?

]]>
Autor: Michał Kortas https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1116 Mon, 02 Sep 2013 16:12:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1116 Uwzględniłem wszelkie wskazówki :) Dzięki!

]]>
Autor: Mr.Mr https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1115 Mon, 02 Sep 2013 15:32:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1115 Bardzo fajny efekt. Myślę, że po małych upgradach (tak jak sugerowano poniżej) będzie to znakomity dodatek do UI stron gdzie już jQuery jest wykorzystywana.

]]>
Autor: Michał Kortas https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1113 Mon, 02 Sep 2013 12:06:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1113 Spokojnie. Wiem do czego służy label :)
Z resztą zaraz po sugestii dodałem etykietę do kodu źródłowego.
Dziękuję za komentarz.

]]>
Autor: pomek https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1112 Mon, 02 Sep 2013 12:00:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1112 Dowiedz się do czego służy label, skoro twierdzisz, że „wedle uznania” można dodać. Label jest tak samo obowiązkowe dla input/select/textarea jak meta[charset] w head…

]]>
Autor: Michał Kortas https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1111 Mon, 02 Sep 2013 11:48:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1111 Dzięki za komentarz! Faktycznie, mogłem skorzystać z elementu „button”. Skorzystałem z jQuery, ponieważ na większości stron i tak ładujemy tę bibliotekę. Label oczywiście możemy musimy dodać (dziękuję za poprawkę, @pomek).
No i na sam koniec, zapomniałem wszystko opakować w „form”.
Pozdrawiam!

]]>
Autor: Comandeer https://webroad.pl/javascript/691-wysuwany-panel-css3-jquery#comment-1110 Mon, 02 Sep 2013 11:42:00 +0000 https://webroad.pl/c7-zasoby/c39-javascript/691-wysuwany-panel-css3-jquery/#comment-1110 „Przycisk” – zatem niech to będzie *przycisk* a nie bezużyteczny link.
A co jeśli user nie ma JS (albo u niego nie działa)? Raczej szedłbym w kierunku :target z CSS3 i wgl wyeliminował JS. A jeśli już nie wyeliminował, to nie ciągnął jQuery tylko do zmiany klasy elementu. To nie jest aż tak skomplikowane do napisania w czystym JS (zwłaszcza w modern browserach, gdzie istnieje elem.classList).
Plus cały problem dostępności: pole wyszukiwania wręcz musi mieć label (placeholder go nie zastępuje – jeśli ktoś twierdzi inaczej, radzę poczytać speckę). Można go ukryć przed wizualnymi przy pomocy sztuczki z clip (patrz: klasa .visuallyhidden z H5BP). No i trochę mnie śmieszy ten przykład, gdzie formularz wyszukiwania jednak nie jest formularzem ;)
Natomiast wizualnie efekt jest bardzo dobry, choć bardzo przypomina natywną wyszukiwarkę przeglądarki (czy nie będzie to ciut mylące?)

]]>