)
}
}
)
(
}
{
)
)
(
)
(
(
{
}
)
(
)
}
)
)
{
(
(
)
)
}
)
(
}
AboutAll PostsWarningRandom

elementUnderPoint and elementsUnderPoint

  1. document.addEventListener('mousemove', e => {
  2.   const el = document.elementFromPoint(e.clientX, e.clientY);
  3.  
  4.   // msElementsFromPoint for old IE versions (which will thankfully be gone soon)
  5.   const els = document.elementsFromPoint(e.clientX, e.clientY);
  6.   if (el != null) { 
  7.     console.log(
  8.       el.className, 
  9.       els
  10.     )
  11.  
  12.     el.style.border = '1px solid white';
  13.   }
  14. });
  15.  
  16. // prevent scrolling
  17. document.addEventListener('touchmove', e => e.preventDefault(), { passive: false });
  18.  
  19. // hardcoded for clarity
  20. document.addEventListener('touchmove', e => {
  21.   const x = e.touches[0].clientX;
  22.   const y = e.touches[0].clientY;
  23.   const el = document.elementFromPoint(x, y);
  24.   const els = document.elementsFromPoint(x, y);
  25.  
  26.   if (el != null) { 
  27.     console.log(
  28.       el.className,
  29.       els
  30.     )
  31.     el.style.border = '1px solid white';
  32.   }
  33. });
  34.  
  35. Object.assign(document.body.style, {
  36.   background: '#000', 
  37.   margin: 0
  38. });
  39.  
  40. // put some boxes on the page
  41. for (let i = 0; i < 200; i++) { 
  42.   const size = 10 + Math.random() * 80;
  43.   const halfSize = size / 2;
  44.   const x = Math.random() * 120 - 10;
  45.   const y = Math.random() * 120 - 10;
  46.   const rot = x * 3 + Math.random() * 90 - 45;
  47.   const col = `hsl(${rot}, 50%, 50%)`;
  48.   document.body.innerHTML += `
  49.     <div class="box box-${i}" 
  50.       style="
  51.         transform: rotate(${rot}deg);
  52.         position: absolute;
  53.         background: ${col};
  54.         width: ${size}px; 
  55.         height: ${size}px;
  56.         left: ${x}%;
  57.         top: ${y}%;
  58.       "></div>`;
  59. }

Obtain the element or elements underneath the mouse or touch point. Open your dev console to see the results.

// dom // javascript // ui

Bad/Simple UI Counter

  1. <script>
  2.   count = 0
  3. </script>
  4. <div>
  5.   <p>You clicked <span id="countEl">0</span> times</p>
  6.   <button onclick="countEl.innerHTML = ++count">Click me</button>
  7. </div>

This kind of thing is often showcased on UI Framework demo pages. I thought it would be interesting to create it in the simplest way possible while still being readable. This is the only code needed for the entire web page… the browser will figure out the rest… 😀

// javascript // tricks // ui

Low Resolution Sine Table

  1. const sin = [
  2. 0,1,1,2,2,3,3,4,4,5,5,6,6,6,7,7,7,8,8,8,8,9,9,9,9,9,9,9,
  3. 9,9,9,9,9,9,9,9,9,9,9,8,8,8,8,7,7,7,6,6,5,5,5,4,4,3,3,2,2,
  4. 1,1,0,0,-1,-1,-2,-2,-3,-3,-4,-4,-4,-5,-5,-6,-6,-7,-7,-7,-8,
  5. -8,-8,-9,-9,-9,-9,-10,-10,-10,-10,-10,-10,-10,-10,-10,-10,
  6. -10,-10,-10,-10,-10,-10,-10,-10,-9,-9,-9,-9,-8,-8,-8,-7,-7,
  7. -6,-6,-6,-5,-5,-4,-4,-3,-3,-2,-2,-1,-1,0];
  8.  
  9. const c = document.body.appendChild(
  10.   document.createElement('canvas')
  11. ).getContext('2d');
  12.  
  13. const size = 200;
  14. c.canvas.width = c.canvas.height = size;
  15.  
  16. let x = 0;
  17. let tick = 0;
  18. let xOff = 30;
  19. let lines = 14;
  20. let pad = 10;
  21. let stagger = 8;
  22.  
  23. const loop = () => {
  24.   tick++;
  25.   c.fillStyle = 'red';
  26.   c.fillRect(0, 0, size, size);
  27.   c.fillStyle = 'white';
  28.  
  29.   for (let i = 0; i < size; i++) {
  30.     for (let j = 1; j < lines; j++) { 
  31.       x = xOff + sin[(i + j * stagger + tick) % 125];
  32.       c.fillRect(x + j * pad, i, 1, 1);
  33.     }
  34.   }
  35.   requestAnimationFrame(loop);
  36. };
  37. loop()

This is a low resolution sine table. I created this array to run on the original gameboy sometime last year… worked great for that…

// canvas // javascript // math

Slider Range Input Wave

  1. N = 8 // try changing this
  2. b = document.body
  3.  
  4. b.innerHTML += 'Drag any slider<br>'
  5. for (i = N; i--;) 
  6.   b.innerHTML += `<input id=${i} value=0 type=range style=width:200px;display:block>`
  7.  
  8. onchange = oninput = e => {
  9.   t = e.target
  10.   for (i = N; i--;) 
  11.     t.id != i && (
  12.       self[i].value = 100 * Math.sin(t.value / 60 * i))
  13. }

Sine wave with range sliders…

// golfed // javascript // speed-coded // ui

100 35 Ways

  1. const _100 = 100;
  2.  
  3. const count = i => {
  4.   document.body.innerHTML += 
  5.     _100.toString(i) + ` :: ... ${i}<br>`
  6.   i++ < 36 && count(i)
  7. }
  8. count(2)

Display 100 in many bases from binary to base 36… Today is the 100th post on Snippet Zone.

// javascript // math // strings
Newer Posts

Recent

Archive

RSS
snippet.zone ~ 2021-24 /// {s/z}