Fixed header. Как убрать дергание на страницах с малой высотой?

Рустам Байназаров,

Padding-top на высоту шапки в полном виде

ага, спасибо, как я понял, это максимальное значение, которое будет необходимо выставить, грубо говоря, если высота документа почти равна высоте видимой части, т.е. скролл уже появился, но он минимальный.
Просто начал экспериментировать с padding-top, на разных страницах соот-но разных значений достаточно. На одной, где контента чуть больше, 100px достаточно, на другой - все 180 нужны. Но вижу, что да, тут 180 есть суммарная высота всей шапки.

А фиксация должна производить не после 33px, а после

У меня на самом деле на нескольких разных сайтах разные шапки и там я унифицировал и все по формуле высчитывается. Тут просто самый первый тестовый полигон, ставил просто для примера. Но спасибо за замечание и внимательность )

Почему скрипт не работает, но при этом нормально отрабатывает в консоли?

Lander,
До сих пор не разобрался, скрипт как оказалось срабатывает, но как то странно, через 2 раза на третий, или даже реже, т.е. вот перезагружаешь страницу, он вдруг сработал как надо, потом перезагружаю раз 5-6 - не сработал, или может 2-3 раза подряд сработать и опять в даун...
Пробовал дебажить - ничего не мешает как будто, и никакой логики либо последовальности, почему так, найти не могу. Больше всего похоже на то, что скрипт конфликтует с другими скриптами на странице... буду искать дальше..

Почему скрипт не работает, но при этом нормально отрабатывает в консоли?

Вот задумался.... там элемент .action.action-update - кнопка в форме, форма сама скрыта по дефолту css - display: none;
раскрывается кликом по кнопке - условно говоря, "изменить", после этого клика форма становится видна а кнопка "изменить" скрывается. Но изначально в DOMe все, да.

Как добавить блог на лендинг?

Sunflowerz,
ну и где тут вордпресс на вордпрессе? Там как раз что хотел тс - простой html, условно говоря, по своему функционалу, именно landing. В подпапке blog залит WP.
Не хочешь выглядить тупо, не пиши ересь.

Как улучшить закрытие по клику вне блока?

Кстати говоря, не могу понять, почему вот это исключение - || $('.navMenu li:nth-child(n+7) ul').is(e.target)
работает, а в переводе в ванильный вариант - по тому же принципу -
if (!elem.contains(event.target) && isVisible(checkElement) || elemEx.contains(event.target)) {
где elemEx есть элемент выбранный по селектору '.navMenu li:nth-child(n+7) ul' - не работает...

Как улучшить закрытие по клику вне блока?

если в таком виде - то получится по клику на дочерние будет закрывать, а это не надо.
Добавил в условие

if (!$('.navMenu').is(e.target) && $('.navMenu').has(e.target).length === 0 <b> || $('.navMenu li:nth-child(n+7) ul').is(e.target)</b>)

вроде работает...

Как перенести пользователей c joomla в wordpress c cохранением паролей?

В свое время - где то в 2014-15 гг, переносил с этим плагином, все без проблем вообще получилось. Помню, что до этого было много вариантов перепробовано, но все так или иначе ломало пароли.
Для меня, особенно того уровня, самое то было.

Возможно ли объединить СSS и Html?

Там less, но сути это не меняет.
Хотя, если человек задает такой вопрос, ему по видимому нужно "на пальцах" объяснять, как и где на какую иконку кликнуть, как увидеть скомпилированный css, как его скопировать, где в html поставить теги и и куда между ними вставить полученный css.
А ты - sass. Это ж его в ступор на полдня вгонит, искать sass если его там нет..

Как сделать адаптивный фон сайта?

Вы как себе представляете? т.е. чего именно вы хотите? Картинка горизонтальная, с определенным соотношением сторон. Как бы на телефоне в вертикальном модусе она может быть или частично, или так как сказал @Рустам Байназаров, или растягвайте на 100% по высоте и не удивляйтесь что люди получились такие удивительно длинные ))) ну или нарезайте разные картинки для разных разрешений.

Как правильнее принудительно установить координаты элементов на экране?

я это вижу, попробую объяснить понятнее, в чем тут проблема.
Если я скажем за координату по вертикали беру координату любого из крайних табов, то у меня есть 2 возможности - сделать эту координату независимой от скроллинга, или постоянно отслеживать скроллинг и в нужный момент - при клике - использовать текущую координату.
Первый вариант -

var tab = document.getElementById('tab-label-description');
var position = tab.getBoundingClientRect();
var topPosition = position.top;

- по понятным причинам не подходит, т.к. контент все таки будет скроллиться, и табы могут быть ближе к верху страницы, ближе к низу или посередине, поэтму при таком подходе при каждом клике страница будет возращаться всегда на одну и ту же позицию, т.е. скачки будут постоянно, пусть не за пределы страницы, но тоже не комильфо.
Если же я постоянно отслеживаю координату - например-

var tabs = document.querySelectorAll('#tab-label-description, #tab-label-additional, #tab-label-productattach');
  function noScroll() {
  var tab = document.getElementById('tab-label-description');
  var position = tab.getBoundingClientRect();
  var topPosition = position.top;
  //alert('top: ' + topPosition + ' ');
   window.scrollTo({ top: topPosition});
  }

все то же, но уже в функции - то на первый взгляд кажется, что это именно то что надо. Однако, вся проблема в том, что после клика на средний таб координаты всех табов устанавливаются в 0. Т.е., после клика на средний таб скролла еще не происходит, но значение вертикальной коодринаты для всех табов уже установлено в 0, и при любом следующем клике по любому из табов происходит скролл наверх.

Первое, что подумалось, что надо отслеживать координату не крайних, а среднего таба - поскольку после клика по крайним табам значение координаты в 0 не устанавливается. Но и тут, дефолтная обработка клика по среднему табу и его координату ставит в 0, поэтому тоже не получается...
Пока единственное, что приходит в голову, либо хранить в переменной текущее, и еще в одной переменной - предыдущее значение координаты, и делать постоянную проверку, не равно ли текущее значение нулю. Если равно, то установить предыдущее.
Ну либо оставить как есть - жестко какое то фиксированное значение, которое гарантирует нахождение табов в фокусе, ну иногда небольшие скроллы...

Почему при переключении табов происходит скачок вверх и как от этого избавиться?

fallus, решил вернуться - код выше проблемы не решает, к сожалению...
По поводу bootstrap. На проекте мне его отключать никто не дает, но попробовал так - установил на чистый инстанс magento полный фарш bootstrap - никаких скачков не наблюдается. Кроме bootstrap там еще много чего, некоторые скрипты мне так же не позволяют отключать, при этом требуют не затягивать с решением.

Подумалось вот о чем. Может какое-то событие можно попробовать добавить в addEventListener?
Пока приходит только довольно сложный вариант - отслеживать у-координату таба на экране, и по клику в addEventListener принудительно это значение - но может есть более простое решение?

Почему прыгают буквы?

Может ваши буквы патриоты Украины? хто не скаче той москаль?
пс. не мог удержаться, сорри.

а если серьезно, то где что, на каком сайте какие буквы? или тут ясновидящие все?

Как сделать анимацию по линиям для SVG?

себя обрисовал? )
неплохо получилось, я даже думаю, stroke-dashoffset анимация тут лишняя - хотя конечно дело вкуса )
Я бы из кусочков целое собирал, есть где развернуться в плане креатива.
Например, хотя бы как тут, но можно и что то другое придумать.

Как грамонтее скрыть сообщение после таймаута?

В общем, на живой magento наблюдается следующая ситуация.
При первом клике сообщение не скрывается - Cannot read property 'remove' of null
Т.е. как будто он не успевает увидить вот этот элемент - document.querySelector("div[role='alert']");
Второй клик отрабатывает как положено, скрывает, но уже по третьему и следующим кликам не выводит сообщение вообще...
ps. Сейчас сделал все таки вместо remove() целиком только удаление внутреннего содержимого - innerHMML = "" - все последующие клики кроме самого первого отрабатывают нормально.
Осталось только первое добавленное сообщение чтобы удалялось и вроде все ))

Как грамонтее скрыть сообщение после таймаута?

да, примерно так - спасибо.
Это стандатное поведение оповещений в magento2, например, при добавлении товара в корзину.
Там по клике на кнопку "add to cart" помимо всей прочей php js и ajax логики выводит такое оповещение, которое почему то не скрывается. Поэтому искать встроенный обработчик и что то в нем менять ну его...
Вроде все получается - сейчас протестирую уже непосредственно на magento.
Единственное, хотелось бы добавить плавности при скрытии, пока сделал на css, так как мне так привычнее, да и вообще неясно, можно ли сделать на ванильном js проще - вроде это уже прерогатива animation.delay...

Есть ли полноценный эмулятор браузера safari для Windows?

этот вариант рассматривается тоже, но правда не знаю, как будет с производительностью:
рабочая машина под вин7 с 8 гб памяти. Предполагаю, что будет не очень комфортно.

Есть ли полноценный эмулятор браузера safari для Windows?

не нашел, там в любой платной подписке доступна эта функция? Просто в триале вообще safari не доступен...

Как называется такой эффект у слайдера и есть ли плагины для него в WordPress?

ну тогда действительно owl-carousel, мышкой слайды там сменяются без проблем.

Как бороться с кашей в голове на работе?

Space Purr, а если бы он вообще не бухал, посоветовал бы ему начать? ))))
Типа что то

Как подключить растровую графику из SVG спрайта в HTML?

alexeeey_kuznetsov,
c нормальными svg таких проблем нет вообще - посмотрите, несколько примеров в одном для svg спрайтов.