Archive for October, 2016

jQuery: Showing/Hiding HTML Elements Based on Scroll Position

Showing/hiding any HTML DOM element is a common scenario based on various business requirements. Since the time of SPA (single page application) is evolved, you will find that on scroll position of browser, new elements are shown and previous elements are hidden. There are tons of jQuery plugins available which can show/hide any HTML element based on the scroll position but it’s not advisable to use jQuery plugins for things which you can do with simple jQuery code. So in this post, let’s see how to show/hide any HTML element based on the scroll position in the browser window using jQuery.

First, we need to get the scroll position. Out of the box jQuery provides a function scrollTop() which gets the current vertical position of the scroll bar for the first element in the set of matched elements or set the vertical position of the scroll bar for every matched element. If the scroll bar is at the very top, or if the element is not scrollable, this number will be 0.

HTML

For the demo, there are some empty div elements at the top and bottom so that scroll bar appears in the browser. And there are 2 div elements dvContent and dvContent2 which will be shown/hidden based on the scrollbar position.

<div style="height:100px;">
</div>
<div id="dvContent" style="height:100px;">
  your HTML content
  <br />your HTML content
  <br />your HTML content
  <br />your HTML content
  <br />
</div>

<div id="dvContent2" style="height:100px;">
  your HTML content 1
  <br /> your HTML content 2
  <br /> your HTML content 3
  <br /> your HTML content 4
  <br />
</div>
<div style="height:800px;">
</div>

jQuery

Here is the jQuery code, which first hides the dvContent2 and then binds the scroll event to window object. Within the scroll event, first check for scrollTop() function returned value. If it’s greater than or equal to 100, then hide the dvContent and show the dvContent2 div. And in the other part, do the opposite.

$(function() {
  $('#dvContent2').hide();
  $(window).scroll(function() {
    var scroll = $(window).scrollTop();
    if (scroll >= 100) {
      $('#dvContent').hide();
      $('#dvContent2').show();
    } else {
      $('#dvContent').show();
      $('#dvContent2').hide();
    }
  });
})

As you can see, it’s pretty easy to show/hide any DOM element based of the browsers scroll bar position.

Using Method Chaining in jQuery

When you use method chaining in jQuery, it ensures that you never have to use the same selector more than once. Over-using a selector can seriously slow down your code, as every time you call on a selector you’re forcing the browser to go looking for it. By combining or “chaining” multiple methods, you can seriously cut down on the amount of times you make your browser look for the same elements without having to set any variables.

Here’s an example of what your jQuery could look like before you employ method chaining:

$("#header").css('color', '#333");
 $("#header").addClass("bigger");
 $("#header").toggle();

To chain all of these methods so you only have to use the $(“#header”) selector once, you simply need to connect them using a period “.”:

$("#header").css('color', '#333").addClass("bigger").toggle();

Now, when whatever your event will be to trigger this code occurs, the header will change color, add the .bigger class and whatever CSS properties come along with it, and it will toggle from view — all while the browser only has to find the selector once, rather than three times. Method chaining is a great way to clean up your code, keep things concise, and make sure your code is running as quickly as it possibly can.

Disable Links with jQuery

jQuery’s built in preventDefault() method is a great way to prevent the default functionality of an element from occurring. It’s probably most commonly used to disable links. Maybe you want a certain link only to work under certain conditions (like for example, you only want it clicked if the user is on a desktop sized screen), or maybe you want to disable a link all together. Either way, doing so is pretty simple with jQuery’s preventDefault() method.

$("a").click(function(event){
    event.preventDefault();
});

The code snippet above will disable ALL your links, so make sure that in place of “a”, you write the exact class or ID of the link you’d like to select and disable, otherwise none of your links will work!

jQuery Prefixes: jQuery vs. $

It’s a really common practice in jQuery to use the dollar sign ($) prefix with your methods, like this:

$(document).ready(function(){
$(#myDiv).slideUp();
})

The above code would make the div with the ID #myDiv slide up when the page loads. But that’s not the only way to write that function. Sometimes you might see it written with the word jQuery in place of the $ symbol:

jQuery(document).ready(function(){
jQuery(#myDiv).slideUp();
})

The two prefixes $ and jQuery are essentially interchangeable with each other because of the function that can be found in the jQuery source code:

window.jQuery = window.$ = jQuery

The function above basically defines $ as an alias for jQuery, so go ahead and use them interchangeably in jQuery.