Cloud Four Blog

Technical notes, War stories and anecdotes

SimpleSlideView: Our Plugin for the Simplest of Sliding Views

Sliding views (incoming views that “push” old ones off-screen) have become so commonplace in mobile design we tend to take them for granted. They’re useful because they allow content to be broken into bite-sized chunks while maintaining hierarchy through the use of spacial animation. They look pretty neat, too.

There are a lot of existing JavaScript solutions for this sort of thing, but most are built for hybrid mobile apps with a lot of complexity and stringent markup requirements… understandably so given the goals of those projects! Others seem catered to carousels over body content. We needed something web-focused and super simple, with the ability to activate/deactivate for responsive layouts.

So we made SimpleSlideView, a plugin for jQuery or Zepto.

Check out the basic demo to see it in action. There’s also a responsive demo to show off how the plugin can activate or deactivate for different layouts.

What makes SimpleSlideView special? Since you asked…

Unopinionated Markup

You need a containing element and a way to select the views within it (a class of “view,” for example). That’s about it.

“No-Frills” Navigation

Views can be “pushed” (the new view “pushes” the old one from the right) or “popped” (the opposite). That’s it. No complex multi-step animations. No built-in history tracking.

There are pushView and popView methods to control navigation, or you can add some magical HTML5 data attributes (data-pushview and data-popview) to links or anything else.

Plenty of frameworks do more. This one does push and pull.

Responsive by Design

Sliding views don’t always make sense when your viewport’s rather spacious. SimpleSlideView was developed for responsive layouts, and it handles them like a pro.

The plugin activates by default, but you can override that with the deferOn setting. You can turn it on or off any time you’d like with the (creatively named) on, off and toggle methods.

It even has some nifty events you can use to activate or deactivate alternative functionality. See the responsive demo for an example.

Give It a Whirl

The plugin, source and documentation are available on GitHub… also an excellent place to report issues or contribute improvements. Let us know how you like it!

15 Comments on “SimpleSlideView: Our Plugin for the Simplest of Sliding Views”

  1. Iho says:

    Hi, Tyler!

    Nice work, really :)
    Di you test your plugin on browser support?
    Thanks

  2. Ryan says:

    That’s great, works nicely but it’s a shame it doesn’t degrade when JS is disabled. Would you ever consider updating it to be more graceful in degrading? Simply listing out the content would do. Or could I achieve this with the trusty old “no-js” class?

    • Tyler Sticka says:

      All of the links in the basic demo resolve to actual in-page anchors that are not hidden by default, so it’s fully functional with JavaScript disabled.

      The plugin adds (customizable) classes to affected elements when active, so I’m using those to style the views differently in that scenario (see here).

      The responsive demo is not currently functional without JS, but there’s no good reason for that… I’ve added an issue to make sure we bring it up to speed.

  3. Jessie says:

    Lovely work! Would also be great if there was swipe functionality built in for the mobile version, or would it be better to use an additional plugin for that?

    • Tyler Sticka says:

      Thanks, Jessie! I would recommend a plugin for that sorta thing, since there are so many different ways to do it. If you were using something like Hammer.js, you could call the pushView and/or popView methods from event callbacks tied to swipe events. You can also change the event the magic data attributes listen to by changing the dataAttrEvent option (more info).

  4. Hey guys, looks like a great solution, will have to take a look at it.

  5. James says:

    Nice! Can you have a bunch of sliding views within a parent slide?

    • Tyler Sticka says:

      Potentially? When you call the method, it returns a unique instance, so this is theoretically possible. Probably not the greatest example of a “simple” slide view, though.

      • James says:

        I made an attempt but couldn’t get the slideview within a slide working. Clicking links within the slide seems to trigger the parent slide? What am I doing wrong?

        http://plnkr.co/edit/R44Cu8l4Gj391s0Oneur?p=preview

        • Tyler Sticka says:

          You’re not doing anything “wrong,” per se. The plugin wasn’t really designed for multiple nested views. When you attach the first slide view to ‘.views’, it binds events to all of the elements with the data attributes. When you create a second slide view nested within the first, you are attempting to bind events to that same set of elements, so the two are in conflict.

          I would recommend reading up on the plugin options, particularly the ones that let you customize the data attributes. You could potentially use a separate set of data attributes for the nested slide view (e.g. “data-nested-pushview”), which might prevent the two from conflicting.

  6. James says:

    Thanks Tyler I have a working version now (plunkr updated).

  7. Ben says:

    This looks like a great plugin and I think I’d like to use it on a current project. Maybe I’m just missing it, but is there a way to link in to a specific view from another page? For example, I’d like to link from index.html to simpleslideview.html#view-2. Currently it just takes you to the “contents” view.