rooty/Bootstrap
0
0
Fork 0
mirror of https://github.com/twbs/bootstrap.git synced 2024-12-01 13:24:25 +01:00
Code Issues Actions Packages Releases Activity

Add a bottom affixed element to affix visual tests.

Browse Source
This commit is contained in:
Charles B Johnson 2014-07-02 16:53:00 -04:00
parent 866ffc4f37
commit d3dea01a11
1 changed files with 63 additions and 5 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

68
js/tests/visual/affix.html
View File

@ -6,12 +6,36 @@
<style>
/* Test Styles */
.affix {
.affixed-element-top.affix {
top: 10px;
}
.affix-bottom {
.affixed-element-top.affix-bottom {
position: absolute;
}
.affixed-element-bottom {
margin-bottom: 0;
}
.affixed-element-bottom.affix {
bottom: 10px;
}
.affixed-element-bottom.affix-bottom {
position: relative;
}
.grow-btn, .shrink-btn {
color: #FFF;
}
.grow-btn {
background-color: #2ECC40;
}
.grow-btn:hover {
background-color: #3D9970;
}
.shrink-btn {
background-color: #FF4136;
}
.shrink-btn:hover {
background-color: #85144B;
}
</style>
</head>
<body>
@ -23,7 +47,7 @@
</div>
<div class="col-md-3">
<ul class="list-group js-affixed-element">
<ul class="list-group affixed-element-top js-affixed-element-top">
<li class="list-group-item">Cras justo odio</li>
<li class="list-group-item">Dapibus ac facilisis in</li>
<li class="list-group-item">Morbi leo risus</li>
@ -43,7 +67,7 @@
</ul>
</div>
<div class="col-md-9">
<div class="col-md-6 js-content">
<p>Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor. Aenean eu leo quam. Pellentesque ornare sem lacinia quam venenatis vestibulum. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Duis mollis, est non commodo luctus, nisi erat porttitor ligula, eget lacinia odio sem nec elit. Donec ullamcorper nulla non metus auctor fringilla. Nulla vitae elit libero, a pharetra augue. Maecenas sed diam eget risus varius blandit sit amet non magna.</p>
@ -199,6 +223,27 @@
</div>
<div class="col-md-3">
<ul class="list-group affixed-element-bottom js-affixed-element-bottom">
<li class="list-group-item">Sit necessitatibus aspernatur.</li>
<li class="list-group-item">Adipisicing alias dolor!</li>
<li class="list-group-item">Ipsum molestiae impedit.</li>
<li class="list-group-item">Amet quis iste?</li>
<li class="list-group-item">Ipsum quaerat porro.</li>
<li class="list-group-item">Elit lorem libero.</li>
<li class="list-group-item">Ipsum dolore facilis.</li>
<li class="list-group-item">Elit ad atque.</li>
<li class="list-group-item">Dolor amet sequi!</li>
<li class="list-group-item">Consectetur voluptatum facilis!</li>
<li class="list-group-item">Sit neque eligendi?</li>
<li class="list-group-item">Amet fuga consectetur!</li>
<li class="list-group-item">Amet molestias repellat!</li>
<li class="list-group-item">Consectetur minima repellendus.</li>
<li class="list-group-item grow-btn js-grow-btn">Grow content</li>
<li class="list-group-item shrink-btn js-shrink-btn">Shrink content</li>
</ul>
</div>
<div class="col-md-12 js-footer">
<hr>
@ -222,7 +267,7 @@
<!-- JavaScript Test -->
<script>
$(function () {
$('.js-affixed-element').affix({
$('.js-affixed-element-top').affix({
offset: {
top: $('.js-page-header').outerHeight(true) - 10
, bottom: $('.js-footer').outerHeight(true) + 10
@ -232,6 +277,19 @@ $(function () {
.on('affix.bs.affix', function (e) {
$(e.target).width(e.target.offsetWidth)
})
$('.js-affixed-element-bottom').affix({
offset: {
bottom: $('.js-footer').outerHeight(true) + 10
}
})
$('.js-grow-btn').on('click', function() {
$('.js-content').append('<p>Ipsum corrupti ipsam est temporibus.</p>')
})
$('.js-shrink-btn').on('click', function() {
$('.js-content p').last().remove()
})
})
</script>
</body>