jeena/en.javascript.info
1
0
Fork 0
Code Issues Pull requests Projects Packages Wiki Activity Actions

renovations + replaced http://js.cx -> //js.cx

Browse source
This commit is contained in:
Ilya Kantor 2015-02-13 12:33:34 +03:00
parent 4be7a7f85a
commit a5e8c1219f
117 changed files with 366 additions and 352 deletions
Download patch file Download diff file Expand all files Collapse all files

2
1-js/1-getting-started/2-pre-coding/article.md
View file

@ -4,7 +4,7 @@
Если вы только начинаете изучение, то вряд ли они будут нужны прямо сейчас. Тем не менее, эта глава находится в начале, так как предсказать точный момент, когда вы захотите заглянуть в справочник -- невозможно, но точно известно, что этот момент настанет.
Поэтому рекомендуется кратко взглянуть на эту страницу и взять её на заметку, чтобы при необходимости вернуться к ней в будущем.
Поэтому рекомендуется кратко взглянуть на неё и взять на заметку, чтобы при необходимости вернуться в будущем.
[cut]

4
1-js/2-first-steps/2-external-script/article.md
View file

@ -104,7 +104,7 @@
<!--+ run height=100 -->
<p>Начало страницы...</p>
<script src="http://js.cx/hello/ads.js?speed=0"></script>
<script src="//js.cx/hello/ads.js?speed=0"></script>
<p>...Важная информация!</p>
```
@ -155,7 +155,7 @@
<!--+ run height=100 -->
<p>Начало страницы...</p>
<script *!*async*/!* src="http://js.cx/hello/ads.js?speed=0"></script>
<script *!*async*/!* src="//js.cx/hello/ads.js?speed=0"></script>
<p>...Важная информация!</p>
```

2
1-js/3-writing-js/4-testing/1-pow-nan-spec/task.md
View file

@ -9,7 +9,7 @@
Она содержит HTML с тестами. Обратите внимание, что HTML-страница в ней короче той, что обсуждалась в статье [](/testing). Это потому что библиотеки Chai, Mocha и Sinon объединены в один файл:
```html
<script src="http://js.cx/test/libs.js"></script>
<script src="//js.cx/test/libs.js"></script>
```
Этот файл содержит код библиотек, стили, настройки для них и запуск `mocha.run` по окончании загрузки страницы. Если нет элемента с `id="mocha"`, то результаты выводятся в `<body>`.

17
1-js/4-data-structures/8-array-methods/10-filter-anagrams/_js.view/test.js
View file

@ -1,8 +1,21 @@
function intersection(arr1, arr2) {
return arr1.filter(function(item) {
return arr2.indexOf(item) != -1;
});
}
describe("aclean", function() {
it("удаляет анаграммы", function() {
it("содержит ровно по 1 слову из каждого набора анаграмм", function() {
var arr = ["воз", "киборг", "корсет", "зов", "гробик", "костер", "сектор"];
assert.sameMembers(aclean(arr), ["гробик", "зов", "сектор"]);
var result = aclean(arr);
assert.equal(result.length, 3);
assert.equal(intersection(result, ["гробик", "киборг"]).length, 1);
assert.equal(intersection(result, ["воз", "зов"]).length, 1);
assert.equal(intersection(result, ["корсет", "сектор", "костер"]).length, 1);
});
it("не различает регистр символов", function() {

2
2-ui/1-document/15-metrics/4-put-ball-in-center/ball-half/index.html
View file

@ -18,7 +18,7 @@
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
<img src="//js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

2
2-ui/1-document/15-metrics/4-put-ball-in-center/solution.view/index.html
View file

@ -18,7 +18,7 @@
<div id="field">
<img src="http://js.cx/clipart/ball.gif" width="40" height="40" id="ball">
<img src="//js.cx/clipart/ball.gif" width="40" height="40" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

2
2-ui/1-document/15-metrics/4-put-ball-in-center/source.view/index.html
View file

@ -18,7 +18,7 @@
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
<img src="//js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

20
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/solution.view/index.html
View file

@ -10,16 +10,16 @@
<button class="arrow prev">⇦</button>
<div class="gallery">
<ul class="images">
<li><img src="http://js.cx/carousel/1.png">
<li><img src="http://js.cx/carousel/2.png">
<li><img src="http://js.cx/carousel/3.png">
<li><img src="http://js.cx/carousel/4.png">
<li><img src="http://js.cx/carousel/5.png">
<li><img src="http://js.cx/carousel/6.png">
<li><img src="http://js.cx/carousel/7.png">
<li><img src="http://js.cx/carousel/8.png">
<li><img src="http://js.cx/carousel/9.png">
<li><img src="http://js.cx/carousel/10.png">
<li><img src="//js.cx/carousel/1.png">
<li><img src="//js.cx/carousel/2.png">
<li><img src="//js.cx/carousel/3.png">
<li><img src="//js.cx/carousel/4.png">
<li><img src="//js.cx/carousel/5.png">
<li><img src="//js.cx/carousel/6.png">
<li><img src="//js.cx/carousel/7.png">
<li><img src="//js.cx/carousel/8.png">
<li><img src="//js.cx/carousel/9.png">
<li><img src="//js.cx/carousel/10.png">
</ul>
</div>
<button class="arrow next">⇨</button>

20
2-ui/2-events-and-interfaces/1-introduction-browser-events/6-carousel/source.view/index.html
View file

@ -13,16 +13,16 @@
<ul>
<li><img src="http://js.cx/carousel/1.png">
<li><img src="http://js.cx/carousel/2.png">
<li><img src="http://js.cx/carousel/3.png">
<li><img src="http://js.cx/carousel/4.png">
<li><img src="http://js.cx/carousel/5.png">
<li><img src="http://js.cx/carousel/6.png">
<li><img src="http://js.cx/carousel/7.png">
<li><img src="http://js.cx/carousel/8.png">
<li><img src="http://js.cx/carousel/9.png">
<li><img src="http://js.cx/carousel/10.png">
<li><img src="//js.cx/carousel/1.png">
<li><img src="//js.cx/carousel/2.png">
<li><img src="//js.cx/carousel/3.png">
<li><img src="//js.cx/carousel/4.png">
<li><img src="//js.cx/carousel/5.png">
<li><img src="//js.cx/carousel/6.png">
<li><img src="//js.cx/carousel/7.png">
<li><img src="//js.cx/carousel/8.png">
<li><img src="//js.cx/carousel/9.png">
<li><img src="//js.cx/carousel/10.png">
</ul>

2
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/solution.view/index.html
View file

@ -35,7 +35,7 @@
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
<img src="//js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

2
2-ui/2-events-and-interfaces/3-obtaining-event-object/1-move-ball-field/source.view/index.html
View file

@ -28,7 +28,7 @@
<div id="field">
<img src="http://js.cx/clipart/ball.gif" id="ball">
<img src="//js.cx/clipart/ball.gif" id="ball">
. . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . . .
</div>

12
2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/solution.view/index.html
View file

@ -8,15 +8,15 @@
<body>
<p><img id="largeImg" src="http://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="//js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<ul id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<li><a href="http://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="http://js.cx/gallery/img2-thumb.jpg"></a></li>
<li><a href="http://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="http://js.cx/gallery/img3-thumb.jpg"></a></li>
<li><a href="http://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="http://js.cx/gallery/img4-thumb.jpg"></a></li>
<li><a href="http://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="http://js.cx/gallery/img5-thumb.jpg"></a></li>
<li><a href="http://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="http://js.cx/gallery/img6-thumb.jpg"></a></li>
<li><a href="//js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="//js.cx/gallery/img2-thumb.jpg"></a></li>
<li><a href="//js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="//js.cx/gallery/img3-thumb.jpg"></a></li>
<li><a href="//js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="//js.cx/gallery/img4-thumb.jpg"></a></li>
<li><a href="//js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="//js.cx/gallery/img5-thumb.jpg"></a></li>
<li><a href="//js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="//js.cx/gallery/img6-thumb.jpg"></a></li>
</ul>
<script>

12
2-ui/2-events-and-interfaces/7-default-browser-action/3-image-gallery/source.view/index.html
View file

@ -8,15 +8,15 @@
<body>
<p><img id="largeImg" src="http://js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<p><img id="largeImg" src="//js.cx/gallery/img1-lg.jpg" alt="Large image"></p>
<div id="thumbs">
<!-- При наведении на изображение показывается встроенная подсказка браузера (title) -->
<a href="http://js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="http://js.cx/gallery/img2-thumb.jpg"></a>
<a href="http://js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="http://js.cx/gallery/img3-thumb.jpg"></a>
<a href="http://js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="http://js.cx/gallery/img4-thumb.jpg"></a>
<a href="http://js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="http://js.cx/gallery/img5-thumb.jpg"></a>
<a href="http://js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="http://js.cx/gallery/img6-thumb.jpg"></a>
<a href="//js.cx/gallery/img2-lg.jpg" title="Image 2"><img src="//js.cx/gallery/img2-thumb.jpg"></a>
<a href="//js.cx/gallery/img3-lg.jpg" title="Image 3"><img src="//js.cx/gallery/img3-thumb.jpg"></a>
<a href="//js.cx/gallery/img4-lg.jpg" title="Image 4"><img src="//js.cx/gallery/img4-thumb.jpg"></a>
<a href="//js.cx/gallery/img5-lg.jpg" title="Image 5"><img src="//js.cx/gallery/img5-thumb.jpg"></a>
<a href="//js.cx/gallery/img6-lg.jpg" title="Image 6"><img src="//js.cx/gallery/img6-thumb.jpg"></a>
</div>
</body>

81
2-ui/3-event-details/1-mouse-clicks/article.md
View file

@ -40,14 +40,16 @@
Например, клик вызывает сначала `mousedown` при нажатии, а затем `mouseup` и `click` при отпускании кнопки.
В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке `mousedown -> mouseup -> click`.
В тех случаях, когда одно действие генерирует несколько событий, их порядок фиксирован. То есть, обработчики вызовутся в порядке `mousedown` -> `mouseup -> `click`.
[online]
Кликните по кнопке ниже и вы увидите, какие при этом происходят события. Попробуйте также двойной клик.
На тест-стенде ниже все мышиные события записываются, и если между событиями проходит больше 1 секунды, то они для удобства чтения отделяются линией. Также присутствуют свойства `which/button`, по которым можно определить кнопку мыши. Мы их рассмотрим далее.
[pre no-typography]
<input onmousedown="return logMouse(event)" onmouseup="return logMouse(event)" onclick="return logMouse(event)" oncontextmenu="return logMouse(event)" ondblclick="return logMouse(event)" value="Кликни меня левой или правой кнопкой мыши" type="button" /> <input onclick="logClear('test')" value="Очистить" type="button" /> <form id="testform" name="testform"> <textarea style="font-size:12px;height:150px;width:360px;"></textarea></form>
[/pre]
[/online]
**Каждое событие обрабатывается независимо.**
Например, при клике события `mouseup + click` возникают одновременно, но обрабатываются последовательно. Сначала полностью завершается обработка `mouseup`, затем запускается `click`.
@ -72,19 +74,22 @@
## Правый клик: oncontextmenu
При клике правой кнопкой мыши браузер показывает свое контекстное меню. Это является его действием по умолчанию:
Это событие срабатывает при клике правой кнопкой мыши:
```html
<!--+ autorun height=auto -->
<!--+ autorun height=80 -->
<div>Правый клик на этой кнопке выведет "Клик".</div>
<button oncontextmenu="alert('Клик!');">Правый клик сюда</button>
```
...Но если мы не хотим, чтобы показывалось встроенное меню, например потому что показываем своё, то можно отменить действие по умолчанию.
При клике на кнопку выше после обработчика `oncontextmenu` будет показано обычное контекстное меню, которое браузер всегда показывает при клике правой кнопкой. Это является его действием по умолчанию.
Если мы не хотим, чтобы показывалось встроенное меню, например потому что показываем своё, специфичное для нашего приложения, то можно отменить действие по умолчанию.
В примере ниже встроенное меню показано не будет:
```html
<!--+ autorun height=auto -->
<!--+ autorun height=60 -->
<button oncontextmenu="alert('Клик!');return false">Правый клик сюда</button>
```
@ -103,12 +108,11 @@
Например, кнопка ниже сработает только на Alt+Shift+Клик:
```html
<!--+ autorun -->
<!--+ autorun height=60 -->
<button>Alt+Shift+Кликни меня!</button>
<script>
document.body.children[0].onclick = function(e) {
e = e || event;
*!*
if (!e.altKey || !e.shiftKey) return;
*/!*
@ -118,31 +122,30 @@
```
[warn header="Внимание: на Mac вместо `Ctrl` используется `Cmd`"]
На компьютерах Mac кроме клавиш [key Alt], [key Shift] и [key Ctrl], есть ещё одна специальная клавиша: [key Cmd], которой соответствует свойство `metaKey`.
На компьютерах под управлением Windows и Linux есть специальные клавиши [key Alt], [key Shift] и [key Ctrl]. На Mac есть ещё одна специальная клавиша: [key Cmd], которой соответствует свойство `metaKey`.
В большинстве случаев на Mac вместо [key Ctrl] используется [key Cmd]. Там, где пользователь Windows нажимает [key Ctrl+Enter] или [key Ctrl+A], пользователь Mac нажмёт [key Cmd+Enter] или [key Cmd+A], и так далее, почти всегда [key Cmd] вместо [key Ctrl].
В большинстве случаев там, где под Windows/Linux используется [key Ctrl], на Mac используется [key Cmd]. Там, где пользователь Windows нажимает [key Ctrl+Enter] или [key Ctrl+A], пользователь Mac нажмёт [key Cmd+Enter] или [key Cmd+A], и так далее, почти всегда [key Cmd] вместо [key Ctrl].
Поэтому, если мы хотим поддерживать [key Ctrl]+click, то под Mac имеет смысл обрабатывать [key Cmd]+click.
Поэтому, если мы хотим поддерживать сочетание [key Ctrl]+click или другие подобные, то под Mac имеет смысл использовать [key Cmd]+click. Пользователям Mac это будет гораздо комфортнее.
Даже если бы мы хотели бы заставить пользователей Mac использовать именно [key Ctrl]+click -- это было бы затруднительно. Дело в том, что обычный клик с зажатым [key Ctrl] под Mac работает как *правый клик* и генерирует другое событие: `oncontextmenu`, так что сгенерировать именно [key Ctrl]+click под Mac достаточно сложно.
Более того, даже если бы мы хотели бы заставить пользователей Mac использовать именно [key Ctrl]+click -- это было бы затруднительно. Дело в том, что обычный клик с зажатым [key Ctrl] под Mac работает как *правый клик* и генерирует событие `oncontextmenu`, а вовсе не `onclick`, как под Windows/Linux.
Вывод -- чтобы пользователи обоих операционных систем работали с комфортом, в паре с `ctrlKey` нужно обязательно использовать `metaKey`.
Решение -- чтобы пользователи обоих операционных систем работали с комфортом, в паре с `ctrlKey` нужно обязательно использовать `metaKey`.
В JS-коде это означает, что для удобства пользователей Mac нужно проверять `if (event.ctrlKey || event.metaKey)`.
[/warn]
## Координаты мыши
## Координаты в окне: clientX/Y
Все мышиные события предоставляют текущие координаты курсора в двух видах: относительно окна и относительно документа.
### Относительно окна: clientX/Y
Есть отличное кросс-браузерное свойство `clientX`(`clientY`), которое содержит координаты курсора относительно `window`.
Пара свойств `clientX/clientY` содержит координаты курсора относительно текущего окна.
При этом, например, если ваше окно размером 500x500, а мышь находится в центре, тогда и `clientX` и `clientY` будут равны 250.
Можно как угодно прокручивать страницу, но если не двигать при этом мышь, то координаты курсора `clientX/clientY` не изменятся, потому что они считаются относительно окна, а не документа.
[online]
Проведите мышью над полем ввода, чтобы увидеть `clientX/clientY`:
```html
@ -150,7 +153,9 @@
```
<input onmousemove="this.value = event.clientX+':'+event.clientY">
[/online]
В той же системе координат работает и метод `elem.getBoundingClientRect()`, возвращающий координаты элемента, а также `position:fixed`.
### Относительно документа: pageX/Y
@ -160,6 +165,7 @@
В IE8- этих свойств нет, но можно получить их способом, описанным в конце главы.
[online]
Проведите мышью над полем ввода, чтобы увидеть `pageX/pageY` (кроме IE8-):
```html
@ -167,6 +173,9 @@
```
<input onmousemove="this.value = event.pageX+':'+event.pageY">
[/online]
В той же системе координат работает `position:absolute`, если элемент позиционируется относительно документа.
[warn header="Устарели: `x, y, layerX, layerY`"]
Некоторые браузеры поддерживают свойства `event.x/y`, `event.layerX/layerY`.
@ -199,7 +208,7 @@
<li>`mouseup+dblclick` (отжал).</li>
</ul>
**Поэтому отловить двойной клик в IE8-, отслеживая только `click`, нельзя, ведь при втором нажатии его нет. Нужно именно событие `dblclick`.**
Поэтому отловить двойной клик в IE8-, отслеживая только `click`, нельзя, ведь при втором нажатии его нет. Нужно именно событие `dblclick`.
### Свойство which/button
@ -234,7 +243,7 @@ function fixWhich(e) {
Более подробно о её вычислении вы можете прочитать в разделе [прокрутка страницы](#page-scroll).
Мы же здесь приведем готовый вариант, который позволяет нам получить `pageX/pageY` для старых IE:
Мы же здесь приведем готовый вариант, который позволяет нам получить `pageX/pageY` для старых и совсем старых IE:
```js
function fixPageXY(e) {
@ -256,10 +265,10 @@ function fixPageXY(e) {
События мыши имеют следующие свойства:
<ul>
<li>Кнопка мыши: `which` (для IE<9: нужно ставить из `button`)</li>
<li>Кнопка мыши: `which` (для IE8-: нужно ставить из `button`)</li>
<li>Элемент, вызвавший событие: `target`</li>
<li>Координаты, относительно окна: `clientX/clientY`</li>
<li>Координаты, относительно документа: `pageX/pageY` (для IE<9: нужно ставить по `clientX/Y` и прокрутке)</li>
<li>Координаты, относительно документа: `pageX/pageY` (для IE8-: нужно ставить по `clientX/Y` и прокрутке)</li>
<li>Если зажата спец. клавиша, то стоит соответствующее свойство: `altKey`, `ctrlKey`, `shiftKey` или `metaKey` (Mac).</li>
<li>Для поддержки [key Ctrl]+`click` не забываем проверить `if (e.metaKey || e.ctrlKey)`, чтобы пользователи `Mac` тоже были довольны.</li>
</ul>
@ -269,8 +278,8 @@ function fixPageXY(e) {
[head]
<script>
var timer = 0
!function() {
var timer = 0;
function showmesg(t, form) {
@ -296,26 +305,6 @@ function logMouse(e) {
return false
}
function logMouseMove(e) {
var evt = e.type
while (evt.length < 11) evt += ' '
showmesg(evt+" target="+(e.target || e.srcElement).id, 'move')
return false
}
/*
function logKey(e) {
var evt = e.type
while (evt.length < 10) evt += ' '
showmesg(evt + 'keyCode=' + keyval(e.keyCode) + ' which=' + keyval(e.which) + ' charCode=' + keyval(e.charCode) +
(e.shiftKey ? ' +shift' : '') +
(e.ctrlKey ? ' +ctrl' : '') +
(e.altKey ? ' +alt' : '') +
(e.metaKey ? ' +meta' : ''), 'key'
)
} */
function keyval(n) {
if (n == null) return 'undefined';
var s = '' + n;
@ -330,5 +319,9 @@ function logClear(form) {
document.forms[form+'form'].getElementsByTagName('textarea')[0].value ='';
lines=0
}
window.logClear = logClear;
window.logMouse = logMouse;
}();
</script>
[/head]

8
2-ui/3-event-details/10-onload-ondomcontentloaded/article.md
View file

@ -42,7 +42,7 @@ document.addEventListener( "DOMContentLoaded", ready, false );
*/!*
</script>
<img id="img" src="http://js.cx/clipart/yozhik.jpg?speed=1">
<img id="img" src="//js.cx/clipart/yozhik.jpg?speed=1">
```
В примере выше размеры обработчик `DOMContentLoaded` сработает сразу после загрузки документа, не дожидаясь получения картинки.
@ -104,7 +104,7 @@ Firefox/Chrome/Opera автозаполняют формы по `DOMContentLoade
*/!*
</script>
<iframe src="http://example.com/" style="height:60px"></iframe>
<img src="http://js.cx/clipart/yozhik.jpg?speed=1">
<img src="//js.cx/clipart/yozhik.jpg?speed=1">
```
## window.onunload
@ -162,7 +162,7 @@ Firefox игнорирует текст, а всегда показывает с
```html
<!--+ run -->
<script src="http://js.cx/script/jquery.documentReady.js"></script>
<script src="//js.cx/script/jquery.documentReady.js"></script>
<script>
*!*
@ -172,7 +172,7 @@ Firefox игнорирует текст, а всегда показывает с
*/!*
</script>
<img src="http://js.cx/clipart/yozhik.jpg?speed=1">
<img src="//js.cx/clipart/yozhik.jpg?speed=1">
<div>Текст страницы</div>
```

4
2-ui/3-event-details/11-onload-onerror/1-nice-alt/solution.view/index.html
View file

@ -8,11 +8,11 @@
<button onclick="window.location.reload(true)">Перезагрузить ифрейм</button>
<hr>
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="http://js.cx/search/google.png" class="img-replace">
<div style="width:114px;height:40px;font-size:32px;letter-spacing:3px" data-src="//js.cx/search/google.png" class="img-replace">
<span style="color:#1A53F7">G</span><span style="color:#E42131">o</span><span style="color:#FEB819">o</span><span style="color:#164AF2">g</span><span style="color:#00a315">l</span><span style="color:#E42131">e</span>
</div>
<div style="width:101px;height:40px;font-size:32px" data-src="http://js.cx/search/yandex.png" class="img-replace">
<div style="width:101px;height:40px;font-size:32px" data-src="//js.cx/search/yandex.png" class="img-replace">
<span style="color:#F00">Я</span>ндекс
</div>

6
2-ui/3-event-details/11-onload-onerror/1-nice-alt/source.view/index.html
View file

@ -23,9 +23,9 @@
<hr>
<!-- картинки (для bing картинки специально нет, чтобы протестировать случай "загрузка не удалась") -->
<img src="http://js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
<img src="http://js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="http://js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
<img src="//js.cx/search/yandex.png" width="114" height="40" alt="Яндекс">
<img src="//js.cx/search/google.png" width="101" height="40" alt="Google">
<img src="//js.cx/search/bing.png" width="101" height="40" alt="Файла нет (bing)">
</body>

6
2-ui/3-event-details/11-onload-onerror/2-load-img-callback/solution.view/index.html
View file

@ -27,9 +27,9 @@
// ---------- Проверка ----------
var sources = [
"http://js.cx/images-load/1.jpg",
"http://js.cx/images-load/2.jpg",
"http://js.cx/images-load/3.jpg"
"//js.cx/images-load/1.jpg",
"//js.cx/images-load/2.jpg",
"//js.cx/images-load/3.jpg"
];
for (var i=0; i<sources.length; i++) {
sources[i] += '?'+Math.random();

6
2-ui/3-event-details/11-onload-onerror/2-load-img-callback/source.view/index.html
View file

@ -15,9 +15,9 @@
/* файлы для загрузки */
var sources = [
"http://js.cx/images-load/1.jpg",
"http://js.cx/images-load/2.jpg",
"http://js.cx/images-load/3.jpg"
"//js.cx/images-load/1.jpg",
"//js.cx/images-load/2.jpg",
"//js.cx/images-load/3.jpg"
];
for (var i=0; i<sources.length; i++) {
sources[i] += '?'+Math.random(); // добавляем параметр, чтобы без кеша (для теста)

43
2-ui/3-event-details/2-unselectable/article.md
View file

@ -1,29 +1,32 @@
# Мышь: отмена выделения, невыделяемые элементы
В ряде случаев, например, когда мы хотим обработать клик или двойной клик, браузер также добавляет "от себя" выделение текста, на котором кликнули.
У кликов мыши есть неприятная особенность.
Это некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым. В том числе и такие, которые применимы не только к событиям мыши.
Двойной клик или нажатие с движением курсора как правило инициируют выделение текста.
Если мы хотим обрабатывать эти события сами, то такое выделение -- некрасиво и неудобно. В этой главе мы рассмотрим основные способы, как делать элемент невыделяемым.
Для полноты картины, среди них будут и такие, которые применимы не только к событиям мыши.
[cut]
## Способ 1: отмена mousedown/selectstart
Проблема: браузер выделяет текст при движении мышью с зажатой левой кнопкой , а также при двойном клике на элемент. Даже там, где это не нужно.
Для примера -- попробуйте сделать двойной клик на элементе ниже.
Если сделать двойной клик на таком элементе, то обработчик сработает. Но побочным эффектом является *выделение текста браузером*.
```html
<!--+ autorun height=auto -->
<!--+ autorun height=60 -->
<span ondblclick="alert('двойной клик!')">Текст</span>
```
Обработчик сработает. Но побочным эффектом является *выделение текста браузером*.
**Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события [selectstart](http://msdn.microsoft.com/en-us/library/ms536969%28VS.85%29.aspx) в IE и `mousedown` в других браузерах.**
Чтобы избежать выделения, мы должны предотвратить действие браузера по умолчанию для события [selectstart](http://msdn.microsoft.com/en-us/library/ms536969%28VS.85%29.aspx) в IE и `mousedown` в других браузерах.
Полный код элемента, который обрабатывает двойной клик без выделения:
```html
<!--+ autorun height=auto -->
<!--+ autorun height=60 -->
<div ondblclick="alert('Тест')" *!*onselectstart="return false" onmousedown="return false"*/!*>
Двойной клик сюда выведет "Тест", без выделения
</div>
@ -32,7 +35,7 @@
При установке на родителя -- все его потомки станут невыделяемыми:
```html
<!--+ autorun -->
<!--+ autorun height=140 -->
Элементы списка не выделяются при клике:
<ul onmousedown="return false" onselectstart="return false">
<li>Винни-Пух</li>
@ -56,10 +59,10 @@
Для этого мы используем методы работы с выделением, которые описаны в отдельной главе [](/range-textrange-selection). Здесь нам понадобится всего лишь одна функция `clearSelection`, которая будет снимать выделение.
Например, попробуйте двойной клик на этот элемент списка:
Пример со снятием выделения при двойном клике на элемент списка:
```html
<!--+ autorun height=auto -->
<!--+ autorun height=60 -->
<ul>
<li ondblclick="clearSelection()">Выделение отменяется при двойном клике.</li>
</ul>
@ -75,10 +78,10 @@
</script>
```
У этого подхода есть две особенности:
У этого подхода есть две особенности, на которые стоит обратить внимание:
<ul>
<li>Выделение всё же производится, но тут же снимается.</li>
<li>Выделение всё же производится, но тут же снимается. Это выглядит как мигание и не очень красиво.</li>
<li>Выделение при помощи передвижения зажатой мыши всё еще работает, так что посетитель имеет возможность выделить содержимое элемента.</li>
</ul>
@ -128,12 +131,14 @@ b {
</div>
```
Левая часть текста в IE не выделяется при двойном клике. Правую часть (`em`) можно выделить, т.к. на ней нет атрибута `unselectable`.
[online]
В действии:
<div ondblclick="alert('Тест')" unselectable="on" style="border:1px solid black">
Этот текст невыделяем в IE, <em>кроме дочерних элементов</em>
</div>
Левая часть текста в IE не выделяется при двойном клике. Правую часть (`em`) можно выделить, т.к. на ней нет атрибута `unselectable`.
[/online]
## Итого
@ -157,14 +162,16 @@ elem.onmousedown = elem.onselectstart = function() {
Какой же способ выбирать?
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают. Обычно через JavaScript -- наиболее просто и кросс-браузерно.
Это зависит от задач и вашего удобства, а также конкретного случая. Все описанные способы работают.
**В любом случае эти способы не предназначены для защиты от выделения-и-копирования.**
Недостаток `user-select` -- в том, что посетитель теряет возможность скопировать текст. А что, если он захочет именно это сделать?
В любом случае эти способы не предназначены для защиты от выделения-и-копирования.
Если уж хочется запретить копирование -- можно использовать событие `oncopy`:
```html
<!--+ autorun -->
<!--+ autorun height=80 -->
<div oncopy="alert('Копирование запрещено');return false">
Уважаемый копирователь,
почему-то автор хочет заставить вас покопаться в исходном коде этой страницы.

1
2-ui/3-event-details/3-mousemove-mouseover-mouseout-mouseenter-mouseleave/article.md
View file

@ -2,6 +2,7 @@
В этой главе мы рассмотрим события, возникающие при движении мыши над элементами.
[cut]
## События mouseover/mouseout, свойство relatedTarget
Событие `mouseover` происходит, когда мышь появляется над элементом, а `mouseout` -- когда уходит из него.

6
2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/index.html
View file

@ -25,12 +25,12 @@
<div class="hero draggable" id="hero5"></div>
<div id="winnie" class="draggable"></div>
<img src="http://js.cx/drag-heroes/ball.png" class="draggable">
<img src="//js.cx/drag-heroes/ball.png" class="draggable">
<div style="clear:both"></div>
<script src="http://js.cx/libs/getCoords.js"></script>
<script src="http://js.cx/libs/documentScroll.js"></script>
<script src="//js.cx/libs/getCoords.js"></script>
<script src="//js.cx/libs/documentScroll.js"></script>
<script src="soccer.js"></script>
</body>

6
2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/solution.view/soccer.css
View file

@ -4,14 +4,14 @@ html, body {
}
#field {
background: url(http://js.cx/drag-heroes/field.png);
background: url(//js.cx/drag-heroes/field.png);
width: 800px;
height: 600px;
float: left;
}
.hero {
background: url(http://js.cx/drag-heroes/heroes.png);
background: url(//js.cx/drag-heroes/heroes.png);
width: 105px;
height: 128px;
float: left;
@ -39,7 +39,7 @@ html, body {
}
#winnie {
background: url(http://js.cx/drag-heroes/winnie.png);
background: url(//js.cx/drag-heroes/winnie.png);
width: 115px;
height: 128px;
float: left;

6
2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/index.html
View file

@ -26,12 +26,12 @@
<div class="hero draggable" id="hero5"></div>
<div id="winnie" class="draggable"></div>
<img src="http://js.cx/drag-heroes/ball.png" class="draggable">
<img src="//js.cx/drag-heroes/ball.png" class="draggable">
<div style="clear:both"></div>
<script src="http://js.cx/libs/getCoords.js"></script>
<script src="http://js.cx/libs/documentScroll.js"></script>
<script src="//js.cx/libs/getCoords.js"></script>
<script src="//js.cx/libs/documentScroll.js"></script>
<script src="soccer.js"></script>
</body>

6
2-ui/3-event-details/6-drag-and-drop/2-drag-heroes/source.view/soccer.css
View file

@ -4,14 +4,14 @@ html, body {
}
#field {
background: url(http://js.cx/drag-heroes/field.png);
background: url(//js.cx/drag-heroes/field.png);
width: 800px;
height: 600px;
float: left;
}
.hero {
background: url(http://js.cx/drag-heroes/heroes.png);
background: url(//js.cx/drag-heroes/heroes.png);
width: 105px;
height: 128px;
float: left;
@ -39,7 +39,7 @@ html, body {
}
#winnie {
background: url(http://js.cx/drag-heroes/winnie.png);
background: url(//js.cx/drag-heroes/winnie.png);
width: 115px;
height: 128px;
float: left;

6
2-ui/3-event-details/6-drag-and-drop/article.md
View file

@ -64,7 +64,7 @@ ball.onmousedown = function(e) { // 1. отследить нажатие*!*
В действии:
<div style="height:80px">
Кликните по мячу и тяните, чтобы двигать его.
<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball">
<img src="//js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball">
</div>
**Попробуйте этот пример. Он не совсем работает, мячик "раздваивается".**
@ -123,7 +123,7 @@ ball.ondragstart = function() {
<div style="height:80px">
Кликните по мячу и тяните, чтобы двигать его.
<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball2">
<img src="//js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball2">
</div>
[smart header="Обработчик `mousemove` ставим на `document`"]
@ -228,7 +228,7 @@ ball.ondragstart = function() {
<div style="height:80px">
Кликните по мячу и тяните, чтобы двигать его.
<img src="http://js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball3">
<img src="//js.cx/clipart/ball.gif" style="cursor:pointer" width="40" height="40" id="ball3">
</div>
Различие особенно заметно, если захватить мяч за правый-нижний угол. В предыдущем примере мячик "прыгнет" серединой под курсор, в этом -- будет плавно переноситься с текущей позиции.

4
2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/dragDemo.css
View file

@ -1,11 +1,11 @@
.computer {
width: 93px;
height: 98px;
background: url(http://js.cx/clipart/computer.gif) no-repeat;
background: url(//js.cx/clipart/computer.gif) no-repeat;
padding: 5px;
font-style: italic;
}
.computer-smile {
background: url(http://js.cx/clipart/computer-smile.gif) no-repeat;
background: url(//js.cx/clipart/computer-smile.gif) no-repeat;
}

10
2-ui/3-event-details/7-drag-and-drop-objects/dragDemo.view/index.html
View file

@ -19,11 +19,11 @@
</head>
<body>
<img src="http://js.cx/browsers/chrome_64.png" draggable>
<img src="http://js.cx/browsers/firefox_64.png" draggable>
<img src="http://js.cx/browsers/ie_64.png" draggable>
<img src="http://js.cx/browsers/opera_64.png" draggable>
<img src="http://js.cx/browsers/safari_64.png" draggable>
<img src="//js.cx/browsers/chrome_64.png" draggable>
<img src="//js.cx/browsers/firefox_64.png" draggable>
<img src="//js.cx/browsers/ie_64.png" draggable>
<img src="//js.cx/browsers/opera_64.png" draggable>
<img src="//js.cx/browsers/safari_64.png" draggable>
<p>Браузер переносить сюда:</p>

2
2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/solution.view/index.html
View file

@ -67,7 +67,7 @@
<h3>Винни-Пух</h3>
<div id="avatar">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из мультфильма</div>
</div>

2
2-ui/3-event-details/9-event-onscroll/1-avatar-above-scroll/source.view/index.html
View file

@ -62,7 +62,7 @@
<h3>Винни-Пух</h3>
<div id="avatar">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из мультфильма</div>
</div>

4
2-ui/3-event-details/9-event-onscroll/2-updown-button/solution.view/index.html
View file

@ -26,11 +26,11 @@
}
#updown.up {
background: url(http://js.cx/clipart/updown.gif) left top;
background: url(//js.cx/clipart/updown.gif) left top;
}
#updown.down {
background: url(http://js.cx/clipart/updown.gif) left -9px;
background: url(//js.cx/clipart/updown.gif) left -9px;
}
</style>

2
2-ui/3-event-details/9-event-onscroll/2-updown-button/source.view/index.html
View file

@ -21,7 +21,7 @@
</head>
<body>
<img src="http://js.cx/clipart/updown.gif">
<img src="//js.cx/clipart/updown.gif">
<div id="matrix">
<script>for (var i = 0; i < 2000; i++) document.writeln(i)</script>

20
2-ui/3-event-details/9-event-onscroll/3-load-visible-img/solution.view/index.html
View file

@ -27,7 +27,7 @@
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="http://js.cx/lazyimg/1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="140" realsrc="//js.cx/lazyimg/1.jpg">
</div>
</div>
@ -36,8 +36,8 @@
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="http://js.cx/lazyimg/2-1.jpg">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="http://js.cx/lazyimg/2-2.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="259" realsrc="//js.cx/lazyimg/2-1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="260" realsrc="//js.cx/lazyimg/2-2.jpg">
</div>
</div>
@ -46,8 +46,8 @@
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="http://js.cx/lazyimg/3-1.jpg">
<img src="http://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="http://js.cx/lazyimg/3-2.jpg">
<img src="//js.cx/lazyimg/1.gif" width="341" height="474" realsrc="//js.cx/lazyimg/3-1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="338" height="474" realsrc="//js.cx/lazyimg/3-2.jpg">
</div>
</div>
@ -57,7 +57,7 @@
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="http://js.cx/lazyimg/4.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="452" realsrc="//js.cx/lazyimg/4.jpg"></div>
</div>
<div class="news-item">
@ -65,7 +65,7 @@
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="http://js.cx/lazyimg/5.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="393" realsrc="//js.cx/lazyimg/5.jpg"></div>
</div>
<div class="news-item">
@ -73,7 +73,7 @@ Etoday предлагает полистать страницы подарочн
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="http://js.cx/lazyimg/6.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="433" realsrc="//js.cx/lazyimg/6.jpg"></div>
</div>
<div class="news-item">
@ -81,7 +81,7 @@ Etoday предлагает полистать страницы подарочн
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="http://js.cx/lazyimg/7.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="453" realsrc="//js.cx/lazyimg/7.jpg"></div>
</div>
<div class="news-item">
@ -89,7 +89,7 @@ Etoday предлагает полистать страницы подарочн
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="http://js.cx/lazyimg/8.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="622" realsrc="//js.cx/lazyimg/8.jpg"></div>
</div>

20
2-ui/3-event-details/9-event-onscroll/3-load-visible-img/source.view/index.html
View file

@ -27,7 +27,7 @@
Будущее уже сейчас! Скоро фраза из фантастического фильма "флипнуть до космопорта" станет реальностью. По крайней мере вторую ее часть человечество обеспечило. В октябре состоялась официальная церемония открытия космопорта «Америка», первой в мире коммерческой площадки для частных космических полетов. Космопорт открылся в пустыне штата Нью-Мексико. Проект был реализован английским бюро Foster and Partners. Космопорт включает в себя зал ожидания и подготовки к полетам, диспетчерский пункт и ангар. Также обеспечена взлетно-посадочная полоса длиной в три километра.
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="140" realsrc="http://js.cx/lazyimg/1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="140" realsrc="//js.cx/lazyimg/1.jpg">
</div>
</div>
@ -36,8 +36,8 @@
Супермодель Анна Вялицына (Anne Vyalitsyna) и музыкант Адам Ливайн (Adam Levine) снялись в ноябрьском номере Vogue Russia. Снимал их Аликс Малка (Alix Malka). Анна и Адам примерили на себя рок-н-ролльные наряды от Alexander Wang, Louis Vuitton, Alexander McQueen, Balmain, Yves Saint Laurent, подобранные для них Катериной Мухиной.
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="259" realsrc="http://js.cx/lazyimg/2-1.jpg">
<img src="http://js.cx/lazyimg/1.gif" width="200" height="260" realsrc="http://js.cx/lazyimg/2-2.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="259" realsrc="//js.cx/lazyimg/2-1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="200" height="260" realsrc="//js.cx/lazyimg/2-2.jpg">
</div>
</div>
@ -46,8 +46,8 @@
Стивен Мейзел (Steven Meisel) снял фотосессию для октябрьского Vogue Italia. В съемках приняли участие: Карен Элсон (Karen Elson), Джиневер ван Синус (Guinevere van Seenus), Эмма Балфур (Emma Balfour), Эн Уст (An Oost), Коринна Ингенлеф (Corinna Ingenleuf), Танга Моро (Tanga Moreau), Кордула Рейер (Cordula Reyer), Гейл о`Нил (Gail O'Neil), Эвелин Кун (Evelyn Kuhn), Каролин де Мэгрэ (Caroline de Maigret), Дэльфин Бафор (Delfine Bafort), Кирстен Оуэн (Kirsten Owen), Гунилла Линдблад (Gunilla Lindblad).
<div class="illustrations">
<img src="http://js.cx/lazyimg/1.gif" width="341" height="474" realsrc="http://js.cx/lazyimg/3-1.jpg">
<img src="http://js.cx/lazyimg/1.gif" width="338" height="474" realsrc="http://js.cx/lazyimg/3-2.jpg">
<img src="//js.cx/lazyimg/1.gif" width="341" height="474" realsrc="//js.cx/lazyimg/3-1.jpg">
<img src="//js.cx/lazyimg/1.gif" width="338" height="474" realsrc="//js.cx/lazyimg/3-2.jpg">
</div>
</div>
@ -57,7 +57,7 @@
Художник из Филадельфии Мэтью Кокс (Matthew Cox) создал серию работ, в которых объединены медицинский рентген и вышивка. Художник взял рентгенограммы и вышил их предполагаемое содержание частично со скелетными элементами. Получилось зловеще и интригующе. Выставка "Вышитый рентген" будет демонстрироваться в галерее Packer/Schopf в Майами, в рамках Базельской Художественной Недели.
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="452" realsrc="http://js.cx/lazyimg/4.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="452" realsrc="//js.cx/lazyimg/4.jpg"></div>
</div>
<div class="news-item">
@ -65,7 +65,7 @@
Etoday предлагает полистать страницы подарочного каталога продукции Apple образца 1983 года. Кажется, это было так давно!
Эта серия - только треть творческой продукции Кокса. Он также создает традиционные картины и иллюстрации.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="393" realsrc="http://js.cx/lazyimg/5.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="393" realsrc="//js.cx/lazyimg/5.jpg"></div>
</div>
<div class="news-item">
@ -73,7 +73,7 @@ Etoday предлагает полистать страницы подарочн
Занимательная коллекция старых почтовых открыток праздника Halloween. Открытки взяты из ньюйоркской публичной библиотеки и датируются примерно 1910 г.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="433" realsrc="http://js.cx/lazyimg/6.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="433" realsrc="//js.cx/lazyimg/6.jpg"></div>
</div>
<div class="news-item">
@ -81,7 +81,7 @@ Etoday предлагает полистать страницы подарочн
Молодой фотограф Эмили Ли (Emily Lee) использует фотографию, чтобы выразить свои чувства. "Когда я смотрю на жизнь через камеру, вижу все более ясно, - пишет она на своем профиле Flickr. - Фотосъемка - это искусство наблюдения." Эмили Ли - обладательница большого таланта и умения глубоко понимать искусство, хотя учится еще только в средней школе.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="680" height="453" realsrc="http://js.cx/lazyimg/7.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="680" height="453" realsrc="//js.cx/lazyimg/7.jpg"></div>
</div>
<div class="news-item">
@ -89,7 +89,7 @@ Etoday предлагает полистать страницы подарочн
Fashimals - tumblr-блог, посвященный иконам моды, превращенным в животных. Здесь есть Анна Винтур, Карл Лагерфельд, Терри Ричардсон, а также много других их коллег.
<div class="illustrations"><img src="http://js.cx/lazyimg/1.gif" width="600" height="622" realsrc="http://js.cx/lazyimg/8.jpg"></div>
<div class="illustrations"><img src="//js.cx/lazyimg/1.gif" width="600" height="622" realsrc="//js.cx/lazyimg/8.jpg"></div>
</div>

4
2-ui/3-event-details/9-event-onscroll/3-load-visible-img/task.md
View file

@ -12,7 +12,7 @@
<img src="yozhik.jpg" width="128" height="128">
```
<img src="http://js.cx/clipart/yozhik.jpg" width="128" height="128">
<img src="//js.cx/clipart/yozhik.jpg" width="128" height="128">
Стоит вот такое:
@ -21,7 +21,7 @@
<img *!*src="1.gif"*/!* width="128" height="128" *!*realsrc="yozhik.jpg"*/!*>
```
<img src="http://js.cx/lazyimg/1.gif" width="128" height="128">
<img src="//js.cx/lazyimg/1.gif" width="128" height="128">
То есть настоящий URL находится в атрибуте `realsrc` (название атрибута можно выбрать любое). А в `src` поставлен серый GIF размера 1x1, и так как `width/height` правильные, то он растягивается, так что вместо изображения виден серый прямоугольник.

4
2-ui/3-event-details/index.md
View file

@ -1,5 +1,5 @@
# События в деталях
Основные типы событий, которые нужны в 95% случаев. Глубоко изучаем их особенности и применение.
В этом разделе мы разбираем конкретные события и особенности работы с ними.
Вы можете читать этот раздел в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся.
Вы можете читать его в любом порядке или кратко просмотреть его и вернуться к конкретным событиям, когда они понадобятся.

2
2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/solution.view/index.html
View file

@ -18,7 +18,7 @@
Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.
<div style="position:relative;top:30px;width:50px;height:50px">
<div style="width:41px; height:48px; background:url(http://js.cx/clipart/mousie.gif)" id="mousie" tabindex="-1"></div>
<div style="width:41px; height:48px; background:url(//js.cx/clipart/mousie.gif)" id="mousie" tabindex="-1"></div>
</div>
<script>

2
2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/source.view/index.html
View file

@ -17,7 +17,7 @@
Кликните на мышонка и передвигайте его, нажимая клавиши со стрелками.
<div style="width:41px;height:48px;background:url(http://js.cx/clipart/mousie.gif)"></div>
<div style="width:41px;height:48px;background:url(//js.cx/clipart/mousie.gif)"></div>

2
2-ui/4-forms-controls/2-focus-blur/2-keyboard-mouse/task.md
View file

@ -12,7 +12,7 @@
</style>
<div style="position:relative;top:20px;width:100px;height:100px">
<div style="width:41px; height:48px;background:url(http://js.cx/clipart/mousie.gif)" id="mousie" tabindex="0"></div>
<div style="width:41px; height:48px;background:url(//js.cx/clipart/mousie.gif)" id="mousie" tabindex="0"></div>
</div>
<script>

2
2-ui/4-forms-controls/4-forms-submit/1-modal-dialog/source.view/index.html
View file

@ -15,7 +15,7 @@ html, body {
padding: 5px 5px 5px 70px;
width: 200px;
border: 1px solid black;
background: white url(http://js.cx/clipart/prompt.png) no-repeat left 5px;
background: white url(//js.cx/clipart/prompt.png) no-repeat left 5px;
vertical-align: middle;
}

4
2-ui/5-widgets/2-widgets-structure/menu-1.view/style.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/2-widgets-structure/menu-3-elem.view/style.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/4-template-lodash/3-menu-template/solution.view/menu.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/4-template-lodash/3-menu-template/source.view/menu.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/4-template-lodash/menu-3-template.view/menu.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

2
2-ui/5-widgets/5-custom-events/3-custom-select/solution.view/customselect.css
View file

@ -8,7 +8,7 @@
height: 17px;
border: 1px solid #ADD8E6;
background-position: right;
background-image: url(http://js.cx/clipart/select-button.gif);
background-image: url(//js.cx/clipart/select-button.gif);
background-repeat: no-repeat;
padding: 2px;
cursor: pointer;

2
2-ui/5-widgets/5-custom-events/3-custom-select/source.view/index.html
View file

@ -10,7 +10,7 @@
<div>Последний результат: <span id="result">...</span></div>
<img src="http://js.cx/clipart/select-button.gif">
<img src="//js.cx/clipart/select-button.gif">
<div id="animal-select" class="customselect">
<div class="customselect-title">Выберите</div>

4
2-ui/5-widgets/5-custom-events/menu-callback.view/style.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/5-custom-events/menu-event.view/style.css
View file

@ -7,7 +7,7 @@
.menu .title {
font-weight: bold;
cursor: pointer;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
padding-left: 18px;
}
@ -16,5 +16,5 @@
}
.menu.open .title {
background-image: url(http://js.cx/clipart/arrow-down.png);
background-image: url(//js.cx/clipart/arrow-down.png);
}

4
2-ui/5-widgets/6-widget-tasks/3-resize-img/solution.view/index.html
View file

@ -20,7 +20,7 @@
right: 0;
width: 16px;
height: 16px;
background: url(http://js.cx/clipart/handle-se.png) no-repeat;
background: url(//js.cx/clipart/handle-se.png) no-repeat;
cursor: se-resize;
}
@ -47,7 +47,7 @@
</head>
<body>
<img style="width:500px;height:282px" id="heroes" src="http://js.cx/clipart/heroes.jpg">
<img style="width:500px;height:282px" id="heroes" src="//js.cx/clipart/heroes.jpg">
<div id="info"></div>

4
2-ui/5-widgets/6-widget-tasks/3-resize-img/source.view/index.html
View file

@ -6,9 +6,9 @@
</head>
<body>
<img style="width:500px;height:282px" id="heroes" src="http://js.cx/clipart/heroes.jpg">
<img style="width:500px;height:282px" id="heroes" src="//js.cx/clipart/heroes.jpg">
Картинка для декорации правого-нижнего угла: <img src="http://js.cx/clipart/handle-se.png">
Картинка для декорации правого-нижнего угла: <img src="//js.cx/clipart/handle-se.png">
<div id="info"></div>

2
2-ui/5-widgets/6-widget-tasks/3-resize-img/task.md
View file

@ -24,5 +24,5 @@ $(resizeMe).on("resize", function(e) {
Минимальный размер изображения 3x3, меньше ресайзить нельзя.
В исходном документе есть ссылка на <a href="http://js.cx/clipart/handle-se.png">картинку handle-se.png</a> для правого-нижнего угла.
В исходном документе есть ссылка на <a href="//js.cx/clipart/handle-se.png">картинку handle-se.png</a> для правого-нижнего угла.

2
2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/solution.view/index.html
View file

@ -17,7 +17,7 @@
</head>
<body>
<img width="500" height="282" id="heroes" src="http://js.cx/clipart/heroes.jpg">
<img width="500" height="282" id="heroes" src="//js.cx/clipart/heroes.jpg">
<div id="info"></div>
<script>

2
2-ui/5-widgets/6-widget-tasks/4-img-select-mouse/source.view/index.html
View file

@ -6,7 +6,7 @@
</head>
<body>
<img width="500" height="282" id="heroes" src="http://js.cx/clipart/heroes.jpg">
<img width="500" height="282" id="heroes" src="//js.cx/clipart/heroes.jpg">
<div id="info"></div>
<script>

4
2-ui/5-widgets/6-widget-tasks/5-menu-animated/solution.view/index.html
View file

@ -21,14 +21,14 @@
.menu .menu-title {
padding-left: 16px;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
font-size: 18px;
cursor: pointer;
}
.menu-open .menu-title {
background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-down.png) left center no-repeat;
}
.menu-open ul {

4
2-ui/5-widgets/6-widget-tasks/5-menu-animated/source.view/index.html
View file

@ -21,14 +21,14 @@
.menu .menu-title {
padding-left: 16px;
background: url(http://js.cx/clipart/arrow-right.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-right.png) left center no-repeat;
font-size: 18px;
cursor: pointer;
}
.menu-open .menu-title {
background: url(http://js.cx/clipart/arrow-down.png) left center no-repeat;
background: url(//js.cx/clipart/arrow-down.png) left center no-repeat;
}
.menu-open ul {

4
2-ui/5-widgets/8-widget-tasks-2/5-tree-checkboxes/solution.view/tree.css
View file

@ -23,12 +23,12 @@
}
.tree-open .tree-toggler {
background: url(http://js.cx/tree/minus.gif) no-repeat center;
background: url(//js.cx/tree/minus.gif) no-repeat center;
}
.tree-closed .tree-toggler {
background: url(http://js.cx/tree/plus.gif) no-repeat center;
background: url(//js.cx/tree/plus.gif) no-repeat center;
}
.tree li {

2
3-more/11-css-for-js/12-space-under-img/block.view/index.html
View file

@ -12,7 +12,7 @@
<table>
<tr>
<td style="border:1px red solid">
<img src="http://js.cx/clipart/square_50.png" width="50" height="50">
<img src="//js.cx/clipart/square_50.png" width="50" height="50">
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/inline-p.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid; font-size:120%">
<img src="http://js.cx/clipart/square_50.png" width="50" height="50">p
<img src="//js.cx/clipart/square_50.png" width="50" height="50">p
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/inline.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid">
<img src="http://js.cx/clipart/square_50.png" width="50" height="50">
<img src="//js.cx/clipart/square_50.png" width="50" height="50">
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/valign-p.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid">
p<img src="http://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
p<img src="//js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">p
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/valign-small-lh.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid; line-height: 1px">
<img src="http://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
<img src="//js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/valign-small.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid">
<img src="http://js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
<img src="//js.cx/clipart/square_50.png" width="10" height="10" style="vertical-align:top">
</td>
</tr>
</table>

2
3-more/11-css-for-js/12-space-under-img/valign.view/index.html
View file

@ -9,7 +9,7 @@
<table>
<tr>
<td style="border:1px red solid">
<img src="http://js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
<img src="//js.cx/clipart/square_50.png" width="50" height="50" style="vertical-align:top">
</td>
</tr>
</table>

2
3-more/11-css-for-js/14-height-percent/height-percent-float-exact.view/index.html
View file

@ -10,7 +10,7 @@
.toggler {
height: 100%;
background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
background: #EEE url(//js.cx/height-percent/arrow_left.png) center center no-repeat;
border-right: #AAA 1px solid;
width: 30px;
float: left;

2
3-more/11-css-for-js/14-height-percent/height-percent-float.view/index.html
View file

@ -9,7 +9,7 @@
.toggler {
height: 100%;
background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
background: #EEE url(//js.cx/height-percent/arrow_left.png) center center no-repeat;
border-right: #AAA 1px solid;
width: 30px;
float: left;

2
3-more/11-css-for-js/14-height-percent/height-percent.view/index.html
View file

@ -14,7 +14,7 @@
.toggler {
height: 100%;
background: #EEE url(http://js.cx/height-percent/arrow_left.png) center center no-repeat;
background: #EEE url(//js.cx/height-percent/arrow_left.png) center center no-repeat;
border-right: #AAA 1px solid;
width: 30px;
position: absolute;

2
3-more/11-css-for-js/17-css-sprite/height48.view/index.html
View file

@ -9,7 +9,7 @@
height: 48px;
float: left;
outline: 1px dotted black;
background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
background: url(//js.cx/sprite-tree/icons.gif) no-repeat;
}
li {

2
3-more/11-css-for-js/17-css-sprite/sprite-example/index.html
View file

@ -8,7 +8,7 @@
height: 35px;
border: 1px solid black;
float: left;
background-image: url(http://js.cx/sprite-example/sprite.png);
background-image: url(//js.cx/sprite-example/sprite.png);
background-position: -90px -40px;
}
</style>

2
3-more/11-css-for-js/17-css-sprite/sprite-tree-1/height48.view/index.html
View file

@ -9,7 +9,7 @@
height: 48px;
float: left;
outline: 1px dotted black;
background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
background: url(//js.cx/sprite-tree/icons.gif) no-repeat;
}
li {

2
3-more/11-css-for-js/17-css-sprite/sprite-tree-1/index.html
View file

@ -9,7 +9,7 @@
height: 16px;
float: left;
outline: 1px dotted black;
background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
background: url(//js.cx/sprite-tree/icons.gif) no-repeat;
}
li {

6
3-more/11-css-for-js/17-css-sprite/sprite-tree-src.view/index.html
View file

@ -12,17 +12,17 @@
.open .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/minus.gif);
background: url(//js.cx/sprite-tree/minus.gif);
}
.closed .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/plus.gif);
background: url(//js.cx/sprite-tree/plus.gif);
}
.leaf .icon {
cursor: text;
background: url(http://js.cx/sprite-tree/article.gif);
background: url(//js.cx/sprite-tree/article.gif);
}
li {

2
3-more/11-css-for-js/17-css-sprite/sprite-tree.view/index.html
View file

@ -8,7 +8,7 @@
width: 16px;
height: 16px;
float: left;
background: url(http://js.cx/sprite-tree/icons.gif) no-repeat;
background: url(//js.cx/sprite-tree/icons.gif) no-repeat;
}
.open .icon {

2
3-more/11-css-for-js/2-css-units/article.md
View file

@ -199,7 +199,7 @@
<div><button id="up">Кликните, чтобы увеличить размер шрифта</button></div>
<img src="http://js.cx/clipart/angry_dog.png">
<img src="//js.cx/clipart/angry_dog.png">
<ul>
<li>Собака

18
3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-float-diffsize.view/index.html
View file

@ -26,47 +26,47 @@
<ul class="gallery">
<li>
<img src="http://js.cx/carousel/1.png" width="130" height="130">
<img src="//js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<img src="//js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<img src="//js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<img src="//js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<img src="//js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<img src="//js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<img src="//js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<img src="//js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<img src="//js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>

12
3-more/11-css-for-js/4-float/1-inline-block-vs-float/gallery-inline-block.view/index.html
View file

@ -28,32 +28,32 @@
<ul class="gallery">
<li>
<img src="http://js.cx/carousel/1.png" width="130" height="130">
<img src="//js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<img src="//js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<img src="//js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<img src="//js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<img src="//js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<img src="//js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>

18
3-more/11-css-for-js/4-float/1-inline-block-vs-float/solution.view/index.html
View file

@ -22,47 +22,47 @@
<ul class="gallery">
<li>
<img src="http://js.cx/carousel/1.png" width="130" height="130">
<img src="//js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<img src="//js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<img src="//js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<img src="//js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<img src="//js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<img src="//js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<img src="//js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<img src="//js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<img src="//js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>

6
3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/solution.view/index.html
View file

@ -12,17 +12,17 @@
.open .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/minus.gif);
background: url(//js.cx/sprite-tree/minus.gif);
}
.closed .icon {
cursor: pointer;
background: url(http://js.cx/sprite-tree/plus.gif);
background: url(//js.cx/sprite-tree/plus.gif);
}
.leaf .icon {
cursor: text;
background: url(http://js.cx/sprite-tree/article.gif);
background: url(//js.cx/sprite-tree/article.gif);
}
li {

6
3-more/11-css-for-js/4-float/2-tree-with-multiline-nodes/source.view/index.html
View file

@ -9,9 +9,9 @@
<body>
<!-- картинки для узлов -->
<img src="http://js.cx/sprite-tree/minus.gif" width="16" height="16">
<img src="http://js.cx/sprite-tree/plus.gif" width="16" height="16">
<img src="http://js.cx/sprite-tree/article.gif" width="16" height="16">
<img src="//js.cx/sprite-tree/minus.gif" width="16" height="16">
<img src="//js.cx/sprite-tree/plus.gif" width="16" height="16">
<img src="//js.cx/sprite-tree/article.gif" width="16" height="16">
<ul>

4
3-more/11-css-for-js/4-float/3-paginator-css/nav-div-wrong/index.html
View file

@ -28,9 +28,9 @@
Текст Сверху
<div class="nav">
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="//js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<div class="pages">1 2 3 4 5 6 7 8 9</div>
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
<img src="//js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
</div>
Текст Снизу

4
3-more/11-css-for-js/4-float/3-paginator-css/solution.view/index.html
View file

@ -39,8 +39,8 @@
Текст Сверху
<div class="nav">
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
<img src="//js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="//js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
<ul class="pages">
<li>1</li>
<li>2</li>

4
3-more/11-css-for-js/4-float/3-paginator-css/source.view/index.html
View file

@ -16,7 +16,7 @@
Текст Сверху
<div class="nav">
<img src="http://js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<img src="//js.cx/clipart/arrow-left.jpg" class="left" width="40" height="40">
<ul class="pages">
<li>1</li>
@ -30,7 +30,7 @@
<li>9</li>
</ul>
<img src="http://js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
<img src="//js.cx/clipart/arrow-right.jpg" class="right" width="40" height="40">
</div>
Текст Снизу

18
3-more/11-css-for-js/4-float/gallery-float.view/index.html
View file

@ -22,47 +22,47 @@
<ul class="gallery">
<li>
<img src="http://js.cx/carousel/1.png" width="130" height="130">
<img src="//js.cx/carousel/1.png" width="130" height="130">
<div>Картинка 1</div>
</li>
<li>
<img src="http://js.cx/carousel/2.png" width="130" height="130">
<img src="//js.cx/carousel/2.png" width="130" height="130">
<div>Картинка 2</div>
</li>
<li>
<img src="http://js.cx/carousel/3.png" width="130" height="130">
<img src="//js.cx/carousel/3.png" width="130" height="130">
<div>Картинка 3</div>
</li>
<li>
<img src="http://js.cx/carousel/4.png" width="130" height="130">
<img src="//js.cx/carousel/4.png" width="130" height="130">
<div>Картинка 4</div>
</li>
<li>
<img src="http://js.cx/carousel/5.png" width="130" height="130">
<img src="//js.cx/carousel/5.png" width="130" height="130">
<div>Картинка 5</div>
</li>
<li>
<img src="http://js.cx/carousel/6.png" width="130" height="130">
<img src="//js.cx/carousel/6.png" width="130" height="130">
<div>Картинка 6</div>
</li>
<li>
<img src="http://js.cx/carousel/7.png" width="130" height="130">
<img src="//js.cx/carousel/7.png" width="130" height="130">
<div>Картинка 7</div>
</li>
<li>
<img src="http://js.cx/carousel/8.png" width="130" height="130">
<img src="//js.cx/carousel/8.png" width="130" height="130">
<div>Картинка 8</div>
</li>
<li>
<img src="http://js.cx/carousel/9.png" width="130" height="130">
<img src="//js.cx/carousel/9.png" width="130" height="130">
<div>Картинка 9</div>
</li>

2
3-more/11-css-for-js/4-float/two-columns-2.view/index.html
View file

@ -48,7 +48,7 @@
<h3>Винни-Пух</h3>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<img src="//js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/two-columns.view/index.html
View file

@ -48,7 +48,7 @@
<div class="inner">
<h3>Винни-Пух</h3>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<img src="//js.cx/clipart/winnie-mult.jpg" style="float:left; margin: 0 1em .5em 0">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/winnie-block-bg.view/index.html
View file

@ -24,7 +24,7 @@ p {
<h2>Винни-Пух</h2>
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150" style="float:right;opacity:0.8">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/winnie-block.view/index.html
View file

@ -21,7 +21,7 @@
<h2>Винни-Пух</h2>
<div class="left-picture">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

4
3-more/11-css-for-js/4-float/winnie-clear-1.view/index.html
View file

@ -26,7 +26,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
@ -37,7 +37,7 @@
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<img src="//js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>

4
3-more/11-css-for-js/4-float/winnie-clear-2.view/index.html
View file

@ -27,7 +27,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
@ -38,7 +38,7 @@
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<img src="//js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>

4
3-more/11-css-for-js/4-float/winnie-clear-3.view/index.html
View file

@ -26,7 +26,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>
@ -38,7 +38,7 @@
<h2>Сова</h2>
<div class="left">
<img src="http://js.cx/clipart/owl-mult.jpg" width="200" height="233">
<img src="//js.cx/clipart/owl-mult.jpg" width="200" height="233">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-clear-4.view/index.html
View file

@ -27,7 +27,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-clearfill-clearfix.view/index.html
View file

@ -41,7 +41,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-clearfill-div.view/index.html
View file

@ -29,7 +29,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-clearfill-float.view/index.html
View file

@ -29,7 +29,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-clearfill-overflow.view/index.html
View file

@ -31,7 +31,7 @@
<h2>Винни-Пух</h2>
<div class="left">
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<div>Кадр из советского мультфильма</div>
</div>

2
3-more/11-css-for-js/4-float/winnie-nofloat-1.view/index.html
View file

@ -14,7 +14,7 @@
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" style="position:absolute" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/winnie-nofloat-2.view/index.html
View file

@ -14,7 +14,7 @@
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" style="position:absolute;right:0" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/winnie-nofloat-3.view/index.html
View file

@ -13,7 +13,7 @@
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" style="float:right" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

2
3-more/11-css-for-js/4-float/winnie-nofloat.view/index.html
View file

@ -13,7 +13,7 @@
</head>
<body>
<img src="http://js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>

6
3-more/11-css-for-js/4-float/winnie.view/index.html
View file

@ -23,20 +23,20 @@
<h2>Винни-Пух</h2>
<img src="http://js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
<img src="//js.cx/clipart/winnie-mult.jpg" class="right" width="200" height="150">
<p>Ви́нни-Пу́х (англ. Winnie-the-Pooh) — плюшевый мишка, персонаж повестей и стихов Алана Александра Милна (цикл не имеет общего названия и обычно тоже называется «Винни-Пух», по первой книге). Один из самых известных героев детской литературы XX века.</p>
<p>В 1960-е—1970-е годы, благодаря пересказу Бориса Заходера «Винни-Пух и все-все-все», а затем и фильмам студии «Союзмультфильм», где мишку озвучивал Евгений Леонов, Винни-Пух стал очень популярен и в Советском Союзе.</p>
<img src="http://js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
<img src="//js.cx/clipart/winnie-nazarov.jpg" class="left" width="200" height="201">
<p>Первый перевод «Винни-Пуха» в СССР вышел в 1958 году в Литве (лит. Mikė Pūkuotukas), его выполнил 20-летний литовский писатель Виргилюс Чепайтис, пользовавшийся польским переводом Ирены Тувим. Впоследствии Чепайтис, познакомившись с английским оригиналом, существенно переработал свой перевод, переиздававшийся в Литве неоднократно.</p>
<p>История Винни-Пуха в России начинается с того же 1958 года, когда с книгой познакомился Борис Владимирович Заходер.</p>
<img src="http://js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
<img src="//js.cx/clipart/winnie-stamp.jpg" class="right" width="200" height="142">
<p>В студии «Союзмультфильм» под руководством Фёдора Хитрука было создано три мультфильма.</p>

Some files were not shown because too many files have changed in this diff Show more