Дмитрий Арушанов

1) Взять готовый Time Input компонент. Или даже Date Time. Застилить его под свой UI. (на том же Vue их достаточно)
У них реализована уже валидация для покрытия (50:90)
2)Как правило большенство плагинов поддерживают свойства - minRangeValue - maxRangeValue, c помощью которых и можно этим управлять.

Если вам нужно сделать свое поведение то можно вот так

window.oncontextmenu = function(e){
 // your code that will add html with your custom menu
e.preventDefault();
}

Если на интересующем вас ресурсе наоборот уже переопределенно это поведение
то это должно помочь
window.oncontextmenu = null

если на определенном элементе только то

const element = document.getElementById('someId')
element.oncontextmenu = null // || or function (e) { /*code*/ e.preventDefault(); } соответсвенно

В качестве шутки ради. Без использования библиотек.

(((((msg.fwd_messages||[])[0]||{}).attachments || [])[0] || {}).audio_message || {}).link_mp3 || (((msg.attachments || [])[0]||{}).audio_message || {}).link_mp3 || ''

Читабельности - 0 - черт ногу сломит
Поддержка = Читабельности

Но конструкция короче однозначно :D

Тут вот был вопрос, как реализовать похожий функционал. (вроде совпадает с вашими потребностями)
Как реализовать скролл элементов сайдбара?
Я там дал ссылку на скрипт js который в теории это делает

https://learn.javascript.ru/webcomponent-core
https://code.tutsplus.com/ru/tutorials/extending-t...
??

Попробуйте заменить

399:{
                        items:2
                    },

на

400:{
                        items:2
                    },

Не уверен на все 100%. Но глянув исходный код страницы (vue) -> видно что есть подключенный скрипт
smooth-scroll.js
Вот ссылка на репозиторий ->
https://github.com/cferdinandi/smooth-scroll

Сам лично его не использовал, потому не могу утверждать, что там есть этот функционал, но беглый осмотор доков
что то в районе Custom Events - там вроде как можно получить текущий якорь,(название) ну и потом руками добавить класс active к нужному селектору (данные для поиска седектора по идее будут в колбеках) но могу ошибаться. Лишь догадка.

//Это ваш код
$array = array(
"1" => array("id"=>"123", "name"=>"Alex"),
"2"=>array("id"=>"322", "name"=>"Pasha"),....
"22"=>array("id"=>"312", "name"=>"Lesha"),....);

// используйте роямое обращение по ключу
print_r($array[2]);
print_r($array[22])
//...etc

//Или вам нужно и применение цикла? и что бы цикл выводил только заданные ключи?

А если при нажатии на кнопку при помощи JS добавлять \ убирать класс у верхнего элемента
.mobile | .desktop ну или просто добавлять убирать .mobile класс.

Ну и немного подправить файл стилей, что бы он учитывал это

Math.random() - Загадать число.
А дальше запрашиваете вариант у пользователя и подсказываете - больше \ меньше. И в случае совпадения - Победа

function getAllParents (id) {
   const parents = []
   let el = document.getElementById(id)
	while(el){
		el = el.parentElement
		if (el) parents.push(el)
	}
	return parents
} 

console.log(getAllParents('yourID'))

Ну если у вас высота блоков фиксированная - то тогда метки перехода можно задать вручную.
Если может меняться - то для каждого блока получаем его офсет от верха.
Затем вешаем обработчик скрола на стрпницу, и проверяем офсет вашего блока. Как только он достиг нужных границ - выполняем магию (меняем текст цвет и т д)

input.className Попробуйте так.

Ссылка документацию на https://www.php.net/manual/en/mysqli-result.fetch-...

Так же интересно, как while вообще работает, ведь там нет условия. Там оператор присвоения "=".

Думаю это натолкнет вас на ответ - Returns an associative array that corresponds to the fetched row or NULL if there are no more rows.

Если нет - то вперед изучать основы)