Ikona přehrávání v titulku

Při přehrávání videa na YT si je možné povšimnout šipky na začátku titulku. V případě, že má člověk otevřeno více záložek téže stránky, docela se to hodí. Je totiž ihned jasné, která záložka něco přehrává.

Tuto šipku/trojúhelník znázorňuje znak .

  1. Symbol přehrávání můžeme umístit rovnou do kódu (poznámka: některé editory, třeba Sublime Text, s tím mohou mít problém, ale výsledek v prohlížeči by měl být OK).

  2. Použít HTML entitu ▶ nebo ▶.

  3. V JS použít escape sekvenci \u25b6.

Nastavení ikony

Nastavit tuto šipku JavaScriptem je potom možné změnou document.title.

document.title = "▶" + document.title;

Nebo:

document.title = "\u25b6 " + document.title;

Nebo:

document.title = "▶ " + document.title;

Odstranění šipky

Při zastavení je na místě šipku smazat, to jde zajistit buď kompletním přepsáním document.title, nebo odstraněním šipky funkcí replace:

document.title = document.title.replace("\u25b6 ", "");

Ukázka

Jednoduchá ukázka, která přidává/odebírá šipku z titulku (document.title).

Manipulovat JavaScriptem s <title> je vůbec docela užitečné a není důvod se toho bát. Dá se tak snadno znázorňovat.

  1. Již zmíněné přehrávání videa/hudby.
  2. Zobrazit počet nepřečtených zpráv/příspěvků (používá Facebook nebo Twitter).
  3. Signalisovat, že je na stránce rozepsaný příspěvek (používá DJPW).

To je všechno. Líbil se vám článek a chcete se dozvědět, až vyjde další?

Sledujte:

 

Připomínky mi pište do komentářů ↓

Automatický lazy-loading YouTube videí

Hotové řešení lazy-loadingu YouTube videí

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

Fixní postranní panel

Jak vytvořit fixovaný banner?

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

Aktivování/deaktivování okna

Zachycení aktivování a deaktivování okna v JS

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

Baterka v CSS a JavaScriptu

Vytvoření efektu baterky v CSS a JS

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

Test existence obrázku JavaScriptem

Ověření existence obrázku pomocí JS

Jak JavaScriptem ověřit existenci obrázku?

Komentáře