Scroll 4 – Matteo Spinelli's Cubiq. Scroll finally received a complete rewrite. Now it’s smoother than ever and adds some new important features: pinch/zoom, pull down to refresh, snap to elements and more custom events for a higher level of hackability. Project info. Last code update: 2. Device compatibility: i. Phone/Ipod touch > =3. Pad > =3. 2, Android > =1. Desktop Webkit, Firefox, Opera desktop/mobile. Discussion group. QR Code opens demo page. Support development. If this script saved your day and you wish to support future developments you may consider sending some funds via Pay. Pal or Flattr. Overviewi. Scroll 4 is a complete rewrite of the original i. Scroll code. The script development began because mobile webkit (on i. Phone, i. Pad, Android) does not provide a native way to scroll content inside a fixed width/height element. This unfortunate situation prevents any web- app to have a position: absolute header and/or footer and a scrolling central area for contents. While latest Android revisions are supporting this functionality (although support is not optimal), Apple seems reluctant to add one finger scrolling to divs. In addition to all previous i. Scroll features, version 4 introduces: Pinch / Zoom. Pull up/down to refresh. Improved speed and momentum. ![]() Snap to element. Customizable scrollbars. Please note that i. Scroll 4 is not a drop- in replacement for i. Scroll 3. The APIs have changed. Also consider that the script is still in beta, and some APIs may slightly change. Getting started'Simple' example. In the archive you’ll find plenty of examples to get you started. Before asking for help, please, look at the demos and read through all this document. I know it’s boring, but it holds all the secrets of the i.
![]() Scroll Ninja. i. Scroll needs to be initialized for each scrolling area you need. There’s no limit to the number of i. Scrolls you can have on any single page, if not that imposed by the device memory/cpu. The type and length of the contents influence the number of i. Scrolls you can use simultaneously. Try to keep the DOM structure as simple as possible, remove all the unnecessary tags and avoid too many nested elements. The optimal i. Scroll structure is. In this example the UL element will be scrolled. The i. Scroll must be applied to the wrapper of the scrolling area. Important: only the first child of the wrapper element will be scrolled. If you need more elements inside the scroller you may use the following structure. ![]() Hadoop Interview Questions - Learn Hadoop in simple and easy steps starting from its Overview, Big Data Overview, Big Bata Solutions, Introduction to Hadoop. After installing the plugin, you can add, import, export, edit, copy, delete, tables via the “TablePress” section in your admin menu. Everything should be. In this example the scroller element will be scrolled (together with the two ULs). Scroll be must instantiated (ie: called for the first time) when the DOM is ready. You have mainly four options: on. DOMContent. Loaded eventon. Load eventinline, place the code below the html bit you want to scrollon. DOMContent. Loaded. If you have only text and all images have fixed dimensions (ie: explicit width/height) you may use the DOMContent. Loaded event. In the document HEAD add. Scroll = new i. Scroll('wrapper'). Event. Listener('DOMContent. Loaded', loaded, false). Note that the my. Scroll variable is global, so that you can access all the scroller functions from anywhere. Load. Sometimes the DOMContent. Loaded is a bit hasty and get fired when the contents are not ready. If you slip into some weird behaviors (eg: rubber band effect), try the following. Timeout(function () {. Scroll = new i. Scroll('wrapper'). Event. Listener('load', loaded, false). In this case i. Scroll is started only 1. This is probably the safest way to call the i. Scroll. Inline initialization. With this method the i. Scroll is instantiated as soon as the wrapper and its contents are written to the page. I wouldn’t suggest this approach, but I see many javascript gurus using it… so who am I to disagree? First of all include the iscroll. HEAD and then create the i. Scroll object just below the scroller. Scroll = new i. Scroll('wrapper'). Alternatively you may use your preferred framework ready function (eg: jquery ready()). Passing parameters to the i. Scrolli. Scroll behavior can be customized with the optional second parameter. Eg. < script type="text/javascript">. Scroll = new i. Scroll('wrapper', { h. Scrollbar: false, v. Scrollbar: false }). The second parameter is always an object. In the example above the scroller won’t show the scrollbars. The most common options you will use are: h. Scroll, used to disable the horizontal scrolling no matter what. By default you can pan both horizontally and vertically, by setting this parameter to false you may prevent horizontal scroll even if contents exceed the wrapper. Scroll, same as above for vertical scroll. Scrollbar, set this to false to prevent the horizontal scrollbar to appear. Scrollbar, same as above for vertical scrollbar. Scrollbar, on i. OS the scrollbar shrinks when you drag over the scroller boundaries. Setting this to true prevents the scrollbar to move outside the visible area (as per Android). Default: true on Android, false on i. OS. fade. Scrollbar, set to false to have the scrollbars just disappear without the fade effect. Scrollbar, the scrollbars fade away when there’s no user interaction. You may want to have them always visible. Default: true. bounce, enable/disable bouncing outside of the boundaries. Default: true. momentum, enable/disable inertia. Default: true. Useful if you want to save resources. Direction, when you start dragging on one axis the other is locked and you can keep dragging only in two directions (up/down or left/right). You may remove the direction locking by setting this parameter to false. Tips: to preserve resources try to remove the scrollbars (h/v. Scrollbar option). Pull to refresh'Pull to refresh' demo. This feature has become famous thanks to the Twitter app and many other native applications on the Apple Store. You can watch a preview in this screencast. I’ve recently removed the “pull to refresh” from the script core and replicated the same functionality as an external plugin. Please have a look at the included example to get an idea of how it works. All you have to do is to customize the pull. Down. Action() function. You’ll probably need an ajax call that loads new contents, remember to call the refresh method once the new data is attached to the DOM. Also please note that the example adds a 1 second delay to simulate network congestion. Of course you don’t want it in production, so remember to remove the set. Timeout. Pinch / Zoom'Zoom' example. Let’s face it: scrolling is boring. That’s why i. Scroll 4 lets you also zoom in and out. By setting the zoom option to true the scroller reacts to pinch/zoom gestures. Believe your eyes if you don’t believe me. Double tap to zoom in/out is also supported. The minimum setup to activate zooming is: var my. Scroll = new i. Scroll('wrapper', { zoom: true }). You may further customize the zoom behavior with the following option: zoom. Max, this is the maximum allowed scale. Defaulted to 4, it means 4 times the original size. Tip: to have good looking zoomed images place them into the hardware compositing layer. Or –to speak in plain English– apply - webkit- transform: translate. Important: hardware acceleration takes a lot of resources, use it sparingly or your app will just crash. Don’t say I didn’t warn you. Snap and snap to element'Carousel' demo. The snap feature locks the scroller to predefined positions. This can be used to create fancy carousels. By default i. Scroll subdivides the scroller into quadrants or pages of the same size of the wrapper. Scroll 4 also adds the option to snap to any element inside the scroller regardless of the wrapper size. If you wish to create carousels I suggest to use the default “quadrant” subdivision. The perfect setup is: var my. Scroll = new i. Scroll('wrapper', {. Scrollbar: false. Scrollbar: false }). To snap to elements, pass a string representing the query of the DOM elements the scroller should snap to. Eg: var my. Scroll = new i. Scroll('wrapper', {. Scrollbar: false. Scrollbar: false }). In this example the scroller will snap to the top left corner of all LI elements inside the scroller. Note that the snap string is applied to the scroller (ie: scroller. Selector. All(snap_string)), so '#scroller li' is wrong, while just 'li' is correct. Custom scrollbars'Custom scrollbars' demo. You can now customize the scrollbars appearance with a bunch of CSS. To apply a class to the scrollbars you just need to pass the scrollbar. Class option: my. Scroll = new i. Scroll('wrapper', { scrollbar. Class: 'my. Scrollbar' }). In this example the my. Query Marquee Plugin with CSS3 Support musings of Aamir Afridi. Please check github for details about new updates. Also the plugin is now hosted on js. Delivr. com(CDN). Recently I been working on a project where a static text message needs to be animated similar to non- standard HTML marquee tag. Googling gives me quite few j. Query plugins but they got so many options and complex html layout/structure was needed for the plugin to work. I decided to make a simple j. Query plugin which can scroll the text either left, right, up or down. Github: IMPORTANT NOTE: I am removing details about options & events from this blog post as github has all the details so its hard to maintain both. Here I will list few examples to show you how to use the plugin with different options: Examples: Here is the list of some examples. You can open each pen below in new window and play around with it. Also you can click HTML, CSS or JS tab to see the relevant code. Basic example with default options. HTML: First include the plugin. Content inside the main wrapper can have html. Query marquee is the best < b> marquee< /b> plugin in the world< /div> 1< div class="marquee"> j. Query marquee is the best < b> marquee< /b> plugin in the world< /div> CSS. JS. $('. marquee'). Demo: See the Pen LGolj by Aamir Afridi (@aamirafridi) on Code. Pen. Starting plugin with options. See the Pen qgutw by Aamir Afridi (@aamirafridi) on Code. Pen. Using options as data attributes. See the Pen Hblqv by Aamir Afridi (@aamirafridi) on Code. Pen. Mixing data attributes and JS options. Check HTML tab for data attributes options and JS for options provided when applying the plugin. This is useful if you want to start all marquees with default options using JS and then if you want to have different option for certain marquee element using data attributes. Keep in mind that data attributes will take precedence over options provided using JS. Check this example where I define direction using both JS and data attributes. See the Pen jiwt. I by Aamir Afridi (@aamirafridi) on Code. Pen. Events. See the Pen shq. Kg by Aamir Afridi (@aamirafridi) on Code. Pen. CSS3 vs j. Query. See the Pen tx. DLe by Aamir Afridi (@aamirafridi) on Code. Pen. Direction. See the Pen if. Jq. E by Aamir Afridi (@aamirafridi) on Code. Pen. Duplicated. See the Pen yw. Hsk by Aamir Afridi (@aamirafridi) on Code. Pen. pause. On. Hover. On hover pause the marquee. If browser supports CSS3 and allow. Css. 3Support is set to true than it will be done using CSS3. Otherwise this will be done using j. Query plugin https: //github. Pause (check this example for how details). See the Pen o. Envk by Aamir Afridi (@aamirafridi) on Code. Pen. resume. On. Hover (the other way around)Question on github: “There is some way to do the opposite of “pause. On. Hover”, leave the text stopped until you hover on it, and when you mouseout it comes back to normal? Just like spotify does in their app.”See the Pen Fhug. I by Aamir Afridi (@aamirafridi) on Code. Pen. Pause & Resume methods. See the Pen csh. ID by Aamir Afridi (@aamirafridi) on Code. Pen. Toggle method. See the Pen rz. Kuj by Aamir Afridi (@aamirafridi) on Code. Pen. Destroy method. See the Pen Eim. Is by Aamir Afridi (@aamirafridi) on Code. Pen. Change marquee with ajax content. Due to no ‘Access- Control- Allow- Origin’ issue, please click here to open pen in new window to see it in action. Start marquee with element being visible. New feature added to 1. Set start. Visible option to true. Make sure you are using the latest version of the plugin. Help: Help me by reporting any bugs in the comments section below or github. Also if you have an idea to improve the plugin please do let me know in comments below.
0 Comments
Leave a Reply. |
AuthorWrite something about yourself. No need to be fancy, just an overview. Archives
November 2017
Categories |