Новые ответы с меткой html5
0
Не знаю насколько это приветствуется. Но мне проще и короче так делать.
function add_note() {
let section = document.getElementById("all_notes");
let textarea = document.querySelector('textarea');
let html = `<div class="note"><p class="text_of_note">${textarea.value}</p></div>`;
section.innerHTML = section.innerHTML+...
1
Вообщем получилась достаточно трудоемкая работа над этой проблемой. Выяснилось что действительно это повторяется только на iOS любых версий (тестилось от 9 до 14). При кешировании видео появлялась блокировка UI.
В результате был создан новый компонент в котором кеширование было перенесено в код компонента.
После чего была проблема с воспроизведением Blob ...
1
Вы получаете элемент <textarea>...
var textarea = document.querySelector('textarea');
и пытаетесь его вставить в текстовый узел:
var text_for_text = document.createTextNode(textarea);
А нужно, из полученного элемента, извлечь его значение (value):
var text_for_text = document.createTextNode(textarea.value);
function add_note() {
var section = ...
3
Немного подправил. Далее можете стилизовать выделение на свой вкус:
const form = document.querySelector('.testForm');
const search1 = document.querySelector('#search1');
const text = document.querySelector('.text');
const hl = document.querySelector('.hl');
form.addEventListener('input', function(e) {
let search = search1.value.replace(/([\[\\\^\$\.\|\...
2
Думаю вы хотите так.
.dv-valute-changer-container {
display: grid;
grid-template-columns: repeat(5, 1fr);
grid-column-gap: 5px;
grid-row-gap: 5px;
box-sizing: border-box;
}
.dv-valute-changer-container>div {
background: silver;
color: white;
cursor: pointer;
box-sizing: border-box;
}
<div class="dv-valute-...
0
Первые блоки (точнее, таблицы) находятся внутри еще одной таблицы-обертки (с классом main-table), которая формирует ширину центральной колонки.
1
Тогда вот так:
body,
html {
width: 100%;
height: 100vh;
margin: 0;
padding: 0;
overflow: hidden;
}
.bg {
width: 100%;
height: 100vh;
overflow-x: auto;
overflow-y: auto;
}
.bg-location {
width: 1680px;
height: 940px;
background: #fff url("https://i.stack.imgur.com/bKuUl.jpg") no-repeat;
}
<div class="bg">
<div class="...
ответ дан 4 мар в 10:55
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
css
.wrapper {
display:flex;
justify-content:space-around;
align-items:center;
padding: 20px;
}
.S2 {
color: gray;
font-family: calibri;
display: flex;
flex-wrap: wrap;
justify-content: center;
width:100%
}
.text {
text-align:...
1
Без html сложновато.
Но по факту вам нужно ограничение на ширину убрать у блоков.
Вижу у вас у вропперов width:800px;
1
В подключениях у Вас, конечно, фарш полный: зачем-то два раза подключен jquery-3.5.1.slim.min.jsи одновременно bootstrap.bundle.min.js + bootstrap.min.js.
Но не работает меню не поэтому. У Вас data-toggle="callapse" с ошибкой написан - надо collapse. И пусто в data-target="#" - здесь после октоторпа надо указывать id скрытого меню, в ...
0
// навешиваем обработчики клика после события загрузки страницы,
// иначе скрипт может не найти элементы, на которые нужно повесить клики
window.addEventListener('load', () => {
console.log('load');
// находим все элементы с классом next1,
// преобразуем в массив и кладем в переменную
var next = [...document.getElementsByClassName("next1")];
/...
1
Сашенька, если я правильно понимаю задачу, то вот, смотри. Если что-то непонятно, то задавай вопросы, постараюсь тебе помочь.
Дополнительно рекомендую почитать:
Псевдоэлемент :before
Псевдоэлемент :after
body {
background: url(фон/1.jpg) fixed no-repeat;
background-size: 100%;
}
span {
display: block;
font-size: 18pt;
}
.Text1::first-letter {
...
ответ дан 28 фев в 10:00
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
Искал варианты на эту тема,
Вариант скрывать в оном месте и показывать блок вниз, но это дублирование кода, что не есть хорошо.
Нашел решение динамический адаптив на Javascript называется, когда ты с помощью JS вырезаешь блок из одного места, при определенном расширении экрана, и вставляешь в другое место.
Вот видео на тему https://www.youtube.com/watch?v=...
0
Насколько я понял тебе надо дописать в стили к классу block следующее
.blok {
display: flex;
justify-content: space-around;
align-items: center; //если центровка не надо - убери
}
4
Анимации заполнением градиентом окружности
Анимация заполнения происходит синхронно с движением минутной стрелки
#1. Вариант решения SVG
Пояснения, что, где анимируется смотрите в комментариях к коду
Анимация начинается после клика
#back {
fill:#FCFCFC;
stroke:#CBD8E6;
stroke-width:14;
}
#progress {
fill:none;
stroke:#FFF3F3;
stroke-width:6;
stroke: url(...
ответ дан 26 фев в 16:40
Alexandr_TT
84.9k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
5
Градиент нужно применить не к фону, а к строке окружности, поэтому ваш градиент CSS преобразовываем в SVG linearGradient.
<linearGradient id="lg">
<stop offset="7.15%" stop-color="#FF5FF4" />
<stop offset="19.03%" stop-color="#E669F4" />
<stop offset="44.32%&...
ответ дан 26 фев в 16:00
Alexandr_TT
84.9k1818 золотых знаков8686 серебряных знаков251251 бронзовый знак
0
Еще можно вот тут включить автодополнение, но оно попроще будет чем в видео.
0
Помещаете контейнер внутрь хедера:
<header>
<div class="container">
//здесь весь контент хедера
</div>
</header>
ответ дан 24 фев в 12:22
humster_spb
11.3k11 золотой знак1515 серебряных знаков3939 бронзовых знаков
0
Всё прекрасно работает, проверяйте. Причина, почему у вас не работало, понятна и проста - это незакрытая скобка. Поэтому нужно быть внимательнее при написании кода.
Дополнительно еще вам необходимо поработать с отступами, чтобы добиться правильного отображения страницы.
@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@700&display=...
ответ дан 23 фев в 11:42
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
Вот решение:
var btn = document.querySelector(".btn");
btn.onclick = function() {
var elems = document.getElementsByClassName('form1');
for (var i = 0; i < elems.length; i++) {
if (elems[i].style.display != "block") {
btn.textContent = "Скрыть";
elems[i].style.display = "block";
} else {
elems[i].style.display = "none";
...
ответ дан 22 фев в 22:46
Sevastopol'
23.1k1111 золотых знаков5757 серебряных знаков112112 бронзовых знаков
0
Не вникая в логику расчётов, могу предложить такую функцию, принимающую двухмерный массив и возвращающую HTML таблицы, который потом можно вставить в нужное место через Element.insertAdjacentHTML() (можете нажать на кнопку «Выполнить код» и посмотреть результат):
const array = [
[1, 0, 0, 1, 0, 0, 0, 1],
[0, 0, 1, 0, 0, 1, 1, 0],
[0, 1, 0, 0, 1, 0, ...
ответ дан 21 фев в 10:35
vsemozhebuty
8,47222 золотых знака77 серебряных знаков1515 бронзовых знаков
3
parent.insertAdjacentText("afterbegin", item); — здесь вторым аргументом ожидается строка, а вы передаёте элемент, поэтому он и преобразовывается в строку. Может, вы имели в виду insertAdjacentElement?
ответ дан 19 фев в 21:52
vsemozhebuty
8,47222 золотых знака77 серебряных знаков1515 бронзовых знаков
1
"Грязный хак" - просто скрыть лишнее:
var canvas = document.getElementById("printable-area");
var ctx = canvas.getContext('2d')
ctx.fillStyle = 'red'; ctx.fillRect(100, 100, 170, 170);
ctx.fillStyle = 'blue'; ctx.beginPath();
ctx.ellipse(350, 180, 100, 100, Math.PI / 2, 0, 2 * Math.PI);
ctx.fill();
function createRectangle() {
ctx.fillStyle ...
0
в самой верстке эта высота при таком же размере шрифта почему-то уже
является 49px
Потому что не задан line-height. Он берется из браузера, где по дефолту что-нибудь вроде 1.2em стоит.
отступ padding в классе .promo почему то не применился на вложенные элементы контейнера
Паддинги не наследуются.
1
Изменять свойство display не стоит. Зачем тогда использовать таблицу?
Моё решение такое:
tbody {
border-radius: 4px;
box-shadow: 0 0 1px #000;
}
Пример: https://codepen.io/madebydima/pen/KKNmBxR
.table_block td {
padding: 10px;
}
.table_block tbody {
border-radius: 10px;
box-shadow: 0 0 1px #000;
}
<table class="table_block">
<...
3
сделал код который требует минимум тегов, чтобы не захламлять
настройку цветов и шрифтов вы уж сами
.progress {
display: flex;
flex-direction: column;
justify-content: space-between;
width: 36px;
height: calc(72px * 5);
font-size: 0;
margin-top: 50px;
}
.progress div {
position: relative;
...
50 лучших ответов включены
Связанные метки
html5 × 3729html × 1655
css3 × 1589
css × 1542
javascript × 1419
jquery × 419
вёрстка × 232
svg × 219
php × 197
canvas × 163
bootstrap × 114
css-animation × 100
веб-программирование × 93
video × 71
анимация × 61
flexbox × 57
ajax × 39
адаптивная-верстка × 36
svg-animation × 35
аудио × 34
wordpress × 30
frontend × 27
bootstrap4 × 25
input × 24
android × 21