Charlie

Charlie

Charlie is a Statamic add-on that enables you to easily set up infinite scroll and create an AJAX navigable site with little to no markup changes.

Docs

Settings always display the default value. They also indicate the recommended usage, config file (key: default_value) or tag parameter (parameter="default_value").

You can edit the code within <pre>s on this page before copying and pasting.

Features

  • AJAXily navigate your site. No JavaScript/AJAX knowledge required!
  • Supports infinite scroll (see demo)
  • Requires little to no markup changes
  • Compatible with custom animations
  • Progressive enhancement (everything functions normally without JavaScript)
  • Compatible with browsers’ back/forward buttons

Browser Support*

  • IE 10+
  • Firefox 23+
  • Chrome 29+
  • Safari 5.1+
  • Opera 17+
  • iOS Safari 4.2+
  • Android Browser 2.2-2.3, 4.2+
  • Blackberry 7+
  • IE Mobile 10+

For browsers that don’t support Charlie’s functions, browsing functions normally.

*For up-to-date info, see Can I useā€¦.

Installation

Upload the charlie folder to _add-ons.

{{ charlie }}

Make sure you include jQuery before {{ charlie }}.

{{ charlie }} loads the necessary JavaScript to AJAXify and/or infinite scroll-ify your site.

<script src="jquery.js"></script>
{{ charlie }}

Required Settings

content
content: #content

The id or class of the element that Charlie should load content from (on the linked page).

fx_in
fx_in: fadeIn

The animation used for incoming content.

Valid Values

fadeIn, slideDown, or your own custom effect

Have some crazy effect from a jQuery plugin you want to use? That works, too. Just include the plugin before {{ charlie }}.

<script src="jquery.js"></script>
<script src="crazy_plugin.js"></script>
{{ charlie fx_in="crazyEffect" }}
fx_out
fx_out: fadeOut

The animation used for outgoing content.

Valid Values

fadeOut, slideUp, or your own custom effect

Have some crazy effect from a jQuery plugin you want to use? That works, too. Just include the plugin before {{ charlie }}.

<script src="jquery.js"></script>
<script src="crazy_plugin.js"></script>
{{ charlie fx_out="crazyEffect" }}
link_containers
link_containers: .nav

A pipe-separated (|) list of elements that contain the links to content that Charlie should load via AJAX.

trash
trash: #content

The id or class of the element that Charlie should discard before loading new content (from the linked page).

You probably want to set trash to the same value as content.

Optional Settings

callback
callback:

If your link_containers are within your trash and you do not use pag_containers, you need to set this to charlie.

This can also be set to any JavaScript function you want to run after the new content is animated in.

class_active
class_active:

Setting this adds the given class to the anchor tag for the current page (or the specified parent element if you use class_active_parent). This does not add a class until the user clicks a link, so if you use it, you should manually add the class in the template/layout for the landing page.

{{ charlie class_active="active" }}
class_active_parent
class_active_parent:

If you use class_active, Charlie sets the class on the clicked anchor tag by default. Some people prefer to set the active class on a parent element, like an li. This allows you to do so.

{{ charlie
    class_active        = "active"
    class_active_parent = "li"
}}
duration_in
duration_in: 400

The duration, in milliseconds, of the animation for fx_in.

duration_out
duration_out: 400

The duration, in milliseconds, of the animation for fx_out.

pag_containers
pag_containers:

A pipe-separated (|) list of elements that contain pagination links. This sets up infinite scroll.

Use this only if you already use link_containers for typical AJAX navigation.

If you want to use only the infinite scroll feature,

  • ignore pag_containers,
  • set content as usual, and
  • set trash to the same value as link_containers.
script_tags
script_tags: true

Set script_tags to false to not return opening or closing script tags. This allows you to add {{ charlie }} to inline JavaScript.

<script>
  $('.selector').function();
  {{ charlie script_tags="false" }}
</script>

{{ charlie:is_ajax }}

This tag returns true for AJAX requests or false otherwise. Use this in conditionals so that you don’t reload any code identical between pages (like headers and footers). This will boost the speed of your page load.

{{ if !{ charlie:is_ajax } }}
  {{# your template/layout code here #}}
{{ endif }}
See the demo included in the downloaded files for a more thorough example.

Basic Example

<!doctype html>
<html>
<body>
  <nav class="nav">
    <ol>
      <li><a class="current" href="{{ _site_url }}"        >Home   </a></li>
      <li><a                 href="{{ _site_url }}/contact">Contact</a></li>
    </ol>
  </nav>

  <div id="content">
    {{# your content here #}}
  </div>

  <script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
  {{ charlie class_active="current" }}
</body>
</html>

Pro Tips

Faster Page Loads

See {{ charlie:is_ajax }}.

Support

For now, support requests should be emailed to helpme@curtisblackwell.com.

I have plans to use a forum (or something similar) in the near future, however I’m waiting to see what Statamic offers, if anything, when the Trading Post launches.

Feature Requests

Feature requests are encouraged and should be emailed to ihaveagreatidea@curtisblackwell.com.