1LD Tutorials & Blogs

Blog

Have you ever had multiple columns and you wanted them all to size themselves to the height of whichever one ended up being tallest? That’s what this snippet does. You’ll need to inspect your pages code to find the classes of the column sections. After that scroll down to line 35 in the code below, then replace ‘.sectionOne’, ‘.sectionTwo’, and ‘.sectionThree’ with the classes of your columns… if you have more than three just keep following the pattern to add more.

Thanks to the Filament Group for this one.

Make sure to paste the follow snippet in your Page Info > Header > JavaScript section (in RapidWeaver).

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
/*-------------------------------------------------------------------- 
 * JQuery Plugin: "EqualHeights" & "EqualWidths"
 * by:        Scott Jehl, Todd Parker, Maggie Costello Wachs (http://www.filamentgroup.com)
 *
 * Copyright (c) 2007 Filament Group
 * Licensed under GPL (http://www.opensource.org/licenses/gpl-license.php)
 *
 * Description: Compares the heights or widths of the top-level children of a provided element 
                 and sets their min-height to the tallest height (or width to widest width). Sets in em units 
                 by default if pxToEm() method is available.
 * Dependencies: jQuery library, pxToEm method        (article: http://www.filamentgroup.com/lab/retaining_scalable_interfaces_with_pixel_to_em_conversion/)                                                          
 * Usage Example: $(element).equalHeights();
                                                         Optional: to set min-height in px, pass a true argument: $(element).equalHeights(true);
 * Version: 2.0, 07.24.2008
 * Changelog:
 *  08.02.2007 initial Version 1.0
 *  07.24.2008 v 2.0 - added support for widths
--------------------------------------------------------------------*/
 
$.fn.equalHeights = function(px) {
     $(this).each(function(){
          var currentTallest = 0;
          $(this).children().each(function(i){
               if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
          });
     if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
          // for ie6, set height since min-height isn't supported
          if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
          $(this).children().css({'min-height': currentTallest}); 
     });
     return this;
};
 
$(document).ready(function() {
     var highestCol = Math.max($('.sectionOne').height(),$('.sectionTwo').height(),$('.sectionThree').height());
     $('.fullHeight').height(highestCol);
});

$.fn.equalHeights = function(px) {
$(this).each(function(){
var currentTallest = 0;
$(this).children().each(function(i){
if ($(this).height() > currentTallest) { currentTallest = $(this).height(); }
});
if (!px && Number.prototype.pxToEm) currentTallest = currentTallest.pxToEm(); //use ems unless px is specified
// for ie6, set height since min-height isn't supported
if ($.browser.msie && $.browser.version == 6.0) { $(this).children().css({'height': currentTallest}); }
$(this).children().css({'min-height': currentTallest});
});
return this;
};

$(document).ready(function() {
var highestCol = Math.max($('.sectionOne').height(),$('.sectionTwo').height(),$('.sectionThree').height());
$('.fullHeight').height(highestCol);
});

In this example you would need to provide each of the containers also with the class of fullHeight (line 36).

RapidWeaver Stack Tutorials

RapidWeaver Theme Tutorials

RapidWeaver Project Documentation

Tutorials and documentation for all 1LD Project files can be found at the link below.

See Documentation

Get the power of a framework, for the price of a theme, in the convenience of a prebuilt RapidWeaver project file

Blog

Super Forms 2 – 1.2.0 Update

Through customer feedback, we were able to add some new features and fix a few bugs with our Super Forms 2 stack. Check out the list of changes below. This update is free for those who own the Super Forms 2 stack. 

Super Forms 2 (Version 1.2.0)

  • NEW: You can now customize each field’s Required/Invalid input message
  • NEW: Customize checkbox true and false values (“Yes” and “No”)
  • NEW: Customize file upload error messages
  • NEW: reCAPTCHA now has an option to support non SSL (http) websites
  • NEW: Support for v2 invisible reCAPTCHA
  • NEW: Support for v3 reCAPTCHA
  • NEW: Set a specific locale/language for reCAPTCHA
  • NEW: Allow the form to submit to Google Sheets and an email address at the same time
  • NEW: Optionally customize the name of each field for Google Spreadsheets and the titles as shown in the sent message
  • Improved: Prevents notices for empty form fields from displaying in PHP logs
  • Improved: Date timezone defaults to UTC in case the server does not have a default defined timezone
  • Fixed: Bug that could stop attachments from being sent properly
  • Fixed: File upload field was rejecting files if the extensions had capital letters
  • Fixed: Bug that could cause attachments to arrive with 0kb file sizes
  • Fixed: Multi select now properly concats selected options
  • Fixed: Checkbox display bug in iOS Safari
  • Other minor bug fixes 

Check it out!

Latest News

Newsletter

Join our newsletter to get notified of new releases, updates, and discounts.

Subscribe

Popular Links

Free Stacks & Themes
See Order History
Product Tutorials
FAQs

© 2011 One Little Designer, 1 Little Designer (1LD)

RapidWeaver is a trademark of Realmac Software