HTML-CSS-JS-snippets

actual-potential - 2 option lists: one of choosen options - actual, another - to choose from - potential.

css-popup - how to show and hide popup using only HTML&CSS. [Idea from https://codepen.io/imprakash/pen/GgNMXO]

details - hamburger menu using

tag (modified code of Jason Zimdars in comments to Three CSS Alternatives to JavaScript Navigation

dynamic-list - programmatically filled list with per-row buttons removing those rows.

Possible applicaton - TODO-list, shooping list etc.

grab-rest - how to make one of elements in the row to take all width remained in it

Possible application - label and/or button of fixed width and text input on the rest of the line

hlit-elem - how to extract actual style value and change it programmatically on click

Possible application - single-click/tap highlight

lib - an attempt to create microlibrary delivering via jsdelivr

I could not find how frequently jsdelivr refreshes...

open-close - a tree-like structure with collapsible branches

A lot of application, e.g. hiding/showing part of text, hierarhical menus and controls

playing-with-video - obtain length, observe state and current position, change position... ####- the same can be done with audio

I need to sync text and audio/video, e.g. select a phrase in text and play it

select-with-color-swatch - similar to open-close, but behaving like <select>. Has color swatches in each option.

I need something like this in timelogger

select-with-groups - programmatically filled select with option groups and code extracting option properties on option selection

Possible application - a self-contained list with additional information (data snapshot together with UI displaying this data).

speechSynthesis-how-many-instances - Does iframe have separate instance of speechSynthesis? My check shows that yes.

You cannot compare 2 instances with a piece of code, but if you know that page instance has non-null onvoiceschanged member, you can check if this holds for iframe instance. It doesn't - so iframe has separate speechSynthesis instance. Checked with Firefox, Edge and Chrome

Possible application: suppose you have 2 utterances: "A" - rather long one and "B" - a short one (selected by user while speaking A). You need to pause A, speak B and then resume A. It is impossible with one speechSynthesis instance because speaking and paused are speechSynthesis' rather than utterance's properties.