Цитата:
|
Народ, у кого есть немного времени и кто поможет разобраться с этой страницой?
правда я не до конца разобралась как правильно сформулировать вопрос, но попробую
<!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>, а дальше значения эти надо сложить вместе, но чтобы при клике на див значения стилей переменной класса было постоянным, а значения стиля для ид'а менялось по кругу при клике на див. очень надеюсь что поймут что я пытаюсь сказать |
ясно, я просто не могу правильно сформулировать
|
Цитата:
Посмотрите такой вариант с вашими значениями длин радиусов углов...
<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, сорри, не то, это как бы будет типа учебника по html и css, контейнер с кодом даёт пример кода, а див визуально показывает что обозначает этот код,
скрипт выше почти полностью отвечает нужным требованиям, но не учитывает пару моментов, насколько я понимаю, надо создать четыре переменных, первая будет хранить стиль класса див'а, вторая стиль ид'а див'а, третья стиль класса спан'а, четвертая стиль ид'а спан'а, также надо создать массив с именами ид'ов див'а, и все эти значения надо скопировать с контейнера с кодом, а потом просто сложить стиль класса и ид'а див'а и подставить в див, также со спаном(если конечно такие имеются), а потом просто при клике менять значения радиуса исходя из того что скопировано из контейнера с кодом, вот сценарий который должен выполнять скрипт, стили в head не имеют никакого отношения к див'у-демонстратору, надеюсь что рано или поздно я смогу на словах объяснить хоть что нибудь. |
Вот я для образца добавила стили спану, и присвоила ид контейнеру с кодом, ниже </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>
|
Блин, неужели опять непонятно сформулировала? или форум вымер, люди ау, есть хоть кто нибудь ?
|
Почему бы исходные данные не хранить в объекте, который легко прочитать, и уже из него данные вставлять в <code> и в пример?
Цитата:
Цитата:
Да, такое приложение возможно сделать только на HTML, CSS, JS, но только у вас всё должно происходить на одной странице. И вы должны начать хотя бы с описания данных к каждому свойству, например в формате JSON, что бы не было проблем с извлечением данных! Я предлагаю вам такое Чистые данные → Интерфейс, вы почему-то опять выбираете самое сложное и многословное Интерфейс → данные → Интерфейс Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
Цитата:
|
Да, я буду вручную описывать все свойства, разумеется что я буду брать и копипастить уже готовые статьи, но корректировать, более детально описывая те моменты на которых я спотыкалась, что я поняла не с первого прочтения,
я выбираю такой путь потому что уверена, в случае чего я смогу со своими знаниями яваскрипт равными 10^-100, подправить скрипт под нужный сценарий, и сейчас предусмотрены практически все ньюансы одним словом надо именно такой скрипт, и неважно год или два пройдёт до завершения писанины учебника. |
Цитата:
|
какого парсера, есть один единственный контейнер с кодом, и один единственный див-демонстратор, и вот для этой пары нужен скрипт исполняющий вышеописанный сценарий, с остальным справлюсь сама
|
Цитата:
А это обязательно так делать? &gt; &lt; Вот код берётся из <code>
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
display: block;
}
.radius:focus{
outline: none;
border-color: #99f;
}
#a { border-radius: 50px 0 0 50px; }
#b { border-radius: 40px 10px; }
#c { border-radius: 13em / 3em; }
#d { border-radius: 13em 0.5em / 1em 0.5em; }
#e { border-radius: 8px; }
.span_bold { font-weight: bold; }
#span_ital { font-style: italic; }
</style>
<button class="radius">
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
var idname = ["a", "b", "c", "d", "e"];
var demo = $("article.demo");
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $(".radius", demo);
var s = $("style", demo).sheet;
(e.onclick = function() {
var id = idname[i++ % idname.length];
for(var k = 0, len = s.cssRules.length; k < len; k++) {
if(s.cssRules[k].selectorText === ("#" + id)) {
e.style.cssText = s.cssRules[k].style.cssText;
$("*", e).textContent = s.cssRules[k].style.cssText;
break;
}
}
})();
})();
demo.insertBefore(code, demo.childNodes[0]);
</script>
</body>
</html>
UPD Ещё раз прочтите пост №88 сначала |
Malleys,
при клике рамка вылазит(Google Chrome, ie), может быть добавить
.radius:focus{
outline: none;
}
? |
Цитата:
Блондинка👱🏻♀️, с таким подходом код придётся переписать так, что он по всем параметрам будет лучше — он будет и понятнее, и структурированнее, и самого кода будет меньше, и заодно будут решены старые проблемы, которые из-за плохой структуры старого кода было сложно решить. |
Цитата:
|
Цитата:
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<style>pre{background:#f5f5f5}</style>
</head>
<body>
<article class="demo" data-idname="a b c d e">
<style>
.radius {
background: #f0f0f0;
border: 1px solid #999;
width: 420px;
padding: 15px 25px;
margin-bottom: 10px;
display: block;
}
.radius:focus{
outline: none;
border-color: #99f;
}
#a { border-radius: 50px 0 0 50px; }
#b { border-radius: 40px 10px; }
#c { border-radius: 13em / 3em; }
#d { border-radius: 13em 0.5em / 1em 0.5em; }
#e { border-radius: 8px; }
.span_bold { font-weight: bold; }
#span_ital { font-style: italic; }
</style>
<button class="radius" data-run>
<span id="span_ital" class="span_bold"></span>
</button>
Нажмите на кнопку, чтобы посмотреть как изменится радиус углов при разных значениях.
</article>
<article class="demo" data-idname="c-1 c-2 c-3 c-4">
<style>
.box {
background: #f0f0f0;
border: 1px solid #999;
width: 400px;
height: 100px;
font-size: 150%;
}
#c-1 { background-color: deeppink; }
#c-2 { background-color: gold; }
#c-3 { background-color: yellowgreen }
#c-4 { background-color: gray }
</style>
<button class="box" data-run><span></span></button>
</article>
<script>
function $(selector, node) { return (node || document).querySelector(selector); }
function $$(selector, node) { return Array.prototype.slice.call((node || document).querySelectorAll(selector)); }
$$("article.demo").forEach(function(demo) {
var idname = demo.getAttribute("data-idname").split(/\s+/);
var code = document.createElement("pre");
code.textContent = demo.innerHTML;
(function() {
var i = 0;
var e = $("[data-run]", demo);
var s = $("style", demo).sheet;
(e.onclick = function() {
var id = idname[i++ % idname.length];
for(var k = 0, len = s.cssRules.length; k < len; k++) {
if(s.cssRules[k].selectorText === ("#" + id)) {
e.style.cssText = s.cssRules[k].style.cssText;
$("*", e).textContent = s.cssRules[k].style.cssText;
break;
}
}
})();
})();
demo.insertBefore(code, demo.childNodes[0]);
});
</script>
</body>
</html>
Я добавил второй пример для теста, я думаю идею вы поняли... 😉 UPD Я думаю, что data-idname скоро превратится в data-selectors, но Цитата:
|
Цитата:
откуда и зачем, border-top-left-radius, border-top-right-radius, border-bottom-left-radius, border-bottom-right-radius? |
откуда и зачем ты какой то rgb, I если в коде названия цвета?
Цитата:
|
Цитата:
Цитата:
Цитата:
Цитата:
Может всё-таки описывать данные в чистом виде? (Например, JSON) Ещё раз прочтите пост №88 |
Цитата:
тоесть между <span> и </span> должно быть то что в приведённом коде |
Цитата:
Цитата:
|
| Часовой пояс GMT +3, время: 21:36. |