Hotová řešení – připravené kódy a ukázky k použití

Moderní způsoby vertikálního i horizontálního centrování v CSS. Flexbox, Grid, margin auto a další techniky.

Online generátor náhodných čísel z libovolného rozsahu. Náhodné číslo jedním kliknutím + kód pro JavaScript, PHP, Python a další jazyky.

Online generátor silných hesel. Vytvořte si bezpečné heslo s nastavitelnou délkou a znaky.

Co je JSON a jak s ním pracovat. Online formátovač, validátor a diff.

Jak nastavit GitHub Actions workflow pro automatické publikování nových článků na sociální sítě po deployi.

Praktické tipy pro optimalisaci GitHub Actions pomocí paralelisace, composite actions a gh CLI

Jak zobrazit dlouhé URL v aplikaci, aby nerozbila layout.

Co je to QR kód a jak ho okamžitě vytvořit pomocí jednoduchého online generátoru.

Převedení textu na velká nebo malá písmena.

Funkce pro práci s čísly parseInt, Number, NaN, doporučení a ukázky.

Jak zjistit, že se na stránce otevřely vývojářské nástroje.

Jak na stránce náhodně vypsat obrázek, odkaz, reklamu, text nebo cokoliv jiného.

Jak zabránit, aby obsah stránky poskakoval v závislosti na posuvníku.

Jak v klientském i serverovém JS parsovat a upravovat HTML kód.

Jak pro libovolný řetězec spočítat unikátní barvu.

Jak v JavaScriptu zapsat podmínku uvnitř objektu.

Jak zajistit transformaci jednoduchého JavaScriptu i pro staré prohlížeče jako IE 11.

Jak pomocí CSS skrýt scrollbar u stránky vložené přes <iframe>.

Jak získat obrázkový náhled a další informace pro libovolnou URL.

Jak uložit video automatického testu.

Jak co nejlépe vytvořit pro web tmavý režim, aby automaticky respektoval nastavení uživatele.

Jak udělat web fungující offline. A splnit tak požadavky na PWA.

Jak pouze v CSS měnit pozadí elementu v závislosti na odscrollování na stránce.

CSS pravidla @media any-pointer a any-hover slouží k detekci přesnosti a typu ovládání.

Pohodlné zadávání kalendářního data ve formulářích.

Jak vytvořit v CSS zaoblené okraje.

Jak resetovat (odstranit) hodnotu z <input>u pro upload souborů.

Jak správně připravit webovou stránku pro pohodlné vytištění.

Jak správně řadit jednotlivé CSS vlastnosti v rámci jednoho bloku příslušícímu k selektoru.

Přepínání, přidávání a odebírání CSS tříd JavaScriptem.

Jak si vytvořit hezčí podtržení textu odkazu, než je výchozí.

Jak v JavaScriptu používat @media pravidla jako v CSS.

Jak si poradit s dlouhými slovy, které by mohly narušit layout stránky.

Jak psát na web převodem hlasu na text pomocí speechRecognition.

Je možné si kromě standardních HTML tagů vytvořit nějaké vlastní?

Jak si v JavaScriptu vytvořit vlastní hlášky jako je výchozí alert.

Načtení obrázků, až když je na ně odrolováno. Různé postupy řešení.

Jak zajistit, aby se výška textového pole přizpůsobovala délce textu.

Jak umožnit návštěvníkům nahrát soubory jako videa v řádech MB/GB s progress barem.

Jak dát na stránku odkaz, který na mobilech předvyplní číslo a text SMS.

Chceme-li zrychlit načítání své stránky, datová optimalisace obrázků může pomoci.

Jak v JavaScriptu i PHP zjistit hlavní barvu obrázku.

Jak v PHP zaokrouhlit čas na celé pětiminuty, čtvrthodiny nebo půlhodiny.

Jak usnadnit vyplňování e-mailové adresy automatickým napovídáním poskytovatele.

Jak v jazyce PHP nebo v JavaScriptu spočítat medián.

Jak umístit popisky formulářových prvků, aby bylo vyplňování formuláře co nejpohodlnější.

Jak zablokovat přenášení informace o předchozí navštívené stránce.

Jak udělat, aby se obtékané boxy přizpůsobovaly proměnlivé velikosti okna.

Jak v PHP parsovat HTML stránku a získat z ní potřebná data.

Formát oEmbed slouží k pohodlnému získání obsahu stránky bez nutnosti jejího parsování.

Jak správně vytvořit ikonku stránky (favicon) pro desktop i mobily.

Jak vytvořit responsivní vyhledávací formulář, kde se políčko a tlačítko přizpůsobuje šířce.

Jak přidat a zarovnat ikonku vedle odkazu, který má podtržení.

Vytváření PDF dokumentů v JavaScriptu a PHP.

Jak v JavaScriptu zjistit posici, na které je kursor v textovém poli.

Komponenty v Nette dokáží bránit opakování stejného kódu.

Jak vytvořit šikmou hranu (zkosení) CSS bloku.

Jak provést JavaScript, který je ve stránce načítané AJAXem.

Jak si vytvořit vlastní filtr (helper) do Latte šablon v Nette Frameworku.

Jak udělat, aby celý box s několika prvky byl klikací.

Jak souborem .htaccess jednoduše omezit přístup na stránku heslem.

Prohlížeč Firefox má zajímavou vlastnost u formulářových tlačítek. Dělá je vyšší než ostatní prohlížeče.

Jak přizpůsobovat velikost písma aktuální šířce stránky.

Jak v JavaScriptu vytvořit novou HTML stránku.

Jak vytvořit dvousloupcové rozvržení, kde je jeden sloupec s pevnou šířkou a druhý se přizpůsobuje šířce okna.

Jak zabránit nechtěnému zalomení tlačítka na více řádků.

Jakými způsoby v CSS lze realisovat oddělovač položek v menu.

Jak zobrazit přibližnou dobu, kterou zabere čtení stránky.

Jakým způsobem bezpečně sestavit číslo objednávky zboží v e-shopu.

Všechny možnosti nahrávání obrázků ze schránky a pomocí drag & drop.

Definitivní řešení automatického nastavování velikosti <iframe> podle výšky obsahu.

Jak zabránit poskakování responsivních obrázků během načítání stránky.

Jak obsah webové stránky přečíst hlasem.

CSS vlastnost column umožňuje rozdělení textu do více sloupců.

Jak a zda vůbec automaticky odsazovat uživatelem zadané znaky PSČ do formulářového políčka.

JavaScript může měnit URL. Jak a v jakých případech toho využívat.

Převodník milisekund.

Jak pomocí CSS nakresli ovál.

Jak ve WordPressu zakázat grafické symboly Emoji.

Jak posunout jakýkoliv element někam jinam.

Jak vyřešit situaci, kdy má být textový obsah v obrázku z hlediska přístupnosti, použitelnosti a SEO.

Jakým způsobem řešit popisky formulářových prvků.

Jak s použitím JS zkopírovat uživateli nějaký text do schránky.

Jak webovou stránku co nejlépe a nejjednodušeji převést do responsivní podoby.

Jak obrázkovému pozadí nastavit maximální šířku. Tj. aby se přizpůsobovalo menší šířce okna.

Jak pomocí CSS animace a JavaScriptu plynule rozbalit původně skrytý obsah.

Jak vytvořit nadpis, který má pozadí jen za písmeny.

Jak v JavaScriptu zjistit hodnotu označeného radio políčka.

Jak pomocí Google Analytics změřit návštěvníky, kteří blokují reklamy.

Jak jen některé části webu roztáhnout přes celou šířku.

Při vytváření menu reagujícího na najetí myši (hover) je dobré tolerovat nepřesnou cestu myší.

CSS vlastnost list-style upravuje vzhled seznamů <ul> a <ol>.

JavaScriptová událost onpaste slouží k odchycení vložení obsahu ze schránky.

Jak v CSS zoomovat (zvětšovat a zmenšovat) elementy.

Jak při najetí myší na tabulku zvýraznit příslušné sloupce a řádky.

Jak podle směru otáčení kolečka myši měnit velikost obsahu.

Jak v JS, PHP nebo CSS správně vytvořit skloňování slov pro české prostředí.

Na co si dát pozor při obsluhování odkazu JavaScriptem.

Jak vytvořit „drag & drop“ přesouvání prvků po stránce v JavaScriptu.

Jak se z poslední položky pole dostat na první a obráceně.

Jak na stránce automaticky plynule měnit obrázky.

Při odesílání dat AJAXem je dobré dát uživateli vědět, že se něco děje.

Jak zjistit, jestli má návštěvník zapnuté nebo vypnuté cookies.

Jak oříznout dlouhý text po stanoveném počtu řádek.

Beacon API umožňuje asynchronně zaslat data na server při opuštění stránky.

Jak asynchronně načítat CSS, aby neblokovalo vykreslování stránky.

Jak umožnit kopírování/přidávání dalších textových polí do formuláře.

Jak místo dlouhého číselného identifikátoru použít kratší kombinaci písmen a čísel.

Jak na vlastní stránku vložit video z Facebooku.

Jak vypsat položky sestávající ze dvou sloupců, aby se pořadí sloupců střídalo.

Značka <s> slouží k označení obsahu, který už je zastaralý nebo není relevantní.

Jak jednoduše a kvalitně vytvořit web, který se přizpůsobí všem velikostem cílových zařízení.

Jak se chová margin a border u absolutně posicovaných elementů.

Jak v JavaScriptu zjistit výslednou hodnotu libovolné CSS vlastnosti určitého elementu.

Jak v CSS/JS vytvořit u navigace plynule přesouvaný hover efekt.

Jak vypsat nejnovější komentáře z diskusní platformy Disqus.

Jak nahrát video obrazovky a uložit ho jako pohyblivý obrázek (GIF).

Jak v PHP odesílat příspěvky na Facebook stránku (Page) pomocí Facebook API.

Jak JavaScriptem zjistit, jakým směrem uživatel na stránce roluje.

Jak vytvořit čistě v CSS mřížku, která se bude přizpůsobovat velikosti okna.

Jak v CSS otočit obsah kolem svislé nebo vodorovné osy.

Jak v CSS nastavit výšku v závislosti na procentuální i pevné šířce.

Jak v PHP vypsat a podle názvu či data seřadit obsah složky.

Snadná tvorba sloupcových, koláčových a dalších (i animovaných) grafů v JavaScriptu.

Jak vytvořit vodorovné menu s neznámým počtem položek přes celou šířku.

Jak vytvořit plynulý animovaný přechod mezi dvěma stránkami.

Zajímavé :hover efekty s využitím CSS vlastnosti text-shadow.

Zajímavé :hover efekty s využitím CSS vlastnosti box-shadow.

Jak skriptem na stránce průběžně aktualisovat datum v podobě „zasláno před X minutami“.

JavaScriptový popisek po najetí myší na ikonu nebo text.

Jak udělat elegantní navigaci pro zobrazení na malých obrazovkách.

Jak PHP skriptem ověřit, zda je doména volná nebo kdo je její vlastník.

Jak cacheovat výsledky obsahu staženého z cizí stránky.

Jak v JavaScriptu odstranit všechny potomky v určitém HTML elementu.

Jak na základě IP adresy lokalisovat návštěvníka webu.

Jak omezit maximální čas získávání obsahu stránky z URL.

Při zadávání šířky elementům s display: inline-block je nutné myslet na bílé znaky (whitespace).

Jak vytvořit universální :hover efekt pro různě barevná tlačítka.

Snadná lokalisace webu do různých jazyků.

Zjišťování, jestli je stránka aktivní a zda návštěvník něco dělá.

Automatické generování obsahu HTML stránky v JavaScriptu i PHP.

Symbol přehrávání ▶ v titulku stránky jako je u videí na YouTube.

Formátování příspěvků pomocí BB code v PHP. Převod BB kódu do HTML.

Odchytávání stisknutých kláves a vytváření klávesových zkratek v JavaScriptu.

Confirm je JavaScriptová hláška pro potvrzení akce. Jak ji používat nebo nahradit vlastním dialogovým oknem.

Možnosti, jak otevřít stránku do nového okna / nového tabu prohlížeče.

Jak využitím CSS transition a špetky JavaScriptu vytvořit animované znázornění průběhu načítání, jako je třeba na YouTube.

Jak psát složitější věci v JavaScriptu. Obalit společné funkce do „modulů“.

Jak zajistit, aby ovládací prvky uživatelského rozhraní reagovaly správně i na rychlé kliknutí.

Jak vyrobit jednoduchý tutoriál pro seznámení se s webovou aplikací.

Jak z HTML vybrat id, třídy a inline styly a vytvořit z nich CSS předpis do externího souboru.

Seznam fontů z Google Fonts, které obsahují znaky s diakritikou pro psaní českého textu.

Animování číselných dat pomocí JavaScriptu.

Generátor šipek/trojúhelníků přímo v CSS pomocí okrajů. Funkční i ve starých IE.

Jak skrývat a odkrývat části stránky v čistém CSS bez jakéhokoliv JavaScriptu.

Při použití fixního menu/hlavičky se stane nepěkná věc, že při odkazu na kotvu je cíl skryt pod menu. Co s tím?

Jak detekovat, že si uživatel na stránce blokuje reklamy. Dá se „ad block“ obejít?

Co s obrázky na mobilních zařízeních?

Jak změnit location.hash bez posunutí stránky.

Ikony bez obrázků v čistém CSS.

Jak umožnit návštěvníkům stažení celé webové stránky pro prohlížení offline, umístění na CD apod.

Jak se na webu bránit spammerům z řad robotů i návštěvníků.

Jak zpříjemnit zadávání číselných hodnot nebo času do <input>ů tlačítky plus a mínus.

Jak udělat na webu odpočítávání času. V JavaScriptu i v čistém CSS.

Spojení všech obrázků do jednoho (CSS sprite) zrychlí načítání webu. Hotový generátor v PHP.

Plynulé přesouvání focusu mezi jednotlivými položkami formuláře.

Jak spočítat délku (počet znaků), počet slov, řádků nebo odstavců v textu.

Jak umožnit uživateli vybrat barvu z palety (pomocí JavaScriptu i bez JS).

Jak v CSS jednomu elementu přiřadit více obrázků na pozadí.

Rozbalení a sbalení obsahu po kliknutí.

Asynchronní načítání částí stránek a odesílání formulářů bez obnovení celé stránky.

Jak po stisknutí pravého tlačítka myši zobrazit vlastní nabídku.

Jak v JavaScriptu zjistit aktuální souřadnice myši (kursoru).

Jak označit text nebo zdrojový kód jedním kliknutím. Je to vůbec rozumné?

Jak při najetí myší na náhled videa zobrazovat další náhledy.

Jak vytvořit lightbox okno, které po načtení stránky překryje obsah.

Jak při odrolování stránky zafixovat menu na horní hraně obrazovky.

Má-li se delší text vyjít do přesného místa, je třeba kousek textu uříznout.

Různé možnosti, jak vytvořit vodorovné menu s odkazy vedle sebe.

HTML atribut ismap umí zjistit souřadnice při kliknutí na obrázek. Jak na to v JS?

Jak v PHP a JavaScriptu získat obsah z cizí webové stránky.

Odlišení interních a externích odkazů a odkazů na soubory čistě v CSS.

Rozmazávání obsahu v různých prohlížečích.

Galerie obrázků bez JavaScriptu pomocí CSS.

Pro zprůhlednění obsahu existují různé možnosti. Nejen CSS vlastnost opacity.

V CSS je možné přidat textu (seznamu) obrázkovou odrážku, jaké to má úskalí a risika?

Kterak zobrazovat obsah v tooltipu po najetí myši.

Při vyplňování delších formulářů se je hodí obsah průběžně ukládat. Jak na to?

Pomocí CSS transition je možné skrývání a odkrývání textu plynule animovat (od IE 10).

Jak pomocí CSS se špetkou JS filtrovat obsah stránky nebo na ní vyhledávat.

Napříč prohlížeči funkční řešení vytvoření svislého textu (otočeného o 90 stupňů).

I web o pár stránkách je vhodné skládat automatisovaně. Jak na to v PHP?

Jak může JavaScript zjistit skutečnou výšku a šířku obrázku.

Odkaz jako tlačítko, nebo tlačítko jako odkaz? Postup, jak z odkazu vyrobit tlačítko a naopak.

Různé možnosti, jak zajistit automatické roztažení různě vysokých sloupců na stejnou výšku.

Jak vytvořit ajaxové nahrávání souborů na server bez obnovení stránky.

Hotový PHP skript umožňující zobrazit web prostřednictvím jiné IP adresy.

Někdy se hodí zamezit uživateli v rolování, jaké existují možnosti?

Hotové řešení v JavaScriptu načítání videí z YouTube, až když jsou potřeba.

Různé možnosti vytvoření kruhového obrázku.

Jak na webu vytvářet animace a přechody v HTML, CSS a JS.

Jak a proč vytvářet mobilní versi webu – responsive web.

JavaScriptové menu otvírající/zavírající se po kliknutí.

Jak lze automaticky získat obrázkový náhled webové stránky.

Jednoduché řešení vícebarevného pozadí absolutním posicováním.

Jak vytvořit v čistém CSS vyskakovací menu.

Jak na webové stránce detekovat zapnuté nebo vypnuté skriptování.

Je-li na webu stromová diskuse s hodně příspěvky, může být pro diskutující obtížné udržet přehled, co četli a co ne.

Jak v CSS zajistit černobílý styl běžného obrázku. Napříč prohlížeči stále panují rozdíly.

JavaScriptové řešení prvku, který při rolování zůstane stále viditelný.

Díky selektoru :checked lze v podporujících prohlížečích (Explorer 9 a novější) vytvářet zaškrtávací <input>y neotřelé podoby.

Chceme-li na webu zadávat text a běžná <textarea> už nestačí, řešením je napsat si vlastní WYSIWYG editor.

I bez úprav logiky serverového skriptu lze lecčeho dosáhnout samotným CSS.

Jak z WYSIWYG editorů (jako třeba Word, starší TinyMCE/CKEditor) vytvořit rozumný a sémantický HTML kód.

U jednostránkových webů s fixní navigací (s odkazy na #kotvy) může být vhodné právě viditelnou (aktivní) položku zvýraznit.

Jak snadno umožnit uživateli přepínat různé vzhledy stránky, tmavou/světlou variantu apod.

Nestačí-li běžné odrolování na HTML #kotvu, přichází na řadu JavaScript.

Při filtrování malého množství položek si lze od Internet Exploreru 9 vystačit jen s CSS.

Kromě potřeby nahrát obrázek dopředu (preload), aby byl v době použití 100% připravený, může být potřeba opačná – načíst jej, až v momentě, kdy je potřeba. Z důvodu nemrhání datovým přenosem.

V JavaScriptu lze relativně snadno reagovat na aktivování nebo deaktivování okna/záložky/tabu.

Jak jednoduše vytvořit na stránce efekt baterky? Tedy ztmavit web a prohlížet ho jakýmsi průzorem.

Jak vytvářet jednoduché tvary místo obrázků prostým CSS?

Jak JavaScriptem ověřit existenci obrázku?

Statická obrázková mapa s vlastními body a :hover popisky.

Pokud se v rámci stránky používají odkazy na jednotlivé #části, může být vhodné zvýrazněním ukázat, kam odkaz mířil.