Question

I am wanting to append some HTML content from a variable for smaller screen sizes.However when I resize the browser the content appends(as it should) but if I keep moving the window it continues to append multiple copies of the HTML.

How could I prevent it from doing this?

This what I am doing:

function adjustStyle(width) {
      width = parseInt(width);
        if (width < 700) {
            $('ul.nav li.top ul.submenu').removeAttr("style");
            $('body').append(str);  // this is when I am having the problem appending

        } else if (width >= 700) {
            $('ul.nav').removeAttr("style");
            $('.form-wrapper').removeAttr("style");
            var toggle = function(direction, display) {
            return function() {
              var self = this;
              var ul = $('ul.submenu', this);
              if( ul.css('display') === display && !self['block' + direction] ) {
                self['block' + direction] = true;
                ul['slide' + direction]('fast', function() {
                  self['block' + direction] = false;
                });
              }
            };
          };
          $('ul.nav li.top').hover(toggle('Down', 'none'), toggle('Up', 'block'));
          $('ul.nav li.top ul.submenu').hide();
          $('#gallery').remove();
        } else {

        }
    }
$(function() {
    adjustStyle($(this).width());
    $(window).resize(function() {
        adjustStyle($(this).width());
    });
});

Answer 1

You need to debounce the resize event such that it fires only when resize is complete.

This is required because –

• In IE, Safari, and Chrome many resize events fire as long as the user continues resizing the window.
• Opera uses as many resize events, but fires them all at the end of the resizing.
• Although, Firefox fires one resize event at the end of the resizing.

Following is a snippet from my answer to this question.

var resizeTimer = null;    

$(window).resize(function(){

   clearTimeout(resizeTimer); //ignore previous trigger

   resizeTimer= setTimeout(function(){ //wait to execute handler again
     //execute actual handler here
   }, 10);
});

---

In addition to this, I suggest you have a placeholder for adding your content –

$('body #appendTarget').html(str); //Since .append() will anyways append multiple times