browser crashes on resize function

Question

I am trying to create a responsive horizontal list navigation, which fits the no. of items based on the screen size. The items that do not fit, will be put in a dropdown menu. This works fine, but now I want to re-execute the script on resize. But as soon as I call the function in the resize function, the browser freezes. I assume it gets stuck in a loop, but I can't seem to debug it. Does anyone see what is wrong?

    function overflowDropdown() {

      'use strict';


    // Define the context we will be operating in.
      var list = '.action-menu ul';

      // Act only if the more tab is not created yet.
      if (typeof $(list) != 'undefined' && $(list) != false && $(list).length > 0) {

    // We will store any items here that we want to move.
    var itemsToMove = new Array();

    // get window width
    var windowWidth = $(window).width();

    // define how much items fit one the screen
    var itemsFit = 1;

    if (windowWidth > 450) {
      itemsFit = 2;
    }
    if (windowWidth > 600) {
      itemsFit = 3;
    }

    // Loop through all items and retrieve the index
    $.each($('li', list), function(index, value) {

      // Add everything except the first item to the items_to_move array.
      if (index > (itemsFit - 1)) {
       itemsToMove.push(value);
      }

    });

    // If there is more than one item to move we proceed here.
    if (itemsToMove.length > 1) {
    // Add our new container div.
      $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

      // Foreach items that need to moved place them in the newly created awesomebox dropdown.
      $.each(itemsToMove, function(index, value) {
        $('#dropdown-action-menu ul', list).append(value);
        $('#dropdown-action-menu').hide();
      });
    }

  }

};

Resize function:

(function($) {

  var resizeTimer; // Set resizeTimer to empty so it resets on page load

  function resizeFunction() {
   // some other functions are here that do work
   overflowDropdown()
  };

  // On resize, run the function and reset the timeout
  // 1000 is the delay in milliseconds.
  $(window).resize(function() {
    clearTimeout(resizeTimer);
    resizeTimer = setTimeout(resizeFunction, 1000);
  });

  resizeFunction();

})(jQuery);

I guess you might want to read this http://stackoverflow.com/questions/2854407/javascript-jquery-window-resize-how-to-fire-after-the-resize-is-completed — naota, Jul 04 '14 at 11:08
The resize event has a timeout of a second, so I guess that is not the problem.... — MaikelKoopman, Jul 04 '14 at 11:26
I think the problem is in the fact that I am changing the DOM and after resizing I need the DOM as it was on initial load. Now I am trying to find a solution to first somehow revert/undo the overflowDropdown function before executing it again. Or is it smarter to store the original DOM is a variable and check that before executing the function again? — MaikelKoopman, Jul 04 '14 at 14:07

score 0 · Answer 1 · answered Jul 05 '14 at 14:34

I solved the problem with cloning the menu and leaving the original menu as it is. Now the scripts gets reset each time it's called

// This script creates a dropdown of the action menu, when there are more then 2 buttons.

function overflowDropdown() {

  // Define the context we will be operating in.
  var list = $('.original-action-menu ul').clone();
  $('.original-action-menu').hide();



if ( $('.action-menu').length ) {
    $('.action-menu').remove();
  }

  // We will store any items here that we want to move.
  var itemsToMove = new Array();

// get window width
var windowWidth = $(window).width();

// define how much items fit on the screen
var itemsFit = 1;

if (windowWidth > 450) {
  itemsFit = 2;
}
if (windowWidth > 600) {
  itemsFit = 3;
}

// Loop through all items and retrieve the index
$.each($('li', list), function(index, value) {

  // Add everything except the first item to the items_to_move array.
  if (index > (itemsFit - 1)) {
   itemsToMove.push(value);
  }

});

// If there is more than one item to move we proceed here.
if (itemsToMove.length > 1) {
// Add our new container div.
  $(list).append('<li class="action-overflowing"><a data-dropdown="#dropdown-action-menu" class="action-overflowing-trigger" href="#"><i class="icon icon-menu"></i> More </a><div id="dropdown-action-menu" class="dropdown dropdown-scroll"><ul class="dropdown-menu"></ul></li>');

  // Foreach items that need to moved place them in the newly created awesomebox dropdown.
  $.each(itemsToMove, function(index, value) {
    $('#dropdown-action-menu ul', list).append(value);
    $('#dropdown-action-menu').hide();
  });
}

list.insertAfter('.original-action-menu');
list.wrapAll('<div class="action-menu">');

};

browser crashes on resize function

1 Answers1