Author: John Au-Yeung

Web developer specializing in React, Vue, and front end development.

Categories
Vue Answers

How to navigate using vue router from Vuex actions?

Labrador retriever puppy walking on green grass

Sometimes, we want to navigate using vue router from Vuex actions.

In this article, we’ll look at how to navigate using vue router from Vuex actions.

How to navigate using vue router from Vuex actions?

To navigate using vue router from Vuex actions, we can call router.push.

For instance, we write

import router from "@/router";

//...

router.push({ name: "Home" });

to import the Vue Router object with import.

And then we call router.push with an object to navigate to the route with name set to 'Home'.

We can do this outside components.

Conclusion

To navigate using vue router from Vuex actions, we can call router.push.

Categories
JavaScript Answers

How to reset all checkboxes using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to reset all checkboxes using JavaScript.

In this article, we’ll look at how to reset all checkboxes using JavaScript.

How to reset all checkboxes using JavaScript?

To reset all checkboxes using JavaScript, we can set the checked property of each checkbox to false.

For instance, we write

const clist = document.getElementsByTagName("input");
for (const el of elist) {
  el.checked = false;
}

to select all inputs with getElementsByTagName.

Then we loop through them with a for-of loop and set each checkbox input’s checked property to false to uncheck all the checkboxes.

Conclusion

To reset all checkboxes using JavaScript, we can set the checked property of each checkbox to false.

Categories
JavaScript Answers

How to detect a pinch with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to detect a pinch with JavaScript.

In this article, we’ll look at how to detect a pinch with JavaScript.

How to detect a pinch with JavaScript?

To detect a pinch with JavaScript, we listen to the gestureend event.

For instance, we write

node.addEventListener(
  "gestureend",
  (e) => {
    if (e.scale < 1.0) {
      //...
    } else if (e.scale > 1.0) {
      //...
    }
  },
  false
);

to listen to the gestureend event with addEventListener.

In it, we check the e.scale value.

If it’s less than 1, then the we moved our fingers closers together.

Otherwise, we moved our fingers farther apart.

Conclusion

To detect a pinch with JavaScript, we listen to the gestureend event.

Categories
CSS

How to disable text select with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to disable text select with CSS.

In this article, we’ll look at how to disable text select with CSS.

How to disable text select with CSS?

To disable text select with CSS, we set the user-select style to none.

For instance, we write

body {
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  -khtml-user-select: none;
  -moz-user-select: none;
  -ms-user-select: none;
  user-select: none;
}

to set the user-select style to none for the most common browsers on the body element to disable selection on the text on the page.

Conclusion

To disable text select with CSS, we set the user-select style to none.

Categories
JavaScript Answers

How to remove HTML element styles via JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to remove HTML element styles via JavaScript.

In this article, we’ll look at how to remove HTML element styles via JavaScript.

How to remove HTML element styles via JavaScript?

To remove HTML element styles via JavaScript, we can remove the style attribute from the element.

To do this, we write

element.removeAttribute("style");

to call element.removeAttribute to remove the style attribute from the element.

Conclusion

To remove HTML element styles via JavaScript, we can remove the style attribute from the element.