cms-blog.ru

Блог о WEB-технологиях

Рубрика: Верстка

JavaScript — события загрузки и изменения размера окна

Опубликовано Администратор

Пример пересчета размеров элементов при разных размерах окна (разных разрешений экрана)

JavaScript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
function resize_info(){
let heightHeaderTop = document.querySelector(".header-top").offsetHeight;
let heightHeader = document.querySelector("header").offsetHeight;
let heightHeaderAll = heightHeader + heightHeaderTop;
let heightHeaderAll20 = heightHeader + heightHeaderTop + 20;
document.querySelector("Header").style.top = heightHeaderTop + "px";
document.querySelector(".blank-bl").style.height = heightHeaderAll20 + "px";
document.querySelector("#site-menu").style.top = heightHeaderAll + "px";
console.log( heightHeader );
};
document.addEventListener("DOMContentLoaded", function(event)
{
window.onload = function() {
resize_info();
};
window.onresize = function() {
resize_info();
};
});
 

Фиксированное меню для Opencart

Опубликовано Администратор

Простой способ зафиксировать меню на примере Opencart (аналогично и для других CMS) используя немного кода Javascript и минимум HTML/CSS. Контейнер содержащий меню <div class="container">  оборачиваем в тег <div id="fixed-menu">  В файл header.tpl  (header .twig) добавляем код JS: