Dynamic Navigation

Michael Sisk edited this page Feb 1, 2013 · 3 revisions
Clone this wiki locally

Webcomic's Dynamic Navigation feature provides a simple method of enabling AJAX-powered webcomic navigation, allowing readers to browse through your comics without reloading the entire page. Both the Integrate option and Webcomic-ready themes have built-in support for dynamic navigation, but if you're customizing an existing theme or building your own you'll need to do a tiny bit of setup to get dynamic navigation working.

How Dynamic Navigation Works

Webcomic handles the technical bits related to dynamic navigation, but it requires a small amount of setup to get going. Because we're only reloading part of a page we need to tell Webcomic which part of the page to reload. This is done with a dynamic webcomic container:

<div data-webcomic-container>
<!-- Everything in here will be dynamically loaded when the reader navigates-->
</div>

That's it! Webcomic will recognize the <div> as a webcomic container, so now we just need to add the bits that will be updated when a reader navigates through your webcomics. This is done with standard template tags:

<div data-webcomic-container>
    <?php the_webcomic(); ?>
    <nav><?php previous_webcomic_link(); ?> | <?php next_webcomic_link(); ?></nav>
</div>

This is the bare-minimum you would need to make dynamic navigation work: a container, displaying the webcomic with the_webcomic, and some navigation links. When a user clicks next or previous (or uses keyboard shortcuts, if they're enabled) Webcomic will swap out everything between <div data-webcomic-container> and </div> with the next or previous webcomic based on your dynamic navigation template.

Note that for dynamic navigation to work you need the container and the navigation links inside of the container. Something like this:

<div data-webcomic-container>
    <?php the_webcomic(); ?>
</div>
<nav><?php previous_webcomic_link(); ?> | <?php next_webcomic_link(); ?></nav>

won't work because Webcomic won't recognize the navigation links as being part of the dynamic navigation. Because of this, your dynamic navigation template should always include at least one navigation link using Webcomic's template tags.

Multiple Containers

Dynamic navigation is great, but maybe one container isn't enough for you. Maybe you have multiple collections, and you'd like to let users browse them all, dynamically, from a single page. Or maybe you have one collection displaying full-size on the home page that can be dynamically navigated, but you'd like to include one (or more) collection previews in the sidebar that can also be dynamically navigated.

Webcomic has a simple method for defining multiple containers:

<div data-webcomic-container="sidebar-comic">
    <?php the_webcomic(); ?>
    <nav><?php previous_webcomic_link(); ?> | <?php next_webcomic_link(); ?></nav>
</div>

<?php /* Somewhere else on the page, in a different loop... */ ?>

<div data-webcomic-container>
    <?php the_webcomic(); ?>
    <nav><?php previous_webcomic_link(); ?> | <?php next_webcomic_link(); ?></nav>
</div>

Unlike the first example, here we've assigned an ID to the first container using data-webcomic-container. Webcomic will recognize these as unique containers and reload them appropriately. For example, clicking next in the first container will reload only that container; nothing will happen to the comic in the other container. This way you can have any number of dynamic navigation blocks on a single page.