AJAX Search

The built-in search engine utilises AJAX and MySQL's powerful FULLTEXT feature to rapidly return, in real-time, any pages that match your search query.

When you click on a returned result, the visited page will highlight the search terms until one of them is clicked on. Try searching for 'ajax' and clicking on a returned result.

Search results appear here in real-time.

Example Sidebar

Create and integrate sidebars on-the-fly.

You can create and add as many of these sidebars as you want. Sidebar content is generated via the same easy to use WYSIWYG editor as regular pages, allowing you to insert and format text, HTML, forms and images. Each sidebar has the option of a toggle link which expands and collapses the panel. The sidebar's toggle state is recalled upon susbsequent visits to the same page.

You can even create a sidebar that contains raw PHP code - thus providing unlimited extensibility via functions, libraries and includes. Smart.

"...and slide, two three four"

jQuery is a JavaScript framework that helps speed up development by providing content creators with a wealth of HTML manipulation and AJAX methods. It can greatly enhance simple web pages with dynamic effects and content using simple, minimal code.

Vanilla's layout features such as sliding sidebars and the navigation menu all rely on jQuery, as do many of the administrative functions. It's jQuery that allows you to save content without page refreshes and it's partly thanks to jQuery that Vanilla is so fast.

Every page that is created using Vanilla CMS includes the jQuery core file. This allows you to access hundreds of functions simply by giving your HTML elements a special ID or class attribute. For example, the word HTML in the previous sentence uses a jQuery tooltip class to show a hovering message when the mouse is placed over it.

This link opens and closes the paragraph below and was achieved by adding id="para_to_hide" to the paragraph tag. The link has an onclick handler: onclick="$('#para_to_hide').toggle(200);"

To extend the functionality of the core jQuery library you can include your own functions and libraries at runtime. We've conveniently placed a button on the editing toolbar that allows you to scan your JavaScript folder and select which ones you wish to import.

Bundled jQuery Plugins

We've included many popular jQuery plugins with Vanilla.  Here's a few of them:

  • blockUI - allows screen overlays and modal dialogues
  • Nyromodal - a fully blown lightbox plugin (see below)
  • Hi-Viz - our own high visibility accessibility plugin
  • Keynav - allows navigation of the main menu by keystrokes alone
  • FileTree - allows directory tree browsing
  • Tooltip - allows fancy mouseover tooltips
  • UI Core - allows dragging, dropping, sorting and resizing
  • Autogrow - autosize textareas
  • Corner - adds rounded corners to DOM elements (without the use of images)
  • Innerfade - create slideshow transitions from elements and images
  • ScrollTo - Allows fancy page scrolling to anchor elements
  • Datepicker - a fancy, very flexible date picker
  • Querystring - pick up querystrings with JavaScript
  • FancyBox - another lightbox plugin
  • Search Highlights - highlight anything, anywhere

Credit to all of these splendid tools and their authors.

The Ubiquitous Lightbox

Vanilla also has its own lightbox-style image features. To open an image, link or media file in a lightbox window, simply add 'lightbox' to the link element's class attribute. Click the image below to see it in action.

Feature Update - We've now added a feature to convert every image on a page to a lightbox image. You simply tick an option box and every image on the page is turned into a link which opens the image in a swish-looking window. If you have multiple images, they'll be displayed as a manual slideshow.

As a regular link:

With an additional title:

Check out the Media Gallery feature for even more jQuery multimedia shenanigans.

Once you start using jQuery, we can almost guarantee that your programming quality and the speed at which you develop will increase. It's an incredible framework and it's hugely popular.