Javscript snippet for Parallax Pro needs tinkering, but unsure how to implement

[Jason Weber]

Hey all. I have a javascript snippet that Tonya (tonya_lunarwp) gave me that works wonderfully on my website (Parallax Pro child theme).

The idea is to have the primary navigation hidden upon page load, and then appear after the user scrolls 150 pixels:

<script type="text/javascript">
(function($) {
$(document).ready(function () {
var primaryNav = $('body.home').find('nav.nav-primary');
primaryNav.hide();
$(window).scroll(function(){
if ($(this).scrollTop() > 150)
{
primaryNav.fadeIn();
}
else
{
primaryNav.fadeOut();
}
});
});
})(jQuery);
</script>

The problem is that on screen resolutions lower than 688 pixels in width, the menus is hidden, sure, but it never shows up after scrolling; it remains hidden.

So after trolling around Stack Exchange, I came up with the following idea:

if (window.screen.availWidth > 687) {

Should dictate that the javascript loads on screen resolutions 688 pixels or greater.

But when I put this snippet in Tonya's javascript, the javascript snippet still loads on smaller devices.

Does anybody know how I can get browsers to ignore this javascript snippet if their device is at a resolution of 687 pixels or less?

Any guidance would be greatly appreciated!

Thanks!

---

Webby’s WebPrezence
National Center For Due Process

https://nationalcdp.org/

[rfmeier]

Jason,

You can go off the following. The first if-statement checks the window size on initial load. The second listens for a window resize event;

// check initial window size
if( window.innerWidth > 687 ) {

	// hide or show the menu based on the window's initial size

}

// listen for browser resize
$( window ).on( 'resize', function() {
	
	if( window.innerWidth > 687 ) {
		// hide or show the menu based on window size after resize
	}

});

---

Ryan Meier – Twitter

[rfmeier]

Jason,

Here is the full script. I wasn't able to test it, but I you can test it and alter as needed.

https://gist.github.com/rfmeier/c421a5bf60ec886a38a1

---

Ryan Meier – Twitter

[Jason Weber]

Wow, RF, you're a javascript / jquery genius!

Nobody on Stack Exchange could help me. I had looked at different windows screen objects and tried to test them (not doing it properly, as you did), but I had never heard of innerWidth.

But this is precisely the effect I wanted for my nonprofit's multisite -- works exactly how I wanted it to work on different screen resolutions.

Thank you very much for taking the time to read my question, and then throw that snippet on github.

Really do appreciate it, RF!

Thanks again!

---

Webby’s WebPrezence
National Center For Due Process

[rfmeier]

Jason,

You are welcome! Good luck.

---

Ryan Meier – Twitter

[Author]

Posts