{"id":3806,"date":"2014-03-11T14:24:25","date_gmt":"2014-03-11T21:24:25","guid":{"rendered":"http:\/\/blog.cloudfour.com\/?p=3806"},"modified":"2023-02-15T14:31:13","modified_gmt":"2023-02-15T22:31:13","slug":"simpleslideview-controlling-flow-with-javascript","status":"publish","type":"post","link":"https:\/\/cloudfour.com\/thinks\/simpleslideview-controlling-flow-with-javascript\/","title":{"rendered":"SimpleSlideView: Controlling Flow With JavaScript"},"content":{"rendered":"

In July we released SimpleSlideView<\/a>, a jQuery and Zepto plugin for simple, responsive sliding views (here’s a demo<\/a>). In the last few months, I’ve noticed an uptick in developers emailing to ask a variation of this question:<\/p>\n

\n How do I change or stop a view transition based on user input?\n<\/p><\/blockquote>\n

It’s a great question, and one that may not be immediately apparent from the demo alone.<\/p>\n

When using SimpleSlideView, there are two ways to navigate between views. The simplest way is with HTML<\/a>, which is great for predictable, non-dynamic interactions or prototyping:<\/p>\n

<button<\/span> data-pushview<\/span>=\"#result\"<\/span>><\/span>See Result<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
We can remove the data-pushview<\/code> attribute from the button, but we’ll need some way to select it via JS, so let’s give it an ID:<\/p>\n
<button<\/span> id<\/span>=\"result-btn\"<\/span>><\/span>See Result<\/button<\/span>><\/span>\n<\/code><\/span>Code language:<\/span> HTML, XML<\/span> (<\/span>xml<\/span>)<\/span><\/small><\/pre>\n
And here’s the scripty part:<\/p>\n
\/\/ Save the simpleSlideView instance to a variable<\/span>\nvar<\/span> slideView = $('#container'<\/span>).simpleSlideView();\n\/\/ Add a click event handler to the button<\/span>\n$('#result-btn'<\/span>).click(function<\/span>(<\/span>)<\/span>{\n  \/\/ On click, push the view with an ID of 'result'<\/span>\n  slideView.pushView('#result'<\/span>);\n});\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
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.<\/p>\n
Suppose you only want to transition when certain criteria are met:<\/p>\n
if<\/span> (isValid) {\n  slideView.pushView('#thanks'<\/span>);\n} else<\/span> {\n  alert('Oops! Something seems off.'<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
Or maybe you’d like the next view to depend on the value of something else:<\/p>\n
if<\/span> (age < 21<\/span>) {\n  slideView.pushView('#soda'<\/span>);\n} else<\/span> {\n  slideView.pushView('#beer'<\/span>);\n}\n<\/code><\/span>Code language:<\/span> JavaScript<\/span> (<\/span>javascript<\/span>)<\/span><\/small><\/pre>\n
See the Pen Weekday (SimpleSlideView Demo)<\/a> by Tyler Sticka (@tylersticka<\/a>) on CodePen<\/a>.<\/p>\n
Here’s a working example that uses Moment.js<\/a> and your browser to determine the weekday of a date you provide. The result is populated before<\/em> the view transitions, and only if Moment.isValid()<\/code> returns true<\/code>:<\/p>\n
The straightforwardness of this technique is a double-edged sword. It’s easy to use, but it’s also kind of static. What if we want to change the destination? Or prevent the transition altogether? For that, we’ll want to use JavaScript instead<\/a>.<\/p>\n