Track Jquery Tips Everyone Should Know Updates Daily

A collection of tips to help up your jQuery game 馃幃

馃彔 Home馃攳 Search馃敟 Feed馃摦 Subscribe馃樅 AllThingsSmitty/jquery-tips-everyone-should-know猸 4.2K馃彿锔 Front-End Development

[ Daily / Weekly / Overview ]

Jun 22, 2017

Disable Right-Click

If you want to disable right-click, you can do it for an entire page...

$(document).ready(function () {
  $(document).bind('contextmenu', function (e) {
    return false;
  })
})

...and you can also do the same for a specific element:

$(document).ready(function () {
  $('#submit').bind('contextmenu', function (e) {
    return false;
  })
})

back to table of contents

Current versions of Chrome, Firefox, Safari, Opera, Edge, and IE11.

back to table of contents

back to table of contents

May 02, 2016

Back to Top Button

By using the animate and scrollTop methods in jQuery you don't need a plugin to create a simple scroll-to-top animation:

// Back to top
$('.container').on('click', '.back-to-top', function (e) {
  e.preventDefault();
  $('html, body').animate({scrollTop: 0}, 800);
});
<!-- Create an anchor tag -->
<div class="container">
  <a href="#" class="back-to-top">Back to top</a>
</div>

Changing the scrollTop value changes where you wants the scrollbar to land. All you're really doing is animating the body of the document throughout the course of 800 milliseconds until it scrolls to the top of the document.

Note: Watch for some buggy behavior (猸320) with scrollTop.

back to table of contents

Make Two Divs the Same Height

Sometimes you'll want two divs to have the same height no matter what content they have in them:

$('.div').css('min-height', $('.main-div').height());

This example sets the min-height which means that it can be bigger than the main div but never smaller. However, a more flexible method would be to loop over a set of elements and set height to the height of the tallest element:

var $columns = $('.column');
var height = 0;
$columns.each(function () {
  if ($(this).height() > height) {
    height = $(this).height();
  }
});
$columns.height(height);

If you want all columns to have the same height:

var $rows = $('.same-height-columns');
$rows.each(function () {
  $(this).find('.column').height($(this).height());
});

Note: This can be done several ways in CSS but depending on what your needs are, knowing how to do this in jQuery is handy.

back to table of contents

Open external links in a new browser tab or window and ensure links on the same origin open in the same tab or window:

$('a[href^="http"]').attr('target', '_blank');
$('a[href^="//"]').attr('target', '_blank');
$('a[href^="' + window.location.origin + '"]').attr('target', '_self');

Note: window.location.origin doesn't work in IE10. This fix takes care of the issue.

back to table of contents

Chain Plugin Calls

jQuery allows for the "chaining" of plugin method calls to mitigate the process of repeatedly querying the DOM and creating multiple jQuery objects. Let's say the following snippet represents your plugin method calls:

$('#elem').show();
$('#elem').html('bla');
$('#elem').otherStuff();

This could be vastly improved by using chaining:

$('#elem')
  .show()
  .html('bla')
  .otherStuff();

An alternative is to cache the element in a variable (prefixed with $):

var $elem = $('#elem');
$elem.hide();
$elem.html('bla');
$elem.otherStuff();

Both chaining and caching methods in jQuery are best practices that lead to shorter and faster code.

back to table of contents