In July we released SimpleSlideView, a jQuery and Zepto plugin for simple, responsive sliding views (here’s a demo). In the last few months, I’ve noticed an uptick in developers emailing to ask a variation of this question:
How do I change or stop a view transition based on user input?
It’s a great question, and one that may not be immediately apparent from the demo alone.
When using SimpleSlideView, there are two ways to navigate between views. The simplest way is with HTML, which is great for predictable, non-dynamic interactions or prototyping:
<button data-pushview="#result">See Result</button>Code language: HTML, XML (xml)
We can remove the
data-pushview attribute from the button, but we’ll need some way to select it via JS, so let’s give it an ID:
<button id="result-btn">See Result</button>Code language: HTML, XML (xml)
And here’s the scripty part:
Right now this probably feels like a step backward. It’s more verbose. But we’ve gained the freedom to define the sliding-view behavior any way we like.
Suppose you only want to transition when certain criteria are met:
Or maybe you’d like the next view to depend on the value of something else:
Here’s a working example that uses Moment.js and your browser to determine the weekday of a date you provide. The result is populated before the view transitions, and only if
See the Pen Weekday (SimpleSlideView Demo) by Tyler Sticka (@tylersticka) on CodePen.
Tyler Sticka is Cloud Four’s VP of Design, allowing him to think about design systems every day. When he isn’t directing his team, sketching on sticky notes or nitpicking CSS, he enjoys reading comics, making video games and listening to weird music. You can follow Tyler on Mastodon.