Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP

Loading…

Allow different baselines for different breakpoints (min-width) while keeping single-value function calls #4

Merged
merged 2 commits into from

3 participants

@RadLikeWhoa

Function calls can now include different baselines for different breakpoint (e.g. {'0px': 21, '480px': 24, '960px': 30}) as well as single values just like before.

@jeremyworboys

What would be the expected outcome if {'0px': 21, '960px': 30, '480px': 24} was used.

Currently a baseline of 24 would be applied as it is the last matching pair. Would it make more sense to apply a baseline of 30 as it is the widest match pair?

@daneden daneden merged commit 2807e80 into daneden:master
@daneden
Owner

Instamerge. Nice work @RadLikeWhoa.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Commits on Jun 21, 2012
  1. @RadLikeWhoa
Commits on Jun 22, 2012
  1. @RadLikeWhoa

    Function calls with different breakpoints are independent of order no…

    RadLikeWhoa authored
    …w. (e.g. {'0px': 21, '960px': 30, '480px': 24}).
This page is out of date. Refresh to see the latest.
Showing with 21 additions and 7 deletions.
  1. +21 −7 jquery.baseline.js
View
28 jquery.baseline.js
@@ -10,26 +10,40 @@
*/
(function( $ ) {
- $.fn.baseline = function(target) {
+ $.fn.baseline = function(breakpoints) {
// Set up our variables, like a good little developer
- var tall;
- var newHeight;
+ var tall, newHeight, base, old = 0;
return this.each(function(){
var $this = $(this); // Set the images as objects
- var setbase = function(target) { // The fun starts here
+ var setbase = function(breakpoints) { // The fun starts here
+
+ // Check if a single value or multiple breakpoints are given
+ if (typeof breakpoints === 'number') {
+ base = breakpoints;
+ } else if (typeof breakpoints === 'object') {
+ // Loop through the breakpoints and check which baseline to apply
+ for (key in breakpoints) {
+ var current = parseInt(key);
+ if (document.width > current && current >= old) {
+ base = breakpoints[key];
+ old = current;
+ }
+ }
+ }
+
$this.removeAttr('style'); // Remove old max-height so that we can resize up as well as down
tall = $this.height(); // Grab the height
- newHeight = Math.floor(tall / target) * target; // Make up a new height based on the baseline
+ newHeight = Math.floor(tall / base) * base; // Make up a new height based on the baseline
$this.css('maxHeight', newHeight); // Set it!
}
- setbase(target); // Call on load
+ setbase(breakpoints); // Call on load
$(window).resize(function(){ // And call again on resize.
- setbase(target);
+ setbase(breakpoints);
});
});
Something went wrong with that request. Please try again.