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:

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


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


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

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 )

Connecting to %s