Author: John Au-Yeung

Sometimes, we want to make HTML element resizable using JavaScript.

In this article, we’ll look at how to make HTML element resizable using JavaScript.

How to make HTML element resizable using JavaScript?

To make HTML element resizable using JavaScript, we can listen to the mousemove event.

For instance, we write

const div = document.querySelector(`div.before`);
const box = document.querySelector(`div.container`);
box.addEventListener(`mousemove`, (e) => {
  const { offsetX, offsetY } = e;
  div.style.width = offsetX + `px`;
});

to select the div we want to resize with

const div = document.querySelector(`div.before`);

Then we select its container with

const box = document.querySelector(`div.container`);

Next, we listen to the mousemove event with addEventListener.

In the event listener, we set the width of the div to the horizontal mouse position.

Conclusion

To make HTML element resizable using JavaScript, we can listen to the mousemove event.

Sometimes, we want to test if a URL string is absolute or relative with JavaScript.

In this article, we’ll look at how to test if a URL string is absolute or relative with JavaScript.

How to test if a URL string is absolute or relative with JavaScript?

To test if a URL string is absolute or relative with JavaScript, we use a regex.

For instance, we write

const r = new RegExp("^(?:[a-z]+:)?//", "i");
const isUrl = r.test("http://example.com");

to create a regex with the RegExp constructor.

We use ^(?:[a-z]+:)?// to check for the protocol part of the URL in our string.

And use i to check the string in a case insensitive manner.

Then we call r.test to check "http://example.com" is an absolute URL.

Conclusion

To test if a URL string is absolute or relative with JavaScript, we use a regex.

Sometimes, we want to display an image stored as byte array in HTML and JavaScript.

In this article, we’ll look at how to display an image stored as byte array in HTML and JavaScript.

How to display an image stored as byte array in HTML and JavaScript?

To display an image stored as byte array in HTML and JavaScript, we can convert the byte array to a base64 URL string.

For instance, we add an img element with

<img id="itemPreview" src="" />

Then we write

const blob = new Blob([uint8ArrayBuffer], { type: "image/jpeg" });
const imageUrl = URL.createObjectURL(blob);
document.getElementById("itemPreview").src = imageUrl;

to select the img element with getElementById.

Then we set the src property to the base64 URL with the byte array converted to a base64 string.

We get the base64 image URL from by creating the uint8ArrayBuffer to a blob with the Blob constructor.

Then we call URL.createObjectURL to convert the blob to a base64 string.

Conclusion

To display an image stored as byte array in HTML and JavaScript, we can convert the byte array to a base64 URL string.

Sometimes, we want to automatically open default email client and pre-populate content with JavaScript.

In this article, we’ll look at how to automatically open default email client and pre-populate content with JavaScript.

How to automatically open default email client and pre-populate content with JavaScript?

To automatically open default email client and pre-populate content with JavaScript, we can navigate to the mailto URL with the email subject and body filled in.

For instance, we write

const email = message.emailId;
const subject = message.subject;
const emailBody = "Hi " + message.from;
document.location =
  "mailto:" + email + "?subject=" + subject + "&body=" + emailBody;

to set document.location to a mailto URL string with the subject and body of the email.

This will make the browser open the default mail client with the subject and body of the email filled in with the email address.

Conclusion

To automatically open default email client and pre-populate content with JavaScript, we can navigate to the mailto URL with the email subject and body filled in.