Skip to main content

SimpleSlideView: Our Plugin for the Simplest of Sliding Views

By Tyler Sticka

Published on July 30th, 2013

Topics

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…

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

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.

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.

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!

Comments

Ryan said:

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?

Jessie said:

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?

James said:

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

Replies to James

Tyler Sticka (Article Author ) replied:

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.

Replies to Tyler Sticka
James replied:

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

Replies to James
Tyler Sticka (Article Author ) replied:

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.

Ben said:

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.