-
Notifications
You must be signed in to change notification settings - Fork 27k
Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
Fix 29110: use a less confusing class name (#665)
The learning area half of mdn/content#29125. 2 commits: - a6e5e10: only Prettier formatting - 0d0a2ca: substantive changes
- Loading branch information
Showing
5 changed files
with
516 additions
and
455 deletions.
There are no files selected for viewing
377 changes: 206 additions & 171 deletions
377
css/css-layout/practical-positioning-examples/fixed-info-box.html
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -1,177 +1,212 @@ | ||
<!DOCTYPE html> | ||
<html lang="en-us"> | ||
<head> | ||
<meta charset="utf-8"> | ||
<meta name="viewport" content="width=device-width"> | ||
<meta charset="utf-8" /> | ||
<meta name="viewport" content="width=device-width" /> | ||
<title>Fixed tabbed info box</title> | ||
<style> | ||
|
||
/* General setup */ | ||
|
||
html { | ||
font-family: sans-serif; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
} | ||
|
||
/* info-box setup */ | ||
|
||
.info-box { | ||
width: 452px; | ||
height: 400px; | ||
margin: 0 auto; | ||
position: fixed; | ||
top: 0; | ||
} | ||
|
||
/* styling info-box list */ | ||
|
||
.info-box ul { | ||
border: 1px solid #b60000; | ||
overflow: hidden; | ||
height: 50px; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.info-box li { | ||
float: left; | ||
list-style-type: none; | ||
width: 150px; | ||
} | ||
|
||
.info-box li a { | ||
display: inline-block; | ||
text-decoration: none; | ||
width: 100%; | ||
line-height: 3; | ||
background: white; | ||
color: #b60000; | ||
text-align: center; | ||
font-weight: bold; | ||
} | ||
|
||
.info-box li a:focus, li a:hover { | ||
background-color: #b60000; | ||
color: white; | ||
} | ||
|
||
.info-box li a.active { | ||
background-color: #b60000; | ||
color: white; | ||
} | ||
|
||
/* styling info-box tabs */ | ||
|
||
.info-box .panels { | ||
clear: both; | ||
position: relative; | ||
height: 352px; | ||
} | ||
|
||
.info-box article { | ||
background-color: #b60000; | ||
color: white; | ||
position: absolute; | ||
padding: 10px 20px; | ||
height: 352px; | ||
top: 0; | ||
left: 0; | ||
} | ||
|
||
.info-box .active-panel { | ||
z-index: 1; | ||
} | ||
|
||
/* Styling our fake content */ | ||
|
||
.fake-content { | ||
background-color: #a60000; | ||
color: white; | ||
padding: 10px; | ||
height: 2000px; | ||
margin-left: 470px; | ||
} | ||
</style> | ||
<style> | ||
/* General setup */ | ||
|
||
html { | ||
font-family: sans-serif; | ||
} | ||
|
||
* { | ||
box-sizing: border-box; | ||
} | ||
|
||
body { | ||
margin: 0; | ||
} | ||
|
||
/* info-box setup */ | ||
|
||
.info-box { | ||
width: 452px; | ||
height: 400px; | ||
margin: 0 auto; | ||
position: fixed; | ||
top: 0; | ||
} | ||
|
||
/* styling info-box list */ | ||
|
||
.info-box ul { | ||
border: 1px solid #b60000; | ||
overflow: hidden; | ||
height: 50px; | ||
margin: 0; | ||
padding: 0; | ||
} | ||
|
||
.info-box li { | ||
float: left; | ||
list-style-type: none; | ||
width: 150px; | ||
} | ||
|
||
.info-box li a { | ||
display: inline-block; | ||
text-decoration: none; | ||
width: 100%; | ||
line-height: 3; | ||
background: white; | ||
color: #b60000; | ||
text-align: center; | ||
font-weight: bold; | ||
} | ||
|
||
.info-box li a:focus, | ||
li a:hover { | ||
background-color: #b60000; | ||
color: white; | ||
} | ||
|
||
.info-box li a.active-tab { | ||
background-color: #b60000; | ||
color: white; | ||
} | ||
|
||
/* styling info-box tabs */ | ||
|
||
.info-box .panels { | ||
clear: both; | ||
position: relative; | ||
height: 352px; | ||
} | ||
|
||
.info-box article { | ||
background-color: #b60000; | ||
color: white; | ||
position: absolute; | ||
padding: 10px 20px; | ||
height: 352px; | ||
top: 0; | ||
left: 0; | ||
} | ||
|
||
.info-box .active-panel { | ||
z-index: 1; | ||
} | ||
|
||
/* Styling our fake content */ | ||
|
||
.fake-content { | ||
background-color: #a60000; | ||
color: white; | ||
padding: 10px; | ||
height: 2000px; | ||
margin-left: 470px; | ||
} | ||
</style> | ||
</head> | ||
<body> | ||
|
||
<section class="fake-content"> | ||
<h1>Fake content</h1> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
<p>This is fake content. Your main web page contents would probably go here.</p> | ||
</section> | ||
|
||
<section class="info-box"> | ||
<ul> | ||
<li><a href="#" class="active">Tab 1</a></li> | ||
<li><a href="#">Tab 2</a></li> | ||
<li><a href="#">Tab 3</a></li> | ||
</ul> | ||
<div class="panels"> | ||
<article class="active-panel"> | ||
<h2>The first tab</h2> | ||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. Vestibulum et orci scelerisque, vulputate tellus quis, lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus consequat aliquet, dui neque eleifend lorem, a auctor libero turpis at sem. Aliquam ut porttitor urna. Nulla facilisi.</p> | ||
</article> | ||
<article> | ||
<h2>The second tab</h2> | ||
|
||
<p>This tab hasn't got any Lorem Ipsum in it. But the content isn't very exciting all the same.</p> | ||
</article> | ||
<article> | ||
<h2>The third tab</h2> | ||
|
||
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in augue. And now an ordered list: how exciting!</p> | ||
|
||
<ol> | ||
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> | ||
<li>Aliquam ut porttitor urna.</li> | ||
<li>Nulla facilisi</li> | ||
</ol> | ||
</article> | ||
</div> | ||
</section> | ||
|
||
<script> | ||
|
||
var tabs = document.querySelectorAll('.info-box li a'); | ||
var panels = document.querySelectorAll('.info-box article'); | ||
|
||
for(i = 0; i < tabs.length; i++) { | ||
var tab = tabs[i]; | ||
setTabHandler(tab, i); | ||
} | ||
|
||
function setTabHandler(tab, tabPos) { | ||
tab.onclick = function() { | ||
for(i = 0; i < tabs.length; i++) { | ||
tabs[i].className = ''; | ||
} | ||
|
||
tab.className = 'active'; | ||
|
||
for(i = 0; i < panels.length; i++) { | ||
panels[i].className = ''; | ||
} | ||
|
||
panels[tabPos].className = 'active-panel'; | ||
} | ||
} | ||
|
||
</script> | ||
|
||
</body> | ||
<body> | ||
<section class="fake-content"> | ||
<h1>Fake content</h1> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
<p> | ||
This is fake content. Your main web page contents would probably go | ||
here. | ||
</p> | ||
</section> | ||
|
||
<section class="info-box"> | ||
<ul> | ||
<li><a href="#" class="active-tab">Tab 1</a></li> | ||
<li><a href="#">Tab 2</a></li> | ||
<li><a href="#">Tab 3</a></li> | ||
</ul> | ||
<div class="panels"> | ||
<article class="active-panel"> | ||
<h2>The first tab</h2> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in | ||
augue. Vestibulum et orci scelerisque, vulputate tellus quis, | ||
lobortis dui. Vivamus varius libero at ipsum mattis efficitur ut nec | ||
nisl. Nullam eget tincidunt metus. Donec ultrices, urna maximus | ||
consequat aliquet, dui neque eleifend lorem, a auctor libero turpis | ||
at sem. Aliquam ut porttitor urna. Nulla facilisi. | ||
</p> | ||
</article> | ||
<article> | ||
<h2>The second tab</h2> | ||
|
||
<p> | ||
This tab hasn't got any Lorem Ipsum in it. But the content isn't | ||
very exciting all the same. | ||
</p> | ||
</article> | ||
<article> | ||
<h2>The third tab</h2> | ||
|
||
<p> | ||
Lorem ipsum dolor sit amet, consectetur adipiscing elit. | ||
Pellentesque turpis nibh, porttitor nec venenatis eu, pulvinar in | ||
augue. And now an ordered list: how exciting! | ||
</p> | ||
|
||
<ol> | ||
<li>dui neque eleifend lorem, a auctor libero turpis at sem.</li> | ||
<li>Aliquam ut porttitor urna.</li> | ||
<li>Nulla facilisi</li> | ||
</ol> | ||
</article> | ||
</div> | ||
</section> | ||
|
||
<script> | ||
var tabs = document.querySelectorAll(".info-box li a"); | ||
var panels = document.querySelectorAll(".info-box article"); | ||
|
||
for (i = 0; i < tabs.length; i++) { | ||
var tab = tabs[i]; | ||
setTabHandler(tab, i); | ||
} | ||
|
||
function setTabHandler(tab, tabPos) { | ||
tab.onclick = function () { | ||
for (i = 0; i < tabs.length; i++) { | ||
tabs[i].className = ""; | ||
} | ||
|
||
tab.className = "active-tab"; | ||
|
||
for (i = 0; i < panels.length; i++) { | ||
panels[i].className = ""; | ||
} | ||
|
||
panels[tabPos].className = "active-panel"; | ||
}; | ||
} | ||
</script> | ||
</body> | ||
</html> |
Oops, something went wrong.