Замечание: Возможно, после публикации вам придётся очистить кэш своего браузера, чтобы увидеть изменения.
- Firefox / Safari: Удерживая клавишу Shift, нажмите на панели инструментов Обновить либо нажмите Ctrl+F5 или Ctrl+R (⌘+R на Mac)
- Google Chrome: Нажмите Ctrl+Shift+R (⌘+Shift+R на Mac)
- Internet Explorer / Edge: Удерживая Ctrl, нажмите Обновить либо нажмите Ctrl+F5
- Opera: Нажмите Ctrl+F5.
$(document).ready(function() {
// Инициализация боковой панели
$('.боковая-панель-кнопка').on('click', function() {
var targetId = $(this).data('target');
// Удаляем активный класс у всех кнопок
$('.боковая-панель-кнопка').removeClass('active');
// Добавляем активный класс текущей кнопке
$(this).addClass('active');
// Скрываем все разделы
$('.боковая-панель-раздел').removeClass('default');
// Показываем выбранный раздел
$('#' + targetId).addClass('default');
});
// Активируем первую кнопку по умолчанию
$('.боковая-панель-кнопка:first').click();
$('.допуск-контейнер').hover(function() {
var $tooltip = $(this).find('.допуск-подсказка');
var $container = $(this);
var rect = $container[0].getBoundingClientRect();
var tooltipRect = $tooltip[0].getBoundingClientRect();
var viewportWidth = $(window).width();
var viewportHeight = $(window).height();
var left = rect.left + rect.width / 2 - tooltipRect.width / 2;
if (left + tooltipRect.width > viewportWidth - 10) left = viewportWidth - tooltipRect.width - 10;
if (left < 10) left = 10;
$tooltip.css('left', left + 'px');
var bottom = rect.height + 10; // по умолчанию снизу
var top = 'auto';
if (rect.bottom + tooltipRect.height + 10 > viewportHeight) {
if (rect.top - tooltipRect.height - 10 >= 0) {
top = rect.top - tooltipRect.height - 10 + 'px';
bottom = 'auto';
} else {
top = rect.top + rect.height / 2 - tooltipRect.height / 2 + 'px';
bottom = 'auto';
}
}
$tooltip.css({
'top': top,
'bottom': bottom === 'auto' ? 'auto' : bottom + 'px',
'opacity': 1,
'transform': 'translateY(0)'
});
}, function() {
$(this).find('.допуск-подсказка').css({
'opacity': 0,
'transform': 'translateY(10px)'
});
});
});