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

CSS Color Picker Gradient

  1. const col = document.body.appendChild(
  2.   document.createElement('div')
  3. );
  4. Object.assign(col.style, {
  5.   position: 'absolute',
  6.   left: 0, top: 0,
  7.   width: '100%',
  8.   height: '200px',
  9.   background: 'linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)'
  10. });

CSS gradient that cycles hue – useful for a colorpicker. This is the main part of the snippet:

linear-gradient(90deg, #ff0000, #ffff00, #00ff00, #00ffff, #0000ff, #ff00ff, #ff0000)
// color // css // dom // javascript

SVG Isometric Box

  1. const el = document.body.appendChild(
  2. document.createElement('div'));
  3.  
  4. el.innerHTML = `
  5.   <svg id="svg" width="100%" height="100%" viewBox="0 0 550 500">
  6.     ${(() => {
  7.       let str = ''
  8.       let c = 10;
  9.       let num = 200;
  10.       let colStep = 225 / num
  11.       for (let i = 0; i < num; i++) {
  12.         c += colStep;
  13.         col = `rgb(${c}, ${c}, ${c})`;
  14.         str += `<rect 
  15.           fill="${col}" 
  16.           x="0" y="0" 
  17.           width="200" height="200" 
  18.           transform="translate(275, ${250 - i}) scale(1, .5) rotate(45)" />`
  19.       }
  20.       return str
  21.     })()}
  22.   </svg>
  23.   <style>
  24.     svg, div, body, html {
  25.       overflow: visible; 
  26.       height: 100%; 
  27.       width: 100%;
  28.       margin: 0; padding: 0;
  29.       background: gray;
  30.     }
  31.   </style>
  32.   `;

Draw a shaded isometric box in SVG.

// dom // javascript // strings // svg

Check if HTML Tag is Valid

  1. const isTag = tag => { 
  2.   return !/Unknown/.test(document.createElement(tag) + '')
  3. }
  4.  
  5. console.log('section:', isTag('section'))
  6. console.log('div:', isTag('div'))
  7. console.log('nav:', isTag('nav'))
  8. console.log('banana:', isTag('banana'))

Check if a tagName is a valid html element.

When casting a dom node to a string, you’ll get a class name like this:

  1. document.createElement('div') + ''
  2. // '[object HTMLDivElement]'
  3.  
  4. // you can cast to a string with `toString` if 
  5. // you want things to be more readable
  6. document.createElement('section').toString()
  7. // '[object HTMLElement]'
  8.  
  9. document.createElement('input') + ''
  10. // '[object HTMLInputElement]'

When you try to create something with an unknown tagName you’ll end up with:

  1. document.createElement('banana') + ''
  2. // '[object HTMLUnknownElement]'

So, testing for the presence of the string Unknown is an easy way to check if a tagName is valid in a given browser. This is the perfect kind of thing to memoize: 

  1. const tags = {}
  2. const isTag = tag => { 
  3.   if (tags[tag] != null) {
  4.     // already calculated
  5.     console.log('loking up: ', tag, tags[tag]);
  6.     return tags[tag]
  7.   }
  8.   const result = !/Unknown/.test(document.createElement(tag) + '')
  9.   tags[tag] = result
  10.   return result
  11. }
  12.  
  13. console.log('calculator', isTag('calculator'))
  14. console.log('calculator', isTag('calculator'))
  15.  
  16. console.log('strong', isTag('strong'))
  17. console.log('strong', isTag('strong'))
// dom // html // javascript // regex // strings // tricks // ui

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

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

Recent

Archive

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