Simple Headers Pro

Simple Headers Pro

Simple Headers Pro gives you awesome new features: FitText and Circle Type. In addition, you gain the ability to change your font to the main web safe fonts or easily import your own. (project file & commercial free font included)

FitText creates automatically responsive text that will fit to whatever the screen size is, but allows you to still set minimum and maximum font sizes (if you prefer).

Circle Type lets you bend your text into an arch to any degree even a full circle.

30% Discount Code: 30_sHeaders_072014
Offer Expires July 18, 2014

Check it out!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS

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);
});

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

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
cleanTips RapidWeaver Tooltip Stack

cleanTips – New Tooltip Stack

cleanTips is perfect for taking advantage of small spaces. Use it to place beautiful and easily customizable tooltips on any Stacks 2.0+ page. Perfect for buttons, videos, small text snippets, images, shaping cart presentations, notifications, and alerts.

Create multiple tooltips, change colors, beautiful transition effects for most modern browsers, easy to use and simple customization.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Hang Glider Responsive RapidWeaver Stack 2.0 Icon

Hang Glider 2.0 (Major) Update

Hang Glider Responsive RapidWeaver Stack 2.0 IconMajor Update to Hang Glider in the new 2.0 version makes some much needed improvements as well as implements an all new lightbox that is fully responsive and animated – making Hang Glider truly fully responsive and fully animated. New options are added to turn the Hang Glider jQuery call and Lightbox call On/Off if you are using other tools or multiple instances of the Stack.

Check it out

Read more about the update in the Changelog.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
cleanQuotes RapidWeaver Stack Icon

cleanQuotes RapidWeaver Stack Release

Fully Responsive stack with beautiful design and animation built specifically to display customer reviews, testimonials and other site promotions. Great customization options coupled with simple and intuitive controls make cleanQuotes enjoyable and impressive.

Easily drag and drop quote sections designed specifically for customer reviews and testimonials. Simple design with subtle animation makes cleanQuotes great for any online business.

Testimonial / cleanQuote’s inner section allows you to place other stacks inside easily. This is designed to perfectly implement the built-in Stacks (i.e. Text, HTML).

Built-in Themes and Customization options allow you to adapt cleanQuotes to any RapidWeaver theme. The light weight plugins ensures fast loading speed and browser adaptability.

Check it out

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
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.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Lynda.com Online Tutorials

Improving Your Coding Skills

To find resources to help improve your coding is not difficult on the internet these days – fact it’s hard not to find your answers in many cases. You can find blogs and forums from just about any web design topic such as HTML, CSS, jQuery, JavaScript or even more advanced topics like MySQL and PHP. Over time I’ve found a hand full that are my personal favorites and that I’d like to recommend if you are a RapidWeaver user who wants to sharpen their coding skills. RapidWeaver is great software for users who want to avoid having to know much if any code, though knowing code is only going to enhance your experience and unlock more possibilities for you. The choice is yours.

1. Code Academy

For free help it really is hard to beat Code Academy. They don’t cover every topic, though they do touch on some great foundation topics and give you a chance to see your code live.

2. lynda.com

I’ve been a member at Lynda.com for years now and have used it to learn most of what I know today. They do not cover all topics or even every piece of software, but they do have a very extensive library and its growing all the time. In addition, they cover not only topics of web design, but also graphic design, SEO, business, and much much more.

On the downside Lynda.com does require a $25/mo membership fee, though I think it’s well worth every penny. You can also upgrade your membership and pay $37.50/mo which will give you access to all their exercise files.

3. CSS-Tricks

If you subscribe to a blog and want to improve your coding then definitely add CSS-Tricks to your list… if you haven’t already. Chris Coyier continues to delve deeper into some fun and amazing coding that doesn’t stop at CSS. In addition, he provides great example and snippets for achieving CSS and jQuery techniques.

What’s Yours?

There are lots more tools out there in the internet for increasing your skills and I’ve only touched on 3 ones that I love here. If you have one you love please comment and share what you love about it so much. If you want to explore other great ones that are not my personal favorites, but still very useful, check out these:

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
California RapidWeaver Theme Screenshot

New RapidWeaver Theme ‘California’

Designed for the fashion & magazine industry, California offers a simple, clean and modern look backed with easy-to-use customization options that make building your site a joy.

Fully Responsive with a beautiful mobile display using the latest in HTML 5 techniques to optimize your visitor’s experience.

The demo features the smooth sliding of the responsive animation stack Hang Glider.

Check it out!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
cinema rapidweaver theme screenshot

Cinema Theme Release

CINEMA RapidWeaver Theme

Cinema focuses on delivering a powerfully Responsive, Minimalistic and Modern Theme. Responsive functionality gives your theme it’s incredible feel for all screen sizes both small and large. In addition, your website will display differently for tablet and mobile devices (go ahead stretch the screen around and check it out).

Take full customization control of our extremely flexible slider – easily control sizes, frame decoration, captions, and 23 stunning transition effects.

Customize your own theme easily or take advantage of our 5 awesomely handcrafted theme styles – incredibly adaptable for both light and dark themes.

Extra Content gives you even more sections to place information. Extra Content sections are placed both above and below the main content section.

Your site running fast and error free is one of our top concerns. Cinema has gone through a strenuous code validation process to ensure that, while taking advantage of new HTML5 syntax, and best of all it looks AMAZING in all browsers (even going back to ie7).

How do we achieve all this functionality while maintaining a quick loading and cross-browser theme? jQuery is pretty much the answer. We’ve taken advantage of some awesome jQuery effects for animating your site yes, but we’ve also used it to minimize load times and acquire clean code.

cinema rapidweaver theme screenshot

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
cleanVideos RapidWeaver Stack icon

100% Responsive Video Stack

cleanVideo RapidWeaver Stack icon

cleanVideos offers 100% Responsive video embedding while keeping the video’s aspect ratio.

Supports all major video sharing sites such as YouTube and Vimeo – Supported HTML Embedding: iframe, object, embed.

Customization Options: pretty much none because it’s so dang easy to use that you don’t need any. Simply insert the html code into the stack and you are done. Couldn’t be easier!

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
cleanAccordion Rapidweaver Stack logo

cleanAccordion Released

cleanAccordion is a simple-to-use & customize drag-and-drop jQuery accordion stack.

100% Reponsive

Go ahead and test it out – this theme is the fully responsive Cabernet 2. Resize your screen and watch cleanAccordion adjust to the size.

Where You Can Place It

Anywhere stacks can go cleanAccordion can follow. You will need an additional plugin to place outside of the page element, such as PlusKit.

How Many Tabs You Are Limited To

NONE! There is absolutely no limit… well of course it might look silly after a while if you put too many, and if you put just one it sorta defeats the purpose… but you still can.

It’s so easy to use that this is pretty much all you need to know:

  • Double click the install file (its now installed almost instantly)
  • Create a Stacks page
  • Drag the cleanAccordion (Container) into the stacks page (left image below)
  • Drag cleanAccordion (Inner) into the container section (right image below)
  • Add more by easily dragging them above or below each other (change order easily)

cleanAccordion Container ImagecleanAccordion Inner Image


Customize Options

  • Theme 1 and 2
  • Margin
  • Padding
  • Border Radius (rounded corners)
  • Border Size (Outer)
  • Border Size (Inner)
  • Border Color (Outer) for Theme 2
  • Border Color (Inner) for Theme 2
  • Title Background Color for Theme 2
  • Description Color for Theme 2
  • Title Text Color
  • Title Text Color (Hover)
  • Title Text Shadow Color
  • Description Text Color
  • 4 Gradient Color Controls for Theme 1

CHECK IT OUT

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
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.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
twitterConnect Rapidweaver Stack Icon

twitterConnect Stack Release

A modern touch for blogs by connecting to realtime twitter feeds. You control the terms and connect the vast world of twitter.

twitterConnect allows you to connect keywords and keyword phrases to real time twitter feeds from around the world. If the term is used anywhere on twitter, then twitterConnect will find it and show your users a live feed!

Whenever clicked twitterConnect quickly grabs the latest tweets containing the keywords chosen all in realtime – the results are constantly changing and unpredictably fascinating.

Drag & drop twitterConnect wherever you place stacks. If your theme needs different colors or sizes easily change the look of twitterConnects pop-up box or twitter icon.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Hang Glider Responsive RapidWeaver Stack 2.0 Icon

Hang Glider jQuery Update Patch (v.1.0.1)

jQuery just came out with an update that threw off some of the coding we had done within Hang Glider.

You may or may not notice this change on your site, but most likely will if you update your Stacks plugin.

If your version is impacted then Hang Glider will not display any content, but rather just a large empty space.

Please download the new version of Hang Glider if you experience any issues.

Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS
Please follow & like us :)
Follow by Email
Facebook
Twitter
INSTAGRAM
Google+
http://onelittledesigner.com/rapidweaver/tag/jquery/">
RSS