Вход • Регистрация

Как удалить показ элемента или удалить его индетификатор?

  •
  • 12 мая 2017 г.
  • Задача. При разрешении экрана большем, чем (допустим, 900) удалить из кода элемент, или как вариант - удалить его индентификатор. В данном случае индентификатор - id="show_cart"

    Прошу подсказать, в каком направлении искать? Может кто-то сталкивался? Если делать с помощью джава, прошу ткнуть ссылкой на близкий мануал..

    Все варианты с display:none - не подходят. Элемент НЕ должен быть скрыт, а полностью удален из кода
    •
    • 12 мая 2017 г.
    • Js
      Получаете размер window и ставите условие .....
      •
      • 12 мая 2017 г.
      • Благодарю Вас за участие! Но было бы лучше, если бы кинули ссылку на какой-нить мануал. Или хотя бы какую фразу (проблема как раз в этом, не могу подобрать правильную фразу) вставить в поиск.
        Подходить и добавление Id для соотв. разрешения экрана.
        •
        • 12 мая 2017 г.
        • через css
          пример

          Код
          @media screen and (max-width: 600px) {
          #chto_ne_pozavivat {
          visibility: hidden;
          display: none;
          }

          }
          через js
          пример

          Код
          <script type="text/javascript">
          var mobile = (/iphone|ipod|android|blackberry|mini|windows\sce|palm/i.test(navigator.userAgent.toLowerCase()));
          if (mobile) {
          alert("Мобильное устройство!!");
          $('.navWrap').css('display', 'none'); // или можно $('.navWrap').hide();
          }
          else
          {
          alert("НЕ мобильное устройство!");
          }
          </script>
          • 12 мая 2017 г.
          • Благодарю Вас! Но display:none, не подходит, у меня так вышло, что в шаблоне 2 корзины, одна для моб.устройств, вторая для обычных экранов. А Корзина учитывает только код, который расположен выше, а выше оказался код для мобил. При этом аякс для корзины в шапке для обычных ПК не срабатывает...
            Учитывает, даже если элемент скрыт display:none, надо вообще его или его идентификатор убрать.

            Пока смотрю вот на это: http://yeap.narod.ru/js/018.html - вроде должно помочь.. Часика через 2 вернусь и продолжу.
            Если получится, отпишусь.
            •
            • 12 мая 2017 г. , редакция: 12 мая 2017 г.
            • Цитата
              Валерий Викторович (Sherrlok) Сегодня, 06:44
              Задача. При разрешении экрана большем, чем (допустим, 900) удалить из кода элемент, или как вариант - удалить его индентификатор. В данном случае индентификатор - id="show_cart"
              Если присутствие элемента в DOM мешает работе, то только убирать его оттуда. Можно воспользоваться Jquery:
              Код
              if ( $("body").outerWidth(true) <= 900 ) {
              $("#show_cart").detach() ;
              }
              .detach() позволяет вернуть элемент обратно, если потребуется.

              Самый главный вопрос: Валерий Викторович, а вам скрывать вторую корзину надо из-за привязки к дизайну или из-за привязки к устройству?

              Потому как если из-за привязки к устройству, то самым правильным способом определить условие срабатывание кода будет использовать navigator.userAgent.toLowerCase(), как советует Дмитрий.

              А если из-за привязки к дизайну, то надо учитывать событие поворота экрана, т.е. resize() использовать.
              • 12 мая 2017 г.
              • Благодарю Вас. Кажется ваш вариант более приемлем, а у меня какая хрень получилась, не работает мой код...
              •
              • 12 мая 2017 г. , редакция: 12 мая 2017 г.
              • Ваш способ с убиранием ID и с учётом возможного ресайза будет выглядеть так:
                Код
                if ( $("body").outerWidth(true) <= 900 ) {
                $("#show_cart").addClass("delete_id").removeAttr("id") ;
                }

                $(window).resize(function(){
                if ( $("body").outerWidth(true) > 900 && $("div").hasClass("delete_id") ) {
                $(".delete_id").attr("id", "show_cart").removeClass('delete_id') ;
                }
                elseif ( $("body").outerWidth(true) <= 900 && !$("div").hasClass("delete_id") ) {
                $("#show_cart").addClass("delete_id").removeAttr("id") ;
                }
                });
                Хотя скрипты после загрузки DOM не всегда "слушают" изменения (зависит от скрипта) и могут не "увидеть" элемент с изменившимся ID и не считают клик по нему. Надо проверять. Ну и, возможно, дорабатывать скрипт.
              •
              • 12 мая 2017 г. , редакция: 12 мая 2017 г.
              • Цитата
                Валерий Викторович (Sherrlok) 19 минут назад
                }); - похоже лишнее
                Нет, не лишнее. Это закрывающая часть .resize():
                Код
                $(window).resize(function(){ выполняемый код });
          •
          • 12 мая 2017 г. , редакция: 12 мая 2017 г.
          • Для примера прикрепляю скрин:
            • 12 мая 2017 г. , редакция: 12 мая 2017 г.
            • В коде 2 одинаковых ID - этого по-хорошему быть не должно.
              Поэтому в примерах выше, чтобы адресно не промахнуться мимо нужного блока, добавляйте к айдишнику класс родителя:
              Код
              $(".cart_icon_mobile #show_cart").addClass.........
  •
  • 12 мая 2017 г.
  • Павел, что я тут накосячил, если в таком виде ваш код перестал работать:
    Код
    <script type="text/javascript">
    jQuery(function(){

    if ( $("body").outerWidth(true) <= 900 ) {
    $(".cart_icon_mobile #show_cart").addClass("delete_id").removeAttr("id") ;
    }

    $(window).resize(function(){
    if ( $("body").outerWidth(true) > 900 && $("div").hasClass("delete_id") ) {
    $(".delete_id").attr("id", "show_cart").removeClass('delete_id') ;
    }
    elseif ( $("body").outerWidth(true) <= 900 && !$("div").hasClass("delete_id") ) {
    $(".cart_icon_mobile #show_cart").addClass("delete_id").removeAttr("id") ;
    }
    });
    });
    </script>


    а в таком работал:
    Код
    <script type="text/javascript">
    jQuery(function(){
    if ( $("body").outerWidth(true) >= 900 ) {
    $("#show_cart").detach() ;
    }
    });
    </script>


    ???
    •
    • 12 мая 2017 г. , редакция: 12 мая 2017 г.
    • Почему обязательно вы? Может это я в else if пробел пропустил? Пробуйте:
      Код
      <script type="text/javascript">

      if ( $("body").outerWidth(true) <= 900 ) {
      $(".cart_icon_mobile #show_cart").addClass("delete_id").removeAttr("id") ;
      }

      $(window).resize(function(){
      if ( $("body").outerWidth(true) > 900 && $("div").hasClass("delete_id") ) {
      $(".delete_id").attr("id", "show_cart").removeClass('delete_id') ;
      }
      else if ( $("body").outerWidth(true) <= 900 && !$("div").hasClass("delete_id") ) {
      $(".cart_icon_mobile #show_cart").addClass("delete_id").removeAttr("id") ;
      }
      });

      </script>
      •
      • 13 мая 2017 г.
      • Смартфона нет, но на планшете (андроид) 1024х600 при повороте экрана приходится обновлять. Но думаю, это не страшно.
        •
        • 13 мая 2017 г.
        • Это потому что прописано 900px в скрипте. Пропишите 1024 и будет отрабатывать и на планшете (по крайней мере должно).
  • 12 мая 2017 г.
  • Цитата
    else if пробел пропустил?

    Верно для javascript
    Код
    if (условие)
    {
    здесь код исполняется, если условие истинно
    }
    Код
    if (условие)
    {
    здесь код исполняется, если условие истинно
    }
    else
    {
    здесь код исполняется, если условие ложно
    }
    Код
    if (условие_1)
    {
    здесь код исполняется, если условие истинно
    }
    else if (условие_2) {
    здесь код исполняется, если первое условие ложно, а второе условие истинно
    }
    else {
    здесь код исполняется, если первое и второе условие ложно
    }
    Цитата
    В JavaScript на текущий момент не поддерживается инструкция elseif (без пробела в одно слово), например, как в PHP.

Новости

  • Вышла очередная сборка DIAFAN.CMS 7.2.2
  • 18 июня
  • В сборке большое обновление demo-шаблона, дополнительная защита от спама, улучшение YML-импорта и еще много важного и интересного.
  • Не пропустите сборку DIAFAN.CMS 7.1.4
  • 24 апреля
  • В новой сборке совершили революцию в структурировании кастомизированной информации в шаблонах, добавили авторегистрацию пользователей, усовершенствовали защиту от спама, актуализировали накопительную скидку, а также улучшили производительность и стабильность работы системы.
  • Сборка DIAFAN.CMS 7.1.3
  • 12 января
  • После выхода сборки 7.1 мы выпустили уже три патча, в каждом из которых улучшаем административную часть сайта. Сборка DIAFAN.CMS 7.1.3 уже доступна к установке. 
Все новости

Форум

Перейти на форум