Новые ответы с меткой

1 голос
Принятый

Картинка заслоняет уголки у блока

для уголков лучше сделать маленькие блоки и задать им бордер по нужным сторонам, все это выровнять и лучше задавать размеры в процентах или вьюпортах. Я так накидал, для наглядности. body { ...
Maneken's user avatar
  • 569
-1 голос

css, как добиться резиновости от отступов для flex или grid?

ul { display: flex; justify-content: space-between; flex-wrap: wrap; gap: 30px; list-style-type: none; } li { width: calc(50% - 15px); } @media (max-width: 1200px) { ul { gap: 30px ...
specussa's user avatar
1 голос
Принятый

Как сделать чтобы блок скролился мышкой в overflow-hidden

(function(){ let speed = 2; // Скорость скролла. let scroll = document.querySelector('.scroll'); let left = 0; // отпустили мышку - сохраняем положение скролла let drag = false; let coorX = 0; // ...
specussa's user avatar
-3 голоса

Как зафиксировать объекты при масштабировании

используйте вместо px размеры em, rem
specussa's user avatar
1 голос

Анимация плавного появления при скролле

(function () { var square = document.querySelector('.square-wrapper'); var observer = new IntersectionObserver(entries => { entries.forEach(entry => { var entrySquare = entry....
specussa's user avatar
1 голос

Почему псевдо элемент(.todo-item__span::after) появляется не по середине?

По крайней мере, у меня работает так: .todo-item__container-field { display: flex; justify-content: center; align-items: center; } .todo-item__span { display: flex; justify-...
Peter Kolosov's user avatar
0 голосов

Как добавить header когда страница скролится вверх?

Если правильно понял, что требуется, то можно попробовать вот так (объяснил, возможно, не совсем хорошо, но как получилось): const header = document.querySelector('.header'); let scrollPrev = 0; //...
Pr0gramm1st's user avatar
2 голоса

Как добавить класс другому блоку в зависимости от слайда swiper.js?

Можно обратиться к документации Swiper.js и почитать раздел "Methods & Properties". Там обнаружим, что Swiper предоставляет возможность получить свойство слайда swiper.realIndex - "...
Pr0gramm1st's user avatar
0 голосов

Не могу разобраться с вложенными циклами в js

Еще один подход: первый цикл - шаг в 10, второй - шаг в 1. for (let i = 10; i <= 30; i += 10) { let num; for (let j = 1; j <= 3; j++){ num = i + j; document.write(num + ' ...
Александр's user avatar
1 голос

При нажатии на кнопку в блоке меняется текст и через время текст возвращается в исходное положение

Потому что izm -- это Ваша кнопка, а не текст и Вы скрываете всю кнопку, где предварительно заменили текст, просто сделайте console.log(izm). Консоль естественно не поможет решить проблему, но поможет ...
Simon's user avatar
  • 2,098
1 голос
Принятый

Подскажите в чем проблема. Ошибка ERR_FILE_NOT_FOUND при появлении картинки в окне

Проблема была в контексте document.querySelectorAll('.container-gallery .gallary-icon').forEach(img => { img.addEventListener('click', ({target}) => { const {src} = target ...
SaNFeeD's user avatar
  • 620
1 голос

Почему при нажатии на popup он закрывается?

Потому что EventListener передаёться всем наследникам. Если например ты поставишь EventListener клика на BODY то куда-бы ты не кликнул он всегда отработает. Решение? Проверить event.target. А точно-ли ...
Eugene X's user avatar
  • 2,793
1 голос

Наложение блоков друг на друга

index.html <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta http-equiv="X-UA-Compatible" content="IE=edge&...
Василий Калеев's user avatar
0 голосов
Принятый

Как растянуть input на всю ширину родителя?

если вам нужно растянуть input на всю ширину div'а то уберите max-width и используйте используется просто width со значением 100%. max-width не задает ширину компонента, а указывает на максимальное ...
Yuki's user avatar
  • 106
-1 голос

Как зафиксировать объекты при масштабировании

Вы можете использовать свойство max-width для ограничения ширины контейнера с текстом, чтобы он не плавал при масштабировании страницы. Чтобы форма двигалась вместе с текстом, вы можете добавить ...
Килобайт's user avatar
0 голосов

SASS не работает один класс

всё дело было в строке display: block. Надо было добавить в &__secondary
Илья's user avatar
0 голосов

Как сделать одинаковую высоту слайдов в Slick Slider

Для того, чтобы высота слайдов была одинаковой и зависела от высоты самого большого слайда, можно использовать JavaScript. Код JavaScript должен быть добавлен перед закрывающим тегом body. В этом коде ...
Astrodynamic's user avatar
2 голоса
Принятый

Как сделать одинаковую высоту слайдов в Slick Slider

В своё время на просторах интернета нашёл вот такой jQuery-скрипт, вполне рабочий: function carouselNormalization() { var items = $('.slide'), //grab all slides heights = [], //create empty ...
Danila's user avatar
  • 930
1 голос
Принятый

Рефакторинг кода JavaScript, объединение в одну функцию

Написал 100 слов, код масштабировался на 700 строк, понимаю, что можно оптимизировать, только не знаю как Можно использовать вариант, что я давал по ссылке... Делаем словарь для неких "ключей&...
ksa's user avatar
  • 4,606
2 голоса
Принятый

как сделать анимацию движения таракана

tx, ty, lastTargetTime отвечают за цель к которой таракан бежит. Цель меняется случайно с интервалом около двух секунд. t, lastT измеряют время между последовательными вызовами update. aspeed, vspeed -...
Stanislav Volodarskiy's user avatar
4 голоса

Как сделать рамку так чтобы одна часть была над другим элементом а другая под другим элементом?

Две рамки блока-обёртки будут под изображением, а две других рамки создаём с помощью псевдоэлемента, который будет над изображением за счет абсолютного позиционирования. Само изображение тоже с ...
Deonis's user avatar
  • 33.8k
1 голос

как вытащить заблюренный текст

Давайте разберемся изначально с правилами. Код нужно указывать в формате текста, это очень важно. Обязательно пишите url сайта для полного понимания сути вопроса. Теперь к самому вопросу. Сайт ...
Alez Programmer's user avatar
0 голосов
Принятый

Как сделать, чтобы контейнер было видно только внутри карточек

Как оказалось, есть background-attachment (или же в tailwind - bg-fixed), который красиво решает эту задачу. Может не идеально (т.к. градиент идёт от края экрана к другому краю), но довольно круто. ...
Arkeviz's user avatar
1 голос
Принятый

Как в ссылке заменить атрибут href на другой и закодировать путь в Base64

как закодировать содержимое HREF в Base64 и после кодировки заменить атрибут href на придуманный атрибут link Предложу вот такой вариант... const o = document.querySelector('.button') let v = o....
ksa's user avatar
  • 4,606
0 голосов

Swiper внутри flex элемента растягиваются слайды, mw0 не помогает

Просто добавь flex-элементу в котором находится слайдер min-width: 0; и все сразу в норму придет.
Азамат Магомедов's user avatar
1 голос
Принятый

Как сделать счетчик ввода значений?

Впервые такое реализовываю, было интересно! Думаю можно это сделать как-то и лучше. В моем варианте мы слушаем событие input у каждого input, убираем все символы кроме цифр и оставляем только один ...
Oliver Patterson's user avatar
0 голосов

Анимация текста как у Spotify

Если всегда известен цвет заднего фона, то можно сделать вот так на чистом CSS/HTML: * { margin: 0; padding: 0; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: ...
ΝNL993's user avatar
  • 3,272
1 голос

Некорректно работает свойство height:100% для дочерних элементов

Вам нужно указать высоту для родительского элемента .section div2And3Parent. Один из способов сделать это - сделать его растягивающимся по высоте, используя flexbox: .section.div2And3Parent { flex: ...
Zerosar's user avatar
  • 11
2 голоса

Высота ребенка по всю высоту скролла родителя + абсолютный блок

Без JS мне кажется не обойтись. Высчитываем высоту скролла .content, учитывая при этом padding let content = document.querySelector('.content'), contentPaddingTop = parseInt(window....
Алексей Мельников's user avatar
1 голос
Принятый

Вывод результатов теста на JavaScript

Расчет оценки реализовал через switch, а вывод результата в div с помощью document.getElementById("resultBox").innerHTML через ид div'а. Также сами вопросы лучше отображать сразу а не через ...
Yuki's user avatar
  • 106
0 голосов

Карточки слайдера slick

картинкам можно задать ширину в таких единицах измерения как (vmin) и при этом aspect-ratio: 9/16 - например, а текст (поиграть с calc()): font-size: calc(.5em + 2vw) в таком роде подбирать…
Serg Bakay's user avatar
1 голос
Принятый

Подскажите пожалуйста, с чем связано не ровное увеличение картинки при наведении?

с чем связано не ровное увеличение картинки Связано это с тем, что Вы, при наведении, заменяете свойство transform, а нужно добавлять трансформации. То есть было: transform: translate(-50%, -50%); ...
UModeL's user avatar
  • 32.4k
1 голос
Принятый

Некорректно работает свойство height:100% для дочерних элементов

Скажем так: во первых сложно работать с размерами, когда у вас у совершенно разных блоков один класс section <div class="main-wrapper"> <div class="section"> <&...
Maneken's user avatar
  • 569
1 голос

Почему мой фон отображается только на одной части сайта

Твой код отрабатывает так, как ты его написал. Из багов, у тебя не закрыт тег со стилями. А так же рекомендуется подключать основной файл стилей CSS в самом конце среди всех подключений. Так, как ...
Sponger's user avatar
  • 11
1 голос

Почему не получается прижать грид элемент полностью к верху?

У вас всего два ряда, потому и сетка так выстраивается. Попробуйте так: .reviews__row { display: grid; grid-template-areas: "reviews__swiper reviews__info" "...
Pavel Nazarian's user avatar
0 голосов

Как срезать углы у блоков с картинкой на фоне?

Лови вот еще пример body { background: #cbcbcb; } .nk { background: #1caaaa; background: linear-gradient(135deg, transparent 15px, #1caaaa 0) top left, linear-gradient(-135deg, transparent ...
Erik's user avatar
  • 1
1 голос
Принятый

javascript как корректно указать путь к файлу находящемуся на несколько уровней выше

Попробуйте таким образом: fetch('../../data.json')
GHOSTxOFxDONBASS's user avatar
2 голоса

Почему-то перестало работать подчеркивание + счетчик

У вас была проблема в том, что вы получаете tasks единоразово и не обновляете их. Теперь при каждом обращении к tasks они запрашиваются по новой. UPD: Поправил момент с подчеркиванием. Изменил метод ...
SaNFeeD's user avatar
  • 620
0 голосов
Принятый

Динамический :src возвращаемый из геттера или функции, Vue, Vite, Vutify

Итак спустя тысячи перестановок src и чтения документации vite(у меня проект собран на vuetify в нём по умолчанию используется vite). Я пришёл к правильному решению этого вопроса. Всё, что нужно было ...
Ярослав's user avatar
0 голосов

Как изменить модульное окно, чтобы оно открывалось в этой же вкладке (css+html)

Код рабочий. Возможно, Вы его запускаете как-то неправильно? .u-btn-3 { font-weight: 700; text-transform: uppercase; font-size: 0.875rem; letter-spacing: 1px; margin: 20px auto 0 15px; } ...
Danila's user avatar
  • 930
1 голос

Как затемнить только картинку не затемняя элементы

Простейший способ - использование нескольких слоёв в фоне. В примере, верхний слой - это одноцветный сплошной полупрозрачный градиент (для наглядности указан розовый цвет, для затемнения измените цвет ...
UModeL's user avatar
  • 32.4k
5 голосов

как сделать анимацию движения таракана

Я никак не могу заставить жука проворачиваться в сторону перемещения последующей позиции. Решено. Нужно было ставить дельту Y первой, и умножать сами новые X и Y на -1, чтобы жуки не шли задом на ...
ΝNL993's user avatar
  • 3,272
0 голосов

Почему появляется вертикальный скролл?

Как вам уже подсказывали в комментариях, просто в main замените height: 100% на height: calc(100% - 60px) 60px - высота header. * { margin: 0px; padding: 0px; } a { text-decoration: ...
Oliver Patterson's user avatar
0 голосов

Почему появляется вертикальный скролл?

Попробуйте мой вариант * { margin: 0px; padding: 0px; } a { text-decoration: none; } html { width: 100%; height: 100%; } body { width: 100%; height: 100%; font-...
ViVi's user avatar
  • 3
0 голосов

Почему появляется вертикальный скролл?

Именно в этом случае скролл дает grid-template-rows: 1fr 2fr; у контейнера * { margin: 0px; padding: 0px; } a { text-decoration: none; } html { width: 100%; height: 100%; } ...
Maneken's user avatar
  • 569
1 голос
Принятый

Как корректно отобразить данные из файла json на HTML странице ( переключая значения на самой html странице)

Завести переменную data. При погрузке данных с файла их закинуть в переменную. И добавить динамически option справильными атрибутами в select Повесить слушателя (addEventListener) на select на ...
Алексей Шиманский's user avatar
0 голосов
Принятый

При обновлении страницы ошибка 404

Если кто-то тоже столкнулся с такой проблемой на github pages, то отловить такую ошибку можно создав в корне проекта файл 404.html, теперь дефолтная страница заменится на кастомную, в которой можно ...
Тыква's user avatar
0 голосов

Не работает SlickSlider в Chrome

Возможно, проблема заключается в путях к файлам, которые используются в вашем слайдере. Когда вы запускаете сайт VSCode, сервер раздает файлы с помощью локального хоста, и пути к файлам будут ...
GHOSTxOFxDONBASS's user avatar
1 голос

как изменить размер linear-gradient

Я думаю более корректно делать такой эффект через псевдоэлемент ::before (или ::after). У вас расширяло шире текста, ибо вы давали background для span, а у него имелся padding, я его перенес на a, не ...
Oliver Patterson's user avatar
0 голосов
Принятый

justify-content: space-around; - как при нечетном количестве блоков выставить последний элемент под левый блок над ним?

Извините, наверное не в тему, так как нужно было на flex решить, но на grid легче)). Если нужно, что бы блоки зелёные занимали большую площадь, нужно просто вместо 2fr сделать 3fr например. На flex ...
Евгений Ли's user avatar

50 лучших ответов включены