-
Similar Content
-
By cozy_eternity
Столкнулся с проблемой показа скрытых элементов. Ставлю div'у display:none и при выборе radio кнопки, div должен отображаться, но этого не происходит, прошу помочь..
<label>Нужны ли распашные дверцы?</label> <p><input type="radio" name="swing" onclick="ShowElement1">Да</p> <p><input type="radio" name="swing">Нет</p> <div id="swing"> <p><label>Введите размер ячеек:</label></p> <p>Высота<input type="number"></p> <p>Ширина<input type="number"></p> <p>Глубина<input type="number"></p> </div> #swing { display: none; } function ShowElement1(){ document.getElementById("swing").style.display='block'; } Разобрался
-
By Alex_st22
Здравствуйте, пытаюсь сделать небольшой редактор. Сначала нажимается кнопка на html-странице, потом заполняется форма с параметрами графоэлемента (иконы), эти параметры считывает скрипт, передаёт их в другую функцию. Та формирует код HTML с тегом svg и вставляет в блок draw. В этом деле вообще начинающий, ещё в голове путаница с расположением элементов, паддингами и т.п. А проблема, что после исполнения скрипта ничего не происходит, иногда на секунду мелькает что-то похожее, но в целом результата нет.
Код
HTML:
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="utf-8">
<title>Иконы</title>
<link rel="stylesheet" href="style.css">
</head>
<body>
<div class="open-button">
<button onclick="openForm()">Открыть форму</button>
</div>
<div class="form-popup" id="IconForm">
<form class="form-container">
<h1>Параметры иконы</h1>
<label for="bordercolor"><b>Цвет границы</b></label>
<select id='select_bc' size='1'>
<option value='#000'>Чёрный</option>
<option value='#00f'>Синий</option>
<option value='#f00'>Красный</option>
<option value='#0f0'>Зелёный</option>
</select>
<p></p>
<label for="background"><b>Цвет фигуры</b></label>
<select id='select_bg' size='1'>
<option value='#fff'>Белый</option>
<option value='#bbf'>Синий</option>
<option value='#fbb'>Красный</option>
<option value='#bfb'>Зелёный</option>
</select>
<p></p>
<label for="fontcolor"><b>Цвет текста</b></label>
<select id='select_fc' size='1'>
<option value='#000'>Чёрный</option>
<option value='#00f'>Синий</option>
<option value='#f00'>Красный</option>
<option value='#0f0'>Зелёный</option>
</select>
<p></p>
<label for="text"><b>Содержание фигуры</b></label>
<textarea id="text_in" cols="20" rows="3"></textarea>
<button type="submit" class="btn" onclick="return acceptArgs()">Принять</button>
<button type="submit" class="btn cancel" onclick="return closeForm()">Закрыть</button>
</form>
</div>
<div id="Draw"></div>
<script type="text/javascript" src="script.js"></script>
</body>
</html>
CSS:
{box-sizing: border-box;}
/* Кнопка, используемая для открытия формы */
.open-button {
background-color: #555;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
opacity: 0.8;
position: fixed;
width: 280px;
}
/* Всплывающая форма-скрыта по умолчанию */
.form-popup {
display: none;
position: fixed;
border: 3px solid #f1f1f1;
z-index: 9;
}
/* Добавить стили для контейнера формы */
.form-container {
max-width: 300px;
padding: 10px;
background-color: white;
}
/* Поля ввода полной ширины */
.form-container input[type=text], .form-container input[type=password] {
width: 100%;
padding: 15px;
margin: 5px 0 22px 0;
border: none;
background: #f1f1f1;
}
/* Когда входы получают фокус, сделайте что-нибудь */
.form-container input[type=text]:focus, .form-container input[type=password]:focus {
background-color: #ddd;
outline: none;
}
/* Стиль для кнопок */
.form-container .btn {
background-color: green;
color: white;
padding: 16px 20px;
border: none;
cursor: pointer;
width: 100%;
margin-bottom:10px;
opacity: 0.85;
}
/* Красный цвет фона для кнопки "Отмена" */
.form-container .cancel {
background-color: red;
}
/* Добавить некоторые эффекты наведения на кнопки */
.form-container .btn:hover, .open-button:hover {
opacity: 1;
}
JS:
function openForm() {
document.getElementById("IconForm").style.display = "block";
}
function closeForm() {
document.getElementById("IconForm").style.display = "none";
return false;
}
function drawIcon(bc, bg, fc, text) {
var svg = '<svg> <rect rx="32.8" ry="18.3" x="500" y="500" height="55" width="99" ';
svg += 'fill="'+ bg + '" stroke="'+ bc +'" stroke-width="2px" />';
svg += '<text x="50%" y="50%" dominant-baseline="middle" text-anchor="middle" fill='+fc+";'>";
svg += text + "</text></svg>";
alert(svg);
document.getElementById('Dragon').innerHTML += svg;
return true;
}
function acceptArgs() {
var bc = document.getElementById("select_bc");
bc = bc.options[bc.selectedIndex].value;
var bg = document.getElementById("select_bg");
bg = bg.options[bg.selectedIndex].value;
var fc = document.getElementById("select_fc");
fc = fc.options[fc.selectedIndex].value;
var text = document.getElementById("text_in").value;
closeForm();
drawIcon(bc, bg, fc, text);
}
-
By minvareg
Добрый день!
Как сделать наследование при описании класса? Именно при описании, а не родитель -дочерний элемент.
Т.е. есть div.Class1 {тут куча всего}
Этот класс не используется напрямую, но от него наследуются два класса, т.е. должно получится
div.Class2 {border: 1px solid red;} + то, что я определил в Class1
div.Class3 {border: 1px solid black;} + то, что я определил в Class1
Т.е. Class 1 сделан чтоб просто чтоб не дублировать одно и тоже при описании Class2 и Class3
Надеюсь, суть вопроса ясна 🙂
Спасибо
-
-
Member Statistics
47,165
Total Members1,451
Most Online
-
Recently Browsing 0 members
No registered users viewing this page.
-
Свежие Темы
-
-
Последние сообщения
-
А давайте все возьмем MS Edge на базе Chromium и начнем делать нормальные PWA, которые устанавливаются в систему. FF сознательно сломал всю свою экосистему переписав CSS на Rust. Это говно не только глючить начало, но и тормозить. У нас есть общепринятый Webkit, который работает на Chromium и Safari. Что еще нужно? Не смотрите вообще на FireFox. Те кто гикает на Linux - нормальными не считаются. Linux - серверам, Windows - десктопам. Люди покупают чаще ПК или ноутбук с предустановленной Windows, а там стоит нормальный себе Edge, который уже не нуждается ни в каких извращениях. Зачем понимать Java и изучать отдельные извращенства на React, Vue или Angular, если можно сделать то же Progressive Web Application просто на том же jQuery или чистом JS? Выбор очевиден. Не имеет смысла даже рассказывать что все разработчики всех браузеров работают по одной программе. Я вот забил бы на вашем месте выяснять почему так с FireFox - я бы просто по башке Mozilla настучал и выгнал их исправлять ошибки. Никто ведь про их браузер из нормальных людей ни чего даже не знает. Его никто не устанавливает так как первым делом русские лезут на Яндекс или Mail и скачивают тот же хромиум в стрингах. А еще раньше они берут в руки свой Android, а там просто Chrome на любом устройстве. Не воскрешайте труп пожалуйста. -
By Igor Schnaider · Posted
Скорее всего, особенности работы движка. Firefox принимает естественную, а не действительную ширину изображения. Из-за этого и распирает обертку. Тут ведь цикличная зависимость получается: высота изображения зависит от контейнера → изображение вычисляет ширину с учетом соотношения сторон → контейнер должен получить теперь эту ширину. WebKit или какие там сейчас движки, по-видимому, пересчитывают эту ширину (последний этап), FF – нет. Как исправить? Зависит от задачи. Для чего вам эта обертка нужна. Используется ли как-то? Как вариант, позиционировать само изображение... Повторю, зависит от контекста задачи. -
-
-
Popular Contributors
Nobody has received reputation this week.
Recommended Posts
Join the conversation
You can post now and register later. If you have an account, sign in now to post with your account.
Note: Your post will require moderator approval before it will be visible.