Month: September 2022

To stop scrolling child div from scrolling the window with JavaScript, we set the overflow property dynamically.

For instance, we write

<div
  onmouseover="document.body.style.overflow = 'hidden';"
  onmouseout="document.body.style.overflow = 'auto';"
></div>

to set the onmouseover property to set the document.body.style.overflow property to 'hidden' when we move our mouse into the div.

And we set the document.body.style.overflow property to 'auto' when we move our mouse away from the div.

To save canvas as png image with JavaScript, we call the toDataURL method.

For instance, we write

window.open(canvas.toDataURL("image/png"));

to call canvas.toDataURL to return a base64 string version of the canvas’ content.

To detect when position: sticky is triggered with JavaScript, we use the intersection observer.

For instance, we write

const stickyElm = document.querySelector("header");

const observer = new IntersectionObserver(
  ([e]) => e.target.classList.toggle("isSticky", e.intersectionRatio < 1),
  { threshold: [1] }
);

observer.observe(stickyElm);

to create a new IntersectionObserver object by calling it with a callback and an object.

The callback is called if the element we’re watching has intersected with the edge of the browser tab or window.

In it, we call classList.toggle to toggle the isSticky class to true if the intersectionRatio is less than 1, which means it is moving away from the edge of the screen.

We call observer to watch the stickyElm element for intersection.

To get an element’s padding value using JavaScript, we call the getComputedStyle method.

For instance, we write

window.getComputedStyle(txt, null).getPropertyValue("padding-left");

to call getComputedStyle to get the conmputed style of the txt element.

And then we call the getPropertyValue method to get the padding-left style.

To change placeholder text with JavaScript, we set the placeholder property.

For instance, we write

<input type="text" name="Email" placeholder="Some Text" />

to add an input.

Then we write

document.getElementsByName("Email")[0].placeholder = "new text for email";

to select the input with getElementsByName and get the first element from the returned node list.

And then we set the placeholder property to the new placeholder attribute value.

To listen for onchange event for input type="number" with JavaScript, we set the onchange attribute to the change listener function.

For instance, we write

<input type="number" onchange="onChangeFunction(this.value)" />

to add a number input with the onchange attribute set to JavaScript code that calls the onChangeFunction with the value of the input.