Category: JavaScript Answers

Sometimes, we want to find the first scrollable parent element with JavaScript.

In this article, we’ll look at how to find the first scrollable parent element with JavaScript.

Find the First Scrollable Parent Element with JavaScript

To find the first scrollable parent element with JavaScript, we can recursively search for the parent that has scrollHeight bigger than clientHeight .

For instance, we can write the following HTML:

<div class="outer">
  <div class="inner">
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed dapibus aliquam iaculis. Pellentesque interdum elit sapien, quis interdum enim laoreet sed. Mauris varius magna ac dapibus molestie. Sed porttitor sapien eget ipsum aliquet, lacinia venenatis lacus finibus. Phasellus in nibh mauris. Interdum et malesuada fames ac ante ipsum primis in faucibus. Sed placerat tristique augue, id lacinia massa iaculis eu. Donec sed vestibulum odio. Fusce sit amet congue odio, eu consequat neque. Sed sed mauris id sem malesuada blandit eu at quam.
    <div class="content">
      <span id='start'>Scroll me into view</span>
    </div>
  </div>
</div>

Then we write:

const getScrollParent = (node) => {
  if (node === null) {
    return null;
  }

  if (node.scrollHeight > node.clientHeight) {
    return node;
  } else {
    return getScrollParent(node.parentNode);
  }
}

const span = document.querySelector('span')
const scrollable = getScrollParent(span)
console.log(scrollable)

to add the getScrollParent function that takes the HTML DOM node .

Then it checks if node.scrollHeight is bigger than node.clientHeight if the node isn’t null .

If it is, then it’s returned.

Otherwise, it calls getScrollParent with the node.parentNode to check the node up the DOM tree.

Then we call the function by getting the span with document.querySelector .

And then we call getScrollParent with it.

Therefore, we see that scrollable is the html element.

Conclusion

To find the first scrollable parent element with JavaScript, we can recursively search for the parent that has scrollHeight bigger than clientHeight .

Sometimes, we want to disable related videos with the Youtube JavaScript API. In this article, we’ll look at how to disable related videos with the Youtube JavaScript API.

Disable Related Videos with the Youtube JavaScript API

To disable related videos with the Youtube JavaScript API, we can set the rel property in the playerVars property to 0.

For instance, we can add the following HTML element for the video player:

<div id="player"></div>

Then we can write:

const tag = document.createElement("script");
tag.id = "iframe-demo";
tag.src = "https://www.youtube.com/iframe_api";
const [firstScriptTag] = document.getElementsByTagName("script");
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

window.onYouTubeIframeAPIReady = () => {  
  const player = new window.YT.Player("player", {    
    width: 200,    
    height: 100,    
    videoId: "M7lc1UVf-VE",    
    playerVars: {      
      rel: 0,      
      showinfo: 0,      
      ecver: 2   
    }  
  });
};

to add the YouTube script tag with:

const tag = document.createElement("script");
tag.id = "iframe-demo";
tag.src = "https://www.youtube.com/iframe_api";
const [firstScriptTag] = document.getElementsByTagName("script");
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);

Then we set the window.onYouTubeIframeAPIReady to a function that invokes the window.YT.Player constructor with the ID of the element for the player as the first argument.

The 2nd argument is an object with various options like the video width and height and video ID. The playerVars.rel property is set to 0 so that related videos will not be shown.

Conclusion

To disable related videos with the Youtube JavaScript API, we can set the rel property in the playerVars property to 0.

Sometimes, we want to alert for unsaved changes in form with JavaScript.

In this article, we’ll look at how to alert for unsaved changes in form with JavaScript.

Alert for Unsaved Changes in Form with JavaScript

To alert for unsaved changes in form with JavaScript, we can track changes done to inputs in a form.

Then we can set the window.onbeforeunload property to a function that checks the changing state of the input and returns an alert message if there’re changes.

For instance, if we have:

<div id="app">
  <input />
</div>

Then we can write the following JavaScript to track whether the input value has changed and shows the alert when the user leaves the page when there’re changes made:

let unsaved = false;

const input = document.querySelector("input");
input.addEventListener("change", () => {
  unsaved = true;
});

const unloadPage = () => {
  if (unsaved) {
    return "You have unsaved changes on this page.";
  }
};

window.onbeforeunload = unloadPage;

We have the unsaved variable, which we set to true in the change event listener of the input that we added with input.addEventListener .

And then we have the unloadPage function that checks if unsaved is true .

If it is, then we return a string that triggers the alert when we set the function as the value of window.onbeforeunload .

The message can’t be changed, so we can return any string.

onbeforeunload runs when we leave the page.

Conclusion

To alert for unsaved changes in form with JavaScript, we can track changes done to inputs in a form.

Then we can set the window.onbeforeunload property to a function that checks the changing state of the input and returns an alert message if there’re changes.