jQuery návod – (8) Rozměry a pozicování
V osmém dílu seriálu o jQuery se ponoříme do světa rozměrů a pozicování. Každý webový vývojář ví, jak důležité je správně rozumět rozměrům prvků a jejich pozicím na stránce, zejména když pracujeme s responzivním designem nebo animacemi. Díky jQuery můžeme s rozměry a pozicováním pracovat velmi pohodlně a efektivně.
1. Získání a nastavení šířky a výšky
width() a height() – Tyto metody nám umožňují získat nebo nastavit šířku a výšku prvku.
var sirka = $("#prvek").width();
$("#prvek").width(300);innerWidth() a innerHeight() – Vrací šířku/výšku prvku včetně vnitřního paddingu, ale bez borderů.
outerWidth() a outerHeight() – Vrací šířku/výšku prvku včetně paddingu a borderů. Když předáte true jako argument, získáte rozměry včetně marginů.
var celkovaSirka = $("#prvek").outerWidth(true);2. Získání a nastavení pozice prvku
position() – Vrací objekt s vlastnostmi top a left, které ukazují pozici prvku vzhledem k jeho nejbližšímu rodiči s nastavenou pozicí.
var pozice = $("#prvek").position();
console.log(pozice.top, pozice.left);offset() – Vrací objekt s vlastnostmi top a left, které ukazují pozici prvku vzhledem k dokumentu.
var poziceDokument = $("#prvek").offset();3. Scrollování
scrollTop() a scrollLeft() – Tyto metody nám umožňují získat nebo nastavit hodnotu vertikálního nebo horizontálního posunu (scroll).
var posun = $(window).scrollTop(); $(window).scrollTop(200);
4. Práce s boxovým modelem
Jak již bylo zmíněno výše, jQuery nám umožňuje snadno pracovat s různými částmi boxového modelu – vnitřní padding, okraje, rámečky a marginy. Díky tomu můžeme efektivně řešit různé problémy týkající se layoutu a designu.
Závěr
Rozumění rozměrům a pozicování je klíčem k vytvoření responzivních a funkčních webových stránek. jQuery nám nabízí řadu nástrojů, díky nimž můžeme tyto úkoly snadno a efektivně řešit. Ať už potřebujete přizpůsobit výšku sloupců nebo určit, kde se prvek nachází na stránce, s jQuery to můžete udělat rychle a přesně.
V příštím dílu se zaměříme na práci s AJAXem, což je technologie, která nám umožňuje komunikovat se s