jQuery: změna průhlednosti při hoveru (changing opacity on hover)
Dnes si ukážeme velmi jednoduchý kus jQuery kódu, který je však poměrně efektně schopen dodat dynamiku do jinak např. statické prezentace. Nejčastěji je používána změna průhlednosti u obrázků, kdy nejprve pomocí jQuery nastavíme výchozí průhlednost, resp. neprůhlednost (opacity) na 0.3 a následně skript při události hover spustí kód, který "zanimuje" průhlednost z výchozí hodnoty 0.3 na 1 (tedy na neprůhlednost) a následně při ukončení hoveru se průhlednost vrátí na zadanou hodnotu. Časový interval si samožrejmě můžete nastavit dle libosti.
jQuery: Grafické označení externích odkazů a jejich otevření v novém okně
Stává se pomalu běžnou praxí, že bývají graficky odlišovány odkazy na stránce, které vedou mimo daný web. Podívejme se tedy, jak pomocí jQuery naprosto jednoduše odlišit externí odkazy a navíc je případně po kliknutí otevřít v novém okně bez použití target="_blank" (do krve bojující skupina lidí za neotevírání odkazů do nových oken jistě prominou). Nejprve si ukážeme, jak externímu odkazu přiřadíme class="external", pro kterou již budeme mít definované CSS vlastnosti. Ve druhém příkladu vložíme za externí odkaz obrázek bez použití CSS.
jQuery: Tahák v podobě PDF
Pokud používáte javascriptovou knihovnu jQuery, jistě se vám bude hodit následující tahák v podobě PDF souboru, na němž jsou vypsány funkce jádra, atributy, selekotry, události, efekty, možnosti jak procházet DOMem a další utilitky. Jen je nutné pamatovat na to, že současný tahák je vytvořen na základě verze jQuery 1.2 a časem bude potřeba jej zrevidovat, což doufejme, že autor taháku snad udělá.
jQuery: $(this)
V předchozím článku jsme si ukazovali, jak můžeme simulovat hover událost na jakémkoliv elementu v DOMu. Ve skriptu byla tato část kódu: $(this). Rád bych podal menší vysvětlení pro ty, kteří jQuery vidí opravdu poprvé a proč jsme v daném skriptu nemohli použít místo $(this).addClass('hover') následující kód $('p').addClass('hover'). Pokud bychom tak učinili, stalo by se to, že by v okamžiku detekce události hover nad jedním elementem <p> se CSS třída hover přiřadila všem elementům <p>, které se vyskytují v dokumentu, nikoliv tedy pouze tomu jednomu, nad kterým zrovna je kurzor myši.
jQuery: Aplikace pseudotřídy hover na cokoliv
Občas je nutné dát uživateli www stránek zpětnou vazbu, když najedou myší nad nějaký element na stránce. V CSS pro tuto událost existuje pseudotřída :hover. Díky ní je možné např. změnit barvu elementu <a> při najetí myší nad daný odkaz. Ovšem zde webmaster naráží na nedostatky některých prohlížečů - konkrétně Internet Explorer 6 a nižší, které nepodporují pseudotřídu :hover na libovolný element v DOMu, ale pouze na element a <a> několik málo dalších (např. <li>). U moderních prohlížečů je podpora této pseudotřídy již naštěstí standardem. Pokud však chceme, aby ani uživatelé IE6 a nižších nepřišli zkrátka, máme zde jednoduché řešení pomocí javascriptové knihovny jQuery.
