-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathindex.html
252 lines (225 loc) · 18.7 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
<!DOCTYPE html>
<!-- Code by
______ __ __ ___
/_ __// /_ ___ _____ ____ ___ ____ / |/ /____ _ ____
/ / / __ \ / _ \ / ___// __ `__ \ / __ \ / /|_/ // __ `// __ \
/ / / / / // __// / / / / / / // /_/ // / / // /_/ // / / /
/_/ /_/ /_/ \___//_/ /_/ /_/ /_/ \____//_/ /_/ \__,_//_/ /_/
-->
<html>
<head>
<meta http-equiv=Content-Type content='text/html; charset=utf-8'>
<title>Tabbed Interface demo using CSS</title>
<link rel='stylesheet' type='text/css' href='tabs.css' >
<!-- Load and name green color style sheet to use it as default color -->
<link rel='stylesheet' type='text/css' title='green' href='tabs-green.css'>
<!-- Set the green style sheet to be the default before loading others -->
<meta http-equiv='Default-Style' content='green'>
<!-- Load and name alternative color style sheet -->
<link rel='stylesheet' type='text/css' title='white' href='tabs-white.css'>
<script type='text/javascript'>
/**
* Default cookies last for ten years in this routine.
*
* c_name - the name of the cookie you want to set. Periods in a name appear as underscores in JavaScript.
* value - the value you want to save for the next time.
* exdays - an optional parameter that defaults to ten years when missing.
*/
function setCookie( c_name, value, exdays )
{
/** <sigh> And here comes custom coding because of browser issues...
*
* The desire was to have a default value for exdays using this function template
* function setCookie( c_name, value, exdays = 3650 )
* But Chrome does not like to see '=' in the argument list of a function declaration.
*
* Plan B is shown on the next line. Yes, there are THREE = signs in the code.
*/
if( typeof( exdays ) === 'undefined' ) exdays = 3650;
var exdate = new Date();
exdate.setDate( exdate.getDate() + exdays );
var c_value = escape(value) + ( ( exdays == null ) ? '' : '; expires = ' + exdate.toUTCString() );
document.cookie = c_name + '=' + c_value;
}
function getCookie( c_name )
{
var i, key, value, ARRcookies = document.cookie.split( ';' );
for( i = 0; i < ARRcookies.length; i++ )
{
key = ARRcookies[i].substr( 0, ARRcookies[i].indexOf( '=' ) );
value = ARRcookies[i].substr( ARRcookies[i].indexOf( '=' ) + 1);
key = key.replace( /^\s+|\s+$/g, '' );
if( key == c_name )
{
return unescape( value );
}
}
}
/**
* To erase a cookie, set it with an expiration date prior to now.
*/
function deleteCookies()
{
setCookie( 'car.chooser', '', -1 );
setCookie( 'car.clicker', '', -1 );
document.getElementById( 'car.chooser' ).className = '';
document.getElementById( 'car.clicker' ).className = '';
}
function saveSetting( flag )
{
setCookie( flag, document.getElementById(flag).value );
document.getElementById(flag).className = 'remembered_input';
}
function toggleSetting( flag )
{
setCookie( flag, document.getElementById(flag).checked );
if( document.getElementById(flag).checked )
{
document.getElementById(flag).className = 'remembered_input';
}
else
{
document.getElementById(flag).className = '';
}
}
function switch_style( css_title )
{
// You may use this script on your site free of charge provided
// you do not remove this notice or the URL below. Script from
// http://www.thesitewizard.com/javascripts/change-style-sheets.shtml
var i, link_tag;
for( i = 0, link_tag = document.getElementsByTagName('link'); i < link_tag.length ; i++ )
{
if( (link_tag[i].rel.indexOf( 'stylesheet' ) != -1 ) && link_tag[i].title )
{
link_tag[i].disabled = true ;
if( link_tag[i].title == css_title )
{
link_tag[i].disabled = false;
}
}
}
}
</script>
</head>
<body>
<p>This line of text is regular page content that is not part of the tab area and preceeds the tab area.</p>
<div class='all_tabs'>
<div class='tab' id='tab1'> <a href='#tab1'>Welcome!</a>
<div class='container'>
<div class='tab-toolbar'>
<p>Hello World</p>
</div>
<div class='content'>
<p>This is a simple way to get tabs working with no JavaScript.</p>
<p>If you want a new tab, you just create a new <div> section and put your content in it and it just works.</p>
<p>To see how it works, view source on this page</p>
<p>And save these three css files locally: <a href='tabs.css'>tab source</a> <a href='tabs-green.css'>green tab coloring</a> <a href='tabs-white.css'> white tab coloring</a></p>
<p>Click here to see other colors: <select id='colorPicker' onChange='javascript: switch_style( document.getElementById( "colorPicker" ).value )'>
<option value='white'>Ice</option>
<option value='green' selected>Leafy</option>
</select></p>
</div>
</div>
</div>
<div class='tab_gap'></div>
<div class='tab' id='Lorem2'> <a href='#Lorem2'>Long Text With Toolbar</a>
<div class='container'>
<div class='tab-toolbar'>
<p>The sample text was created by the Lorem Ipsum generator <a href='http://www.lipsum.com/'>here</a>.</p>
</div>
<div class='content'>
<p>This long text scrolls</p>
<br>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut consectetur mi. Suspendisse urna nunc, congue nec malesuada ut, euismod id mauris. Fusce rutrum, nisi id tincidunt convallis, neque erat bibendum lacus, sit amet dignissim metus felis vel magna. Aliquam congue nunc facilisis risus placerat sit amet mollis sapien tempor. Ut laoreet arcu placerat magna bibendum consectetur. Integer molestie aliquam nunc id mattis. Donec non nulla quis tortor adipiscing bibendum.</p>
<p>Mauris non magna eu erat lobortis tristique. Cras vitae nisi a felis pulvinar bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies sapien gravida lorem porttitor adipiscing. Vivamus hendrerit lorem vitae nulla ullamcorper hendrerit. Etiam bibendum pharetra ipsum id blandit. Nullam sed scelerisque quam. Vestibulum mauris enim, consequat eget pharetra in, pretium nec nulla.</p>
<p>Etiam laoreet enim sed nulla congue molestie pellentesque felis consectetur. Integer pulvinar tempor massa in ultricies. Pellentesque varius tellus ac urna pharetra tempor. Sed at odio risus, ac elementum lacus. Proin odio tellus, venenatis in ultricies in, accumsan at sem. Pellentesque magna sapien, tincidunt a suscipit a, condimentum ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lacinia mollis massa, tempus rhoncus ante pulvinar ut. Sed ut orci non enim vestibulum mattis. Aliquam erat volutpat. Praesent pharetra lacinia diam, nec accumsan felis convallis a. Donec metus sapien, convallis nec iaculis eu, dignissim non mauris. Nam sed tellus velit. Cras bibendum accumsan vestibulum. Nulla et dui erat. Etiam nibh tortor, bibendum ut feugiat ut, fermentum sed nulla.</p>
<p>Praesent commodo scelerisque est, vel ultricies augue malesuada in. Nunc a leo quam. Ut luctus dictum tortor vel fringilla. Donec bibendum rutrum urna vel laoreet. Quisque nulla ante, molestie sed aliquet vel, ultricies vitae odio. Etiam faucibus felis tellus, ac ullamcorper enim. Quisque molestie elit a eros porttitor vitae rutrum ipsum feugiat. Fusce id massa vel nunc posuere faucibus et non risus. Pellentesque sodales venenatis tellus at placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur cursus ipsum, at mattis lectus eleifend vitae. Mauris eget nulla at erat ultrices luctus a et sem. Nam leo nisi, euismod eget egestas sit amet, rutrum nec velit. Nulla id gravida dolor. Nunc quam enim, tincidunt nec convallis ut, imperdiet sit amet ante. Duis tempor sapien at enim egestas id eleifend purus bibendum.</p>
<p>Curabitur facilisis lectus ut velit accumsan dapibus. Quisque a massa elit, ac aliquam lorem. Phasellus non diam nec lacus suscipit venenatis. Integer luctus aliquam condimentum. Morbi eu aliquet massa. Quisque tincidunt diam in eros vulputate viverra. Vivamus euismod orci sit amet eros interdum adipiscing. Aliquam lorem nisl, pulvinar a lobortis feugiat, dignissim ac tortor.</p>
<p>Cras a enim pellentesque lacus tempus porttitor. Ut vestibulum hendrerit ligula, dapibus porta erat rutrum eget. Nulla eu justo in lorem semper scelerisque. Quisque odio dolor, posuere ac aliquet id, dapibus in diam. Phasellus dolor augue, tempor vitae pretium quis, condimentum sit amet turpis. Proin viverra, eros et consequat dictum, magna ligula adipiscing felis, quis congue augue sem sit amet augue. Morbi lacinia turpis eu tortor fringilla auctor ac a dui. Nullam tincidunt sodales consequat. Curabitur nec magna vel neque sagittis faucibus. Donec pellentesque tincidunt condimentum. Nunc pulvinar, risus at suscipit vestibulum, nunc mi auctor purus, sit amet congue mauris neque eu turpis.</p>
<p>Aenean auctor, ante id sodales ultricies, dolor ante egestas arcu, ac pretium neque libero eget lorem. Cras ante diam, porta nec lacinia id, elementum sit amet odio. Ut metus sapien, lacinia iaculis varius et, molestie eu velit. Nunc sagittis tempus ligula. Nunc malesuada hendrerit rhoncus. Morbi vitae risus eget neque egestas condimentum. Vivamus sed felis lorem, et ultricies quam. Maecenas interdum tellus vitae risus egestas blandit. Maecenas vel ligula a nibh adipiscing aliquet at sed diam. Etiam non magna libero. Aliquam porttitor, erat in eleifend pulvinar, mi dolor luctus turpis, eu ultrices risus nisi a dolor. Donec tristique adipiscing purus, at dapibus dui congue et.</p>
<p>Phasellus volutpat sodales nunc sodales commodo. Maecenas auctor ante egestas mi lobortis pellentesque mollis nulla rhoncus. Duis eget ultrices mauris. Vivamus ultricies euismod nisi eu viverra. Nulla dui nisl, mollis nec semper sed, egestas et libero. Etiam id turpis risus, in porta augue. Donec id rutrum augue. Phasellus mi sapien, bibendum et fringilla iaculis, congue nec justo.</p>
</div>
</div>
</div>
<div class='tab_gap'></div>
<div class='tab' id='tab27'> <a href='#tab27'>Flexibility</a>
<div class='container'>
<div class='tab-toolbar'>
<p>Anything can be in the toolbar.
<select id='car.chooser' name='car.chooser' onChange='javascript: saveSetting( "car.chooser" )'>
<option value='volvo'>Volvo</option>
<option value='ferrari'>Ferrari</option>
<option value='saab' selected>Saab</option>
<option value='mercedes'>Mercedes</option>
<option value='lotus'>Lotus</option>
<option value='audi'>Audi</option>
</select>
Click this checkbox!<input type='checkbox' id='car.clicker' name='car.clicker' onChange='javascript: toggleSetting( "car.clicker" )' />
(Cookies remember your choices)
<span style='float: right;'>UN-save settings<input type='button' onClick='javascript: deleteCookies();' value='Clear'></span>
</p>
</div>
<!-- This initialization script must fall AFTER declaration of various inputs -->
<script type='text/javascript'>
if( getCookie('car.clicker') )
{ // checkbox example
document.getElementById('car.clicker').checked = true; // Set flag
// Checkbox styles are not obeyed by browsers, they are styled by the OS.
document.getElementById('car.clicker').className = 'remembered_input'; // Set visual cue that cookie retains this value
}
if( getCookie('car.chooser') )
{ // select example
document.getElementById('car.chooser').value = getCookie('car.chooser'); // Set value
document.getElementById('car.chooser').className = 'remembered_input'; // Set visual cue that cookie retains this value
}
</script>
<div class='content'>
<p>Your message here</p>
</div>
</div>
</div>
<div class='tab_gap'></div>
<div class='tab' id='Lorem'> <a href='#Lorem'>More Text Here</a>
<div class='container'>
<!-- Note there is no toolbar here -->
<div class='content'>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam ut consectetur mi. Suspendisse urna nunc, congue nec malesuada ut, euismod id mauris. Fusce rutrum, nisi id tincidunt convallis, neque erat bibendum lacus, sit amet dignissim metus felis vel magna. Aliquam congue nunc facilisis risus placerat sit amet mollis sapien tempor. Ut laoreet arcu placerat magna bibendum consectetur. Integer molestie aliquam nunc id mattis. Donec non nulla quis tortor adipiscing bibendum.</p>
<p>Mauris non magna eu erat lobortis tristique. Cras vitae nisi a felis pulvinar bibendum. Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc ultricies sapien gravida lorem porttitor adipiscing.
<a href='http://www.stockfreeimages.com'><img src='Single-Red-Apple-thumb183927.jpg' alt='http://www.stockfreeimages.com' style='float: right; padding: 50px' /></a>
Vivamus hendrerit lorem vitae nulla ullamcorper hendrerit. Etiam bibendum pharetra ipsum id blandit. Nullam sed scelerisque quam. Vestibulum mauris enim, consequat eget pharetra in, pretium nec nulla.</p>
<p>Etiam laoreet enim sed nulla congue molestie pellentesque felis consectetur. Integer pulvinar tempor massa in ultricies. Pellentesque varius tellus ac urna pharetra tempor. Sed at odio risus, ac elementum lacus. Proin odio tellus, venenatis in ultricies in, accumsan at sem. Pellentesque magna sapien, tincidunt a suscipit a, condimentum ac ligula. Cum sociis natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Phasellus lacinia mollis massa, tempus rhoncus ante pulvinar ut. Sed ut orci non enim vestibulum mattis. Aliquam erat volutpat. Praesent pharetra lacinia diam, nec accumsan felis convallis a. Donec metus sapien, convallis nec iaculis eu, dignissim non mauris. Nam sed tellus velit.</p>
<p> Cras bibendum accumsan vestibulum. Nulla et dui erat. Etiam nibh tortor, bibendum ut feugiat ut, fermentum sed nulla. Praesent commodo scelerisque est, vel ultricies augue malesuada in. Nunc a leo quam. Ut luctus dictum tortor vel fringilla. Donec bibendum rutrum urna vel laoreet. Quisque nulla ante, molestie sed aliquet vel, ultricies vitae odio. Etiam faucibus felis tellus, ac ullamcorper enim. Quisque molestie elit a eros porttitor vitae rutrum ipsum feugiat. Fusce id massa vel nunc posuere faucibus et non risus. Pellentesque sodales venenatis tellus at placerat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Integer consectetur cursus ipsum, at mattis lectus eleifend vitae. Mauris eget nulla at erat ultrices luctus a et sem. Nam leo nisi, euismod eget egestas sit amet, rutrum nec velit. Nulla id gravida dolor. Nunc quam enim, tincidunt nec convallis ut, imperdiet sit amet ante. Duis tempor sapien at enim egestas id eleifend purus bibendum.</p>
<p>Curabitur facilisis lectus ut velit accumsan dapibus. Quisque a massa elit, ac aliquam lorem. Phasellus non diam nec lacus suscipit venenatis. Integer luctus aliquam condimentum. Morbi eu aliquet massa. Quisque tincidunt diam in eros vulputate viverra. Vivamus euismod orci sit amet eros interdum adipiscing. Aliquam lorem nisl, pulvinar a lobortis feugiat, dignissim ac tortor.</p>
<p>Cras a enim pellentesque lacus tempus porttitor. Ut vestibulum hendrerit ligula, dapibus porta erat rutrum eget. Nulla eu justo in lorem semper scelerisque. Quisque odio dolor, posuere ac aliquet id, dapibus in diam. Phasellus dolor augue, tempor vitae pretium quis, condimentum sit amet turpis. Proin viverra, eros et consequat dictum, magna ligula adipiscing felis, quis congue augue sem sit amet augue. Morbi lacinia turpis eu tortor fringilla auctor ac a dui. Nullam tincidunt sodales consequat. Curabitur nec magna vel neque sagittis faucibus. Donec pellentesque tincidunt condimentum. Nunc pulvinar, risus at suscipit vestibulum, nunc mi auctor purus, sit amet congue mauris neque eu turpis.</p>
<p>Aenean auctor, ante id sodales ultricies, dolor ante egestas arcu, ac pretium neque libero eget lorem. Cras ante diam, porta nec lacinia id, elementum sit amet odio. Ut metus sapien, lacinia iaculis varius et, molestie eu velit. Nunc sagittis tempus ligula. Nunc malesuada hendrerit rhoncus. Morbi vitae risus eget neque egestas condimentum. Vivamus sed felis lorem, et ultricies quam. Maecenas interdum tellus vitae risus egestas blandit. Maecenas vel ligula a nibh adipiscing aliquet at sed diam. Etiam non magna libero. Aliquam porttitor, erat in eleifend pulvinar, mi dolor luctus turpis, eu ultrices risus nisi a dolor. Donec tristique adipiscing purus, at dapibus dui congue et.</p>
<p>Phasellus volutpat sodales nunc sodales commodo. Maecenas auctor ante egestas mi lobortis pellentesque mollis nulla rhoncus. Duis eget ultrices mauris. Vivamus ultricies euismod nisi eu viverra. Nulla dui nisl, mollis nec semper sed, egestas et libero. Etiam id turpis risus, in porta augue. Donec id rutrum augue. Phasellus mi sapien, bibendum et fringilla iaculis, congue nec justo.</p>
</div>
</div>
</div>
<div class='tab_gap'></div>
<div class='tab' id='about'> <a href='#about'> <img class='tab-icon' src='./Info.png' alt='icon: about'/> About With Toolbar</a>
<div class='container'>
<div class='tab-toolbar'>
<p>This method of setting up tabs was inspired by this awesome page <a href='http://www.w3.org/Style/Examples/007/target'>http://www.w3.org/Style/Examples/007/target</a> </p>
</div>
<div class='content'>
<p>Source code for this project can be found on <a href='https://github.com/ThermoMan/Tabbed-Interface-CSS-Only'>github</a></p>
<p>I used <a target='_blank' href='http://www.winscp.net'>WinSCP</a> to connect and edited the code using <a target='_blank' href='http://www.textpad.com'>TextPad</a>.</p>
<p>There are two primary differences between the inspiration page (see link in the toolbar above) and this tech demo.</p>
<ul>
<li>I have added a toolbar.</li>
<li>By naming <b>all</b> of the div tag classes instead of using defaults you can have other sections without falling into a default behaviour.</li>
</ul>
<br><br><br>
<div style='text-align: center;'>
<a target='_blank' href='http://validator.w3.org/check?uri=referer'> <img style='border:0;width:88px;height:31px;' src='./valid-html5.png' alt='Valid HTML 5'></a>
<a target='_blank' href='http://jigsaw.w3.org/css-validator/check/referer'><img style='border:0;width:88px;height:31px;' src='http://jigsaw.w3.org/css-validator/images/vcss' alt='Valid CSS!'></a>
</div>
</div>
</div>
</div>
</div>
<p>This is regular page content that is not part of the tab area. This text follows immediatly after the tab area. The project has issues because some text falls behind the tab area. This is regular page content that is not part of the tab area. This text follows immedatly after the tab area. The project has issues because some text falls behind the tab area. This is regular page content that is not part of the tab area. This text follows immedatly after the tab area. The project has issues because some text falls behind the tab area.</p>
</body>
</html>