https://www.learningstrategies.com/Resources/responsive/scripts.js

1$(document).ready(function() {
2	 
3	var windowHeight;		   
4	var windowWidth;
5	var closedMenu = "img/menu.png";
6    var openMenu = "img/close.png"; 
7	$this = $(".sections img"); 
8	
9	
10	function checkHeight() {
11		windowHeight = $(window).height();
12		
13		 //if($(windowHeight) < $('.sideBar').height)
14    	 //   {
15         //   	$('.sideBar').height(windowHeight);
16		 //   	$('.sideBarToggle').addClass('show');
17		 //   	$('.sideBarToggle').removeClass('hide');
18   		 //    } else {
19         //   	$('.sideBarToggle').removeClass('show');
20		 //   	$('.sideBarToggle').addClass('hide');
21    	 //   }
22			
23		
24	} 
25	
26	function checkWidth() {
27		windowWidth  = $(window).width();
28		
29		if (windowWidth > 976) {
30			$('.subNav.products').css('height' , (windowHeight - 100));	
31		}
32		
33		if (windowWidth < 769) {
34			
35			$(".menu").css('max-height', windowHeight - 80);
36			
37			//$(".topLevel").click(function() {
38			//	if( $(this).siblings('.subNav').hasClass("opened")) {
39			//		$(this).siblings('.subNav').removeClass("opened");
40			//	} else {
41			//		$(this).siblings('.subNav').addClass("opened");
42			//	}
43			//});
44		}
45	}
46	
47	function hideMenu() {
48		$('.sections').addClass("collapsed");
49		$(".menu").css('opacity', '0');
50		$('.sections').removeClass("opened");
51		$('.menu').removeClass("opened");
52		$('.menu').addClass("collapsed");
53		$('.collapsible-menu').css('z-index', '800');
54		$('.collapsible-menu').addClass("collapsed");
55		$('.menu').css('left', '');
56		if (windowWidth > 768) {
57			//$(".menu").css('width','240');
58		}
59	}
60	
61	$(window).scroll(function () {
62  			if ( $(this).scrollTop() > 200 ) {
63				$(".header").addClass ("fixed");
64		   } else if ( $(this).scrollTop() <= 200 ) {
65			   $(".header").removeClass ("fixed");
66		  }
67		});
68		
69	$(".menuTab").click(function() {
70		if ($(this).parent('.collapsible-menu').hasClass('collapsed')) {
71			$(this).parent('.collapsible-menu').removeClass('collapsed');
72			$(".menuTab").text("CLOSE");
73
74			var moretimeout;
75			$(".collapsible-menu").hover(
76                function () {
77                    moretimeout = setTimeout(function () {
78                    }, 6000);
79                },
80                function () {
81                    $(".menuTab").text("MORE");
82                    clearTimeout(moretimeout);
83                    hideMenu();
84                }
85        );
86			
87		} else {
88			$(this).parent('.collapsible-menu').addClass('collapsed');
89			$(".menuTab").text("MORE");
90		}
91	});
92	
93	$(".sideBarToggle").click(function() {
94		
95			if ($(this).hasClass("collapsed")) {
96				$(this).removeClass("collapsed");
97				$(".sideBar").css('height', 'auto');
98				$(this).text("SEE LESS PARALIMINAL PRODUCTS ");
99				$(this).addClass("opened");
100			} else if ($(this).hasClass("opened")) {
101				$(this).addClass("collapsed");
102				$(".sideBar").height(windowHeight);
103				$(this).text("SEE ALL PARALIMINAL PRODUCTS ");
104				$(this).removeClass("opened");
105		}
106	});
107	
108		$(".sections").click(function() {
109			if (windowWidth > 766) {
110				if ($(this).hasClass("collapsed")) {
111					$(this).removeClass("collapsed");
112					$(".menu").css('opacity', '1');
113					//$(".menu").css('width','220');
114					$(this).addClass("opened");
115					$('.menu').addClass("opened");
116					$('.menu').removeClass("collapsed");
117					$('.collapsible-menu').css('z-index', '800');
118					$('.menu').css('z-index', '1000');
119
120					if (windowWidth > 1605) {
121                        //move menu over for larger screens 
122					    var temp = (windowWidth - 1605) / 2;
123					    $('.menu').css('left', temp + 'px');
124					}
125				} else if ($(this).hasClass("opened")) {
126					hideMenu();
127					$('.collapsible-menu').css('z-index', '1000');
128					$(".menu").addClass("collapsed");
129					$('.menu').css('left', '');
130				}
131			} else if (windowWidth < 767) {
132				if ($(this).hasClass("collapsed")) {
133					$(this).removeClass("collapsed");
134					$(".menu").css('opacity', '1');
135					$(this).addClass("opened");
136					//$(this).attr('src', openMenu);
137					$('.collapsible-menu').css('z-index', '800');
138					$(this).css('z-index', '1000');
139					$(".menu").css('z-index', '1000');
140					$(".menu").removeClass("collapsed");
141				} else if ($(this).hasClass("opened")) {
142					$(this).addClass("collapsed");
143					$(".menu").addClass("collapsed");
144					$(".menu").css('opacity', '0');
145					$(this).removeClass("opened");
146					//$(this).attr('src', closedMenu);
147					$('.menu').css('z-index', '800');
148					$('.collapsible-menu').css('z-index', '1000');
149					//$(".menu").css('width','240');
150					
151				}
152			}
153		});
154		
155		$(".hasSub").click(function() {
156			if (windowWidth < 976) {
157				if ( $(this).children(".subNav").hasClass('open')) {
158					$(this).children(".subNav").removeClass('open');
159				} else {
160					$(this).children(".subNav").addClass('open');	
161				}
162			} 
163		});
164		
165	var timeout;
166		$(".menu").hover(
167			function() {
168				timeout = setTimeout(function(){
169				}, 6000);
170		},
171			function(){
172				clearTimeout(timeout);
173				hideMenu();
174		}
175	);
176	
177	$(".search").click(function() {
178		if ($(this).hasClass("collapsed")) {
179			$(this).removeClass("collapsed");
180			$('.searchArea').height(windowHeight);
181			$('.searchArea').css('z-index', '9999');
182			$(this).addClass("opened");	
183		} else if ($(this).hasClass("opened")) {
184			$(this).removeClass("opened");
185			$('.searchArea').height(0);
186			$('.searchArea').css('z-index', '700');
187			$(this).addClass("collapsed");	
188		}
189		
190	});
191
192	
193		
194	checkHeight();
195	checkWidth();
196    $(window).resize(checkHeight);
197	$(window).resize(checkWidth);
198	
199		
200});
201