20.03.2019, 14:52
|
 |
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Сообщение от laimas
|
|
выбран класс exsample, не нравится, замените на иной, это не важно.
|
Вот и я говорю что не важно, в этом вопросе наши мнения совпадают |
|
20.03.2019, 22:21
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Народ, у кого есть немного времени и кто поможет разобраться с этой страницой?
правда я не до конца разобралась как правильно сформулировать вопрос, но попробую
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #f0f0f0; border: 1px solid #999; width: 720px; padding: 15px; margin-bottom: 10px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
#a { border-radius: 50px 0 0 50px; }
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }
</style>
</head>
<body>
<pre><code>
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="utf-8"><br>
<title>border-radius</title><br>
<style><br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
</style><br>
</head><br>
<body><br>
<div class="radius"></div><br>
</body><br>
</html>
<code/></pre><br>
<div id="a" class="radius"><span id="a1">border-radius: 50px 0 0 50px;</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
<script>
var radius = ['50px 0 0 50px', '40px 10px', '13em/3em', '13em 0.5em/1em 0.5em', '8px'], step = 0;
document.querySelector('.radius').addEventListener('click', function() {
step = ++step % 5;
this.style.borderRadius = radius[step];
document.querySelector('#a1').textContent = 'border-radius: ' + radius[step] + ';';
})
</script>
</body>
</html>
нужен массив не готовых значений, а массив названий ид'ов, что-то наподобие
var idname = ['a', 'b', 'c', 'd', 'e']
вместо var radius
дальше нужна переменная например
var classname
значения эти надо скопировать из контейнера <code>,
а дальше значения эти надо сложить вместе, но чтобы при клике на див значения стилей переменной класса было постоянным, а значения стиля для ид'а менялось по кругу при клике на див.
очень надеюсь что поймут что я пытаюсь сказать
|
|
21.03.2019, 09:25
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
ясно, я просто не могу правильно сформулировать
|
|
21.03.2019, 14:46
|
 |
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
ясно, я просто не могу правильно сформулировать
|
Я понял, вас. Я не знаю, почему вам именно так надо.
Посмотрите такой вариант с вашими значениями длин радиусов углов...
<style>
input, select {
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
border: 1px solid transparent;
background: transparent;
font: inherit;
box-sizing: content-box;
min-width: 1em;
}
input:focus, select:focus {
border: 1px solid silver;
background: white;
}
body {
text-align: center;
}
#code {
font: 144% monospace;
padding: 1em;
margin: 2em 0;
text-align: left;
display: inline-block;
background: blanchedalmond;
}
#code label {
display: block;
color: slategray;
}
#code label:after {
content: ";";
}
#test {
margin: auto;
background: red;
background: #f0f0f0;
border: 1px solid #999;
}
</style>
<div id="test"></div>
<section id="code">
<label>
border-radius:
<select id="border-radius" value="10% / 30px">
<option>50px 0 0 50px</option>
<option>40px 10px</option>
<option>13em / 3em</option>
<option>13em 0.5em / 1em 0.5em</option>
<option>8px</option>
</select></label>
<label>
width:
<input id="width" value="420px"></label>
<label>
height:
<input id="height" value="100px"></label>
</section>
<p><strong>Совет:</strong> Нажмите на значение CSS, чтобы изменить его.</p>
<script>
Array.prototype.forEach.call(document.querySelectorAll("input, select"), function(element) {
(element.oninput = element.onchange = function() {
element.style.width = element.value.length + "ch";
document.getElementById("test").style[element.id] = element.value;
})();
});
</script>
Последний раз редактировалось Malleys, 21.03.2019 в 15:19.
|
|
21.03.2019, 19:08
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Malleys, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,
скрипт выше почти полностью отвечает нужным требованиям, но не учитывает пару моментов,
насколько я понимаю, надо создать четыре переменных, первая будет хранить стиль класса див'а, вторая стиль ид'а див'а, третья стиль класса спан'а, четвертая стиль ид'а спан'а, также надо создать массив с именами ид'ов див'а, и все эти значения надо скопировать с контейнера с кодом, а потом просто сложить стиль класса и ид'а див'а и подставить в див, также со спаном(если конечно такие имеются), а потом просто при клике менять значения радиуса исходя из того что скопировано из контейнера с кодом, вот сценарий который должен выполнять скрипт, стили в head не имеют никакого отношения к див'у-демонстратору, надеюсь что рано или поздно я смогу на словах объяснить хоть что нибудь.
|
|
21.03.2019, 19:17
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
Вот я для образца добавила стили спану, и присвоила ид контейнеру с кодом, ниже </html> буквально на пальцах поясняется что должно получиться
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<style>
div { background: #a6ffff; border: 1px solid #3232cc; width: 90%; padding: 10px 35px; margin-bottom: 1em; }
</style>
</head>
<body>
<pre><code id="code-1">
<!DOCTYPE html><br>
<html><br>
<head><br>
<meta charset="utf-8"><br>
<title>border-radius</title><br>
<style><br>
.radius { background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; }<br>
#a { border-radius: 50px 0 0 50px; }<br>
#b { border-radius: 40px 10px; }<br>
#c { border-radius: 13em/3em; }<br>
#d { border-radius: 13em 0.5em/1em 0.5em; }<br>
#e { border-radius: 8px; }<br>
.span_bold { font-weight: bold; }<br>
#span_ital { font-style: italic; }<br>
</style><br>
</head><br>
<body><br>
<div class="radius"></div><br>
</body><br>
</html>
<code/></pre><br>
<div style="сюда надо вставить значения стилей класса плюс ид'а из контейнера с кодом"><span style="сюда надо вставить значения стилей класса плюс ид'а из контейнера с кодом">сюда надо вставлять значения стиля которые меняются при клике на див</span></div>
Нажмите на блок чтобы посмотреть как изменится радиус углов при разных значениях.
</body>
</html>
див должен стать таким, и при клике по нему (без кнопки) должен меняться по кругу, тоесть 1,2,3,4,5 и опять 1
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 40px 10px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 40px 10px;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em/3em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em/3em;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 13em 0.5em/1em 0.5em;"><span style=" font-weight: bold; font-style: italic;">border-radius: 13em 0.5em/1em 0.5em;</span></div>
<div style="background: #f0f0f0; border: 1px solid #999; width: 420px; padding: 15px 25px; margin-bottom: 10px; border-radius: 8px;"><span style=" font-weight: bold; font-style: italic;">border-radius: 8px;</span></div>
|
|
21.03.2019, 21:02
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Блин, неужели опять непонятно сформулировала? или форум вымер, люди ау, есть хоть кто нибудь ?
|
|
21.03.2019, 22:17
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
Почему бы исходные данные не хранить в объекте, который легко прочитать, и уже из него данные вставлять в <code> и в пример?
|
Сообщение от Блондинка
|
|
Malleys, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,
|
Как не то? Именно это оно и показывает! Я думал, вы поняли идею!
|
Сообщение от Блондинка
|
|
это... будет... учебник по html и css
|
Ну в таком виде он вряд ли будет, если вы будете каждые свойство, дескриптор, @-правило, селектор, функции таким образом описывать, то вы очень скоро потеряете контроль над вашим проектом, допустим даже потом, когда всё будет готово по вашему методу, даже добавить ещё какой-то пример выльется в массовое редактирование файлов.
Да, такое приложение возможно сделать только на HTML, CSS, JS, но только у вас всё должно происходить на одной странице. И вы должны начать хотя бы с описания данных к каждому свойству, например в формате JSON, что бы не было проблем с извлечением данных!
Я предлагаю вам такое Чистые данные → Интерфейс, вы почему-то опять выбираете самое сложное и многословное Интерфейс → данные → Интерфейс
|
Сообщение от Блондинка
|
|
Есть <div id="a1"><span id="b1">text one</span></div> как сделать чтобы при клике на див менялось на <div id="a1"><span id="b1">text two</span></div> а при повторном клике вернулось обратно? Одним словом словом чтобы при клике менялось туда-обратно.
|
Такой метод не очень для учебника, неторое свойства имеют много значении, и чтобы что-то сравнить, придётся прощёлкивать весь список.
|
Сообщение от Блондинка
|
|
text-align описывается это свойство и надо показать что будет если изменить значение с left на right и только, ну это разумеется пример,
|
Вы хотите сделать программу, в которой можно смотреть, какие бывают у CSS своиств значения, и как они воздействуют на элемент? 🆒🤓 😎💡 👍
|
Сообщение от laimas
|
|
обсуждение по ротации id среди элементов
|
юморист
|
Сообщение от Блондинка
|
|
первый как присвоить стиль диву и заполнить <span>, а потом при клике менять
|
В контексте того, что вы делаете учебник, то я думаю, что скорей нужен живой ввод с подсказками!
|
Сообщение от Блондинка
|
|
как преобразовать нормальный код в мнемонику "кавычки"
|
Используйте textContent для вставки текста пример на страницу. Можно ещё так "<p>Пример абзаца</p>".replace(/<>&"'/g, "<>&"); если вы хотите вставить пример через innerHTML. Вопрос: Какой вариант вы выберерете?
|
Сообщение от Блондинка
|
|
решить вопрос с подсветкой кода
|
prism.js
|
Сообщение от Блондинка
|
|
и присвоить стиль ид'а "а" а спан заполнить свойством ид'а "а", как показано в 36 строчке, (36 строчки конечно небудет) и при клике на див поменять свойства дива и текст спана взятые у ид "b" и так по кругу, зачем кнопки если сам див может играть роль кнопки.
|
Если вы хорошо знаете, что для смены стиля нужно нажать на пример, так это потому что вы его сами сделали, и знаете, куда нажать. Те, кто будет это смотреть, не знают, что туда можно нажать. Кнопка нужна, она приглашает к действию!
|
Сообщение от Блондинка
|
|
скрипт должен найти в контейнере <code>
|
Может стоит начать с чистых данных, тогда не придётся ничего искать!
|
Сообщение от Блондинка
|
|
просто речь идет не про одну страницу, а про много страниц
|
Так делайте всё на одной странице.
|
Сообщение от laimas
|
|
пишите код каждой страницы от руки
|
то пишите, то не пишите, а если я не разбираюсь ещё так хорошо, то откуда мне знать, что потом делать с таким кодом. Про пост №74, так это все примеры придётся руками так набирать, или как?
Последний раз редактировалось Malleys, 21.03.2019 в 22:49.
|
|
21.03.2019, 23:17
|
|
Профессор
|
|
Регистрация: 24.02.2019
Сообщений: 806
|
|
|
Да, я буду вручную описывать все свойства, разумеется что я буду брать и копипастить уже готовые статьи, но корректировать, более детально описывая те моменты на которых я спотыкалась, что я поняла не с первого прочтения,
я выбираю такой путь потому что уверена, в случае чего я смогу со своими знаниями яваскрипт равными 10^-100, подправить скрипт под нужный сценарий, и сейчас предусмотрены практически все ньюансы
одним словом надо именно такой скрипт, и неважно год или два пройдёт до завершения писанины учебника.
|
|
22.03.2019, 00:00
|
|
Профессор
|
|
Регистрация: 20.12.2009
Сообщений: 1,714
|
|
|
Сообщение от Блондинка
|
|
сейчас предусмотрены практически все ньюансы
|
На самом деле нет, то как вы хотите, требует подключения CSS-парсера, а это явно сложнее. |
|
|
|
