Author: John Au-Yeung

Sometimes, we want to add a popup description Box using onmouseover with JavaScript.

In this article, we’ll look at how to add a popup description Box using onmouseover with JavaScript.

How to add a popup description Box using onmouseover with JavaScript?

To add a popup description Box using onmouseover with JavaScript, we can set the display CSS property of the popup in the onmouseover method of its parent element.

For instance, we write:

<div id="parent">
  <div id="popup" style="display: none">description text here</div>
</div>

to add the parent with the popup div inside.

Then we write:

#parent {
  width: 200px;
  height: 200px
}

#parent #popup {
  display: none;
}

#parent:hover #popup {
  display: block;
}

to add some styles to the divs.

We hide the popup div by default.

Next, we write:

const e = document.getElementById('parent');
e.onmouseover = () => {
  document.getElementById('popup').style.display = 'block';
}
e.onmouseout = () => {
  document.getElementById('popup').style.display = 'none';
}

to select the parent div with document.getElementById.

Then we set e.onmouseover to a function that sets the display CSS property of the popup div to 'block'.

Likewise, we set e.onmouseout to a function that sets the display CSS property of the popup div to 'none'.

Conclusion

To add a popup description Box using onmouseover with JavaScript, we can set the display CSS property of the popup in the onmouseover method of its parent element.

Sometimes, we want to convert a decimal string to a binary string with JavaScript.

In this article, we’ll look at how to convert a decimal string to a binary string with JavaScript.

How to convert a decimal string to a binary string with JavaScript?

To convert a decimal string to a binary string with JavaScript, we can use the JavaScript number’s toString method.

For instance, we write:

const num = '123'
const b = Number(num).toString(2)
console.log(b)

We call Number with num to convert num to a number.

Then we call toString on the returned number with 2 to convert it to a binary string.

As a result, b is '1111011'.

Conclusion

To convert a decimal string to a binary string with JavaScript, we can use the JavaScript number’s toString method.

Sometimes, we want to hide and show list items after the nth item with jQuery.

In this article, we’ll look at how to hide and show list items after the nth item with jQuery.

How to hide and show list items after the nth item with jQuery?

To hide and show list items after the nth item with jQuery, we can select the element after the nth item wit the gt selector and call show on them.

For instance, we write:

<ul>
  <li>One</li>
  <li>Two</li>
  <li>Three</li>
  <li>Four</li>
  <li>Five</li>
</ul>

<button class='showButton'>
  show
</button>

to add a button and a list.

Then we write:

$('ul li:gt(3)').hide();
$('.showButton').click(() => {
  $('ul li:gt(3)').show();
});

We select the li’s in the ul element that’s after the 3rd item with $('ul li:gt(3)').

Then we call hide on them to hide them.

And then we select the button with $('.showButton') and then call click on it with a callback that calls $('ul li:gt(3)').show(); to show the li’s after the 3rd item.

Conclusion

To hide and show list items after the nth item with jQuery, we can select the element after the nth item wit the gt selector and call show on them.

Sometimes, we want to make a button a file upload button with JavaScript.

In this article, we’ll look at how to make a button a file upload button with JavaScript.

How to make a button a file upload button with JavaScript?

To make a button a file upload button with JavaScript, we can create a hidden file input.

And then we add a button that opens the hidden file input when we click it.

For instance, we write:

<input id='fileid' type='file' hidden/>
<input id='buttonid' type='button' value='Upload MB' />

to add the hidden file input and a button.

Then we write:

const openDialog = () => {
  document.getElementById('fileid').click();
}

document.getElementById('buttonid').addEventListener('click', openDialog);

to add the openDialog function to select the hidden file input and call click on it to open the file selection dialog.

Then we select the button and call addEventListener on it to add openDialog as a click listener.

Conclusion

To make a button a file upload button with JavaScript, we can create a hidden file input.

And then we add a button that opens the hidden file input when we click it.