Метка: Javascript

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

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

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

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();
	};
});

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

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

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

Popup для изображений опций

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

Версия ocStore 2.3.0.2.3 Срочно понадобилось для изображений опций увеличивать изображения при нажатии. Для этого можно воспользоваться плагином magnific-popup, который в стандартной сборке уже подключен в карточке товара, в файле \catalog\controller\product\product.php: