{"id":17983472,"url":"https://github.com/techjacker/backbone-responsive-css3-page-transitions-iscroll-plugin","last_synced_at":"2026-01-26T22:50:51.316Z","repository":{"id":5521750,"uuid":"6723431","full_name":"techjacker/Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin","owner":"techjacker","description":"iScroll plugin for the Backbone Responsive CSS3 Page Transitions","archived":false,"fork":false,"pushed_at":"2012-11-17T20:19:34.000Z","size":130,"stargazers_count":3,"open_issues_count":0,"forks_count":2,"subscribers_count":3,"default_branch":"master","last_synced_at":"2025-01-29T21:03:32.139Z","etag":null,"topics":[],"latest_commit_sha":null,"homepage":null,"language":"JavaScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/techjacker.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":null,"funding":null,"license":"LICENSE-MIT","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null}},"created_at":"2012-11-16T15:19:11.000Z","updated_at":"2014-05-25T02:29:56.000Z","dependencies_parsed_at":"2022-07-06T23:02:55.702Z","dependency_job_id":null,"html_url":"https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin","commit_stats":null,"previous_names":[],"tags_count":0,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/techjacker%2FBackbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/techjacker","download_url":"https://codeload.github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239958311,"owners_count":19724926,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":[],"created_at":"2024-10-29T18:17:21.376Z","updated_at":"2026-01-26T22:50:51.269Z","avatar_url":"https://github.com/techjacker.png","language":"JavaScript","funding_links":[],"categories":[],"sub_categories":[],"readme":"Backbone-Responsive-CSS3-Page-Transitions-iScroll-Plugin\n========================================================\n\niScroll plugin for the [Backbone Responsive CSS3 Page Transitions Plugin](https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions) (v0.3+)\n\n\n### Demos\n[Demos](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions) of the CSS frameworks @ [the project homepage](http://projects.andrewgriffithsonline.com/#backbone-responsive-CSS3-page-transitions)\n\nDemo code available from the [github repo](https://github.com/techjacker/Backbone-CSS3-Page-Transitions-CSS-Frameworks-Demos)\n\n\n## Install via Package Manager\nGrab from [Jam.js](http://jamjs.org/packages/#/details/backbone.responsiveCSS3transitions.iscroll):\n\n\tme@badass:~$ jam install backbone.responsiveCSS3transitions.iscroll\n\nor [Bower](https://npmjs.org/package/bower):\n\n\tme@badass:~$ bower install backbone.responsiveCSS3transitions.iscroll\n\n\n## Getting Started\n### 1. Loading the JS + CSS\n\t\t\u003clink rel=\"stylesheet\" href=\"scripts/vendor/backbone.responsiveCSS3transitions.min.css\"/\u003e\n\t\t\u003c!-- place after the main plugin css so the styles cascade --\u003e\n\t\t\u003clink rel=\"stylesheet\" href=\"scripts/vendor/backbone.responsiveCSS3transitions.iscroll.min.css\"/\u003e\n\t\u003c/head\u003e\n\n\t\u003cbody\u003e\n\n\t\t\u003c!-- order is important to satisfy dependencies --\u003e\n\t\t\u003cscript src=\"http://code.jquery.com/jquery-1.7.2.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.2/underscore-min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"//cdnjs.cloudflare.com/ajax/libs/backbone.js/0.9.2/backbone-min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"static/js/vendor/iscroll4.js\"\u003e\u003c/script\u003e\n\n\t\t\u003cscript src=\"backbone.responsiveCSS3transitions.min.js\"\u003e\u003c/script\u003e\n\t\t\u003cscript src=\"backbone.responsiveCSS3transitions.min.iscroll.js\"\u003e\u003c/script\u003e\n\n\n### 2. Make your router inherit from backboneResponsiveCSS3Transitions instead of Backbone.Router\n\n\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({...});\n\tnew threeDRouter();\n\n\t// your view....\n\tvar myBackboneView = Backbone.View.extend({\n\t\tclassName: 'my-container', // must be class NOT an id\n\t\trender: function () {\n\t\t\tthis.$el.html('the html of the new page to be inserted');\n\t\t}\n\t});\n\n#### Important! Reference your container via classname NOT id\niscroll needs an id reference which is provided in the plugin. Just use classes for your backbone views and everything will be fine.\n\n#### Remaining Set Up Steps..\nFollow the rest of the set up instructions at the [main plugin repo](https://github.com/techjacker/Backbone-Responsive-CSS3-Page-Transitions).\n\n\n\n## API Reference\n\nYou still have all the functionality of the base plugin but now you get the following exta.\n\n### 1. iScroll Plugin Init Options\n\n\tvar options = {\n\t\t// brand new!\n\t\t\"iScroll\": {\n\t\t\t\"activeDefault\": true,\n\t\t\t\"positionScroller\": true,\n\t\t\t\"scrollerClass\": \"myScrollbarOutside\",\n\t\t\t\"options\": {\n\t\t\t\t\"bounce\" : false\n\t\t\t}\n\t\t},\n\t\t// old and boring options...\n\t\t\"fastClick\": window.FastClick,\n\t\t\"wrapElement\": \".wrapper\"\n\t};\n\n\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\n\tthreeDRouter = new threeDRouter(options);\n\n\n##### @param {options.wrapElement}\n* accepts: jQuery selector of element to wrap \u003e ensure this element does not have an ID. iScroll needs an id which is assigned in the plugin\n\t* good: \"wrapElement\": \".wrapper\"\n\t* bad: \"wrapElement\": \"#my-wrapper\"\n\n##### @param {options.iScroll}\n* accepts: object\n\n##### @param {options.iScroll.activeDefault}\n* accepts: boolean\n* default: true\n* description: do you want iscroll to be enabled at application start up?\n\n##### @param {options.iScroll.positionScroller}\n* accepts: boolean\n* default: false\n* description: do you want the scroller to be positioned at the edge of the screen? Useful if your wrapping div has outside margins.\n\n##### @param {options.iScroll.scrollerClass}\n* accepts: string\n* description: iScroll will add this classname to the scroller so you can style it how you like\n\n##### @param {options.iScroll.options}\n* accepts: object\n* description: the object passed to iScroll constructor when instantiating\n\n\t\t// ...somewhere in the bowels of backbone.responsiveCSS3transitions.iscroll.js\n\t\t// forget about the first param - the plugin takes care of that\n\t\tnew iScroll('iscroll-wrapper', options.iScroll.options);\n\n\n\n\n### 2. enable/disable the iscroll plugin after instantiation\n\nYou can enable/disable the iscroll plugin after instantiation in the following ways:\n\n1. calling the toggle toggleiScrollActive method\n\n\t\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\n\t\tthreeDRouter = new threeDRouter(options);\n\n\t\t// fire!\n\t\tthreeDRouter.trigger('threeDTransiScroll.toggleiScroll');\n\n2. triggering 'threeDTransiScroll.toggleiScroll' event on the router\n\n\t\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\n\t\tthreeDRouter = new threeDRouter(options);\n\n\t\t// called method\n\t\tthreeDRouter.toggleiScrollActive();\n\n\n3. passing the options.iScrollActive parameter to the triggerTransition method\n\n\t\tvar threeDRouter = backboneResponsiveCSS3Transitions.extend({....});\n\t\tthreeDRouter = new threeDRouter(options);\n\n\t\t// set trigger transition option\n\t\tthreeDRouter.triggerTransition(ViewClass, {\"iScrollActive\" : false});","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions-iscroll-plugin","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions-iscroll-plugin","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Ftechjacker%2Fbackbone-responsive-css3-page-transitions-iscroll-plugin/lists"}