Skip to content

Commit 236c797

Browse files
rachelandrewrachelandrew
committed
overflow examples
1 parent 7e5710a commit 236c797

File tree

6 files changed

+769
-0
lines changed

6 files changed

+769
-0
lines changed

‎flow/overflow/auto.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Overflow auto</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.box {
62+
width: 300px;
63+
height: 100px;
64+
border: 5px solid rebeccapurple;
65+
padding: 10px;
66+
overflow: auto;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<section>
73+
<div class="box">
74+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
75+
76+
</div>
77+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
78+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
79+
80+
</section>
81+
<textarea class="playable-css">
82+
.box {
83+
width: 300px;
84+
height: 100px;
85+
border: 5px solid rebeccapurple;
86+
padding: 10px;
87+
overflow: auto;
88+
}
89+
</textarea>
90+
<textarea id="code" class="playable-html">
91+
<div class="box">
92+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
93+
94+
</div>
95+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
96+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
97+
</textarea>
98+
<div class="playable-buttons">
99+
<input id="reset" type="button" value="Reset">
100+
</div>
101+
</body>
102+
<script>
103+
var section = document.querySelector('section');
104+
var editable = document.querySelector('.editable');
105+
var textareaHTML = document.querySelector('.playable-html');
106+
var textareaCSS = document.querySelector('.playable-css');
107+
var reset = document.getElementById('reset');
108+
var htmlCode = textareaHTML.value;
109+
var cssCode = textareaCSS.value;
110+
111+
function fillCode() {
112+
editable.innerHTML = textareaCSS.value;
113+
section.innerHTML = textareaHTML.value;
114+
}
115+
116+
reset.addEventListener('click', function () {
117+
textareaHTML.value = htmlCode;
118+
textareaCSS.value = cssCode;
119+
fillCode();
120+
});
121+
122+
textareaHTML.addEventListener('input', fillCode);
123+
textareaCSS.addEventListener('input', fillCode);
124+
window.addEventListener('load', fillCode);
125+
</script>
126+
127+
</html>

‎flow/overflow/hidden.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Overflow hidden</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.box {
62+
width: 300px;
63+
height: 100px;
64+
border: 5px solid rebeccapurple;
65+
padding: 10px;
66+
overflow: hidden;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<section>
73+
<div class="box">
74+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
75+
76+
</div>
77+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
78+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
79+
80+
</section>
81+
<textarea class="playable-css">
82+
.box {
83+
width: 300px;
84+
height: 100px;
85+
border: 5px solid rebeccapurple;
86+
padding: 10px;
87+
overflow: hidden;
88+
}
89+
</textarea>
90+
<textarea id="code" class="playable-html">
91+
<div class="box">
92+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
93+
94+
</div>
95+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
96+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
97+
</textarea>
98+
<div class="playable-buttons">
99+
<input id="reset" type="button" value="Reset">
100+
</div>
101+
</body>
102+
<script>
103+
var section = document.querySelector('section');
104+
var editable = document.querySelector('.editable');
105+
var textareaHTML = document.querySelector('.playable-html');
106+
var textareaCSS = document.querySelector('.playable-css');
107+
var reset = document.getElementById('reset');
108+
var htmlCode = textareaHTML.value;
109+
var cssCode = textareaCSS.value;
110+
111+
function fillCode() {
112+
editable.innerHTML = textareaCSS.value;
113+
section.innerHTML = textareaHTML.value;
114+
}
115+
116+
reset.addEventListener('click', function () {
117+
textareaHTML.value = htmlCode;
118+
textareaCSS.value = cssCode;
119+
fillCode();
120+
});
121+
122+
textareaHTML.addEventListener('input', fillCode);
123+
textareaCSS.addEventListener('input', fillCode);
124+
window.addEventListener('load', fillCode);
125+
</script>
126+
127+
</html>

‎flow/overflow/overflow-y.html‎

Lines changed: 127 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,127 @@
1+
<!DOCTYPE html>
2+
<html>
3+
4+
<head>
5+
<meta charset="utf-8">
6+
<title>CSS Overflow clip</title>
7+
8+
<style>
9+
body {
10+
font: 1.2em Helvetica, Arial, sans-serif;
11+
margin: 20px;
12+
padding: 0;
13+
}
14+
15+
textarea {
16+
font-family: monospace;
17+
display: block;
18+
margin-bottom: 10px;
19+
background-color: #F4F7F8;
20+
border: none;
21+
border-left: 6px solid #558ABB;
22+
color: #4D4E53;
23+
width: 90%;
24+
max-width: 700px;
25+
padding: 10px 10px 0px;
26+
font-size: 90%;
27+
}
28+
29+
textarea:nth-of-type(1) {
30+
height: 80px
31+
}
32+
33+
textarea:nth-of-type(2) {
34+
height: 160px
35+
}
36+
37+
.playable-buttons {
38+
text-align: right;
39+
width: 90%;
40+
max-width: 700px;
41+
padding: 5px 10px 5px 26px;
42+
font-size: 100%;
43+
}
44+
45+
section {
46+
width: 90%;
47+
max-width: 700px;
48+
border: 1px solid #4D4E53;
49+
border-radius: 2px;
50+
padding: 10px 14px 10px 10px;
51+
margin-bottom: 10px;
52+
}
53+
54+
section input {
55+
display: block;
56+
margin: 5px;
57+
}
58+
59+
</style>
60+
<style class="editable">
61+
.box {
62+
width: 300px;
63+
height: 100px;
64+
border: 5px solid rebeccapurple;
65+
padding: 10px;
66+
overflow-y: scroll;
67+
}
68+
</style>
69+
</head>
70+
71+
<body>
72+
<section>
73+
<div class="box">
74+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
75+
76+
</div>
77+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
78+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
79+
80+
</section>
81+
<textarea class="playable-css">
82+
.box {
83+
width: 300px;
84+
height: 100px;
85+
border: 5px solid rebeccapurple;
86+
padding: 10px;
87+
overflow-y: scroll;
88+
}
89+
</textarea>
90+
<textarea id="code" class="playable-html">
91+
<div class="box">
92+
<p>One November night in the year 1782, so the story runs, two brothers sat over their winter fire in the little French town of Annonay, watching the grey smoke-wreaths from the hearth curl up the wide chimney.</p>
93+
94+
</div>
95+
<p>Their names were Stephen and Joseph Montgolfier, they were papermakers by trade, and were noted as possessing thoughtful minds and a deep interest in all scientific knowledge and new discovery.</p>
96+
<p>Before that night—a memorable night, as it was to prove—hundreds of millions of people had watched the rising smoke-wreaths of their fires without drawing any special inspiration from the fact.”</p>
97+
</textarea>
98+
<div class="playable-buttons">
99+
<input id="reset" type="button" value="Reset">
100+
</div>
101+
</body>
102+
<script>
103+
var section = document.querySelector('section');
104+
var editable = document.querySelector('.editable');
105+
var textareaHTML = document.querySelector('.playable-html');
106+
var textareaCSS = document.querySelector('.playable-css');
107+
var reset = document.getElementById('reset');
108+
var htmlCode = textareaHTML.value;
109+
var cssCode = textareaCSS.value;
110+
111+
function fillCode() {
112+
editable.innerHTML = textareaCSS.value;
113+
section.innerHTML = textareaHTML.value;
114+
}
115+
116+
reset.addEventListener('click', function () {
117+
textareaHTML.value = htmlCode;
118+
textareaCSS.value = cssCode;
119+
fillCode();
120+
});
121+
122+
textareaHTML.addEventListener('input', fillCode);
123+
textareaCSS.addEventListener('input', fillCode);
124+
window.addEventListener('load', fillCode);
125+
</script>
126+
127+
</html>

0 commit comments

Comments
 (0)