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

up

Browse source
This commit is contained in:
Ilya Kantor 2017-03-12 12:54:13 +03:00
parent fc84391bd2
commit 8360ebbe90
60 changed files with 920 additions and 1672 deletions
Download patch file Download diff file Expand all files Collapse all files

94
2-ui/3-event-details/8-onscroll/2-updown-button/solution.md
View file

@ -1,94 +0,0 @@
Добавим в документ `DIV` с кнопкой:
```html
<div id="updown"></div>
```
Сама кнопка должна иметь `position:fixed`.
```css
#updown {
position: fixed;
top: 30px;
left: 10px;
cursor: pointer;
}
```
Кнопка является CSS-спрайтом, поэтому мы дополнительно добавляем ей размер и два состояния:
```css
#updown {
height: 9px;
width: 14px;
position: fixed;
top: 30px;
left: 10px;
cursor: pointer;
}
#updown.up {
background: url(...updown.gif) left top;
}
#updown.down {
background: url(...updown.gif) left -9px;
}
```
Для решения необходимо аккуратно разобрать все возможные состояния кнопки и указать, что делать при каждом.
Состояние -- это просто класс элемента: `up/down` или пустая строка, если кнопка не видна.
При прокрутке состояния меняются следующим образом:
```js
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch (updownElem.className) {
case '':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
updownElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
}
}
```
При клике:
```js
var pageYLabel = 0;
updownElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch (this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
```

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

@ -1,6 +1,5 @@
<!DOCTYPE HTML>
<html>
<head>
<style>
body,
@ -10,15 +9,15 @@
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#updown {
#arrowTop {
height: 9px;
width: 14px;
color: green;
@ -27,14 +26,11 @@
left: 10px;
cursor: pointer;
}
#updown.up::before {
#arrowTop::before {
content: '▲';
}
#updown.down::before {
content: '▼';
}
</style>
<meta charset="utf-8">
</head>
@ -43,60 +39,23 @@
<div id="matrix">
<script>
for (var i = 0; i < 2000; i++) document.writeln(i)
for (let i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<div id="updown"></div>
<div id="arrowTop" hidden></div>
<script>
var updownElem = document.getElementById('updown');
var pageYLabel = 0;
arrowTop.onclick = function() {
window.scrollTo(pageXOffset, 0);
// after scrollTo, there will be a "scroll" event, so the arrow will hide automatically
};
updownElem.onclick = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
switch (this.className) {
case 'up':
pageYLabel = pageY;
window.scrollTo(0, 0);
this.className = 'down';
break;
case 'down':
window.scrollTo(0, pageYLabel);
this.className = 'up';
}
}
window.onscroll = function() {
var pageY = window.pageYOffset || document.documentElement.scrollTop;
var innerHeight = document.documentElement.clientHeight;
switch (updownElem.className) {
case '':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
case 'up':
if (pageY < innerHeight) {
updownElem.className = '';
}
break;
case 'down':
if (pageY > innerHeight) {
updownElem.className = 'up';
}
break;
}
}
window.addEventListener('scroll', function() {
arrowTop.hidden = (pageYOffset < document.documentElement.clientHeight);
});
</script>
</body>
</html>
</body>
</html>

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

@ -1,8 +1,6 @@
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8">
<style>
body,
html {
@ -11,31 +9,45 @@
padding: 0;
margin: 0;
}
#matrix {
width: 400px;
margin: auto;
overflow: auto;
text-align: justify;
}
#arrowTop {
height: 9px;
width: 14px;
color: green;
position: fixed;
top: 10px;
left: 10px;
cursor: pointer;
}
#arrowTop::before {
content: '▲';
}
</style>
<meta charset="utf-8">
</head>
<body>
Символы для стрелок: ▲ ▼
<div id="matrix">
<script>
for (var i = 0; i < 2000; i++) document.writeln(i)
for (let i = 0; i < 2000; i++) document.writeln(i)
</script>
</div>
<script>
// ... ваш код
// при необходимости, в документ можно добавить элементы и стили
</script>
</body>
<div id="arrowTop"></div>
</html>
<script>
// ... your code ...
</script>
</body>
</html>

20
2-ui/3-event-details/8-onscroll/2-updown-button/task.md
View file

@ -1,20 +1,16 @@
importance: 3
importance: 5
---
# Кнопка вверх-вниз
# Up/down button
Создайте кнопку навигации, которая помогает при прокрутке страницы.
Create a "to the top" button to help with page scrolling.
Работать должна следующим образом:
It should work like this:
- While the page is not scrolled down at least for the window height -- it's invisible.
- When the page is scrolled down more than the window height -- there appears an "upwards" arrow in the left-top corner. If the page is scrolled back, it disappears.
- When the arrow is clicked, the page scrolls to the top.
- Пока страница промотана меньше чем на высоту экрана вниз -- кнопка не видна.
- При промотке страницы вниз больше, чем на высоту экрана, появляется кнопка "стрелка вверх".
- При нажатии на нее страница прыгает вверх, но не только. Дополнительно, кнопка меняется на "стрелка вниз" и при клике возвратит на старое место. Если же в этом состоянии посетитель сам прокрутит вниз больше, чем один экран, то она вновь изменится на "стрелка вверх".
Должен получиться удобный навигационный помощник.
Посмотрите, как оно должно работать, в ифрейме ниже. Прокрутите ифрейм, навигационная стрелка появится слева-сверху.
Like this:
[iframe border="1" height="200" link src="solution"]