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);

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);

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);

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();

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);

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