up
This commit is contained in:
Ilya Kantor
parent
7b3f4550fd
commit
d85be5f17b
12 changed files with 47 additions and 93 deletions
|
|
@ -2,7 +2,7 @@ importance: 1
|
|||
|
||||
---
|
||||
|
||||
# Why "ааа" remains?
|
||||
# Why "aaa" remains?
|
||||
|
||||
Run the example. Why `table.remove()` does not delete the text `"aaa"`?
|
||||
|
||||
|
|
|
|||
|
|
@ -27,7 +27,7 @@
|
|||
container.innerHTML = createTreeText(obj);
|
||||
}
|
||||
|
||||
function createTreeText(obj) { // отдельная рекурсивная функция
|
||||
function createTreeText(obj) { // standalone recursive function
|
||||
let li = '';
|
||||
for (let key in obj) {
|
||||
li += '<li>' + key + createTreeText(obj[key]) + '</li>';
|
||||
|
|
@ -38,7 +38,6 @@
|
|||
return ul || '';
|
||||
}
|
||||
|
||||
let container = document.getElementById('container');
|
||||
createTree(container, data);
|
||||
</script>
|
||||
</body>
|
||||
|
|
|
|||
|
|
@ -43,12 +43,12 @@
|
|||
let lis = document.getElementsByTagName('li');
|
||||
|
||||
for (let li of lis) {
|
||||
// получить количество детей
|
||||
let childCount = li.getElementsByTagName('li').length;
|
||||
if (!childCount) continue;
|
||||
// get the count of all <li> below this <li>
|
||||
let descendantsCount = li.getElementsByTagName('li').length;
|
||||
if (!descendantsCount) continue;
|
||||
|
||||
// добавить кол-во детей к текстовому узлу
|
||||
li.firstChild.data += ' [' + childCount + ']';
|
||||
// add directly to the text node (append to the text)
|
||||
li.firstChild.data += ' [' + descendantsCount + ']';
|
||||
}
|
||||
</script>
|
||||
|
||||
|
|
|
|||
|
|
@ -1,18 +0,0 @@
|
|||
function getIEComputedStyle(elem, prop) {
|
||||
var value = elem.currentStyle[prop] || 0;
|
||||
|
||||
// we use 'left' property as a place holder so backup values
|
||||
var leftCopy = elem.style.left;
|
||||
var runtimeLeftCopy = elem.runtimeStyle.left;
|
||||
|
||||
// assign to runtimeStyle and get pixel value
|
||||
elem.runtimeStyle.left = elem.currentStyle.left;
|
||||
elem.style.left = (prop === "fontSize") ? "1em" : value;
|
||||
value = elem.style.pixelLeft + "px";
|
||||
|
||||
// restore values for left
|
||||
elem.style.left = leftCopy;
|
||||
elem.runtimeStyle.left = runtimeLeftCopy;
|
||||
|
||||
return value;
|
||||
}
|
||||
|
|
@ -1,30 +0,0 @@
|
|||
<!doctype html>
|
||||
<html lang="en">
|
||||
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<script src="getiecomputedstyle.js"></script>
|
||||
</head>
|
||||
|
||||
<body>
|
||||
|
||||
<style>
|
||||
#margin-test {
|
||||
margin: 1%;
|
||||
border: 1px solid black;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div id="margin-test">Тестовый элемент с margin 1%</div>
|
||||
|
||||
<script>
|
||||
var elem = document.getElementById('margin-test');
|
||||
if (!window.getComputedStyle) { // старые IE
|
||||
document.write(getIEComputedStyle(elem, 'marginTop'));
|
||||
} else {
|
||||
document.write('Пример работает только в IE8-');
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
|
|
@ -152,7 +152,7 @@ They include the content width together with paddings, but without the scrollbar
|
|||
|
||||
|
||||
|
||||
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-высота `200px` plus top and bottom paddings (`2*20px`) total `240px`.
|
||||
On the picture above let's first consider `clientHeight`: it's easier to evaluate. There's no horizontal scrollbar, so its exactly the sum of what's inside the borders: CSS-height `200px` plus top and bottom paddings (`2*20px`) total `240px`.
|
||||
|
||||
Now `clientWidth` -- here the content width is not `300px`, but `284px`, because `16px` are occupied by the scrollbbar. So the sum is `284px` plus left and right paddings, total `324px`.
|
||||
|
||||
|
|
|
|||
|
|
@ -90,7 +90,7 @@ We can do the same for the page:
|
|||
|
||||
It should work.
|
||||
|
||||
But there's a simpler, more universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) и [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
|
||||
But there's a simpler, more universal solution: special methods [window.scrollBy(x,y)](mdn:api/Window/scrollBy) and [window.scrollTo(pageX,pageY)](mdn:api/Window/scrollTo).
|
||||
|
||||
- The method `scrollBy(x,y)` scrolls the page relative to its current position. For instance, `scrollBy(0,10)` scrolls the page `10px` down.
|
||||
|
||||
|
|
|
|||
|
|
@ -7,13 +7,13 @@
|
|||
|
||||
<body>
|
||||
|
||||
<input type="button" id="hider" value="Нажмите, чтобы спрятать текст" />
|
||||
<input type="button" id="hider" value="Click to hide the text" />
|
||||
|
||||
<div id="text">Текст</div>
|
||||
<div id="text">Text</div>
|
||||
|
||||
<script>
|
||||
/* ваш код */
|
||||
/* your code */
|
||||
</script>
|
||||
</body>
|
||||
|
||||
</html>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -1,10 +1,13 @@
|
|||
|
||||
1. Изменим HTML/CSS, чтобы кнопка была в нужном месте сообщения. Кнопка -- это тег `<button>`, поэтому понадобится несколько стилей.
|
||||
To add the button we can use either `position:absolute` (and make the pane `position:relative`) or `float:right`. The `float:right` has the benefit that the button never overlaps the text, but `position:absolute` gives more freedom. So the choice is yours.
|
||||
|
||||
Расположить кнопку справа можно при помощи `position:relative` для `pane`, а для кнопки `position:absolute + right/top`. Так как `position:absolute` вынимает элемент из потока, то кнопка может частично оказаться "сверху" текста заголовка, перекрыв его конец. Чтобы этого не произошло, можно добавить `padding-right` к заголовку.
|
||||
Then for each pane the code can be like:
|
||||
```js
|
||||
pane.insertAdjacentHTML("afterbegin", '<button class="remove-button">[x]</button>');
|
||||
```
|
||||
|
||||
Если использовать `float:right`, то кнопка никогда не перекроет текст. Это, пожалуй хорошо.
|
||||
|
||||
С другой стороны, потенциальным преимуществом способа с `position` по сравнению с `float` в данном случае является возможность поместить элемент кнопки в HTML *после текста*, а не до него.
|
||||
2. Для того, чтобы получить кнопку из контейнера, используем `querySelectorAll`. На каждую кнопку повесим обработчик, который будет убирать родителя. Найти родителя можно через `parentNode`.
|
||||
Then the `<button>` becomes `pane.firstChild`, so we can add a handler to it like this:
|
||||
|
||||
```js
|
||||
pane.firstChild.onclick = () => pane.remove();
|
||||
```
|
||||
|
|
|
|||
|
|
@ -11,16 +11,16 @@
|
|||
<button class="arrow prev">⇦</button>
|
||||
<div class="gallery">
|
||||
<ul class="images">
|
||||
<li><img src="https://js.cx/carousel/1.png"></li>
|
||||
<li><img src="https://js.cx/carousel/2.png"></li>
|
||||
<li><img src="https://js.cx/carousel/3.png"></li>
|
||||
<li><img src="https://js.cx/carousel/4.png"></li>
|
||||
<li><img src="https://js.cx/carousel/5.png"></li>
|
||||
<li><img src="https://js.cx/carousel/6.png"></li>
|
||||
<li><img src="https://js.cx/carousel/7.png"></li>
|
||||
<li><img src="https://js.cx/carousel/8.png"></li>
|
||||
<li><img src="https://js.cx/carousel/9.png"></li>
|
||||
<li><img src="https://js.cx/carousel/10.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/1.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/2.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/3.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/4.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/5.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/6.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/7.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/8.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/9.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/10.png"></li>
|
||||
</ul>
|
||||
</div>
|
||||
<button class="arrow next">⇨</button>
|
||||
|
|
|
|||
|
|
@ -7,28 +7,28 @@
|
|||
|
||||
<body>
|
||||
|
||||
<!-- ваша верстка виджета, ваши стили -->
|
||||
<!-- create your markup and styles -->
|
||||
|
||||
<button class="arrow">⇦</button>
|
||||
<button class="arrow">⇨</button>
|
||||
|
||||
|
||||
<ul>
|
||||
<li><img src="https://js.cx/carousel/1.png"></li>
|
||||
<li><img src="https://js.cx/carousel/2.png"></li>
|
||||
<li><img src="https://js.cx/carousel/3.png"></li>
|
||||
<li><img src="https://js.cx/carousel/4.png"></li>
|
||||
<li><img src="https://js.cx/carousel/5.png"></li>
|
||||
<li><img src="https://js.cx/carousel/6.png"></li>
|
||||
<li><img src="https://js.cx/carousel/7.png"></li>
|
||||
<li><img src="https://js.cx/carousel/8.png"></li>
|
||||
<li><img src="https://js.cx/carousel/9.png"></li>
|
||||
<li><img src="https://js.cx/carousel/10.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/1.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/2.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/3.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/4.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/5.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/6.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/7.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/8.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/9.png"></li>
|
||||
<li><img src="https://en.js.cx/carousel/10.png"></li>
|
||||
</ul>
|
||||
|
||||
|
||||
<script>
|
||||
// label the images, just for convenience, to visually track them
|
||||
// label the images to visually track them, just for convenience,
|
||||
// this code can be removed
|
||||
let i = 1;
|
||||
for(let li of carousel.querySelectorAll('li')) {
|
||||
|
|
|
|||
|
|
@ -48,7 +48,7 @@ For instance, to assign a `click` handler for an `input`, we can use `onclick`,
|
|||
|
||||
On mouse click, the code inside `onclick` runs.
|
||||
|
||||
Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Клик!")"`, then it won't work right.
|
||||
Please note that inside `onclick` we use single quotes, because the attribute itself is in double quotes. If we fforget that the code is inside the attribute and use double quotes inside, like this: `onclick="alert("Click!")"`, then it won't work right.
|
||||
|
||||
An HTML-attribute is not a convenient place to write a lot of code, so we'd better create a JavaScript function and call it there.
|
||||
|
||||
|
|
@ -340,7 +340,7 @@ Here's an example of getting mouse coordinates from the event object:
|
|||
<script>
|
||||
elem.onclick = function(*!*event*/!*) {
|
||||
// show event type, element and coordinates of the click
|
||||
alert(event.type + " на " + event.currentTarget);
|
||||
alert(event.type + " at " + event.currentTarget);
|
||||
alert(event.clientX + ":" + event.clientY);
|
||||
};
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue