Add bootstrap 3 demo, fix percentage width issue with Shuffle, closes #8.
Update jQuery to 1.11.0/2.1.0 Update Google Analytics Fix nav highlighting.pull/56/head
Glen Cheney
10 years ago
parent
648300a8f1
commit
b6aa8fe396
@ -0,0 +1,111 @@
|
||||
---
|
||||
layout: default
|
||||
title: Bootstrap 3 Grid Demo
|
||||
description: Demonstrating how Shuffle can be used with a grid system which uses padding for gutters instead of margins.
|
||||
image: /demos/bootstrap3grid.jpg
|
||||
externalCSS: [ "http://netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" ]
|
||||
extraJS: [ "demos/bootstrap3grid.js" ]
|
||||
---
|
||||
<style>
|
||||
|
||||
.table-center-wrap {
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.demo-description {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.grid__brick .grid__brick-inner {
|
||||
background-color: #F0F0F0;
|
||||
height: 100px;
|
||||
border: 1px solid rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
|
||||
.grid__brick:nth-child(n+4) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
@media (max-width: 767px) {
|
||||
.grid__brick:nth-child(n+3) {
|
||||
margin-top: 15px;
|
||||
}
|
||||
}
|
||||
|
||||
.aside {
|
||||
height: 200px;
|
||||
background-color: #E0E0E0;
|
||||
}
|
||||
|
||||
.aside + .aside {
|
||||
margin-top: 10px;
|
||||
}
|
||||
</style>
|
||||
|
||||
<div class="container-fluid demo-description">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h2>Bootstrap 3 Grid</h2>
|
||||
<p>
|
||||
On this page, I have added the minified bootstrap css file from the <a href="http://www.bootstrapcdn.com/">NetDNA CDN</a> (which is also why some of the site-styles are being overriden).
|
||||
<br>
|
||||
The <a href="http://getbootstrap.com/css/#grid">Bootstrap 3 grid</a> system uses padding for gutters instead of margins. This page demonstrates one way to use Shuffle with these types of grids, as well as showing you don't have to use the full width of the page with Shuffle.
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-12 col-sm-9">
|
||||
<div class="row">
|
||||
|
||||
<div id="grid" class="shuffle--container shuffle--fluid">
|
||||
{% for i in (1..20) %}
|
||||
<div class="grid__brick col-xs-6 col-sm-4">
|
||||
<div class="grid__brick-inner">
|
||||
<div class="table-center-wrap">
|
||||
<div class="table-center">
|
||||
{{ i }}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
{% endfor %}
|
||||
<div class="col-xs-1 shuffle__sizer"></div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
<div class="col-xs-12 col-sm-3">
|
||||
<aside class="aside table-center-wrap">
|
||||
<div class="table-center">
|
||||
Some content on the right.
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="aside table-center-wrap">
|
||||
<div class="table-center">
|
||||
Some content on the right.
|
||||
</div>
|
||||
</aside>
|
||||
<aside class="aside table-center-wrap">
|
||||
<div class="table-center">
|
||||
Some content on the right.
|
||||
</div>
|
||||
</aside>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
|
||||
<div class="container-fluid">
|
||||
<div class="row">
|
||||
<div class="col-xs-12">
|
||||
<h2>Shuffle.js</h2>
|
||||
<p>{{ site.longDescription }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
Binary file not shown.
|
After Width: | Height: | Size: 30 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 34 KiB |
Binary file not shown.
|
After Width: | Height: | Size: 10 KiB |
@ -0,0 +1,22 @@
|
||||
var DEMO = (function( $ ) {
|
||||
'use strict';
|
||||
|
||||
var init = function() {
|
||||
var $grid = $('#grid'),
|
||||
$sizer = $grid.find('.shuffle__sizer');
|
||||
|
||||
$grid.shuffle({
|
||||
itemSelector: '.grid__brick',
|
||||
sizer: $sizer
|
||||
});
|
||||
};
|
||||
|
||||
return {
|
||||
init: init
|
||||
};
|
||||
}( jQuery ));
|
||||
|
||||
|
||||
$(document).ready(function() {
|
||||
DEMO.init();
|
||||
});
|
||||
@ -0,0 +1,62 @@
|
||||
|
||||
/*!
|
||||
* jQuery Even Heights plugin
|
||||
* Author: Glen Cheney
|
||||
* Modified: 06/26/13
|
||||
* Dependencies: jQuery 1.2.6+
|
||||
* Sets a jQuery collection to all be the same height
|
||||
* If you need to set multiple collection, please use `$.evenHeights( collectionsArray )`
|
||||
* because it is much faster
|
||||
*/
|
||||
|
||||
(function( $ ) {
|
||||
'use strict';
|
||||
|
||||
function getTallest( $elements ) {
|
||||
var tallest = 0;
|
||||
$elements.each(function() {
|
||||
if ( this.offsetHeight > tallest ) {
|
||||
tallest = this.offsetHeight;
|
||||
}
|
||||
});
|
||||
return tallest;
|
||||
}
|
||||
|
||||
|
||||
$.fn.evenHeights = function() {
|
||||
return this.css( 'height', '' ).css( 'height', getTallest( this ) );
|
||||
};
|
||||
|
||||
|
||||
/**
|
||||
* For groups of elements which should be the same height. Using this method
|
||||
* will create far less style recalculations and layouts.
|
||||
* @param {Array.<jQuery>} groups Array of jQuery collections.
|
||||
* @return {Array.<number>} An array containing the pixel value of the
|
||||
* tallest element for each group.
|
||||
*/
|
||||
$.evenHeights = function( groups ) {
|
||||
var winners = [];
|
||||
|
||||
// First, reset the height for every element.
|
||||
// This is done first, otherwise we dirty the DOM on each loop!
|
||||
$.each(groups, function( i, $elements ) {
|
||||
$elements.css( 'height', '' );
|
||||
});
|
||||
|
||||
// Now, measure heights in each group and save the tallest value. Instead of
|
||||
// setting the height value for the entire group, save it. If it were set,
|
||||
// the next iteration in the loop would have to recalculate styles in the DOM
|
||||
$.each(groups, function( i, $elements ) {
|
||||
winners.push( getTallest( $elements ) );
|
||||
});
|
||||
|
||||
// Lastly, set them all.
|
||||
$.each(groups, function( i, $elements ) {
|
||||
$elements.css( 'height', winners[ i ] );
|
||||
});
|
||||
|
||||
return winners;
|
||||
};
|
||||
})(window.$);
|
||||
|
||||
Loading…
Reference in New Issue