Как остановить бесконечное добавление кнопки при изменении экрана?

Question

[Андрей Сергеев]

Добрый день, проблема такая: добавляется кнопка каждый раз как изменяю размер больше 991. Нужно чтобы кнопка добавилась только один раз после ширины 991 и далее.

$(window).resize(function() {
  width = $(window).width();
  if (width < 991) {
    $('.navbar__button').remove();
  }
  else {
    newdiv = $("<button id=\"navbar-btn\" class=\"button callback navbar__button\">Заказать звонок<\/button>");
    $("#navbar-info").append(newdiv);
  }
});

Comments

[Rustam Bainazarov]

А не проще это сделать с помощью CSS?

[Сергей Карвасарный]

делай проверку на существование кнопки по классу или id если есть то не добавлять если нет добавлять. А еще проще как писали выше сделай кнопку и просто display: block и через
media screen and (max-width: 991px) {
.btn { display: block;}
}

[Андрей Сергеев]

Сергей Карвасарный, у меня еще есть такая функция, поэтому код перекрещивается и получается, что на экране меньше 991
появляется эта кнопка. Но ее мне надо полностью убрать.

$(window).scroll(function(){
    scroll = $(window).scrollTop();
    if (scroll > 500) {
        $('.logo').addClass('logo_active');
        $('#navbar-btn').hide();
    } else {
        $('.logo').removeClass('logo_active');
        $('#navbar-btn').show();
    }
  });

[Сергей Карвасарный]

sergeevsite, что-то я запутался вовсе)) на каком промежутке должна кнопка появляться?) получается она должно быть видна когда экран меньше 991 и скролл больше 500px? если это так то получается лучше всего запускать scroll в то время когда экран уже меньше 991 и сразу проверять на наличие кнопки чтобы не выводила несколько раз
рейсайз
если ресайз меньше 991 то
запускаем скролл функцию
если скролл > 500
то делаем кнопку видимой

и лучше сделай ее в коде и пусть просто будет не видна чем добавлять ее jq) если хочешь добавлять то нужно сделать
рейсайз
если ресайз меньше 991 то
запускаем скролл функцию
если скролл > 500
проверить к примеру кнопку свою с уникальным классом есть ли она на странице уже можно сделать
$('.supe-btn').length !== 1 или < 1 то выполнить код создания кнопки т.к если кнопки нет он выдаст 0 он создас и если 1 то кнопка есть и уже не нужно создавать, если я задачу понял конечно верно

[Андрей Сергеев]

Сергей Карвасарный, Кнопка должна быть видна на экране больше 991 и скролл меньше 500px, на экране меньше 991 она должна убираться вообще. Я вроде это реализовал, но осталась проблема, когда на экране меньше 991, срабатывает скролл меньше 500px и кнопка появляется опять. Надеюсь нормально объяснил) если нет, то скину скрины сайта

[Сергей Карвасарный]

sergeevsite, попробую визуально чтобы было понятно что к чему)

[Сергей Карвасарный]

Вроде как-то так должно быть, ну тут смотри на принцип т.к примера нет в codepen чтобы там пошаманить просто код накидал, если выкенишь куда в codepen если не сработает там потом чуть что гляну. Ты должен запускать скролл только тогда когда удовлетворенно твое первое условие т.е больше 991px ширина экрана как только это условие сработало тогда уже должна запустить 2 часть и это уже проверка на высоту как только она тебя удовлетворяет по условия должна быть еще 1 проверка - на наличие кнопки, если кнопки нет то создать если она есть то ничего не делать, если бы у тебя была кнопка как я писал раньше просто в коде то тебе нужно было бы ее проверить просто на .is(':visible') вроде так на jq и это мне кажется более правильный вариант когда у тебя кнопка есть сразу но просто скрыта, нужно максимально использовать css т.к это быстрее чем js и правильнее) на большом проекте каждая миллисекунда важна по этому сразу приучайся по максимуму делать Css.

$(window).resize(function() {
  width = $(window).width();
  if (width < 991) {
    $('.navbar__button').remove();
  } else {
    $(window).scroll(function(){
      scroll = $(window).scrollTop();
      if (scroll > 500) {
        $('.logo').addClass('logo_active');
и я jq уже точно не помню но надо проверить на то есть ли уже кнопка
if($('.navbar-btn').length < 1){
        newdiv = $("<button id=\"navbar-btn\" class=\"button callback navbar__button\">Заказать звонок<\/button>");
        $("#navbar-info").append(newdiv);
}
      } else {
        $('.logo').removeClass('logo_active');
        $('.navbar__button').remove();
      }
    });
  }
});

[Сергей Карвасарный]

Вот скорее всего твой вариант, там немного на Js написано сейчас поправлю чтобы на Jq целиком было

$(document).ready(function(){
  var superBtn = $('.super-btn');
  superBtn.css('display','none'); //это лучше через css скрыть и не нужно будет
  $(window).scroll(function(){
    if ($(window).scrollTop() > 500) {
      if($(window).width() > 991){
        superBtn.css('display','block');
      } 
      $(window).resize(function() {
        if($(window).width() < 991){
          superBtn.css('display','none');
        } else {
          if ($(window).scrollTop() > 500) {
            superBtn.css('display','block');
          }
        }
      });
    } else {
      superBtn.css('display','none');
    }
  });
});

Answer 1

[Виктор]

Привет, я с такую проблему решал при помощи флага, что-то типа того:

let flag = false

$(window).resize(function() {
  width = $(window).width();
  if (width < 991 && !flag) {
    $('.navbar__button').remove();
    flag = true
  }
  else if (width >= 991 && flag)  {
    newdiv = $("<button id=\"navbar-btn\" class=\"button callback navbar__button\">Заказать звонок<\/button>");
    $("#navbar-info").append(newdiv);
    flag = false
  }
});