{"id":3537,"date":"2013-07-30T14:06:09","date_gmt":"2013-07-30T14:06:09","guid":{"rendered":"http:\/\/blog.cloudfour.com\/?p=3537"},"modified":"2016-06-29T23:07:44","modified_gmt":"2016-06-29T23:07:44","slug":"simpleslideview","status":"publish","type":"post","link":"https:\/\/cloudfour.com\/thinks\/simpleslideview\/","title":{"rendered":"SimpleSlideView: Our Plugin for the Simplest of Sliding Views"},"content":{"rendered":"<p>Sliding views (incoming views that &#8220;push&#8221; old ones off-screen) have become so commonplace in mobile design we tend to take them for granted. They&#8217;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.<\/p>\n<p>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&#8230; understandably so given the goals of those projects! Others seem catered to <a href=\"http:\/\/bradfrostweb.com\/blog\/post\/carousels\/\">carousels<\/a> over body content. We needed something web-focused and super simple, with the ability to activate\/deactivate for responsive layouts.<\/p>\n<p>So we made <a href=\"https:\/\/github.com\/cloudfour\/SimpleSlideView\"><strong>SimpleSlideView<\/strong><\/a>, a plugin for jQuery or Zepto.<\/p>\n<p><img src=\"https:\/\/cloudfour.com\/wp-content\/uploads\/2013\/07\/simpleslideview-demo.png\" alt=\" \" \/><\/p>\n<p>Check out the <a href=\"http:\/\/cloudfour.github.io\/SimpleSlideView\/\"><strong>basic demo<\/strong><\/a> to see it in action. There&#8217;s also a <a href=\"http:\/\/cloudfour.github.io\/SimpleSlideView\/responsive.html\"><strong>responsive demo<\/strong><\/a> to show off how the plugin can activate or deactivate  for different layouts.<\/p>\n<p>What makes SimpleSlideView special? Since you asked&#8230;<\/p>\n<h4>Unopinionated Markup<\/h4>\n<p>You need a containing element and a way to select the views within it (a class of &#8220;view,&#8221; for example). That&#8217;s about it.<\/p>\n<h4>&#8220;No-Frills&#8221; Navigation<\/h4>\n<p>Views can be &#8220;pushed&#8221; (the new view &#8220;pushes&#8221; the old one from the right) or &#8220;popped&#8221; (the opposite). That&#8217;s it. No complex multi-step animations. No built-in history tracking.<\/p>\n<p>There are <code>pushView<\/code> and <code>popView<\/code> methods to control navigation, or you can add some magical HTML5 data attributes (<code>data-pushview<\/code> and <code>data-popview<\/code>) to links or anything else.<\/p>\n<p>Plenty of frameworks do more. This one does push and pull.<\/p>\n<h4>Responsive by Design<\/h4>\n<p>Sliding views don&#8217;t always make sense when your viewport&#8217;s rather spacious. SimpleSlideView was developed for responsive layouts, and it handles them like a pro.<\/p>\n<p>The plugin activates by default, but you can override that with the <code>deferOn<\/code> setting. You can turn it on or off any time you&#8217;d like with the (creatively named) <code>on<\/code>, <code>off<\/code> and <code>toggle<\/code> methods.<\/p>\n<p>It even has some nifty events you can use to activate or deactivate alternative functionality. See the <a href=\"http:\/\/cloudfour.github.io\/SimpleSlideView\/responsive.html\"><strong>responsive demo<\/strong><\/a> for an example.<\/p>\n<h4>Give It a Whirl<\/h4>\n<p>The plugin, source and documentation are <a href=\"https:\/\/github.com\/cloudfour\/SimpleSlideView\"><strong>available on GitHub<\/strong><\/a>&#8230; also an excellent place to report issues or contribute improvements. Let us know how you like it!<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Sliding views (incoming views that &#8220;push&#8221; old ones off-screen) have become so commonplace in mobile design we tend to take them for granted. They&#8217;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 [&hellip;]<\/p>\n","protected":false},"author":7,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"inline_featured_image":false,"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":"","jetpack_publicize_message":"","jetpack_publicize_feature_enabled":true,"jetpack_social_post_already_shared":true,"jetpack_social_options":{"image_generator_settings":{"template":"highway","default_image_id":0,"font":"","enabled":false},"version":2}},"categories":[240,3],"tags":[81,186,189,191],"class_list":["post-3537","post","type-post","status-publish","format-standard","hentry","category-javascript","category-mobile-web","tag-javascript","tag-jquery","tag-plugin","tag-zepto"],"acf":[],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3537","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/users\/7"}],"replies":[{"embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/comments?post=3537"}],"version-history":[{"count":0,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/posts\/3537\/revisions"}],"wp:attachment":[{"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/media?parent=3537"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/categories?post=3537"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/cloudfour.com\/wp-json\/wp\/v2\/tags?post=3537"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}