Results for “Lists & control flow”
Small, practical examples. Search by task or narrow things down below.
Size a child relative to its containing block
CSS: A percentage width is based on the containing block’s available width.
CSS✓ Tested
Size a panel relative to viewport height
CSS: Viewport height units track the browser viewport rather than the parent element.
CSS✓ Tested
Sort a copy without mutating the original list
Sort a copy without mutating the original list with a small React component and explicit browser behavior.
React✓ Tested
Stop a child event from reaching its parent
jQuery: stopPropagation leaves other handlers on the same element intact.
jQuery✓ Tested
Style supporting text in italics
CSS: Font-style changes presentation without adding semantic emphasis by itself.
CSS✓ Tested
Track selection by a stable identifier
Track selection by a stable identifier with a small React component and explicit browser behavior.
React✓ Tested
Validate a field when focus leaves it
jQuery: focusout bubbles and can support delegated form validation.
jQuery✓ Tested
Allow a long flex child to shrink inside its container
CSS: Min-width zero removes the default content-size floor so local overflow handling can take effect.
CSS✓ Tested
Allow several selected options
HTML: A multiple select exposes each selected option as a value with the same control name.
HTML✓ Tested
Associate a data cell with explicit table headers
HTML: The headers attribute lists header IDs for a more complex cell association.
HTML✓ Tested
Average a fixed set of readings
Accumulate sample values without overflowing a 16-bit total.
array✓ Tested
Blink without blocking the loop
Use elapsed millis time instead of delay for a repeating action.
millis✓ Tested