Добавление HTML несколько раз при изменении размера окна

Я хочу добавить некоторый HTML-контент из переменной для меньших размеров экрана. Однако, когда я изменяю размер браузера, контент добавляется (как и должно), но если я продолжаю перемещать окно, он продолжает добавлять несколько копий HTML.

Как я мог помешать ему сделать это?

Это то, что я делаю:

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());
    });
});

jquery append window-resize media-queries multiple-instances
person Daimz    schedule 06.09.2012    source источник
comment
почему бы не использовать для этого медиа-запросы?   -  person Zoltan Toth    schedule 06.09.2012

Ответы (3)


arrow_upward
1
arrow_downward

Вам необходимо отклонить событие изменения размера, чтобы оно запускало только после завершения изменения размера.

Это необходимо, потому что -

  • В IE, Safari и Chrome многие события изменения размера срабатывают до тех пор, пока пользователь продолжает изменять размер окна.
  • Opera использует столько же событий изменения размера, но запускает их все в конце изменения размера.
  • Хотя Firefox запускает одно событие изменения размера в конце изменения размера.

Ниже приведен фрагмент моего ответа на этот вопрос .

var resizeTimer = null;    

$(window).resize(function(){

   clearTimeout(resizeTimer); //ignore previous trigger

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

В дополнение к этому, я предлагаю вам иметь заполнитель для добавления вашего контента -

$('body #appendTarget').html(str); //Since .append() will anyways append multiple times
person Robin Maben    schedule 06.09.2012

arrow_upward
0
arrow_downward

В вашей функции AdjustStyle вы можете удалить обработчик событий с помощью $(window).off('resize') или просто иметь логическое значение, которое по умолчанию равно true, но при первом прогоне устанавливается в false.

person golf    schedule 06.09.2012

arrow_upward
0
arrow_downward

Что вы делаете, так это добавляете значения на страницу или просто добавляете их к тому, что там есть. Похоже, что вы хотите сделать, это просто заменить значение. Используйте функцию .html() вместо .append().

person opanitch    schedule 06.09.2012