/* GreedyNav.js - https://github.com/lukejacksonn/GreedyNav Licensed under the MIT license - http://opensource.org/licenses/MIT Copyright (c) 2015 Luke Jackson */ $(function() { var $btn = $('nav.greedy-nav button'); var $vlinks = $('nav.greedy-nav .visible-links'); var $hlinks = $('nav.greedy-nav .hidden-links'); var numOfItems = 0; var totalSpace = 0; var closingTime = 1000; var breakWidths = []; // Get initial state $vlinks.children().outerWidth(function(i, w) { totalSpace += w; numOfItems += 1; breakWidths.push(totalSpace); }); var availableSpace, numOfVisibleItems, requiredSpace, timer; function check() { // Get instant state availableSpace = $vlinks.width() - 10; numOfVisibleItems = $vlinks.children().length; requiredSpace = breakWidths[numOfVisibleItems - 1]; // There is not enough space if (requiredSpace > availableSpace) { $vlinks.children().last().prependTo($hlinks); numOfVisibleItems -= 1; check(); // There is more than enough space } else if (availableSpace > breakWidths[numOfVisibleItems]) { $hlinks.children().first().appendTo($vlinks); numOfVisibleItems += 1; check(); } // Update the button accordingly $btn.attr("count", numOfItems - numOfVisibleItems); if (numOfVisibleItems === numOfItems) { $btn.addClass('hidden'); } else $btn.removeClass('hidden'); } // Window listeners $(window).resize(function() { check(); }); $btn.on('click', function() { $hlinks.toggleClass('hidden'); clearTimeout(timer); }); $hlinks.on('mouseleave', function() { // Mouse has left, start the timer timer = setTimeout(function() { $hlinks.addClass('hidden'); }, closingTime); }).on('mouseenter', function() { // Mouse is back, cancel the timer clearTimeout(timer); }) check(); });