Author: John Au-Yeung

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

Categories
CSS

How to use images like checkboxes with CSS?

Labrador retriever puppy walking on green grass

Sometimes, we want to use images like checkboxes with CSS.

In this article, we’ll look at how to use images like checkboxes with CSS.

How to use images like checkboxes with CSS?

To use images like checkboxes with CSS, we can add a label and an input and style them.

For instance, we write

<input type="checkbox" id="myCheckbox1" />
<label for="myCheckbox1"><img src="https://picsum.photos/200/200" /></label>

to add a checkbox with a label that has an img element in it.

Then we set the background image of the label with CSS by writing

label::before {
  background-image: url(../path/to/unchecked.png);
}

:checked + label::before {
  background-image: url(../path/to/checked.png);
}

We set the background image to replace the checkbox with the image with

label::before {
  background-image: url(../path/to/unchecked.png);
}

And the we set the image that shows when the checkbox is checked instead of the checkbox with

:checked + label::before {
  background-image: url(../path/to/checked.png);
}

Conclusion

To use images like checkboxes with CSS, we can add a label and an input and style them.

Categories
JavaScript Answers

How to simulate target=”_blank” in JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to simulate target="_blank" in JavaScript.

In this article, we’ll look at how to simulate target="_blank" in JavaScript.

How to simulate target="_blank" in JavaScript?

To simulate target="_blank" in JavaScript, we call the window.open method.

For instance, we write

window.open("http://www.example.com", "_blank");

to call window.open to open http://www.example.com.

We call it with '_blank' to show the page in a new window.

Conclusion

To simulate target="_blank" in JavaScript, we call the window.open method.

Categories
JavaScript Answers

How to create an iframe with given HTML dynamically with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to create an iframe with given HTML dynamically with JavaScript.

In this article, we’ll look at how to create an iframe with given HTML dynamically with JavaScript.

How to create an iframe with given HTML dynamically with JavaScript?

To create an iframe with given HTML dynamically with JavaScript, we can use the createElement method.

For instance, we write

const iframe = document.createElement("iframe");
const html = "<body>hello world</body>";
document.body.appendChild(iframe);
iframe.contentWindow.document.open();
iframe.contentWindow.document.write(html);
iframe.contentWindow.document.close();

to call createElement to create an iframe.

Then we call appendChild to append the iframe as child of the body element.

Next, we call iframe.contentWindow.document.open to open the iframe for writing.

Then we call iframe.contentWindow.document.write with html to write the html content to the iframe.

Finally, we call close to stop writing.

Conclusion

To create an iframe with given HTML dynamically with JavaScript, we can use the createElement method.

Categories
JavaScript Answers

How to get query string parameters URL values with JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to get query string parameters URL values with JavaScript.

In this article, we’ll look at how to get query string parameters URL values with JavaScript.

How to get query string parameters URL values with JavaScript?

To get query string parameters URL values with JavaScript, we can use the URLSearchParams constructor.

For instance, we write

const urlParams = new URLSearchParams(window.location.search);
console.log(urlParams.get("action"));

to get the query string from the current page’s URL with window.location.search.

Then we call get with the key of the query parameter we want to get to return its value.

Conclusion

To get query string parameters URL values with JavaScript, we can use the URLSearchParams constructor.

Categories
JavaScript Answers

How to insert a text where cursor is using JavaScript?

Labrador retriever puppy walking on green grass

Sometimes, we want to insert a text where cursor is using JavaScript.

In this article, we’ll look at how to insert a text where cursor is using JavaScript.

How to insert a text where cursor is using JavaScript?

To insert a text where cursor is using JavaScript, we can get the caret position with the selectionStart property of the element.

For instance, we write

const insertAtCaret = (el, text) => {
  const caretPos = el.selectionStart;
  const textAreaTxt = el.value;
  el.value =
    textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos);
};

to create the insertAtCaret function.

In it, we get the cursor position with el.selectionStart.

And then we get the input value with el.value.

Then we set new text box value with

textAreaTxt.substring(0, caretPos) + text + textAreaTxt.substring(caretPos)

To put the text where the cursor is.

Conclusion

To insert a text where cursor is using JavaScript, we can get the caret position with the selectionStart property of the element.