Кнопки абсолютно позиционированы? Попробуй писать в стилях кнопки вот такое/
Считаем, что (240, 200) - координаты кнопки 1, 300 и 450 -высота и ширина картинки, для которой кнопки расположены правильно.
https://codepen.io/ksnk/pen/vYoWwgQ
Если подвигать размером результата - будет видно, что кнопка пытается остаться "на месте".
Правда видно также, что в калькуляции неплохо бы учитывать размер самой кнопки
В смысле - нужно увеличивать длину отрезка, не меняя угол наклона ?
Вектор задается парой значений. Разница координат X и разница координат Y отрезка. Соответственно, увеличивать-уменьшать - это изменять обе координаты одновременно, пропорционально вектору.
Собственно и вся наука. Тригонометрия не нужна, в смысле - для решения нужна, наверное, но результат достижим умножением-делением...
многоточие тут - это такая же кнопка как и обычная, с числом. Свипер переходит на тот слайд, по какой по порядку кнопке произошел клик. По этому я некоторые кнопки скрываю стилем, чтобы они оставались в верстке и не мешали свиперу считать, что мир устроен хорошо. Так получается, что многоточие - это следующая или предыдущая по порядку кнопка. Почему она не работает в VS Code - не знаю.
Чтобы выводить разное количество "видимых" кнопок - нужно посмотреть, сколько реально кнопок вмещается в окно вывода. Нужно читать документацию свипера, чтобы понять сколько столбиков слайдера сейчас демонстрируется или явно вычислять размеры при рендеринге.
Ссылка на fex.net у меня не открывается.
Сейчас, если уменьшить размер экрана до появления 2 столбцов вместо 3-х, должен появится номер 17 вместо 16. Я там неправильно вычислял total - общее количество элементов, сейчас должно быть нормально.
https://codepen.io/ksnk/pen/MWNjMQV?editors=1111
Я там много поменял, сравнивай сам. Лишнее повыкидывал. Возможно, нужно скрывать не показываемые кнопки как-то более прилично, чем display:none!important, но так сработало.
Без JS никак.
На window.onscroll вешаешь изменение класса заголовка, заголовок в этом классе выкидывает ненужные элементы (делает скрытыми) и получает position: fixed; top: 0.
Если значение window.scrollTop достаточно небольшое (размер заголовка в "нормальном положении"), то класс заголовка снимаем - заголовок становится нормальным.
Ну, тупо же. Задача решается почти на коленке, без функции расстояния.
Мат. рассуждения:
Берем 2 точки, рисуем вокруг них сферу с указанным расстоянием между этими точками и нужной нам. Пересекаются сферы в окружности. Ее формула выводится на бумажке. - тоже формула.
Проектируем перепендикулярно плоскости третью точку в плоскость , в которой располагается окружность, пересчитываем расстояние и получаем плоскую картинку про пересечение 2-х окружностей. Не более 2х ответов.
В какое место нужно будет применять функцию вычисления расстояния - я не вижу.
Список виджетов нужен только в админке и только и исключительно для вывода этого списка. Дальше - клик на страницу параметров, или клик для вставки виджета (рамка/иконка) на страницу в редакторе. На странице сайта виджет сидит по своему имени и со своим списком локальных параметров. Удобно вставлять виджет на страницу в виде шорткода. Хотя тут бывают разные случаи, возможно список виджетов страницы придется кэшировать отдельно, для скорости.
В админке логично использовать glob с поиском в спец каталоге для получения списка виджетов. В 2 шага. Выводим сначала сохраненный ранее в базе список, одновременно запускаем ресканирование списка виджетов и, если изменился, подгружаем новый список со значками обновления.
Хранить список в базе удобно тем, что там можно отключить виджет без физического его удаления с сайта, и редактирования статей сайта, да и глобальные параметры бывает полезно хранить там же. Заодно решается проблема с поиском файлов - при рескане можно сохранять абсолютный (относительно рута сайта) адрес файла в базу.
То есть - список нужных виджетов хранит выводимая статья (страница сайта) и только она. Если с виджетом косяк - удален или отключен - это видно в админке при редактировании страницы сайта. Сами виджеты на сайте нигде не прописываются, только сохраняется их список, автоматически перегенерируемый админкой при изменении, для быстроты и удобства.
Учитываем, что 10 и 12 - это половинные высота и ширина. Тогда кнопка останется приклеенной "по настоящему".