Как правильно реализовать выезжающий бэкграунд у картинки
Как реализовать то, что на картинке правильно? Попробовал сделать псевдоэлементом – не получилось.
Category: вёрстка
Как удалить элемент, в котором находится кнопка на чистом JS
Существует три квадрата. в каждом находиться кнопка.
Добился удаления квадратов по клику на них, но не по кнопке.
Классы у них одинаковые. Помогите пожалуйста.
const testDel = document.querySelector(‘.delis’)
const testBlock = document…
Gulp. Ошибка RangeError: Maximum call stack size exceeded при добавлении нового кода
Есть проект, полагаю имеет смысл сказать в контексте проблемы, что работаю над действительно большим сайтом. Сборка работала корректно до определенного момента – просто добавил новый элемент (алерт об ошибке) в одну из подключаемых форм, и…
Как сделать чтобы GULP прописывал правильные пути к файлам?
Gulp собирает html файлы с gulp-file-include, есть один файл head.html где прописан такой путь:
<link rel="stylesheet" href="css/style.min.css">
Но в разных файлах нужны разные пути, например:
В первом файле долже…
Добавление тегов по клику на чекбоксы из фильтров
Имеется блок с фильтрами для товаров:
По клику на чекбокс, должен создаваться список тегов с отмеченными чекбоксами вида:
Проблема в том, что у меня эти теги дублируются, если в рамках одной категории выбрано несколько значений.
Вот код…
Как вставить на страницу часть другой html-страницы?
Ситуация: на HTML-страницу нужно вставить один или несколько фрагментов с другой страницы. Нашел js, который позволяет вставить страницу целиком, но мне нужно вставить только фрагмент, например, поместить в DIVы нужный фрагмент и с помощью…
Пуш в массив объектов в соответствующие категории, если они уже есть
За заголовок простите, не смог его сформулировать лучше.
Есть (ну как есть – я его создаю) массив объектов вида:
Часть элементов принадлежит к типу – Сезон, часть – к Размеры, хочу их объединить по категориям, получается так, что при пуше…
Картинка на пересечении двух блоков
Подскажите, как правильно сверстать блок таким образом, чтобы на пересечении двух блоков была картинка? Если верстать через position: absolute, то при адаптиве на других разрешениях придется вручную подгонять положение этой картинки
…
Как сделать длинный шестиугольник на JS?
Мне надо сверстать длинный шестиугольник. Я видел много примеров с обычным гексагоном, его можно сделать при помощи before и after, но проблема в не прямых углах на фото, то есть я не могу поставить с краю div::after, тк нужен именно тупой…
Как можно добавить в localStorage Html block, чтобы при обновлении блок оставался?
const sendData = async(url, data) => {
const response = await fetch(url, {
method : ‘POST’,
body : data,
})
return await response.json();
};
const sendCart = () => {
const cartForm = document.queryS…
Как можно добавить в localStorage Html block, чтобы при обновлении блок оставался?
const sendData = async(url, data) => {
const response = await fetch(url, {
method : ‘POST’,
body : data,
})
return await response.json();
};
const sendCart = () => {
const cartForm = document.queryS…
Browsersync – не работает удаленный доступ
Запускаю Browsersync в папке со статической версткой. Для доступа создаются два URL:
Local: http://localhost:3000
External: http://192.168.0.101:3000
С телефона захожу по адресу External, но ничего не загружается. Компьютер и телефон под…
Изгиб внутрь блока [дубликат]
надо сверстать такой navbar, а идей как это сделать нету.
Расскажите пожалуйста, как сделать такой изгиб во внутрь div-а, чтоб он огибал кнопку и если есть какие нибудь статьи или видео по тому, как этому научиться, отправьте, пожалуйста.
…
Ширина столбца таблицы по содержимому
Есть таблица
* {
margin: 0;
padding: 0;
}
.hstyle {
text-align: center;
margin-top: 30px;
}
.secondandmore {
margin-top: 30px;
}
#second {
margin-top: 30px;
}
.calltable tr td {
/*border-spacing: 10px…
Выравнивание div-ов. Получение длины div-а
Есть div-ы
#choosedatetimebegin {
display: flex;
align-items: center;
}
.labeldatetimebegin {
width: 305px;
}
.datetimeinput {
width: 100%-305px;
}
#chooseduration {
display: flex;
align-items: center;
…
Как при сборке шаблона HTML-письма заинжектить в него стили?
Мне нужно сверстать письма для рассылок, а в них желательно указывать стили инлайн. Есть ли возможность заменять в HTML/EGS-шаблоне классы на стили этого класса? Например, пишу в шаблоне:
<p class="style-font">
Есть класс …
Как при сборке шаблона HTML-письма заинжектить в него стили?
Мне нужно сверстать письма для рассылок, а в них желательно указывать стили инлайн. Есть ли возможность заменять в HTML/EGS-шаблоне классы на стили этого класса? Например, пишу в шаблоне:
<p class="style-font">
Есть класс …
Расширение правого бокового меню по высоте окна
Страница состоит из 3-горизонтальных блоков – шапки(#pageHeader), контента (.contentpart) и футера(#pageFooter).
.bodyclass {
display: grid;
grid-template-areas: “header” “centerpart” “footer”;
grid-template-rows: 100px 1fr 743px…
Расширение правого бокового меню по высоте окна
Страница состоит из 3-горизонтальных блоков – шапки(#pageHeader), контента (.contentpart) и футера(#pageFooter).
.bodyclass {
display: grid;
grid-template-areas: “header” “centerpart” “footer”;
grid-template-rows: 100px 1fr 743px…
Ширина input, зависящая от ширины модального окна
Есть модальное окно
.modal {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: rgba(0, 0, 0, .4);
display: block;
z-index: 15;
/*
padding-top: 20%;
padding-bottom: 10%;
padding-left: 25%;
…
Перекрытие модального окна футером
Есть модальное окно и футер
let modal = document.getElementsByClassName(‘modal’)[0];
let modalcontent = document.getElementsByClassName(‘modal-content’)[0];
let loginlink = document.getElementById(‘loginlink’);
let elemclose = documen…
Непонятное отображение страницы
Есть код модального окна
let fullwindow = document.getElementById(‘fullblock’);
/*let modal = document.getElementById(‘myModal’);*/
let modalcontent = document.getElementsByClassName(‘modal-content’)[0];
let loginlink = document.getEle…
Как можно создать квадратную сетку (100 элементов х 100 элементов) из элементов 10px x 10px
Как можно создать квадратную сетку (100 элементов х 100 элементов) из элементов 10px x 10px, чтобы пока тянулась мышка по сетке, подсвечивались все элементы на расстоянии указателя от точки старта по оси X и оси Y? Подскажите, как это лучш…
СSS свойство пагинации, зависящее от другого элемента страницы
Есть пагинация на сайте
Каким образом расположить пагинацию, чтобы она примыкала к нижней границе объемлющего элемента? Т.е. в css-свойствах пагинации
#pagination {
display: flex;
padding: 0;
margin-bottom: 0;
list-st…
СSS свойство пагинации, зависящее от другого элемента страницы
Есть пагинация на сайте
Каким образом расположить пагинацию, чтобы она примыкала к нижней границе объемлющего элемента? Т.е. в css-свойствах пагинации
#pagination {
display: flex;
padding: 0;
margin-bottom: 0;
list-st…
Hover, и пропадающее меню
$(window).scroll(function () {
if ($(this).scrollTop() > 170) {
if ($(‘#Head’).hover(function () {
$(‘.whitemenuuser’).addClass(‘white_scroll’);
},
function () {
if ($(‘.whitem…
Подсвечивание карточки товара
На https://www.citilink.ru/catalog/noutbuki/?sorting=price_asc&f=discount.any%2Crating.any- карточки товаров разграничены линиями-разделителями.
Каким образом можно реализовать линию-разделитель между карточками товаров?
При наведен…
Как добавить картинкам на сайте зернистость и искажение при наведении?
Из названия уже понятна суть: есть простые картинки на сайте, добавляемые при помощи <img>. При наведении на любую картинку срабатывает анимация искажения. Искажение должно выглядеть в точности, как на примере, в котором это всё реал…
Как добавить картинкам на сайте зернистость и искажение при наведении?
Из названия уже понятна суть: есть простые картинки на сайте, добавляемые при помощи <img>. При наведении на любую картинку срабатывает анимация искажения. Искажение должно выглядеть в точности, как на примере, в котором это всё реал…
Как в Parcel сохранить исходные имена файлов и пути?
Нужно что бы в билде сохранялись исходные имена и подпапки для всех файлов.
Свежие комментарии