Category: JavaScript Answers

Sometimes, we may want to run JavaScript code when a CSS transition finishes.

In this article, we’ll look at how to run a JavaScript callback when a CSS3 transition finishes.

Listen to the transitionend Event

To run JavaScript code when a CSS3 transition finishes, we can listen to the transitionend event.

For instance, if we have the following HTML:

<div id="my-div">Click me to start animation.</div>

And the following CSS:

#my-div {
  transition: top 2s;
  position: relative;
  top: 0;
}

div {
  background: #ede;
  cursor: pointer;
  padding: 20px;
}

Then we can add a click event listener to apply the transition and update the div’s content when the transition is done by writing:

const myDiv = document
  .getElementById("my-div")

myDiv
  .addEventListener("transitionend",
    () => {
      myDiv.innerHTML = "transition event ended";
    })

myDiv
  .addEventListener('click', () => {
    myDiv.style.top = '55px'
  })

First, we have the div with ID my-div with document.getElementById .

Then we call addEventListener on the returned div with the 'transitionend' string to add a transitionend event listener.

In the event handler function, we update its innerHTML to 'transition event ended' .

Then we add a click event listener to the same div to set the top CSS property to '55px' .

In the CSS, we add a transition property to add some transition effect when we change the top property.

And the effect will last 2 seconds.

Now when we click on the div, it’ll side down. And the text content will become ‘transition event ended’ because the transitionend event listener ran.

Conclusion

We can listen to the transitonend event to run JavaScript code when a CSS3 transition ends.

Sometimes, we may want to get a CSS property value of an element with JavaScript.

In this article, we’ll look at how to get a CSS property value of an element with JavaScript.

Use the window.getComputedStyle Method

We can use the window,getComputedStyle method to get the computed CSS styles of an element.

For instance, if we have the following HTML:

<div style='height: 300px; overflow-y: auto'>

</div>

Then we can write the following JavaScript:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

const style = window.getComputedStyle(div);
const height = style.getPropertyValue('height');
console.log(height)

to add some content to the div.

We have the for loop to add 100 p elements into the div with document.createElement .

Then we set the textContent of each element to add some content.

And then we call div.appendChild to add the p elements as children of the div.

Next, we call window.getComputedStyle with the div to get a style object.

And then we can get the height property with:

const height = style.getPropertyValue('height');

And height is '300px' since we set it as such in the HTML.

Use the Element’s computedStyleMap Method

Also, we can use the computedStyleMap method that comes with elements to get the styles applied to the element.

For instance, we have the following HTML:

<div style='height: 300px; overflow-y: auto'>

</div>

And we can write the following JavaScript:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

const style = div.computedStyleMap();
const height = style.get('height');
console.log(height)

Everything above the last 3 lines is the same as before.

Then we call div.computedStyleMap to get a style object that we can use to get the styles.

And then we have:

const height = style.get('height');

to get the CSSheight property value of the div.

This time height should be:

{value: 300, unit: "px"}

The value and unit are separate properties in the returned object.

Conclusion

There’re a few ways we can use to get the CSS properties from an element with JavaScript.

Sometimes, we may want to get the position of the scrollbar when we’re scrolling on an element or page.

In this article, we’ll look at how to get the scrollbar position with JavaScript.

Using the scrollTop Property of an Element

We can use the scrollTop property of an element to let us get the number of pixels hidden because of scrolling.

So we can use this to get the position of the scrollbar.

For instance, we can write the following HTML:

<div>

</div>

Then we can listen to the scroll event by writing:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

window.addEventListener('scroll', (e) => {
  console.log(document.documentElement.scrollTop);
})

We get the div with the document.querySelector method.

Then we add 100 p elements into the div by calling document.createElement to create the elements.

And we set the content of each by setting the textContent property.

Then we append it to the div with the div.appendChild method.

Next, we call window.addEventListener with the 'scroll' string as the first argument to listen to the scroll event.

And then we can get the scrollTop property of the documentElement to get how far the html element has scrolled down.

We can also get the scrollTop property of other elements.

For instance, if we have:

<div style='height: 300px; overflow-y: auto'>

</div>

We set the height and overflow-y properties to make the div scrollable.

Then we can listen to the scroll event of the div by writing:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

div.addEventListener('scroll', (e) => {
  console.log(div.scrollTop);
})

We add the content to the div like we have before.

But we call div.addEventListener instead of window.addEventListener to listen to the scroll event of the div.

Then we get the div.scrollTop property to get how far the div has scrolled down.

Using the scrollY Property of the window Object

There’s also the window.scrollY property to let us get how far down the scrollbar is in pixels.

For instance, we can use it by writing:

const div = document.querySelector('div')
for (let i = 1; i <= 100; i++) {
  const p = document.createElement('p')
  p.textContent = i
  div.appendChild(p)
}

window.addEventListener('scroll', (e) => {
  console.log(window.scrollY);
})

We still listen to the 'scroll' event, but we get the window.scrollY property instead of document.documentElement.scrollTop .

Conclusion

There’re several ways we can use to get the scrollbar position with JavaScript.

Sometimes, we have a string with a comma-separated list of numbers that we want to convert to an array of numbers.

In this article, we’ll look at how to convert a string of numbers to an array of numbers in JavaScript.

Using String and Array Methods

We can use the split method available with JavaScript strings to convert a string into an array of strings by splitting the string by a separator.

So we can use the split method to split the string into an array of strings by the commas.

So it’ll return an array of strings with the stuff between the commas.

Then we can call the array map method to map the split string array entries into numbers.

For instance, we can write:

const nums = "1,2,3,4".split(`,`).map(x => +x)
console.log(nums)

We call split with the comma to separate the string into an array with the number strings in it.

Then we call map with a callback that converts each entry to a number with the unary + operator.

Therefore, nums is [1, 2, 3, 4] as a result.

Instead of using the unary + operator, we can also use the parseInt function.

To use it, we write:

const nums = "1,2,3,4".split(`,`).map(x => parseInt(x, 10))
console.log(nums)

parseInt takes 2 arguments.

The first argument is the value we want to convert to a number.

The 2nd argument is the base that we want the returned number to be in.

So 10 would convert x to a decimal number.

Therefore, we get the same result as before.

Another way to convert the strings to numbers is to use the Number function.

To use it, we write:

const nums = "1,2,3,4".split(`,`).map(x => Number(x))
console.log(nums)

and we get the same thing.

Number always convert to decimal numbers so we don’t have to specify it.

There’s also the parseFloat function that converts a value to a floating-point number if we want to do that.

It takes the same argument as parseInt .

To use it, we write:

const nums = "1,2,3,4".split(`,`).map(x => parseFloat(x, 10))
console.log(nums)

And we get the same result as before for nums .

Conclusion

We can convert a string of numbers to an array of numbers with some string, array and number functions.

Sometimes, we may want to embed an auto-playing YouTube video on our web page.

In this article, we’ll look at how to embed an auto-playing YouTube video in an iframe.

Embed Auto-playing YouTub Video

To embed an auto-playing YouTub video, we can write the following code:

<iframe width="420" height="345" src="https://www.youtube.com/embed/n4BSyc7ZLiE?autoplay=1" frameborder="0" allowfullscreen></iframe>

We add an iframe element with the width and height for the video.

In the src attribute, we have the YouTube video embed URL with the autoplay query parameter set to 1 to enable autoplay.

frameborder set to 0 removes the border around the iframe.

allowfullscreen lets us make the iframe full screen.

Conclusion

We can embed an auto-playing video in an iframe by setting the autoplay query parameter of the embed video URL to 1.