Skip to content

Commit 3d2a842

Browse files
MottieMottie
committed
added enable/disable methods & made adaptive - see issue CSS-Tricks#1 
1 parent e9aabaa commit 3d2a842

File tree

9 files changed

+437
-74
lines changed

9 files changed

+437
-74
lines changed

‎.gitattributes

Lines changed: 22 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,22 @@
1+
# Auto detect text files and perform LF normalization
2+
* text=auto
3+
4+
# Custom for Visual Studio
5+
*.cs diff=csharp
6+
*.sln merge=union
7+
*.csproj merge=union
8+
*.vbproj merge=union
9+
*.fsproj merge=union
10+
*.dbproj merge=union
11+
12+
# Standard to msysgit
13+
*.doc diff=astextplain
14+
*.DOC diff=astextplain
15+
*.docx diff=astextplain
16+
*.DOCX diff=astextplain
17+
*.dot diff=astextplain
18+
*.DOT diff=astextplain
19+
*.pdf diff=astextplain
20+
*.PDF diff=astextplain
21+
*.rtf diff=astextplain
22+
*.RTF diff=astextplain

‎.gitignore

Lines changed: 163 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,163 @@
1+
#################
2+
## Eclipse
3+
#################
4+
5+
*.pydevproject
6+
.project
7+
.metadata
8+
bin/
9+
tmp/
10+
*.tmp
11+
*.bak
12+
*.swp
13+
*~.nib
14+
local.properties
15+
.classpath
16+
.settings/
17+
.loadpath
18+
19+
# External tool builders
20+
.externalToolBuilders/
21+
22+
# Locally stored "Eclipse launch configurations"
23+
*.launch
24+
25+
# CDT-specific
26+
.cproject
27+
28+
# PDT-specific
29+
.buildpath
30+
31+
32+
#################
33+
## Visual Studio
34+
#################
35+
36+
## Ignore Visual Studio temporary files, build results, and
37+
## files generated by popular Visual Studio add-ons.
38+
39+
# User-specific files
40+
*.suo
41+
*.user
42+
*.sln.docstates
43+
44+
# Build results
45+
[Dd]ebug/
46+
[Rr]elease/
47+
*_i.c
48+
*_p.c
49+
*.ilk
50+
*.meta
51+
*.obj
52+
*.pch
53+
*.pdb
54+
*.pgc
55+
*.pgd
56+
*.rsp
57+
*.sbr
58+
*.tlb
59+
*.tli
60+
*.tlh
61+
*.tmp
62+
*.vspscc
63+
.builds
64+
*.dotCover
65+
66+
## TODO: If you have NuGet Package Restore enabled, uncomment this
67+
#packages/
68+
69+
# Visual C++ cache files
70+
ipch/
71+
*.aps
72+
*.ncb
73+
*.opensdf
74+
*.sdf
75+
76+
# Visual Studio profiler
77+
*.psess
78+
*.vsp
79+
80+
# ReSharper is a .NET coding add-in
81+
_ReSharper*
82+
83+
# Installshield output folder
84+
[Ee]xpress
85+
86+
# DocProject is a documentation generator add-in
87+
DocProject/buildhelp/
88+
DocProject/Help/*.HxT
89+
DocProject/Help/*.HxC
90+
DocProject/Help/*.hhc
91+
DocProject/Help/*.hhk
92+
DocProject/Help/*.hhp
93+
DocProject/Help/Html2
94+
DocProject/Help/html
95+
96+
# Click-Once directory
97+
publish
98+
99+
# Others
100+
[Bb]in
101+
[Oo]bj
102+
sql
103+
TestResults
104+
*.Cache
105+
ClientBin
106+
stylecop.*
107+
~$*
108+
*.dbmdl
109+
Generated_Code #added for RIA/Silverlight projects
110+
111+
# Backup & report files from converting an old project file to a newer
112+
# Visual Studio version. Backup files are not needed, because we have git ;-)
113+
_UpgradeReport_Files/
114+
Backup*/
115+
UpgradeLog*.XML
116+
117+
118+
119+
############
120+
## Windows
121+
############
122+
123+
# Windows image file caches
124+
Thumbs.db
125+
126+
# Folder config file
127+
Desktop.ini
128+
129+
130+
#############
131+
## Python
132+
#############
133+
134+
*.py[co]
135+
136+
# Packages
137+
*.egg
138+
*.egg-info
139+
dist
140+
build
141+
eggs
142+
parts
143+
bin
144+
var
145+
sdist
146+
develop-eggs
147+
.installed.cfg
148+
149+
# Installer logs
150+
pip-log.txt
151+
152+
# Unit test / coverage reports
153+
.coverage
154+
.tox
155+
156+
#Translations
157+
*.mo
158+
159+
#Mr Developer
160+
.mr.developer.cfg
161+
162+
# Mac crap
163+
.DS_Store

‎README.markdown

Lines changed: 22 additions & 58 deletions
Original file line numberDiff line numberDiff line change
@@ -3,62 +3,35 @@
33
* Equalize column heights across multiple rows (originally from [this post](http://css-tricks.com/8401-equal-height-blocks-in-rows/))
44
* Resize column heights when the page is resized. Can be disabled for fixed width layouts.
55
* Choose between height (default), outer height or inner height.
6-
* Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling
6+
* Set a minimum or maximum height of a column, with an css class added when content overflows for additional styling.
7+
* Set a breakpoint to disable the Equalizer plugin when the wrapping element size is below a set width.
78

8-
# Setup
9+
# Documentation
910

10-
## Header
11+
* [Moved to the wiki pages](https://github.com/CSS-Tricks/Equalizer/wiki).
1112

12-
```html
13-
<!-- Required CSS styling, but do whatever you want with the overflow and other styling -->
14-
<style>
15-
.overflowed { overflow: auto; }
16-
</style>
17-
18-
<!-- Required script -->
19-
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.6/jquery.min.js"></script>
20-
<script src="js/jquery.equalizer.js"></script>
21-
<script>
22-
$(function() {
23-
$('.wrapper').equalizer();
24-
});
25-
</script>
26-
27-
```
28-
29-
## Example HTML
13+
# Change Log
3014

31-
```html
32-
<div class="wrapper">
33-
<div>Block 1</div>
34-
<div>Block 2</div>
35-
<div>Block 3</div>
36-
<div>Block 4</div>
37-
<div>Block 5</div>
38-
<div>Block 6</div>
39-
</div>
40-
```
15+
See the [change log](https://github.com/CSS-Tricks/Equalizer/wiki/Change) for a complete list of changes.
4116

42-
# Usage & Options (defaults)
17+
## Version 1.2 (1/3/2013)
4318

44-
```javascript
45-
// target the wrapper of all of the elements to equalize,
46-
// in this case the divs inside of .wrapper
47-
$('.wrapper').equalizer({
48-
// height = type of height to use
49-
// "o" or "outer" = "outerHeight" - includes height + padding + border + margin
50-
// "i" or "inner" = "innerHeight" - includes height + padding + border
51-
// default = "height" - use just the height
52-
columns : '> div', // elements inside of the wrapper
53-
useHeight : 'height', // height measurement to use
54-
resizeable : true, // when true, heights are adjusted on window resize
55-
min : 0, // Minimum height applied to all columns
56-
max : 0, // Max height applied to all columns
57-
overflow : 'overflowed' // class applied to columns that are taller than the allowable max
58-
});
59-
```
19+
* Updated demos to use jQuery 1.8+. Also, satisfactorily tested the demos with jQuery 1.9 beta 1.
20+
* Added `breakpoint` and `disabled` options:
21+
* If the `breakpoint` option contains a value, in pixels, the Equalizer plugin will disable itself when the main wrapper element width is below this value; it's the `.wrapper` in the setup examples.
22+
* When the breakpoint is reached, the class name from the `disabled` option is applied to the main wrapper element.
23+
* Added an [adaptive demo](http://css-tricks.github.com/Equalizer/adaptive.html) to show how this works together.
24+
* If the main wrapper element is the browser window, then you can use [media queries](http://css-tricks.com/css-media-queries/) to change the style of the columns inside the wrapper.
25+
* Enhancement request from [issue #1](https://github.com/CSS-Tricks/Equalizer/issues/1).
26+
* Added a method to enable or disable the Equalizer plugin.
27+
* To completely disable or re-enable the Equalizer plugin, trigger the desired event on the wrapper element:
6028

61-
# Change Log
29+
```javascript
30+
// to disable trigger disable.equalizer
31+
$('.wrapper').trigger('disable.equalizer');
32+
// use enable.equalizer to make it work again
33+
$('.wrapper').trigger('enable.equalizer');
34+
```
6235

6336
## Version 1.1 (1/12/2012)
6437

@@ -88,12 +61,3 @@ $('.wrapper').equalizer({
8861
// $('.wrapper').equalizer();
8962
});
9063
```
91-
92-
## Version 1.0.1 (7/14/2011)
93-
94-
* Fixed a problem with adding headers, and headers with custom fonts, inside the blocks.
95-
* Added headers into the demo.
96-
97-
## Version 1.0 (6/6/2011)
98-
99-
* Initial build on Github

‎adaptive.html

Lines changed: 90 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,90 @@
1+
<!DOCTYPE html>
2+
<html>
3+
<head>
4+
<meta charset='UTF-8'>
5+
<title>Equalize Heights in Multiple Rows</title>
6+
7+
<!-- Demo only -->
8+
<link href="demo/demo.css" rel="stylesheet">
9+
10+
<!-- Required CSS styling, but do whatever you want with the overflow;
11+
changed to "stinky" for this demo only, default class name is "overflowed" -->
12+
<style>
13+
14+
/* The ghost, nudged to maintain perfect centering
15+
.content-wrap article:before {
16+
content: '';
17+
display: inline-block;
18+
height: 100%;
19+
vertical-align: middle;
20+
margin-right: -0.25em;
21+
} */
22+
23+
/* The element to be centered, can
24+
also be of any width and height
25+
.equalizer-inner {
26+
display: inline-block !important;
27+
vertical-align: middle;
28+
}*/
29+
30+
.noresize article {
31+
float: none;
32+
width: 100%;
33+
margin: 0 0 10px 0;
34+
}
35+
36+
</style>
37+
38+
<!-- Required script -->
39+
<script src='http://ajax.googleapis.com/ajax/libs/jquery/1.8/jquery.min.js'></script>
40+
<script src="js/jquery.equalizer.js"></script>
41+
<script>
42+
$(function() {
43+
$('.content-wrap').equalizer({
44+
breakpoint : 500, // if browser less than this width, disable the plugin
45+
columns : 'article',
46+
disabled : 'noresize' // class applied when browser width is less than the breakpoint value
47+
});
48+
});
49+
</script>
50+
51+
</head>
52+
<body class="adaptive">
53+
54+
<div id="wrapper">
55+
56+
<div id="nav">
57+
<a href="index.html">Main Demo</a>
58+
<a class="current" href="adaptive.html">Adaptive Demo</a>
59+
<a class="play" href="http://jsfiddle.net/Mottie/cuuqL/">Playground</a>
60+
<a class="git" href="https://github.com/css-tricks/Equalizer/wiki">Documentation</a>
61+
<a class="git" href="https://github.com/css-tricks/Equalizer/zipball/master">Download</a>
62+
<a class="issue" href="https://github.com/css-tricks/Equalizer/issues">Issues</a>
63+
</div>
64+
65+
<h1><a href="https://github.com/css-tricks/Equalizer">jQuery Equalizer</a></h1>
66+
<h3>Adaptive Breakpoint<br><small>(resize the window below the breakpoint)</small></h3>
67+
68+
<p>
69+
When the wrapper is less than 500px, the equalizer plugin will apply a class name to unfloat the columns, then disable itself.<br>
70+
A class name isn't required if the wrapper happens to be the browser window and you are using media queries.
71+
</p>
72+
73+
<fieldset class="showWidth"><legend>&nbsp;500px breakpoint&nbsp;</legend></fieldset>
74+
75+
<section class="content-wrap" style="width:50%;">
76+
<article>1. Lorem ipsum dolor sit amet, consectetur adipiscing elit. In nunc est, facilisis in blandit sit amet, rhoncus vel lectus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices.</article>
77+
<article>2. Vivamus eu lorem mauris. Curabitur elementum felis nec libero malesuada in varius neque ultrices. Nunc sollicitudin nunc non risus mattis at varius lorem sagittis. Ut erat quam, molestie a viverra ac, porttitor a massa. Mauris eget mollis massa. Suspendisse et erat sem. Vestibulum eleifend vulputate elit at adipiscing. Suspendisse ac lectus massa.</article>
78+
<article>3. Nulla gravida neque nec metus tempus pulvinar. Nulla tincidunt lacinia ultricies. Curabitur tristique malesuada bibendum. Phasellus congue magna sem. Morbi tristique dui non sem ullamcorper fringilla. Nullam nec feugiat nibh. Duis sodales rutrum tortor sit amet volutpat.</article>
79+
<article>4. Nunc diam mi, dignissim eu fermentum at, egestas id ligula.</article>
80+
<article>5. Fusce lacus metus, vehicula nec congue id, adipiscing ac erat. Nunc justo neque, pharetra quis interdum vel, porta eget odio. Nunc lacinia posuere dui.</article>
81+
<article>6. Quisque nec ante mi, ac tempus turpis.</article>
82+
<article>7. Quisque vel erat turpis. Fusce accumsan venenatis dapibus. Mauris viverra, felis non laoreet vestibulum, leo nibh vulputate justo, in accumsan libero magna nec metus. Ut condimentum mauris nisl. Vivamus in nunc nisl. Proin commodo, mauris a placerat pellentesque, justo nisi euismod lacus, ut porttitor dui erat sit amet mi.</article>
83+
<article>8. Nam gravida neque eget diam venenatis semper. Phasellus ultricies porttitor nisl. Nam adipiscing mollis magna et dictum. Praesent ornare tempor augue, sit amet lobortis risus dictum at. Donec ligula felis, hendrerit vel laoreet quis, ornare auctor enim.</article>
84+
<br class="clear">
85+
</section>
86+
87+
</div>
88+
89+
</body>
90+
</html>

0 commit comments

Comments
 (0)