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!
Tyler Sticka has over 20 years of experience designing interfaces for the web and beyond. He co-owns Cloud Four, where he provides creative direction to their multidisciplinary team. He’s also an artist, writer, speaker and reluctant developer. You can follow Tyler on his personal site or on Mastodon.