183 lines
5.6 KiB
HTML
183 lines
5.6 KiB
HTML
<!doctype html>
|
|
<html lang="en" class="no-js">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=no">
|
|
<title>Foundation for Sites Testing</title>
|
|
<link href="../assets/css/foundation-float.css" rel="stylesheet" />
|
|
|
|
<style>
|
|
|
|
.container {
|
|
background-color: rgba(255,0,0,0.7);
|
|
|
|
}
|
|
|
|
.fail {
|
|
color: red;
|
|
font-weight: bold;
|
|
text-transform: uppercase;
|
|
}
|
|
|
|
.foo {
|
|
height: 35rem;
|
|
color: white;
|
|
}
|
|
|
|
.megafoo {
|
|
height:50rem;
|
|
color: white;
|
|
}
|
|
|
|
.bar {
|
|
color: white;
|
|
}
|
|
|
|
.foo h1 {
|
|
float: right;
|
|
}
|
|
|
|
.foo:nth-child(odd), .bar:nth-child(odd), .megafoo:nth-child(odd) {
|
|
background-color: lightgreen;
|
|
}
|
|
|
|
.foo:nth-child(even), .bar:nth-child(even), .megafoo:nth-child(even) {
|
|
background-color: lightblue;
|
|
}
|
|
|
|
.test-container {
|
|
background-color: darkgrey;
|
|
}
|
|
|
|
</style>
|
|
|
|
</head>
|
|
<body>
|
|
|
|
<div class="row">
|
|
<div class="small-12 medium-8 medium-centered columns">
|
|
<h1 class="text-center">Sticky Accordions with Anchors</h1>
|
|
<hr>
|
|
<h2>Look For:</h2>
|
|
<ul>
|
|
<li><span class="fail">Currently failing</span> Accordion should unstick in the correct place when it reaches its anchor points.</li>
|
|
<li><span class="fail">Currently failing</span> Sticky should not be effected by height changes to the accordion that are introduced by switching active accordion item.</li>
|
|
<li><span class="fail">Currently failing</span> You should not see the red background color of the sticky container after scrolling, expanding/collapsing accordion items, or sticking/unsticking the accordion.</li>
|
|
</ul>
|
|
|
|
</div>
|
|
</div>
|
|
|
|
<div class="row test-container">
|
|
|
|
<div class="small-12 medium-6 columns">
|
|
<div id="foo1" class="foo">
|
|
<h1>#foo1</h1>
|
|
</div>
|
|
<div id="foo2" class="foo">
|
|
<div class="row">
|
|
<div class="small-12 medium-8 columns">
|
|
<div class="container" data-sticky-container>
|
|
<div class="sticky" data-sticky data-sticky-on="small" data-margin-top="0" data-anchor="foo2" style="width:100%">
|
|
<ul class="accordion" data-accordion>
|
|
<li class="accordion-item is-active" data-accordion-item>
|
|
<a href="#" class="accordion-title">Test Accordion #2</a>
|
|
<div class="accordion-content" data-tab-content >
|
|
<p>I should stick to the top and bottom of my anchor #foo2</p>
|
|
<p>I am a descendant of #foo2</p>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Expand & Collapse Me</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
<textarea></textarea>
|
|
<textarea></textarea>
|
|
<button class="button">I do nothing!</button>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Expand & Collapse Me</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
Pick a date!
|
|
<input type="date">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="small-12 medium-4 columns">
|
|
<h1>#foo2</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div id="foo3" class="foo">
|
|
<h1>#foo3</h1>
|
|
</div>
|
|
|
|
<div id="foo4" class="foo">
|
|
<h1>#foo4</h1>
|
|
|
|
</div>
|
|
<div id="foo5" class="foo">
|
|
<h1>#foo5</h1>
|
|
</div>
|
|
<div id="foo6" class="foo">
|
|
<h1>#foo6</h1>
|
|
</div>
|
|
<div id="foo7" class="foo">
|
|
<h1>#foo7</h1>
|
|
</div>
|
|
<div id="foo8" class="foo">
|
|
<h1>#foo8</h1>
|
|
</div>
|
|
<div id="foo9" class="foo">
|
|
<h1>#foo9</h1>
|
|
</div>
|
|
<div id="foo10" class="foo">
|
|
<h1>#foo10</h1>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="small-12 medium-6 columns">
|
|
|
|
<div class="container" data-sticky-container>
|
|
<div class="sticky" data-sticky-on="small" data-sticky data-margin-top="0" data-anchor="foo1" style="width:100%">
|
|
<ul class="accordion" data-accordion>
|
|
<li class="accordion-item is-active" data-accordion-item>
|
|
<a href="#" class="accordion-title">Test Accordion #1</a>
|
|
<div class="accordion-content" data-tab-content >
|
|
<p>I should stick to the top and bottom of my anchor #foo1</p>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Expand & Collapse Me</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
<textarea></textarea>
|
|
<textarea></textarea>
|
|
<button class="button">I do nothing!</button>
|
|
</div>
|
|
</li>
|
|
<li class="accordion-item" data-accordion-item>
|
|
<a href="#" class="accordion-title">Expand & Collapse Me</a>
|
|
<div class="accordion-content" data-tab-content>
|
|
Pick a date!
|
|
<input type="date">
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
<script src="../assets/js/vendor.js"></script>
|
|
<script src="../assets/js/foundation.js"></script>
|
|
<script>
|
|
$(document).foundation();
|
|
</script>
|
|
</body>
|
|
</html>
|