Every Day Free – But Never Cheap!
Exclusively for RapidWeaver users • only free and low-cost stuff

Another RapidWeaver blog

Yes, it's true: one more blog about our favorite web site building application for MacOSX. But this one is a little different. It started back in 2011 as a blog focusing solely on free and low-cost stuff for (producing a web site with) RapidWeaver: themes, tools, tips, tricks, anything, as long as it was free – or low-cost.
    Over time, the Stacks plugin became more popular, and coding yourself was no longer an option for many people, so I started to develop my own stacks in the spirit of the blog: free (well, actually pay-what-you-want) and low-cost.
    This blog evolved with it, and is now primarily about those new stacks, although from time to time I will post about other free and low-cost stuff for RapidWeaver.

ShareThis | follow me on twitterFollow me on Twitter


Do you know something free (or low-cost) & useful related to RapidWeaver not mentioned here? Have a suggestion for a subject to write about here or for a new stack?
Tips, questions and remarks are always welcomed.
Just and help to expand this little blog!

Making jQuery work

Found some jQuery code that's perfect for your site, but can't make it work? Don't worry, here's a small tutorial to lead you through.
Let's start with an example. Suppose, on a good day, you read somewhere on the Internet something like ‘I found this cool way to prevent the current page in RapidWeaver from being a link. Here's the code:
<script type="text/javascript">
    $(document).ready(function(){
        $('#current]').click(function(event){
        event.preventDefault()
    });
</script>

Isn't that awsom?’ Want to use it on your site, but don't know how; or you can't get it to work? Don't worry, just follow the steps below.

1. Copy and paste the code
Paste the code you intend to use in Page Inspector -> Header -> Header. When you're lucky, it works straight away. No need to read the rest then! But what if it doesn't work?

2. Double check
It may sound too obvious, but are you sure you pasted all the code? And are you sure it is in the right pane in the Page Inspector?

3. Call the jQuery library
To make it work, the jQuery library needs to be included in your page.
Many themes have jQuery build in. In that case, you can skip this step. If you don't know if your theme has jQuery build in, click on Source in the toolbar (or press ⌥⌘U) and search for 'jQuery' and see if it's there.

If you can't find it, you will have to add it yourself. The easiest way to to this, is by adding the following line in Page Inspector -> Header -> Header:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
before the code you want to use.

This way, you will link to a server from Google where the jQuery library is hosted. If you want to know more, take a look at the Google Libraries API page.

4. Check for jQuery's no-conflict mode
Still doesn’t work? Some themes that have jQuery build in and use jQuery's no-conflict mode. If your theme has jQuery built in, this could be the problem. To check if your theme uses jQuery's no-conflict mode, click on Source in the toolbar (or press ⌥⌘U) and search for 'noconflict' and see if it's there.

If so, check what is says between var and =. In Mirage for example, it's $fz (see the screen shot). Just change each $ in the code to what you found. So, in the case of Mirage here the code in Page Inspector -> JavaScript will be:
<script type="text/javascript">
    $fz(document).ready(function(){
        $fz('#current]').click(function(event){
        event.preventDefault()
    });
</script>

5. move the code around
Still doesn’t work? Don't despair, there are more things to try. Move the code without the surrounding to Page Inspector -> Header -> JavaScript to see if that helps. Moving the code (including the surrounding ) to the very end of the content area will sometimes do the trick as well.

6. Test it on a styled text page
Still doesn’t work? There may be some kind of conflict between the JavaScript already in use on your page. When you try to use the code on a plugin page or Stacks page, try all the above on a styled text page. If it works there, it's just not compatible with something else on your page. Too bad. Maybe you can remove a stack from the page to make it work, but the chances are big this is just not your lucky day.

7. Test it with another theme
Still doesn’t work? There may also be some kind of conflict between the JavaScript already in use in your theme. See what happens if you use another theme. If it works there, it's just not compatible with the theme you're using.

8. Try an older version of jQuery
There is one more thing you can try as a last resort. Maybe the code is not compatible with the jQuery version you included in step 3. Changing 1.7.1 to 1.4.1 or 1.3.2 will load an older version from Google. Although it rarely happens, it does solve the problem sometimes.

In the unlikely case non of the solutions above work, it's time to seek some help, e.g. on the RapidWeaver forum or here in the comments.

BTW: when you want to use the example used here, put the following CSS in Page Inspector > Header > CSS to prevent the cursor changing to ‘pointer’ when hovering over the menu item representing the current page:
#current {
    cursor: default;
}

Keep in mind that all this is meant for themes that use id="current". When your theme uses class="current", you will have to change every # to a . (dot)! Click on Source in the toolbar (or press ⌥⌘U) and do a search to find out.

See older posts...