Using jQuery to hide an element when another one comes in view

In this article we are going to take a look of how to utilize jQuery to hide an element (from here on referred as elem2Hide) on a page, when a specific element comes in view (from here on referred to as elem2Query).

Why is this needed? Let’s take a look at the left of this page, and anywhere on the AmberPanther’s site. You see a column of our social icons, RSS feed, Facebook and twitter. At the first iteration of the design we placed the social icons at the footer, not making them very accessible to our visitors. Hence we decided to show them at the top right of the page. However, since we enjoy the harmony of the top navigation menu with the social icons in the footer we decided to keep them there. Thus a new problem appeared. We deprecated the problem of inaccessibility to our social icons, but now we were faced with over population of the window viewing area when the reader scrolled towards the bottom of the page. The social icons would appear twice.

The solution was to use jQuery to hide the social icons on the side of the page once the social icons in the footer come in the viewing area of the window. As part of our Knowledge Base articles we will be sharing the code as well as explaining it so that it will make it easier for you to modify for your specific application.

The Hide “and Seek” code

jQuery(document).ready(function($){
 
	//define the element id's
	//elem2Query: interested if is in vew
	//elem2Hide: the element to hide
	var elem2Query = "#social-infooter";
	var elem2Hide = "#social-onside";
 
	//jQuery the element to hide
	var jElem2Hide = $(elem2Hide);
 
	//on page load:
	//this is required if the page is refreshed
	//while the  elem2Query is in view
	if (isElementInView()) jElem2Hide.addClass("hideClass");
 
	$(window).scroll(function(){ 
 
		if (isElementInView()){
			jElem2Hide.addClass("hideClass");
		}else{
			jElem2Hide.removeClass("hideClass");
		}
	});
 
	function isElementInView(){
 
		var jWindow = $(window);
		var jElem   = $(elem2Query);
 
		//document position
		var pageViewTop = jWindow.scrollTop();
		var pageViewBottom = pageViewTop + jWindow.height();
 
		//element position
		var elemTop = jElem.offset().top;
		var elemBottom = elemTop + jElem.height();
 
		//compare element and document positions
		var isInView =((elemBottom >= pageViewTop) 
				&& (elemTop <= pageViewBottom)
				&& (elemBottom <= pageViewBottom) 
				&& (elemTop >= pageViewTop));
 
		return isInView;
	}
});

Dissecting the code

The Hide “and Seek” code is relatively straight forward. The first thing to notice and understand is the function isElementInView on line 26. This function queries the elem2Query (in the case of AmberPanther.com, the social icon wrap in the footer) and compares its position relative to the page portion in view. If the elem2Query is visible, that is within the viewing area, it returns true, otherwise false.

Now, the Hide “and Seek” code is enclosed in the jQuery Document Ready function so it will start running on page load. In order to make the code universal and easily transferable the ids of the two element in question are assigned to variables. The jQuery object of the elem2Hide is saved to a variable too. The isElementInView is called on page load to test the position of the elem2Query. If it returns true a class, hideClass, is added to the elem2Hide. This is only necessary if you expect users to refresh the page when the elem2Query is in view. Then the jQuery scroll() API is utilized to check the relative position of the elem2Query when the page is scrolled and accordingly adjust the display of the elem2Hide by adding or removing the class hideClass. The class is shown below.

1	.hideClass{display:none}

Final Remarks

We hope you will find this article and the Hide “and Seek” code useful. Make sure you scroll through this page to see it in action. If you like it, feel free to use it at your own discretion and responsibility. While you are seeing the Hide “and Seek” code in action feel free to grab our RSS feed, find us on Facebook and follow us on twitter.

AmberPanther