Skip to content
This repository was archived by the owner on Feb 23, 2025. It is now read-only.

Commit 4a147e4

Browse files
author
Steven Vachon
committed
v0.1
1 parent cf966fc commit 4a147e4

File tree

10 files changed

+489
-4
lines changed

10 files changed

+489
-4
lines changed

‎README.md‎

Lines changed: 0 additions & 4 deletions
This file was deleted.

‎advanced.css‎

Lines changed: 77 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,77 @@
1+
.max-width {
2+
margin: 0 auto;
3+
max-width: 1200px;
4+
width: 100%;
5+
6+
/* border-spacing fix (part 2) */
7+
-moz-box-sizing: border-box;
8+
box-sizing: border-box;
9+
padding: 0 10px;
10+
}
11+
12+
#container:after {
13+
clear: left;
14+
content: "";
15+
display: block;
16+
height: 0;
17+
visibility: hidden;
18+
}
19+
20+
.item {
21+
border: 1px solid rgba(0,0,0, .07);
22+
box-shadow: 0 0 6px 1px rgba(0,0,0, .11);
23+
-moz-box-sizing: border-box;
24+
box-sizing: border-box;
25+
float: left;
26+
margin: 0 0 10px 1%;
27+
padding: 10px;
28+
width: 24.25%; /* (25% width - 1% margin) + (1% removed margin / 4 columns) */
29+
}
30+
31+
.item > img {
32+
display: block;
33+
height: auto;
34+
width: 100%;
35+
}
36+
37+
.item:first-child, .item:nth-child(5n) {
38+
clear: left;
39+
margin-left: 0; /* the removed margin */
40+
}
41+
42+
.item:nth-child(2n) { background-color:#f6f6f6; }
43+
.item:nth-child(2n-1) { background-color:#eaeaea; }
44+
45+
.wrecker {
46+
border-spacing: 10px;
47+
margin: 0 -10px; /* border-spacing fix (part 1) */
48+
min-width: 100%; /* not perfect, but just in case there isn't enough content */
49+
}
50+
51+
.wrecker-cell {
52+
vertical-align: top;
53+
width: 25%;
54+
}
55+
56+
/* responsive styles */
57+
58+
@media (max-width: 1024px) {
59+
.item { width:32.66%; } /* (33.33% width - 1% margin) + (1% removed margin / 3 columns) */
60+
.item:nth-child(4n) { clear:left; margin-left:0; }
61+
.item:nth-child(5n) { clear:none; margin-left:1%; }
62+
63+
.wrecker-cell { width:33.33%; }
64+
}
65+
66+
@media (max-width: 800px) {
67+
.item { width:49.5%; } /* (50% width - 1% margin) + (1% removed margin / 2 columns) */
68+
.item:nth-child(5n) { margin-left:0; }
69+
.item:nth-child(3n) { clear:left; margin-left:0; }
70+
.item:nth-child(2n) { clear:none; margin-left:1%; }
71+
72+
.wrecker-cell { width:50%; }
73+
}
74+
75+
@media (max-width: 640px) {
76+
.item { float:none; margin-left:0 !important; width:100%; }
77+
}

‎advanced.html‎

Lines changed: 64 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,64 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8"/>
5+
<title>Advanced Wrecker Demo</title>
6+
<link rel="stylesheet" type="text/css" media="screen" href="advanced.css"/>
7+
<script type="text/javascript" src="libs/jquery-1.9.0.min.js"></script>
8+
<!--[if lt IE 9]>
9+
<script type="text/javascript" src="libs/jquery-extra-selectors.js"></script>
10+
<script type="text/javascript" src="libs/html5shiv.js"></script>
11+
<script type="text/javascript" src="libs/selectivizr-min.js"></script>
12+
<![endif]-->
13+
<script type="text/javascript" src="jquery.wrecker.min.js"></script>
14+
<script type="text/javascript">
15+
$(function(){
16+
$("#container").wrecker({
17+
// options
18+
itemSelector : ".item",
19+
maxColumns : 4,
20+
responsiveColumns : [
21+
// windowMaxWidth : columns
22+
// windowMaxWidth order and values should match those in your responsive CSS
23+
{1024 : 3},
24+
{800 : 2},
25+
{640 : 1}
26+
]
27+
});
28+
});
29+
</script>
30+
</head>
31+
<body>
32+
33+
<div class="max-width">
34+
<h1>Advanced Wrecker Demo</h1>
35+
<p>Resize the width of this window. You will notice that the <code>display:table</code> layout is responsive from 4 columns down to 1, and wraps like a <code>float</code> layout.</p>
36+
<p><a href="https://github.com/aFarkas/html5shiv/">HTML5Shiv</a>, <a href="http://selectivizr.com/">Selectivizr</a> and <a href="https://github.com/keithclark/JQuery-Extended-Selectors/">jQuery Extra Selectors</a> allow this example to work in earlier versions of Internet Explorer.</p>
37+
38+
<div id="container">
39+
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
40+
<div class="item">
41+
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
42+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit. Aenean fermentum, eros quis imperdiet mollis, metus ante volutpat leo, vitae gravida ante leo rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ullamcorper ultrices elementum.</p>
43+
</div>
44+
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
45+
<div class="item">
46+
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
47+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit.</p>
48+
</div>
49+
50+
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
51+
<div class="item">
52+
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
53+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit. Aenean fermentum, eros quis imperdiet mollis, metus ante volutpat leo, vitae gravida ante leo rhoncus eros. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Suspendisse ullamcorper ultrices elementum.</p>
54+
</div>
55+
<div class="item"><img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/></div>
56+
<div class="item">
57+
<img src="http://lorempixel.com/640/480" width="640" height="480" alt=""/>
58+
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nullam eget placerat mi. Sed eget leo eget dui aliquam interdum id id elit.</p>
59+
</div>
60+
</div>
61+
</div>
62+
63+
</body>
64+
</html>

‎jquery.wrecker.js‎

Lines changed: 209 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,209 @@
1+
/**
2+
* jQuery Wrecker v0.1
3+
* Responsive Equal-Height Columns and Rows
4+
* http://www.svachon.com/blog/wrecker-responsive-equal-height-columns-and-rows
5+
*
6+
* Licensed under the MIT license.
7+
* Copyright 2013 Steven Vachon
8+
*/
9+
(function($)
10+
{
11+
12+
13+
14+
$.Wrecker = function()
15+
{
16+
// Variables
17+
var columnCount = 0;
18+
var element;
19+
var previousColumnCount = 0;
20+
var settings = {
21+
itemSelector : "",
22+
maxColumns : 1,
23+
responsiveColumns : [ /*{800:1}*/ ] // Had to nest this way because not all browsers loop through objects in correct order
24+
};
25+
26+
27+
28+
function init(options, $element)
29+
{
30+
element = $( $element );
31+
32+
changeSettings(options);
33+
34+
$(window).on("resize", handleResize);
35+
36+
calculateGrid();
37+
}
38+
39+
40+
41+
function calculateGrid()
42+
{
43+
var newColumnCount = settings.maxColumns;
44+
var numResponsiveColumns = settings.responsiveColumns.length;
45+
var windowWidth = $(window).innerWidth();
46+
47+
for (var i=0; i<numResponsiveColumns; i++)
48+
{
49+
var currentSize = settings.responsiveColumns[i];
50+
51+
for (var j in currentSize)
52+
{
53+
if (j >= windowWidth)
54+
{
55+
newColumnCount = currentSize[j];
56+
}
57+
}
58+
}
59+
60+
if (newColumnCount!=columnCount && newColumnCount>0)
61+
{
62+
previousColumnCount = columnCount;
63+
columnCount = newColumnCount;
64+
65+
updateGrid();
66+
}
67+
}
68+
69+
70+
71+
function changeSettings(options)
72+
{
73+
// IE6-8 do not support responsive CSS, so the columns should be set to default (max) size
74+
if (!$.support.leadingWhitespace)
75+
{
76+
options.responsiveColumns = [];
77+
}
78+
79+
settings = $.extend(settings, options);
80+
}
81+
82+
83+
84+
function destroy()
85+
{
86+
$(window).off("resize", handleResize);
87+
88+
columnCount = 0;
89+
updateGrid();
90+
91+
element.removeData("wrecker");
92+
}
93+
94+
95+
96+
function handleResize(event)
97+
{
98+
calculateGrid();
99+
}
100+
101+
102+
103+
function updateGrid()
104+
{
105+
// Remove any row containers
106+
element.children("div.wrecker-row").children().unwrap();
107+
108+
var cells = element.children(settings.itemSelector);
109+
110+
if (columnCount > 1)
111+
{
112+
var numCells = cells.length;
113+
114+
var startIndex = 0;
115+
var count = 0;
116+
117+
// Add row containers
118+
cells.each(function(i)
119+
{
120+
if (++count == 1)
121+
{
122+
startIndex = i;
123+
}
124+
125+
if (count>=columnCount || i>=numCells-1)
126+
{
127+
cells.slice(startIndex,i+1).wrapAll('<div class="wrecker-row" style="display:table-row"/>');
128+
129+
count = 0;
130+
}
131+
132+
// Since Wrecker styles are removed for single columns, they must be re-added
133+
if (previousColumnCount <= 1)
134+
{
135+
$(this).addClass("wrecker-cell").css({display:"table-cell", float:"none"});
136+
}
137+
});
138+
139+
element.addClass("wrecker").css("display", "table");
140+
}
141+
else
142+
{
143+
// Remove Wrecker styles
144+
cells.removeClass("wrecker-cell").css({display:"", float:""});
145+
element.removeClass("wrecker").css("display", "");
146+
}
147+
}
148+
149+
150+
151+
// Public Methods
152+
this.changeSettings = changeSettings;
153+
this.destroy = destroy;
154+
this.reload = updateGrid;
155+
156+
157+
158+
// Initiate
159+
init.apply(this, arguments);
160+
};
161+
162+
163+
164+
$.fn.wrecker = function(options)
165+
{
166+
var optionsString = (typeof options === "string");
167+
168+
this.each(function(i)
169+
{
170+
var $this = $(this);
171+
var instance = $this.data("wrecker");
172+
173+
if (optionsString)
174+
{
175+
if (!instance)
176+
{
177+
console.error("Cannot call Wrecker methods prior to initialization; attempted to call method \""+ options +"\"");
178+
return;
179+
}
180+
181+
if (!$.isFunction(instance[options]))
182+
{
183+
console.error("No such Wrecker method \""+ options +"\"");
184+
return;
185+
}
186+
187+
instance[options].apply(instance, Array.prototype.slice.call(arguments,1) );
188+
}
189+
else
190+
{
191+
options = options || {};
192+
193+
if (!instance)
194+
{
195+
$this.data("wrecker", new $.Wrecker(options,this) );
196+
}
197+
else
198+
{
199+
instance.changeSettings(options);
200+
}
201+
}
202+
});
203+
204+
return this;
205+
}
206+
207+
208+
209+
})(jQuery);

‎jquery.wrecker.min.js‎

Lines changed: 11 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/html5shiv.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/jquery-1.9.0.min.js‎

Lines changed: 4 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/jquery-extra-selectors.js‎

Lines changed: 8 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

‎libs/selectivizr-min.js‎

Lines changed: 5 additions & 0 deletions
Some generated files are not rendered by default. Learn more about customizing how changed files appear on GitHub.

0 commit comments

Comments
 (0)