0xD34F

Делаете функцию, где обходите все элементы, от состояния которых сумма зависит, считаете сумму. Подключаете эту функцию в качестве обработчика событий, возникающих при изменении состояния элементов. Например.

Использовать DOMParser. Например.

А что такое scrollRight? Я такой функции не знаю. jQuery - тоже. Вот вам и причина, почему стили не применяются - ошибка "scrollRight is not a function".

Вам бы про контекст наложения почитать, станет понятнее, как работает z-index.

А что конкретно можно сделать с вашим окном... можно поднять его выше в DOM-дереве, поставьте .modal-overlay на один уровень с .content, например (правда, после этого центрирование кнопки отваливается, но уверен, поправить не проблема).

Можно воспользоваться mix-blend-mode. Типа так.

Поддерживается, правда, не всеми браузерами.

Надо удалять класс, отвечающий за анимацию, после её завершения. Можно делать это по событию animationend:

<button>click me</button>

button {
  background: green;
}

@keyframes xxx {
    0% { background-color: red; }
  100% { background-color: transparent; }
}

.xxx {
  animation: xxx 2s;
}

$('button').on({
  click() {
    $(this).addClass('xxx');
  },
  animationend() {
    $(this).removeClass('xxx');
  },
});

addClass вы делаете, замечательно - а где же removeClass?

https://jsfiddle.net/81d52wac/1/

Потому что все функции, переданные в setTimeout, вызываются после того, как цикл будет выполнен - а значение i к этому моменту будет равно 10.

Как исправить? Есть варианты:

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(+this);
  }.bind(i), 100);
}

for (let i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i);
  }, 100);
}

for (var i = 0; i < 10; i++) {
  setTimeout(alert, 100, i);
}

for (var i = 0; i < 10; i++) {
  setTimeout(new Function(`alert(${i})`), 100);
}

for (var i = 0; i < 10; i++) {
  setTimeout(function() {
    alert(i++);
  }, 100);
}
i = 0;

Вместо .mark вешайте обработчик на body. Если клик не на .mark или не на .active - скрывать окно, если клик на .mark, у которого нет active - показывать окно. Типа так:

$('body').on('click', function(e) {
  var
    $target = $(e.target),
    isMark = $target.hasClass('mark'),
    isActive = $target.hasClass('active');

  if (!isMark || !isActive) {
    $('.mark.active +.tooltip').fadeOut();
    $('.mark.active').removeClass('active');
  }

  if (isMark && !isActive) {
    $target.addClass('active');
    $('.mark.active +.tooltip').fadeIn();
  }
});

$(this).closest('[data-category]').attr('data-category');

он не работает

Может, попробуете обрисовать проблему поконкретнее? А то знаете ли, варианты всякие есть. Например:

• В момент навешивания обработчика click элемент #ajax-book не существует
  
• На span внутри #ajax-book повешен обработчик click, где производится отмена всплытия
  
• ajax-book.php не существует или находится в другом месте или доступ к нему запрещён
  
• ошибки в ajax-book.php
  
• ajax-book.php возвращает не json
  

HANDLE hConsole = GetStdHandle(STD_OUTPUT_HANDLE);
SetConsoleTextAttribute(hConsole, color);

color: старшие четыре бита - цвет фона, младшие - цвет текста

SELECT p.*
FROM users u
JOIN favorites f ON f.userid = u.id
JOIN products p ON p.id = f.videoid
WHERE u.id = 1

Можно так:

SELECT t2.s1
FROM (
  SELECT
    t1.id,
    t1.s1,
    IF (@max = 1, @max := t1.seq, @max := @max) AS "max1",
    IF (t1.seq = 1, @max := 1, @max := @max) AS "max2"
  FROM (
    SELECT
      (SELECT @id := @id + 1) AS "id",
      s1,
      IF (s1 = @prev + 1, @seq := @seq + 1, @seq := 1) AS "seq",
      (SELECT @prev := s1) AS "prev"
    FROM `table`,
    (SELECT @id := 0, @seq := 0, @prev := null) AS init
  ) AS t1,
  (SELECT @max := 1) AS init
  ORDER BY t1.id DESC
) AS t2
WHERE t2.max1 >= 3
ORDER BY t2.id

Ещё можно добавить в таблицу дополнительный столбец, в котором будет храниться количество записей, принадлежащих к текущей серии последовательных значений и заполнять/обновлять его в триггере, при вставке новых записей в таблицу. Тогда таблица будет выглядеть как-то так:

s1 | n
 1   3
 2   3
 3   3
 7   1
12   1
22   2
23   2
 5   4
 6   4
 7   4
 8   4

А получение нужных записей будет совсем тривиальным:

SELECT s1 FROM `table` WHERE n > 2

Можно задавать шаг отдельно для каждого счётчика, так же, как и максимальное значение - в атрибуте:

<div data-num="2350" data-step="5" class="number">0</div>

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        timeStep = 1000 / num,
        valStep = +this.dataset.step || 1,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.min(i, num));
        }, timeStep, $(this));
    });
  }
});

Или вычислять шаг:

var steps = 100;

$(window).scroll(function() {
  var $win = $(window);

  if ($('#counter').offset().top < $win.scrollTop() + 200) {
    $win.off('scroll');

    $('.number').addClass('viz').each(function() {
      var
        i = 0,
        num = +this.dataset.num,
        valStep = num / steps,
        interval = setInterval(function($el) {
          if ((i += valStep) >= num) {
            clearInterval(interval);
          }

          $el.html(Math.floor(Math.min(i, num)));
        }, 20, $(this));
    });
  }
});

• Метод querySelectorAll возвращает коллекцию элементов, никакого addEventListener у неё нет - его надо вызывать отдельно у каждого элемента.
  
• Что ещё за e.classList? e - это объект события, а не элемент DOM-дерева.
  
• Класс добавляете, OK - а где же удаление? Вряд ли вам нужно, чтобы элементы могли иметь оба класса одновременно.
  

Насколько я понял, вам нужно нечто такое:

const elems = document.querySelectorAll('nav#menu_3 > ul > li');

elems.forEach(n => n.addEventListener('mouseover', onMouseover));

function onMouseover() {
  elems.forEach(n => {
    n.classList.toggle('zoomed', this === n);
    n.classList.toggle('nozoomed', this !== n);
  });
}

Ваш запрос после подстановки значений выглядит как-то так:

INSERT INTO Items SET `itemid` = 'SELECT MAX(`itemid`) FROM `Items`', ...

То есть, код запроса для получения значения itemid оказывается взят в кавычки - никакого запроса не происходит, в itemid пишется строка. Что, по-видимому, является причиной ошибки - itemid, это ведь число, да? Как сделать вставку sql кода в запрос из переменной я сам без понятия, и вообще не уверен, что такое можно сделать.

Кроме того, есть и другая проблема. Если вы попробуете вручную выполнить ваш запрос (через phpmyadmin или ещё как), то получите сообщение о синтаксической ошибке - получение значения itemid следует окружить круглыми скобками:

(SELECT MAX(`itemid`) FROM `Items`)

Ладно, поставили скобки. Теперь-то всё хорошо? Никак нет - получаем ошибку "You can't specify target table 'Items' for update in FROM clause". Корректная вставка в таблицу с получением данных из этой же таблицы будет выглядеть примерно так:

INSERT INTO Items(itemid, title, type)
SELECT MAX(itemid), <значение для title>, <значение для type> FROM Items

В общем, попробуйте что-нибудь вроде этого:

connection.query('INSERT INTO Items(itemid, title, type) SELECT MAX(itemid), ?, ? FROM Items', [ data.title, data.group ])

Кнопкам дать общий класс, а для понимания, какая кого должна открывать, добавить data-атрибут, содержащий соответствующий селектор; Спискам, видимость которых надо переключать, тоже дать общий класс:

<a href="#" class="menu-trigger" data-list="#menu">Menu</a>
<a href="#" class="menu-trigger" data-list="#contacts">Contacts</a>
<ul id="menu" class="list">...</ul>
<ul id="contacts" class="list">...</ul>

При нажатии на кнопку прячете все списки, кроме связанного с нажатой кнопкой - его состояние изменяете на противоположное:

$('.menu-trigger').click(function() {
  var list = this.dataset.list;

  $(this).parent().find('.list').not(list).slideUp(0);
  $(list).slideToggle(500);
});

$(window).resize(function() {
  if ($(window).width() > 500) {
    $('.list').removeAttr('style');
  }
});

https://jsfiddle.net/nvgpfm7j/