Category : Snippets

Equal Heights for Columns

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).

Internet Explorer 8

IE8 Pseudo Command Fix

Internet Explorer 8 (and earlier) does not recognize some very powerful pseudo commands, such as ‘first-of-type’, ‘last-of-type’, ‘only-of-type’, ‘nth-of-type’, and ‘nth-last-of-type’ which the follow jQuery snippet fixes. IE8 does support ‘nth-child(last)’ and ‘nth-child(first)’ and other nth-child commands – also ‘last-child’ and ‘first-child.’ However, those are all dependent on the element recognizing children to parent relationships (i.e. ordered and unordered lists) and will not recognize elements simply by them being inside one of another (i.e. a div tag containing a series of other div tags… that’s when you use ‘type’ instead of ‘child.’

If you are creating an addon or have one that uses one of those commands then simply paste the following code to the Page Info > Header > JavaScript of the page (in RapidWeaver).

All credit to Keith Clark on this one – great simple fix.

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
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52

/*
 * jQuery Extra Selectors - (c) Keith Clark freely distributable under the terms of the MIT license.
 * twitter.com/keithclarkcouk
 * www.keithclark.co.uk
 */
 
(function($) {
     function getNthIndex(cur, dir) {
          var t = cur, idx = 0;
          while (cur = cur[dir] ) {
               if (t.tagName == cur.tagName) {
                    idx++;
               }
          }
          return idx;
     }
     function isNthOf(elm, pattern, dir) {
          var position = getNthIndex(elm, dir), loop;
          if (pattern == "odd" || pattern == "even") {
               loop = 2;
               position -= !(pattern == "odd");
          } else {
               var nth = pattern.indexOf("n");
               if (nth > -1) {
                    loop = parseInt(pattern, 10) || parseInt(pattern.substring(0, nth) + "1", 10);
                    position -= (parseInt(pattern.substring(nth + 1), 10) || 0) - 1;
               } else {
                    loop = position + 1;
                    position -= parseInt(pattern, 10) - 1;
               }
          }
          return (loop<0 ? position<=0 : position >= 0) && position % loop == 0
     }
     var pseudos = {
          "first-of-type": function(elm) {
               return getNthIndex(elm, "previousSibling") == 0;
          },
          "last-of-type": function(elm) { 
               return getNthIndex(elm, "nextSibling") == 0;
          },
          "only-of-type": function(elm) { 
               return pseudos["first-of-type"](elm) && pseudos["last-of-type"](elm);
          },
          "nth-of-type": function(elm, i, match) {
               return isNthOf(elm, match[3], "previousSibling");
          },
          "nth-last-of-type": function(elm, i, match) {
               return isNthOf(elm, match[3], "nextSibling");
          }                
     }
     $.extend($.expr[':'], pseudos);
}(jQuery));

(function($) {
function getNthIndex(cur, dir) {
var t = cur, idx = 0;
while (cur = cur[dir] ) {
if (t.tagName == cur.tagName) {
idx++;
}
}
return idx;
}
function isNthOf(elm, pattern, dir) {
var position = getNthIndex(elm, dir), loop;
if (pattern == "odd" || pattern == "even") {
loop = 2;
position -= !(pattern == "odd");
} else {
var nth = pattern.indexOf("n");
if (nth > -1) {
loop = parseInt(pattern, 10) || parseInt(pattern.substring(0, nth) + "1", 10);
position -= (parseInt(pattern.substring(nth + 1), 10) || 0) - 1;
} else {
loop = position + 1;
position -= parseInt(pattern, 10) - 1;
}
}
return (loop<0 ? position<=0 : position >= 0) && position % loop == 0
}
var pseudos = {
"first-of-type": function(elm) {
return getNthIndex(elm, "previousSibling") == 0;
},
"last-of-type": function(elm) {
return getNthIndex(elm, "nextSibling") == 0;
},
"only-of-type": function(elm) {
return pseudos["first-of-type"](elm) && pseudos["last-of-type"](elm);
},
"nth-of-type": function(elm, i, match) {
return isNthOf(elm, match[3], "previousSibling");
},
"nth-last-of-type": function(elm, i, match) {
return isNthOf(elm, match[3], "nextSibling");
}
}
$.extend($.expr[':'], pseudos);
}(jQuery));

RapidWeaver Snippets Button

Simple Text Button Snippets

If you wanted separate install options for the snippets used in the Simple Text page, which come as free installs with the free stack, then you have a couple other options.

1. You can manually add them yourself using the codes below.

2. You can simple copy and paste the code below without ever installing them as snippets.

RapidWeaver Snippets Button

The code in these snippets controls the CSS and can be dragged and dropped in the Page Info > Header > CSS section.You then need to create the HTML that will take the CSS styling. These are not in the Snippets and can be easily created by copying and pasting this code:

1
2
3

<a class="buttonDark" href="http://YourLinkSomewhere.com">Button for Dark Backgrounds</a>
<a class="buttonLight" href="http://YourLinkSomewhere.com">Button for Light Backgrounds</a>
<a class="buttonSimple" href="http://YourLinkSomewhere.com">Button that's just dang Simple</a>

The snippets are not necessary to have in your Snippets section in Edit Mode either (so if you want that section cleaned up you can use the following codes):

For Button on Dark backgrounds

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

.buttonDark {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #000;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-  stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

For Button on Light backgrounds

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

.buttonLight {
     -webkit-border-radius: 3px;
     -moz-border-radius: 3px;
     -ms-border-radius: 3px;
     -o-border-radius: 3px;
     border-radius: 3px;
     text-shadow: 0 1px 1px #FFF;
     width: 80px;
     text-align: center;
     cursor: pointer;
     margin: 20px auto;
     display: block;
     padding: 7px 15px !important;
     -webkit-border-radius: 5px;
     -moz-border-radius: 5px;
     border-radius: 5px;
     text-shadow: 0px 1px 2px rgba(0, 0, 0, .7);
     border: 1px solid rgba(0,0,0,0.5);
     box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -webkit-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -moz-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -ms-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     -o-box-shadow: 0px 1px 1px rgba(255, 255, 255, .2), inset 0px 1px 1px rgba(255, 255, 255, .4);
     background-image: -moz-linear-gradient(top, rgba(255,255,255,0.05) 0%, rgba(0,0,0,0.05) 100%);
     background-image: -webkit-gradient(linear, left top, left bottom, color-stop(0%, rgba(255,255,255,0.05)), color-stop(100%,rgba(0,0,0,0.05)));
     background-image: -webkit-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -o-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: -ms-linear-gradient(top, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     background-image: linear-gradient(to bottom, rgba(255,255,255,0.05) 0%,rgba(0,0,0,0.05) 100%);
     transition: all 0.4s ease-in-out;
     -moz-transition: all 0.4s ease-in-out;
     -webkit-transition: all 0.4s ease-in-out;
     -o-transition: all 0.4s ease-in-out;
     -ms-transition: all 0.4s ease-in-out;
}

The Simple Button

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22

.buttonSimple {
	text-align: center;
	cursor: pointer;
	background: #349BCE;
	-o-border-radius: 3px;
	-ms-border-radius: 3px;
	-moz-border-radius: 3px;
	-webkit-border-radius: 3px;
	border-radius: 3px;
	border: 3px solid #4CAAD9;
	padding: 7px 15px !important;
	display: block;
	margin: 20px auto;	
	width: 90px;
}
.buttonSimple:hover {
	background: #4CAAD9;
}
.buttonSimple:active {
	background: #349BCE;
	border: 3px solid #349BCE;
}
RapidWeaver Snippets Button

Replacing Text with an Image Using jQuery

I had a request from a customer recently who’s responsive site created a drop down menu when the users screen was under a certain size (standard for all responsive designs and done for mobile devices in this instance). The drop down menu on mobile simple displayed the text “MENU” though the user wanted to replace that with an image instead. Fortunately this is very simple to do with JavaScript, though I thought this was worthwhile to save here as a snippet in case it benefits other users as well.

The HTML in this example is as follows:

1

<a href="http://YOUR_HOME_PAGE.com" class="imageSwitch">MENU</a>
 
1
2
3
4
5
6

$().ready(function () {
    $('.imageSwitch').each(function () {
        string = $(this).text('MENU');
        $(this).html('<img src="YOUR_IMAGE_LOCATION/NAME.png" alt="' + string + '" />');
    });
});

Obviously the image source (SRC) needs to change to the image location and name of your image. Likely you’ll have this image uploaded in your Resources section, which you can then click on the image and see the uploaded directory and name provided that you’ve already published your site.

RapidWeaver Snippets Button

Simple Divider Snippet

We’ve had several customers request coding to duplicate some of our simple looking dividers on various websites of ours. In response we decided to create a free stack call Simple Divider.

Due to the simplicity of this Stack I imagined that some users might prefer to use a snippet instead, so this post is being created for that purpose.

HTML

1
2
3

<div id="simpleDivider">
     <div class="theDivider"></div>
</div>

CSS (Subtle Emboss)

1
2
3
4
5
6
7
8
9
10
11

#simpleDivider {
     width: 100%;
     clear: both;
     padding-top: 20px;
     padding-bottom: 20px;
}
#simpleDivider .theDivider {
     width: inherit;
     border-top: solid 1px #CCC;
     border-bottom: solid 1px #FFF;
}

CSS (Solid)

1
2
3
4
5

#simpleDivider .theDivider {
     width: inherit;
     height: 4px;
     background-color: #E0E0E0;
}

Why two <div> tags and not just one?

Placing a div tag inside of a div tag protects against spacing issues that occur when floated elements are placed above. Example, if there was simple one div tag and a margin was created for the top the margin would not display if there were certain elements floated above it, despite the clear call. The easiest solution, in my opinion, is to contain the existing tag inside another element and create padding, which will have no visible effect other than achieving the desired spacing.

RapidWeaver Snippets Button

Justifying Text in RapidWeaver

Unfortunately there is no button to simply justify text inside RapidWeaver’s WYSIWYG editing toolbar. HTML & CSS can be used to achieved this effect with a symbol copy and paste of the following code:

1

<p style="text-align: justify;">Enter Your Text</p>

Note that it is always best practice to highlight sections where you add HTML and hit CMD + . which simply protects the syntax from RapidWeaver’s built in auto-correct feature.

RapidWeaver Snippets Button

Change Your RapidWeaver Theme’s Default Font

I’ve had a customers ask me over time how to change the global font in RapidWeaver.

Of course you can manually change the font, but you’d have to do it page after page, section after section, sure would be easier to set a new global font if the theme you were using implementing font selections different that the one you wanted.

Fortunately, with some simple CSS that’s not a problem.

Step 1: Locate your Page Inspector (example):

RapidWeaver Page Info Button Screenshot

Step 2: Select Header (example) and then CSS:

Page Inspector's Header Button

Step 3: Finally, enter the following code and that should do the trick:

1

 * {font-family: arial, tahoma, sans-serif}

You can, of course, change the fonts listed to meet any font you would like (custom fonts will require the importing of font files or linking to the remote font server, such as Google’s Web Fonts). Note that whatever font is on the left will be loaded first and every font to the right is a fallback in case the font does not or cannot load.

RapidWeaver Snippets Button

Deactivate Parent Menu Anchor Link

If you would like to deactivate the parent menu in your RapidWeaver theme and only leave the child menu items available for anchor tags you can easily achieve this with jQuery. The following code will also leave the anchor in place so that the CSS is not lost.

Place the code into the following section: Page Info » Header » JavaScript

1
2
3

$(window).load( function() {
     $('#nav > ul:first-child > li > a').removeAttr('href');
});

All this is saying is to remove the href attribute from you anchor tags, so you’ll keep the CSS attached to the tags for styling, but it remove the link out.

If you would still like users to see a hand when they cover over this link then you will need to add the styling into the section: Page Info » Header » CSS

1

#nav li {cursor:pointer}

Note that if you are using another theme you will need to rename #nav to whatever element wraps around your menu.

Latest News

One Little Designer

Popular Links