Category: JavaScript Answers

Sometimes, we want to check a selected image’s width and height selected with a file input with JavaScript.

In this article, we’ll look at how to check a selected image’s width and height with JavaScript.

Use the FileReader and Image Constructors

We can use the FileReader constructor to create an object to read the file.

Then we can use the Image constructor to create an image with the read file as the content.

For instance, if we have the following file input:

<input type='file'>

Then we can read the file into an image by writing:

const fileUpload = document.querySelector('input')
const reader = new FileReader();
fileUpload.addEventListener('change', () => {
  reader.readAsDataURL(fileUpload.files[0]);
  reader.onload = (e) => {
    const image = new Image();
    image.src = e.target.result;
    image.onload = () => {
      const {
        height,
        width
      } = image;
      if (height > 100 || width > 100) {
        alert("Height and Width must not exceed 100px.");
        return false;
      }
      alert("Uploaded image has valid Height and Width.");
      return true;
    };
  };

})

We select the file input with document.querySelector .

Then we create a FileReader instance.

And then we add a change event listener to the file input with addEventListener .

In the event listener, we call reader.readAsDataURL to read the file.

The file is stored in fileUpload.files object.

Index 0 has the first file selected.

Then we set the reader.onload property to a function that creates the Image instance.

We set image.src to e.target.result to set the read file as the content of the img element created.

Then we set the image.onload property to a function that gets the width and height of the image.

And we check the width and height to be what we want with the if statements.

Now if we select an image file, we should see the alert boxes pop up depending on the size of the image.

Conclusion

We can use the FileReader constructor to create an object to read the file.

Then we can use the Image constructor to create an image with the read file as the content to check the width and height of an image file selected.

Sometimes, we want to remove an element in an array with JavaScript.

In this article, we’ll look at how to remove an element in an array with JavaScript.

Use the Array.prototype.splice Method

We can use the JavaScript array splice method to remove an item from an array.

For instance, we can write:

const arr = [1, 2, 3]
arr.splice(1, 1)
console.log(arr)

to remove the item with index 1 from arr with splice .

The first argument of splice is the index of the item to remove.

And the 2nd argument is the number of items to remove starting from the index in the first argument.

Therefore arr is [1, 3] according to the console log.

Conclusion

We can remove an item from a JavaScript array with the JavaScript array’s splice method.

Sometimes, we want to check if a string has characters and whitespace and not just whitespace.

In this article, we’ll look at how to check if a string has characters and whitespace and not just whitespace.

Check if a String has Non-whitespace Characters

We can use the S pattern to check if a string has any non-whitespace characters.

For instance, we can write:

const myString = 'abc '

if (/S/.test(myString)) {
  //...
}

to check if myString has any non-whitespace characters with the regex test method.

It should return true since it has non-whitespace characters.

Use the String.prototype.trim Method

Another way to check if a string has non-whitespace characters is to use the JavaScript string’s trim method.

For instance, we can write:

const myString = 'abc '

if (!myString.trim()) {
  //...
}

If myString returns an empty string after calling trim on it, then it only has whitespaces.

Therefore, we can check if trim returns a falsy value to do the whitespace-only check since empty string is a falsy value.

Check if a String has Only Whitespace Characters

We can also check if a string only has whitespace characters.

To do this, we write:

const myString = 'abc '

if (/^s+$/.test(myString)) {
  //...
}

We call test with /^s+$/ to check if myString only has whitespace characters.

The ^ indicates the start of the string and $ indicates the end of the string.

s+ is the pattern for one or more whitespace characters.

So the regex checks if the whole string consists of whitespaces.

Conclusion

We can use various regex patterns or the trim method to check if a string has all whitespace or not.

Sometimes, we want to add an HTML table that has a scrollable body but with the header fixed in place.

In this article, we’ll look at how to add a table where the table body scrolls but the table header stays in place.

Create a Table That Has a Fixed Header

We can create an HTML table that has a fixed header with some CSS.

For instance, if we have the following table:

<table>
  <thead>
    <tr>
      <th>One</th>
      <th>Two</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
    <tr>
      <td>Data</td>
      <td>Data</td>
    </tr>
  </tbody>
</table>

Then we can style it by writing the following CSS:

table {
  overflow: scroll;
  display: block;
  height: 120px;
}

thead>tr {
  position: absolute;
  display: block;
  padding: 0;
  margin: 0;
  top: 0;
  background-color: white;
}

tbody>tr:nth-of-type(1) {
  margin-top: 16px;
}

tbody tr {
  display: block;
}

td,
th {
  width: 70px;
  border-style: solid;
  border-width: 1px;
  border-color: black;
}

We set the height of the table element to 120px to make restrict the height of it so we can make it scrollable.

To make it scrollable, we set the overflow CSS property to scroll .

Then we set the tr elements in the thead to absolute position so they stay in place.

Also, we set the tr elements in thead to a white background so that the elements below will be hidden when we scroll them.

Conclusion

We can make an HTML table with a scrollable body and a fixed header with some CSS styles.

Sometimes, we want to select an item with a class within a div with JavaScript.

In this article, we’ll look at how to select an item with a class within a div with JavaScript.

Use document.querySelector

We can use document.querySelector on to select a div and then select an element within it with the given class after that.

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const innerDiv = document
  .querySelector('#mydiv')
  .querySelector('.myclass')
console.log(innerDiv)

We just call querySelector on the element with the ID mydiv to select items inside that div.

Therefore, innerDiv is the div with the class myclass .

Use document.getElementById

We can replace the first querySelector call with getElementById .

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const innerDiv = document
  .getElementById('mydiv')
  .querySelector('.myclass')
console.log(innerDiv)

Then we see the same result as before.

Use document.getElementsByClassName

Also, we can use the getElementsByClassName method to get all the elements with the given class within an element.

For instance, if we have the following HTML:

<div id="mydiv">
  <div class="myclass"></div>
</div>

Then we can select the div with the class myclass by writing:

const [innerDiv] = document
  .getElementById('mydiv')
  .getElementsByClassName('myclass')
console.log(innerDiv)

We restructure the first div with the class myclass from the elements that are returned by getElementsByClassName .

And we get the same result as before.

Conclusion

We can get elements within an element with the element selection methods built into the browser.