Chcete zobrazit modální dialog ve stránce, který je vždy centrovaný do středu obrazovky? To asi budete potřebovat hodně skriptů na jeho otevření, vypočtení velikosti, vycentrování a jeho udržování v obraze (např. při otočení telefonu). Viz demo.
Ale co kdyby tohle všechno šlo udělat jen pomocí HTML a CSS, nebylo by to super?
A představte si, že to jde!
Celkový layout (rozložení) stránky se z historicky-technických důvodů dělá různě: tabulkou, plovoucímu prvky či JavaScriptem.
Moderní prohlížeče ale nabízejí jednu metodu (s gridem jsou vlastně dvě), která dokáže prvky na stránce uspořádat tak, aby si zachovali svůj vzhled a zároveň se přizpůsobily stránce.
Nastavit nebo přečíst šířku prvku přes jQuery lze dvěma (zdánlivě rovnocennými) způsoby:
$el.width('100%');
$el.css('width', '100%');
$el.css({width: '100%'}); //alternativní zápis
// předchozího způsobu
Ve většině případů se chovají stejně – v tomto případě prostě nastaví prvku šířku na 100% jeho rodiče.
Pokud ale danému prvky nastavíte vlastnost box-sizing na border-box, najednou se začnou výsledky těchto zůsobů rozcházet a pokud je střídáte pro nastavení stejné velikosti (např. protože kód psali dva různí programátoři, a každý preferuje jiný zápis), může se prvek chovat dost podivně.
Pokračování textu jQuery width() vs. css(‚width‘) při border-box
Pokud používáte plovoucí prvky, asi narazíte na problém, že prvky, které je obtékají se chovají poněkud podivně a zasahují i do prostoru rezervovaného pro plovoucí prvky:
V případě textu obtékajícího obrázek, což je nejčastější použití v článcích, je to efekt očekávaný, ale co dělat, když potřebujete, např. ve speciálním layoutu webové aplikace, aby prostřední prvek vyplnil prostor mezi plovoucími prvky a přitom do nich nepřesahoval?
Řešení je kupodivu velice jednoduché – stačí prostředními prvku nastavit oveflow:hidden a prohlížeč, aby zabránil překrývání plovoucího prvku obsahem toho prostředního, změní jeho šířku.
Pokračování textu Jak vyplnit prostor mezi plovoucímy prvky?
Pokud máte na stránce nějaké prvky, které mohou být špatně vidět (např. buňky v tabulce nebo náhledy obrázků) a chcete, aby měl uživatel možnost si je zvětšit najetím kurzoru, můžete to buď udělat složitě přes JavaScript, a nebo velice jednoduše přes CSS3. Pokračování textu Automatický zoom prvku na stránce
Máte problém s programově spouštěnými CSS3 animacemi, které se v některých prohlížečích (typicky Firefox) neanimují správně? A teď nemluvím o tom, že pomalé počítače nezvládnou složitá prolínání a posuny. Pokračování textu Zprovoznění animace
Pro zjištění velikosti stránky nebo okna prohlížeče existuje několik postupů jak v nativním javascriptu tak i v různých knihovnách a frameworcích (např. jQuery). Každá ale vrací trochu jiné rozměry a je důležité vědět, který se dá k čemu použít. Pokračování textu Zjištění velikosti stránky
Znáte to, potřebovali byste rychle zkouknout, jestli se vám stránka po malé změně nebo opravě úplně nerozbila na telefonech s malými displeji, ale zrovna nemáte žádný po ruce a nechce se vám čekat deset minut na start emulátor a tak se na to raději vykašlete a budete doufat, že to bude v pořádku… a ono dost často není.
K těmto účelům slouží služba Responsinator. Po zadání URL do políčka se vám tato stránka načte v iframech, které simulují různá rozlišení na mobilních telefonech. Pokračování textu Rychlý test mobilů bez mobilu
Pokud máte problémy se SELECTy na starších Androidech, konkrétně to, že se SELECTy nechtějí otevírat a zobrazovat nativní výběr možností, je to způsobeno chybou ve staré verzi Chromium (předinstalovaná aplikace Internet).
Chyba se projevuje při určitém nastavení META tagu viewport; problémové hodnoty jsou user-scalable a width/height nastavené na aktuální hodnotu zařízení (např. width=device-width), ale možná ještě další. Pokračování textu Nefunkční SELECTy na Android 2.x
Po použití předchozího tipu na full screen stránku možná narazíte na problém u mobilních zařízení (iPhone, iPad, Android), které si se šířkou stránky moc nelámají hlavu. Je potřeba je přinutit zobrazit stránku ve výchozím stavu tak, aby se šířkou přizpůsobila na šířku displeje (ať už je zařízení otočené na výšku či šířku).
Vložte do hlavičky stránky tento tag:
<meta name="viewport" content="width=1080, height=1920, user-scalable=yes" />
Tím řeknete, že stránka je optimalizována pro rozlišení 1080×1920 (můžete změnit, pokud máte jiné) a donutíte tak prohlížeč, aby stránku přizpůsobil.
Hodnotou user-scalable povolíte uživatelům, aby si mohli stránku přiblížit a lépe ji přečíst (zvláště užitečné na malých zařízeních).
Důležité je, aby tag viewport NEOBSAHOVAL hodnotu initial-scale, protože tím naopak říkáte, že stránka se NEMÁ přizpůsobit na šířku zařízení, ale má se zobrazit v určeném rozlišení (tedy 1:1)!
