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

Local Mouse Click

  1. const RIGHT_BOUND = 200;
  2. const measureEl = document.createElement('div');
  3.  
  4. Object.assign(measureEl.style, {
  5.   position: 'absolute',
  6.   left: 0,
  7.   top: 0,
  8.   zIndex: 999
  9. });
  10.  
  11. function localPosition(e, element, w = 1, h = 1) {
  12.  
  13.   // normalize desktop and mobile
  14.   const touches = e.touches;
  15.   let x;
  16.   let y;
  17.   if (touches != null && touches.length > 0) {
  18.     x = touches[0].clientX;
  19.     y = touches[0].clientY;
  20.   } else {
  21.     x = e.clientX;
  22.     y = e.clientY;
  23.   }
  24.  
  25.   function location(width) {
  26.     let left = 0;
  27.     let right = RIGHT_BOUND;
  28.     let mid;
  29.  
  30.     while (right - left > 0.0001) {
  31.       mid = (right + left) / 2;
  32.  
  33.       measureEl.style[width ? 'width' : 'height'] = `${mid}%`;
  34.       measureEl.style[width ? 'height' : 'width'] = '100%';
  35.       element.appendChild(measureEl);
  36.       const el = document.elementFromPoint(x, y);
  37.  
  38.       element.removeChild(measureEl);
  39.       if (el === measureEl) {
  40.         right = mid;
  41.       } else {
  42.         if (right === RIGHT_BOUND) {
  43.           return null;
  44.         }
  45.         left = mid;
  46.       }
  47.     }
  48.  
  49.     return mid;
  50.   }
  51.  
  52.   const left = location(1);
  53.   const top = location(0);
  54.   return left != null && top != null
  55.     ? {
  56.         // percentage values
  57.         left,
  58.         top,
  59.         // pixel values
  60.         x: left * w * 0.01,
  61.         y: top * h * 0.01
  62.       }
  63.     : null;
  64. }
  65.  
  66. const div = document.body.appendChild(document.createElement('div'));
  67. div.innerHTML = 'click me';
  68. Object.assign(div.style, {
  69.   postition: 'absolute',
  70.   transform: 'translate(20px, 20px) rotate(45deg) scale(0.8)',
  71.   width: '120px',
  72.   height: '90px',
  73.   color: 'white',
  74.   fontFamily: 'sans-serif',
  75.   background: 'gray'
  76. });
  77.  
  78. document.addEventListener('touchstart', onClick);
  79. document.addEventListener('mousedown', onClick);
  80.  
  81. function onClick(e) {
  82.   const info = localPosition(e, e.target, 120, 90);
  83.   console.log(info);
  84. }

Find the local percentage and pixel values of the mouse/touch location.

I found this one on stackoverflow here by user 4esn0k.

This is an interesting alternative to semi-broken native browser solutions and custom matrix math 😉

// css // dom // html // javascript // math

Remove from String

  1. x='hello'
  2. x.replace(/h/g,'') // 17 bytes
  3. x.split`h`.join`` // 16 bytes
  4. x.replaceAll('h','') // 19 bytes

Another fun one from the great javascript golfing tips stackexchange thread.

This one comes from user emanresu-a and this answer.

// golfed // hacks // javascript // strings

Array Range from 1

  1. Object.assign(Number.prototype, {
  2.   *[Symbol.iterator]() {
  3.     for (let i = this; i--;) 
  4.       yield this - i;
  5.   }
  6. });
  7.  
  8. console.log([...3]);

I saw this on twitter a little while back. Tweet was from James Padolsey. A fun trick, the thread is pretty entertaining.

// arrays // hacks // humor // javascript // tricks

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
Older Posts
Newer Posts

Recent

Archive

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