Поможете с адаптацией сайта?

Question

[Андрей Юрчук]

Не знаю даже за что зацепиться, создал кусок кода в JQuery который отвечает за "функцию" свертывания и выпадания навигационного бара при нажатии на logo, при расширении больше 1184px функция работать не должна. Но все же заметно ее работу на ширине экрана в 1199px. Может кто поймет что за фигня? Тестил на Chrome.

P.S знаю что код там Г***о, Учу верстку только четвертый день, многое понял вообще недавно.

Comments

[VegasChickiChicki]

Изучать JQ не зная нативного JS, этот как чинить Бугатти не набив руку на пятерке...
Учите сначала чистый JS...

[Андрей Юрчук]

VegasChickiChicki, Нативный JS - это тот который нужен True фронтам, там куууча всякого, и плюс организовано так сложно, а поскольку я больше по BackEND - ну понимаете. А JQuery в несложных операциях редко подводит. Этот случай редкость, если это вообще из-за JQ

[criminalist]

VegasChickiChicki, супер совет, что бы выполнить пару функций на сайте нужны выучить js, блеск.

Answer 1

[Сергей c0re]

Андрей Юрчук,

А JQuery в несложных операциях редко подводит. Этот случай редкость, если это вообще из-за JQ

потому что вы говорите за JQuery, а пишете какую-то лапшу перемешанную!?

см. JQuery API Documentation
.width()
.resize()
Определяем размер окна браузера (JavaScript, jQuery)

как-то так:

$(function(){
  if ($(window).width() < 1184) {
    $( "#nav1" ).css( "display", 'none');
    $( "#nav2" ).css( "display", 'none');
  }

  $(window).resize(function(){
    if ($(window).width() < 1184) {
      $( "#nav1" ).css( "display", 'none');
      $( "#nav2" ).css( "display", 'none');
    }  else {
      $( "#nav1" ).css( "display", 'flex');
      $( "#nav2" ).css( "display", 'flex');
    }
  })

  $( ".nav-logo" ).click(function() {
    if ($(window).width() < 1184) {
      $( "#nav1" ).toggle( "slow", function() {
        // Animation complete.
        // $(this).rotate(100);
      });
      $( "#nav2" ).toggle( "slow", function() {
        // Animation complete.
        // $(this).rotate(100);
      });
    } else {
      $( "#nav1" ).css( "display", 'flex');
      $( "#nav2" ).css( "display", 'flex');
    }
  });

});

Про window.matchMedia посмотрите статью:
Изучаем matchMedia API и object MediaQueryList

и судя по всему, в условии надо было писать так:

window.matchMedia('screen and (max-width: 1184px)').matches

if (window.matchMedia('screen and (max-width: 1184px)').matches) {
  $( "#nav1" ).css( "display", 'none');
  $( "#nav2" ).css( "display", 'none');
} else {
  $( "#nav1" ).css( "display", 'flex');
  $( "#nav2" ).css( "display", 'flex');
}

так же - Адаптивный jQuery без window.matchMedia

UPDATE:
Извиняюсь, гоню. переработал )))
в принципе-то ваш скрипт работает!

PS: Замените у себя все значения 1184 на 1000 на jsfiddle и раздвиньте окно с результатом на максимум, все норм (у меня просто экран узкий, не влазит, сильно не могу раздвинуть :) ).

PPS: так же все скрипты должны быть либо в конце страницы, либо вызываться по onload (см. мой скрипт)

Comments

[Андрей Юрчук]

Спасибо за советы, буду стараться поменьше говнокодить, и наверное все же сяду сначала за Native JS. А то вижу быстро влететь во FrontEnd без костылей нереально)
Хорошо хоть открыл для себя StackOverFlow, Тостер, хоть будет у кого спросить что так, а что не так.

[Виталий Мосин]

как можно использовать jquery, когда есть Vue?

[Андрей Юрчук]

Виталий Мосин, Есть сверх разница?

[Сергей c0re]

JQuery - библиотека для упрощения и унификации методов работы с DOM.
Vue - Это фреймворк для создания интерфейсов.
JQuery можно использовать вместе с Vue )))
Хотя в настоящее время актуальность в JQuery немного падает, т.к. нативный JS сильно подтянулся и более менее +- одинаково работает во всех браузерах.
поэтому все что пишется на JQuery можно реализовать на нативном JS и это будет работать +- везде.
имхо + у JQuery большой набор готовых виджетов, ну и якобы простой доступ и работа с DOM , хотя все эти $ и скобки имхо так засоряют код что читать его как-то не очень.

[Виталий Мосин]

Сергей, + манипуляции с DOM медленные, что собственно и является причиной падения популярности jquery.

[Сергей c0re]

Виталий Мосин, ну это естественно что нативный JS быстрее )