Představte si situaci, kdy máte na webu registrační formulář a při jeho odeslání nějakou javascriptovou kontrolu, zda jsou všechny povinné položky vyplněny. Stránka je dlouhá, když se návštěvník prokouše až k odeslání formuláře, nevidí už pole, co jsou nahoře. V takovém případě by se jistě hodilo, aby se při kontrole stránka posunula k poli, které zůstalo nevyplněné. jQuery nabízí velice jednoduché řešení.
Předpokládejme, že máte připravený input s ID jmeno. Vaše funkce pro kontrolu vrací false, pokud něco chybí. Přidejte k ní následující kód:
$('html, body').animate({ scrollTop: ($('#jmeno').offset().top)-200 }, 500);
Díky tomuto kódu se stránka plynule (během 500 ms) posune 200px nad určený prvek. Dalším využitím může být tlačítko Nahoru, které se obvykle dává pod články a slouží k návratu na začátek stránky, tzn. k menu.
<a href="javascript:void(0)" onclick="$('html, body').animate({scrollTop: 0}, 500);">Nahoru</a>
Stejnou funkci používám i zde - můžete si pod článkem kliknout a vyzkoušet ;). Vraťme se teď ale ještě k prvnímu příkladu a pojďme ho trochu vytunit. Přece nebudete pro každé pole vytvářet podmínku, zda je prázdné. Následující kód provede přesunutí k prvnímu prázdnému inputu:
$("html, body").animate({ scrollTop: ($('input[value='']:not(:checkbox):first').offset().top)-200 }, 500);
V kódu je také zajištěno, aby první nevyplněný input nebylo zaškrtávací políčko. To přeci zaškrtlé-vyplněné být nemusí.
Webdesign
IT, technika
20letý IT geek specializující se na webdesign a webové aplikace s nadšením pro vše, co se týká vědy a moderních technologií.
Přečtěte si více informací o mé osobě.