jQuery Tips — Disable Scroll, Copy for Formatting, Toggle Elements

Despite its age, jQuery is still a popular library for manipulating the DOM.

In this article, we’ll look at some tips for working with jQuery.

Disable Scrolling Temporarily

We can disable scrolling temporarily by hiding the overflow from the div that we’re scrolling.

For instance, we can create a disableScroll function to disable the scrolling.

We can do that by writing:

function disableScroll() {
  document.getElementById('scrollbar').style.display = 'block';
  document.body.style.overflow = 'hidden';
}

We get the element with ID scrollbar and make it display as a block element.

Then set overflow to hidden.

Copy to Clipboard with Formatting Using jQuery

To copy text to the clipboard with formatting using jQuery, we can make our element that has formatting editable.

Then we can set a handler for the focus event.

When the element is focused, we call the document.execCommand method to select all the items.

Once the items are selected, we can call the copy command on the document.

And then we call removeChild on the element.

To do that, we can write:

const copyWithFormatting = (elementId) => {
  const temp = document.createElement("div");
  temp.setAttribute("contentEditable", true);
  temp.innerHTML = document.getElementById(elementId).innerHTML;
  temp.setAttribute("onfocus", "document.execCommand('selectAll', false, null)");
  document.body.appendChild(temp);
  temp.focus();
  document.execCommand("copy");
  document.body.removeChild(temp);
}

We create a temporary div, then make that editable by setting the contentEditable attribute.

Then we get the HTML from the element with elementId and set that as the HTML content of the innerHTML of the temp element.

And then we add a focus handler on it to select all the items in the element with:

temp.setAttribute("onfocus", "document.execCommand('selectAll', false, null)");

Then we call appendChild to attach that to the body.

And then we focus on the temporary element we created.

Once we did that, we can call the 'copy' command to copy the content of the temporary element since we selected everything.

And then when we finish copying, we call removeChild to remove the temporary element.

However, we’ve to know that execCommand is marked as obsolete.

When the new clipboard API is widely available, then we should replace it with the new API.

Skip to the Next Iteration in jQuery.each()

To skip to the next iteration with $.each , we can return true in the callback to skip to the next iteration.

For instance, we can write:

const arr = ['foo', 'bar', 'baz', 'qux'];
$.each(arr, (i) => {
  if (arr[i] === 'bar') {
    return true;
  }
  console.log(arr[i]);
});

We skip to the next iteration by returning true in our callback as we did in:

if (arr[i] === 'bar') {
  return true;
}

Change CSS Display None or Block Property Using jQuery

jQuery has dedicated methods to let us change elements to display block or none.

For instance, we can write:

$('#foo').hide();

to hide the element with ID foo.

Also, we can write:

$('#foo').show();

to show our the element with the ID foo.

There’s also the CSS method that we can use to do the same thing.

For instance, we can write:

$("#foo").css("display", "none");

to hide the element and free up space for other elements.

And we can write:

$("#foo").css("display", "block");

to make the element with ID foo display as a block element.

Submitting a Form on ‘Enter’ with jQuery

We can submit a form when the Enter key is pressed by listening to the keypress event with the keypress method.

For instance, we can write:

$('.input').keypress((e) => {
  if (e.which === 13) {
    $('form#task').submit();
    return false;
  }
});

We listen to the keypress event on the element with class input .

We call keypress to add the keypress listener to it.

In the handler callback, we use the which property to get the key code for the key that’s pressed.

If it’s 13, then the Enter key is pressed.

Then we call submit on the form element with ID task to submit the form’s content.

And we’ve to return false at the end to stop the default submit behavior and to stop the propagation of the keypress event.

Conclusion

We can disable scrolling by disabling overflow from the body.

To copy content from an element, we can use the document.execCommand method to do it.

Even though it’s obsolete, we can use it until the clipboard API is widely available.

And we can return true to skip an iteration when we use each .