Author: John Au-Yeung

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

Categories
CSS

How to move an entire div element up x pixels with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to move an entire div element up x pixels with CSS.

In this article, we’ll look at how to move an entire div element up x pixels with CSS.

How to move an entire div element up x pixels with CSS?

To move an entire div element up x pixels with CSS, we set the margin-top property.

For instance, we write

div {
  margin-top: -15px;
}

to move the div up 15px by setting margin-top to -15px.

Conclusion

To move an entire div element up x pixels with CSS, we set the margin-top property.

Categories
JavaScript Answers

How to disable an option in a select based on its value with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to disable an option in a select based on its value with JavaScript.

In this article, we’ll look at how to disable an option in a select based on its value with JavaScript.

How to disable an option in a select based on its value with JavaScript?

To disable an option in a select based on its value with JavaScript, we can set its disabled property to true.

For instance, we write

document.querySelectorAll("#foo option").forEach((opt) => {
  if (opt.value === "example") {
    opt.disabled = true;
  }
});

to select the option elements in the drop down with querySelector.

Then we call forEach with a callback that checks if the value attribute’s value is 'example'.

If it is, then we set its disabled property to true to disable it.

Conclusion

To disable an option in a select based on its value with JavaScript, we can set its disabled property to true.

Categories
JavaScript Answers

How to change audio element src with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to change audio element src with JavaScript.

In this article, we’ll look at how to change audio element src with JavaScript.

How to change audio element src with JavaScript?

To change audio element src with JavaScript, we set the element’s src attribute.

For instance, we write

const audio = document.getElementById("audio");

const source = document.getElementById("audioSource");
source.src = elm.getAttribute("data-value");

audio.load();
audio.play();

to select the audio element with getElementById.

Then we get the element with the data-value attribute with getElementById.

We use the data-value attribute value for the src attribute’s value.

Next we call load to preload the audio element with the clip from the new URL.

Then we call play to play it.

Conclusion

To change audio element src with JavaScript, we set the element’s src attribute.

Categories
Vue Answers

How to set the selected option in Vue.js 2?

Labrador retriever puppy walking on green grass

Sometimes, we want to the set selected in Vue.js 2.

In this article, we’ll look at how to the set selected in Vue.js 2.

How to set the selected option in Vue.js 2?

To set selected option selected in Vue.js 2, we set the v-model variable to the selected option’s value attribute value.

For instance, we write

<template>
  <select v-model="selectedDay">
    <option v-for="day in days">{{ day }}</option>
  </select>
</template>

<script>
export default {
  data() {
    return {
      selectedDay: 1,
      days: Array.from({ length: 31 }, (v, i) => i).slice(1),
    };
  },
  mounted() {
    const selectedDay = new Date();
    this.selectedDay = selectedDay.getDate();
  },
};
</script>

to add the select drop down in the template.

We render the days values as options with v-for.

Then we define the days array in the data method.

Next, we set this.selectedDay to today’s date that we get from calling getDate on the current date which is selectedDay.

Conclusion

To set selected option selected in Vue.js 2, we set the v-model variable to the selected option’s value attribute value.

Categories
Angular Answers

How to append HTML to container element in Angular and TypeScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to append HTML to container element in Angular and TypeScript.

In this article, we’ll look at how to append HTML to container element in Angular and TypeScript.

How to append HTML to container element in Angular and TypeScript?

To append HTML to container element in Angular and TypeScript, we set the [innerHtml] attribute.

For instance, we write

this.htmlToAdd = '<div class="two">two</div>';

to set the htmlToAdd instance variable to a HTML string.

Then we render the content by writing

<div [innerHtml]="htmlToAdd"></div>

to set [innerHtml] to htmlToAdd to render the htmlToAdd string as raw HTML.

Conclusion

To append HTML to container element in Angular and TypeScript, we set the [innerHtml] attribute.