aboutsummaryrefslogtreecommitdiff
path: root/js/tests/visual
diff options
context:
space:
mode:
authorMark Otto <[email protected]>2014-08-02 18:30:59 -0700
committerMark Otto <[email protected]>2014-08-02 18:30:59 -0700
commit089d434895fbe901d838e4dfb29cdb5941c47ab6 (patch)
treedac25fa32c4420bfb3b1199c61898f04b71eaebe /js/tests/visual
parentf200c39657c5011e12bace716c59b2242d48c077 (diff)
parent033f1654b07f7764a54e5b290e5cf36f688b95a3 (diff)
downloadbootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.tar.xz
bootstrap-089d434895fbe901d838e4dfb29cdb5941c47ab6.zip
Merge branch 'master' into derp
Conflicts: _config.yml dist/css/bootstrap-theme.css.map dist/css/bootstrap.css dist/css/bootstrap.css.map dist/css/bootstrap.min.css docs/_includes/components/glyphicons.html docs/_includes/css/forms.html docs/_includes/css/tables.html docs/_includes/getting-started/browser-device-support.html docs/_includes/header.html docs/_includes/js/affix.html docs/_includes/js/alerts.html docs/_includes/js/buttons.html docs/_includes/js/dropdowns.html docs/_includes/js/overview.html docs/_includes/js/popovers.html docs/_includes/js/tooltips.html docs/_includes/nav/javascript.html docs/assets/css/docs.min.css docs/assets/css/src/docs.css docs/assets/js/customize.min.js docs/assets/js/docs.min.js docs/assets/js/raw-files.min.js docs/browser-bugs.html docs/dist/css/bootstrap-theme.css.map docs/dist/css/bootstrap.css docs/dist/css/bootstrap.css.map docs/dist/css/bootstrap.min.css docs/examples/blog/index.html docs/examples/carousel/index.html docs/examples/cover/index.html docs/examples/dashboard/index.html docs/examples/grid/index.html docs/examples/jumbotron-narrow/index.html docs/examples/jumbotron/index.html docs/examples/justified-nav/index.html docs/examples/navbar-fixed-top/index.html docs/examples/navbar-static-top/index.html docs/examples/navbar/index.html docs/examples/non-responsive/index.html docs/examples/offcanvas/index.html docs/examples/signin/index.html docs/examples/starter-template/index.html docs/examples/sticky-footer-navbar/index.html docs/examples/sticky-footer/index.html docs/examples/theme/index.html docs/examples/tooltip-viewport/index.html less/code.less less/panels.less less/variables.less
Diffstat (limited to 'js/tests/visual')
-rw-r--r--js/tests/visual/affix.html68
1 files changed, 63 insertions, 5 deletions
diff --git a/js/tests/visual/affix.html b/js/tests/visual/affix.html
index 5e677eb57..40a55ab51 100644
--- a/js/tests/visual/affix.html
+++ b/js/tests/visual/affix.html
@@ -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>