Category: CSS

28
Мар
2020

Исправить стилизованный select на js

Нашел на просторах интернета код стилизации select, немного подправил стили под себя, но столкнулся в одной задачей и не могу ее исправить. Нужно чтобы по умолчанию был активен первый option, но данный код его полностью выбрасывает. Что ну…

28
Мар
2020

Скроллинг страницы мышкой при нажатии на страницу

Как можно реализовать скроллинг страницы мышкой? А именно возможно ли, нажимая левую клавишу мышки на странице и не отпуская ее (клавишу), передвигать страницу вверх и вниз? Спасибо!

28
Мар
2020

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

У меня есть элемент на странице, когда я до него скролю, я хочу чтобы я остановился прямо перед ним. Однако, если я начинаю скролить от начала страницы, то к тому моменту когда я дошел до этого элемента, я либо не доскролил немного, или же…

28
Мар
2020

После удаление динамического элемента HTML блокируется взаимодействие со всей страницой

В HTML динамически добавляется элемент, которы ложится поверх всего содержимого сайта. После закрытия этого элемента(окна) он удаляется из HTML, больше не отображается, но взаимодействовать с сайтом не получается, то есть ссылки, кнопки пр…

28
Мар
2020

Нестандартная последовательность размещения блоков на странице

Как разместить блоки в такой последовательности, как указано на картинке? Любые методы приветствуются, в том числе и JavaScript, с помощью которого вероятнее всего и возможно такое размещение блоков. Или все гораздо проще?

27
Мар
2020

Как с помощью скрипта добавить класс первому слову в абзаце?

Как с помощью скрипта добавить класс первому слову в абзаце?

<p>Спорт приносит большую радость. Люди ходят в секции, посещают спорт – клубы, играют в спортивные игры, закаляются и общаются с новыми людьми. Спортивные командные игр…

27
Мар
2020

Как сделать кликабельную карту из файла SVG?

В настоящее время я изучаю Javascript.

Я пытаюсь составить кликабельную карту Германии с данными. Такую, как эта.
Amchart предоставляет карту Германии в файле SVG. Но это не похоже на тот пример, что выше.

У меня есть некоторые да…

26
Мар
2020

Виртуальный манипулятор (джойстик) на JS

Для проекта требуется создать эмулятор джойстика, чтобы при определенном положении манипулятора серверу отсылалась определенная команда, исходя из X и Y координат.

Серый квадрат в левом верхнем углу и есть сам манипулятор. Он должен нах…

26
Мар
2020

Как сделать размытие фона в CSS с помощью одной строки кода

От автора: фоновые размытые изображения — это круто. Это неоспоримый факт. В каждом пользовательском интерфейсе должно быть не менее десяти фоновых размытых изображений (желательно наложенных друг на друга), и каждый интерфейс, созданный с самого зарождения всемирной паутины, который не содержит фоновых размытых изображений, должен быть переработан в первую очередь. Это правда. Разработчики любят, когда вы […]

25
Мар
2020

Вёрстка сайта слайдера

С помощью каких плагинов можно сделать сайт похожим на этот .

Думаю тут можно использовать slick-slider только сделать так, чтобы он реагировал на scroll и swipe, но как сделать меню которое есть на этом сайте (прилаживаю картинку)?

25
Мар
2020

Как проверить имя и фамилию через одну функцию

https://jsfiddle.net/gej9582z/

есть функция validName . она проверяет имя и фамилию на валидность. В параметре nameID передается id инпута (‘surname’ или ‘name’). То что не прошло валидацию получает класс incorrect-forms (добавляется крас…

25
Мар
2020

Как создать липкий футер с помощью flexbox

От автора: создание липкого футера является одной из самых распространенных задач веб-разработки, которую вы легко можете решить с помощью flexbox. Без липкого футера, если у вас недостаточно содержимого на странице, футер «подпрыгивает» до середины экрана, что может полностью испортить взаимодействие с пользователем. До появления flexbox разработчики использовали отрицательные поля, чтобы заставить нижний колонтитул опускаться до […]

25
Мар
2020

CSS Import

От автора: каскадные таблицы стилей (CSS) являются основой дизайна большинства веб-сайтов. Он описывает, как элементы должны отображаться на экране. Именно здесь в игру вступает правило CSS @import . Правило @import указывает движку CSS импортировать внешнюю таблицу стилей в другую таблицу стилей. Это позволяет добавлять правила стилей из таблицы стилей в другую таблицу. Это правило также […]

24
Мар
2020

JS Таймлайн с привязанными к нему данными

хотел бы спросить, вот наткнулся на такой сайт как этот https://shamir.localtimeline.com/index.php?lang=he#

кто-нибудь знает, чтобы сделать такой таймлайн, с привязанными к нему данными, нужно писать свои костыли или же есть какие-то библ…

24
Мар
2020

Подсветка пункта меню именно в тот момент, когда до него проскролили

Подскажите, пожалуйста, как мне сделать так, чтобы активный (выбранный пункт меню) подсвечивался непосредственно при выполнении определенного условия (когда проскролились до нужного элемента). Условие я задам потом сама, на данный момент ф…

24
Мар
2020

Простой калькулятор

Почему не работает калькулятор ?

“use strict”;
function CalcNumbers(result){
document.getElementById(“input”).innerHTML=document.getElementById(“input”).innerHTML+result;
}
.calculator{
width: 500px;
background: #F08080;

24
Мар
2020

проблема в работе jQuery [закрыт]

всем привет. Подключил jQuery к HTML, но ничего не работает, когда добавляю $ или jQuery. Для проверки написал alert(‘привет’); – оно работает.
Я прикрепил коды, и по логике, так всё должно работать. Но на страничке не появляется ссылка “…

24
Мар
2020

4 способа анимировать цвет текстовой ссылки при наведении

От автора: давайте создадим эффект на чистом CSS, который меняет цвет текстовой ссылки при наведении… но цвет будет меняться постепенно, а не сразу. Для этого мы можем использовать четыре различных метода. Давайте рассмотрим их, помня о важных вещах, таких как доступность, производительность и поддержка браузерами. Техника 1: Использование background-clip: text На момент написания статьи background-clip: […]

24
Мар
2020

Скролл к секциям, совместно со скроллом слайдов

Всем привет, есть код плавной прокрутки к секциям, по сути прокручивает только 3 секции со всей страницы, но на второй секции есть слайдер, когда прокручиваешь к слайдеру, сначала должны пролистать слайды, только потом скролл должен идти н…

23
Мар
2020

Как создать параметры для текста в JS

В первом input user пишет что то и при нажатии на publish отображается результат в h1
во втором input пишется размер текста например 15px
в третьем – font-family
в четвертом – цвет текста
в пятом – background-color
нужно чтобы при клике se…

23
Мар
2020

Не работает меню на мобильной версии

Уже какой день не могу решить данный вопрос, кому не сложно помогите.

Проблема такова, подменю в ПК версии работает стабильно. Как только перехожу на мобильную версию и хочу открыть sub-menu чтобы выбрать любой под-пункт, меня пересылает…

23
Мар
2020

Пересечение текста линией в CSS

От автора: в начале этого года я наткнулась на это демо от Флорина Попа, в нем линия проходит либо поверх, либо позади букв заголовка. Я подумала, что это крутая идея, но в реализации было несколько мелочей, которые я могла бы упростить и улучшить одновременно. Во-первых, в оригинальной демо-версии текст заголовка дублируется, чего, как я знала, […]

23
Мар
2020

Как создать подобный эффект

Меня заинтересовал подобный эффект дыма, под которым находится изображение, см здесь. Если не ошибаюсь, это разновидность параллакс эффекта. Каким образом это можно реализовать ? Может есть какие то готовые либы ?

Буду рад за любую помощь…

22
Мар
2020

Проблема с анимацией @vaadin/router

Резко встала проблема анимации переходов с использованием @vaadin/router. Когда пользователь переходит по роутам срабатывает типичный fadeOut и fadeIn, но возникают проблемы из-за позиционирования – #outlet выпадает из основного контейнера…