jQuery Tips, Tricks and Resources

DOM is ready

jQuery(function ($) {
    // do something
});

Check if element exists

if ( $("#mydiv").length ) {
  // do something here
}

Check viewport width

var vw = Math.max(document.documentElement.clientWidth || 0, window.innerWidth || 0)
if (vw > 1024) {
    // viewport is grater than 1024px, similar to @media(min-width:1024px){}
}

Check scroll height

$(window).scroll( function() {
    var value = $(this).scrollTop()
    // hide logo when scrolled below 120px
    value > 120 ? $('#logo').addClass('hidden') : $('#logo').removeClass('hidden')
}

Ajax Request

$('#form').on('submit', function(e){
    e.preventDefault(); // prevent page refresh on submit

    var formData = new FormData($('#form')[0]); // pass HTML form element as argument
    formData.append('extra_key', 'extra_value');
    $.ajax({
        method: 'POST',
        data: $('#form').serialize(), // you can also use jQuery serialize
        // data: formData,
        // processData: false, // add this if using "new FormData"
        // contentType: false, // add this if using "new FormData"
        url: $('#form').attr('action'),
    }).done(function(res) {
        var res = $.parseJSON(res)
        console.log(res);
    }).fail(function(err){
        console.log(err);
    }).always(function(){
        console.log('this will always execute');
    });
});

Plugins

1. Lightcase Lightbox