Author: John Au-Yeung

Sometimes, we want to normalize mouse wheel speed across browsers with JavaScript.

In this article, we’ll look at how to normalize mouse wheel speed across browsers with JavaScript.

How to normalize mouse wheel speed across browsers with JavaScript?

To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.

For instance, we write

const handleScroll = (evt) => {
  const direction = evt.detail < 0 || evt.wheelDelta > 0 ? 1 : -1;
};

someEl.addEventListener("mousewheel", handleScroll, false);

to add the handleScroll function that checks if evt.detail is less than 0 or evt.wheelDelta is bigger than 0 and return 1.

Otherwise, we return -1.

evt.detail < 0 || evt.wheelDelta > 0 being true means we’re scrolling up.

Otherwise, we’re scrolling down.

Conclusion

To normalize mouse wheel speed across browsers with JavaScript, we just assign -1 or 1 depending on the direction of the wheel scrolling.

Sometimes, we want to get contentEditable caret position with JavaScript.

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

How to get contentEditable caret position with JavaScript?

To get contentEditable caret position with JavaScript, we change the selection to start from the beginning and then get the length of the full selected string.

For instance, we write

const cursorPosition = () => {
  const sel = document.getSelection();
  sel.modify("extend", "backward", "paragraphboundary");
  const pos = sel.toString().length;
  if (sel.anchorNode !== undefined) {
    sel.collapseToEnd();
  }

  return pos;
};

to get the selection with getSelection.

Then we move the selection back to the beginning of the input value with

sel.modify("extend", "backward", "paragraphboundary");

And then we get the caret position pos with the length of the selection.

Conclusion

To get contentEditable caret position with JavaScript, we change the selection to start from the beginning and then get the length of the full selected string.

Sometimes, we want to remove part of a string before a ":" in JavaScript.

In this article, we’ll look at how to remove part of a string before a ":" in JavaScript.

How to remove part of a string before a ":" in JavaScript?

To remove part of a string before a ":" in JavaScript, we call the string split method and the array pop method.

For instance, we write

const str = "abc: Lorem ipsum sit amet";
str = str.split(":").pop();

to call split with ':' to split the string by the colons.

And then we call pop to remove the part after the colon from the returned array and return it.

Conclusion

To remove part of a string before a ":" in JavaScript, we call the string split method and the array pop method.

Sometimes, we want to get city name using geolocation with JavaScript.

In this article, we’ll look at how to get city name using geolocation with JavaScript.

How to get city name using geolocation with JavaScript?

To get city name using geolocation with JavaScript, we can use the geolocator.js library.

To install it, we add

<script type="text/javascript" src="geolocator.min.js"></script>

into our HTML code.

Then we write

const options = {
  enableHighAccuracy: true,
  fallbackToIP: true,
  addressLookup: true,
};

geolocator.locate(options, (err, location) => {
  console.log(location.address.city);
});

to call geolocator.locate with the options object to set some options.

We set fallbackToIP to true to fallback to using IP address for getting location if geolocation isn’t available.

And we set addressLookup to true to get the address data from the location.

Then we get the city name with location.address.city in the callback.

Conclusion

To get city name using geolocation with JavaScript, we can use the geolocator.js library.