• Share a link to this article:

All ThemeFlood themes include jQuery. You may have heard of jQuery before. jQuery is a cross-platform JavaScript library designed to simplify the client-side scripting of HTML. It is free, open-source software, licensed under the permissive MIT License. Web analysis indicates that it is the most widely deployed JavaScript library by a large margin. Many theme functions (like ExtraContent and FreeStyle banners) depend on jQuery, which is why it is included with themes.

As of 2018, our policy is to build jQuery (normally either version 2 or 3) directly into themes; instead of linking to versions on an external CDN (content delivery network).

Originally the case was made that versions of jQuery coming from an external CDN would promote caching. Browsing some websites might become marginally quicker if the web browser already had a cached version of jQuery in its memory. However the reality is that there are now almost an infinite number of jQuery versions in existence; and therefore the caching argument isn't really valid any more.

Versions of jQuery have gradually become smaller, as support for older web browsers (like Internet Explorer 6 or 7) have been dropped. So very often, the loading impact of jQuery on completed pages is particularly low.

Additionally there have been valid concerns raised in recent times, relating to privacy, when using versions of jQuery stored by private companies like Google or CloudFlare. Keeping assets (like jQuery) hosted on your own server safeguards user privacy. It also means that if a CDN goes offline, you are not left with a broken website!

Most of the websites RapidWeaver users build are not large enough to see the full benefits of CDN-hosted jQuery.

Manually changing where jQuery comes from or what version is used

You are welcome to use a different version of jQuery in our themes. Alternatively you can choose to use jQuery from a different source (like a CDN). This involves some edits to your theme. As always, we recommend working from a duplicated and renamed theme, so that future updates do not undo your changes.

Open the theme contents and then open the index.html file in your preferred code editor. Scroll down towards the bottom of the page. There you should see the jQuery call.

jQuery call in the theme index.html file

Edit the address to point to either a different version of jQuery or a different location. For example to use a version of jQuery stored on Google's servers, you can change the call to something like this:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>

Save the changes and close the file when done. If you need to add a different version of jQuery to the theme, this can normally be stored in either the /core/js directory or /scripts/ directory, replacing what is already there.

A couple of themes have their jQuery calls towards the top of the index.html file. This was typically done so that theme style settings (that used Javascript) could be created. You may find this is the case in slightly older themes that provide options for menu animations or background slideshows. Most newer themes have all their Javascript towards the end of the page; to promote faster page loading.

Adding jQuery to the ThemeFlood namespace

Most of the jQuery code in ThemeFlood themes is wrapped inside its own namespace / closure. This method isolates the code from other scripts or addons in the page. In turn, this can greatly reduce the risk of conflicts with other elements.

You are welcome to write your own jQuery code that can reuse our namespace / closure. When you are writing your jQuery code, you simply have to type 'ThemeFlood' after each dollar sign like this:

$ThemeFlood(document).ready(function() {
    $ThemeFlood(body).css('background-color', 'red');

Where should custom jQuery code be added? If you only want to include your jQuery on a single page, just add it to the Page Inspector > Custom CSS box. If you want to include the same code in multiple pages, add it to Settings > Code > Javascript in RapidWeaver 7 and above.

Some themes include a custom.js file too. Code added to your custom.js file will be included on every page too, within our namespace / closure. You may find it easier to work with the custom.js file in your preferred code editor; where you have the benefit of features like syntax colouring, indentation, line numbers, find and replace, error checking etc.