css · geeky · javascript

TinyNav – browser resize friendly

I use the TinyNav jQuery plugin to transfer a list menu into a dropdown for mobile devices.

I notice when I resize my browser on my desktop, the TinyNav leaves kind of a nasty look. For example, after I resized my browser into mobile size like 450px wide, I have to refresh the page for the tinynav to take effect and then when I resize my browser back to the normal size, I may see the leftover TinyNav dropdown like:
tinynav

To make tinynav more resize friendly, I implemented the following concept.

To detect mobile, I check if a certain layer is no longer display none. This way I let the CSS media query take full control of when it’s considered mobile. I don’t have to do any javascript detection. So it could be considered mobile just when you resize your browser window on your desktop. This is the concept I’m using; you may not like it but that’s ok.

My implementation also caches the tinyNav plugin so it doesn’t create a new dropdown every time you resize the window.

Here’s an example of the implementation.

  • Load the page
  • Resize your window to be less than 450px wide
  • You’d see the dropdown menu
  • Resize your window slowly to normal size, the dropdown will disappear and the normal menu will show
  • Repeat the steps
  • View source to see the implementation

CSS

.tinynav,
#mobile {
	display: none;
}
/* show tiny nav once the screen width falls below 730px */
@media screen and (max-width:450px) {
	#mobile,
	.tinynav {
		display: block;
	}
	#nav ul {
		display: none;
	}
}

JavaScript

var navigation = null;
jQuery(window).load(function() {
	loadBasedOnMobileDisplay()
});
jQuery(window).resize(function() {
	loadBasedOnMobileDisplay()
});

function loadBasedOnMobileDisplay() {
	// is it mobile?
	var mobile = false;

	if(jQuery('#mobile').css('display') == 'block') {
		mobile = true;
	}

	if(mobile && navigation == null) {
		navigation = jQuery("#nav ul").tinyNav();
	}
}

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s