Category: JavaScript Answers

Sometimes, we want to delay a jQuery script until everything else has loaded.

In this article, we’ll look at how to delay a jQuery script until everything else has loaded.

How to delay a jQuery script until everything else has loaded?

To delay a jQuery script until everything else has loaded, we can call the $(window).bind method with a callback that runs when everything has been loaded.

For instance, we write;

$(window).bind("load", () => {
  console.log('loaded')
});

We call bind with 'load' to listen to the load event on window.

Then when that event is emitted, we call the callback to log 'loaded'.

Conclusion

To delay a jQuery script until everything else has loaded, we can call the $(window).bind method with a callback that runs when everything has been loaded.

Sometimes, we want to delete the default value of an input text on click with JavaScript.

In this article, we’ll look at how to delete the default value of an input text on click with JavaScript.

How to delete the default value of an input text on click with JavaScript?

To delete the default value of an input text on click with JavaScript, we can set the value of the input to the default by setting the value attribute and using the defaultValue property.

For instance, we write:

<input type="text" value="[some default value]" />

to set the value attribute to set the defaultValue property of the input.

Then we write:

const onBlur = (e) => {
  if (e.target.value === '') {
    e.target.value = e.target.defaultValue;
  }
}
const onFocus = (e) => {
  if (e.target.value === e.target.defaultValue) {
    e.target.value = '';
  }
}

const input = document.querySelector('input')
input.addEventListener('focus', onFocus)
input.addEventListener('blur', onBlur)

to add the onBlur and onFocus functions which runs when we focus away and in the input respectively.

In the onBlur function. we set the value of the input to the defaultValue.

And in onFocus, we set the input’s value to an empty string if it’s the same as the defaultValue.

e.target is the input since we call addEventListener on the input that we selected with document.querySelector.

Conclusion

To delete the default value of an input text on click with JavaScript, we can set the value of the input to the default by setting the value attribute and using the defaultValue property.

Sometimes, we want to disable right click on images using jQuery.

In this article, we’ll look at how to disable right click on images using jQuery.

How to disable right click on images using jQuery?

To disable right click on images using jQuery, we can return false in the contextmenu event handler.

For instance, we write:

<div id='nearestStaticContainer'>
  <img src='https://i.picsum.photos/id/290/200/300.jpg?hmac=kjRyFwJ6i5kuROjzxcs6QbXbBr8EptbH5AuVxtMxhQ0'>
</div>

to add an img element in a div.

Then we write:

$('#nearestStaticContainer').on('contextmenu', 'img', (e) => {
  return false;
});

to select the div with $.

And then we call on with 'contextmenu, 'img' and the contextmenu event handler for the div.

We listen for the contextmenu event emitted on img elements within the div.

And we return false to disable right clicks on the images.

Conclusion

To disable right click on images using jQuery, we can return false in the contextmenu event handler.

Sometimes, we want to embed arbitrary JSON in the DOM.

In this article, we’ll look at what’s the best practice for embedding arbitrary JSON in the DOM.

What’s the best practice for embedding arbitrary JSON in the DOM?

The best practice for embedding arbitrary JSON in the DOM is to put the JSON in a data element.

For instance, we write:

<data class="json-data" value='
  {
    "unicorns": "awesome",
    "abc": [1, 2, 3],
    "careful": "to escape &#39; quotes"
  }
'></data>

to put or JSON data in a data element’s value attribute.

Then we write:

const jsonData = document.querySelector('.json-data');
const data = JSON.parse(jsonData.value);

console.log(data)

to select the data element with document.querySelector.

And then we call JSON.parse to parse the value attribute of the of data element.

Therefore, data is:

{unicorns: 'awesome', abc: Array(3), careful: "to escape ' quotes"}

Conclusion

The best practice for embedding arbitrary JSON in the DOM is to put the JSON in a data element.

Sometimes, we want to use Lodash to find and return an object from an array.

In this article, we’ll look at how to use Lodash to find and return an object from an array.

How to use Lodash to find and return an object from an array?

To use Lodash to find and return an object from an array, we can use the find method.

For instance, we write:

const songs = [{
    description: 'object1',
    id: 1
  },
  {
    description: 'object2',
    id: 2
  },
  {
    description: 'object3',
    id: 3
  },
  {
    description: 'object4',
    id: 4
  }
]

const id = 3
const song = _.find(songs, {
  id
});
console.log(song)

We call find with the array we’re searching and the property value of each object we’re searching for.

Therefore, we get that song is {description: 'object3', id: 3} since we’re looking for the entry with id 3.

Conclusion

To use Lodash to find and return an object from an array, we can use the find method.