I am trying to learn polymer by building my own mobile app. Can anyone point me in the right direction on how to create introduction pages like the "What's New" part of the android app "Today Calender" by Jack Underwood. Is there a way to do that with Polymer's built in elements? It's basically 3 pages you can swipe through. The page follows your finger if you release your finger past a certain point it will gently snap to the next page.
The swipe-pages custom element does exactly this. Swipe to navigate between pages, the pages start moving the moment you drag them horizontally, but only change pages if you drag past a set threshold.
Update:
This package is for Polymer 0.5 and does not yet work on Polymer 1.0
I made three CodePens while I was learning jQuery, so the code is a bit crude.
The first one works on a loop which allows for infinite scrolling.
The second one doesn't work in a loop.
The third one uses vertical slides, but you might wish to employ the bubble navigator. How they work is quite intuitive, but if you need any clarification feel free to shout out.
Here are all the CodePens:
Swiping in a loop
Swiping without a
loop
Side navigation
Related
So I was tasked to do this: it's a timekeeping web application for employees of our company.
Thing is I don't know what that red part is called. Yes I have seen it in blogs and news sites where news gets slided up(or down). But I don't know what's it called so I can't look for sample codes of it.
So, I'm asking: what is it?
Do you means Coffin? http://fat.github.io/coffin/
Coffin is a UI component built on top of the Skeleton framework. It
aims to provide a simple, collapsible left shelf. Coffin is fully
responsive and automatically collapses in mobile views - allowing you
to swipe away and toggle a nagivation in and out of view. It behaves
similar to facebook/path's navigation UI.
I've thrown together a page based on the paper ui elements and love how mobile-friendly it is. But it does fall short with some functionality. For instance, I'd love for users to be able to swipe out the drawer of my core-drawer-panel, instead of using the button I'v provided on the toolbar.
What I'm looking for is along the lines of the Gmail app for Android.
Does anyone have an example page where this is used to good effect?
There is currently a pull request pending which will add swipe to open the drawer. See for details.
You can use a core-scaffold instead of core-drawer-panel
I've to rewrite an existing web application and port it to extjs components.
This is a bigger application and I have to do it in steps, I can't rewrite the whole application at once, the implementation of MVC will come later. At the moment the application has two frames, left frame with navigation menu
and links with href & target starting actions in main, right frame.
As first step I have to replace the self written navigation menu with extjs solution.
My problem is, the menu is quite big and has a lot of submenus and left frame is rather thin. As effect the menus are rendered partially under the right frame or shift outside the window on the left.
This screenshot shows the first problem:
This screenshot shows the second problem:
My question: is there a possibility to render the menus wider then left frame (over the frame)? Perhaps some layout container below the menu could be useful?
I would like to avoid the shift to the left and the cover through the main frame on the right.
Regards,
Annie
I haven't found a possibility to utilize a ExtJS menu in narrow frame, but the tree component (Ext.tree.Panel) fits quite good and is a nice replacement. It looks like left navigation on the sencha api page. The question is closed for me.
Regads, Anie
I discovered the new css controlling scrolling and snapping on http://msdn.microsoft.com/en-us/library/windows/apps/hh466066.aspx
I wonder if there's a tutorial or sample out there explaining how this works and to use those css-attributes.
I'm working on a (angularjs based) calendar and I wonder if it's possible to extend it using css to support touch panning trough the months (like win8 calendar navigating with the fingers).
http://jsfiddle.net/johnnayweiler/FyrtQ/
How to use like -ms-scroll-snap to make the view go with the finger, then snap to the next page? What js events would be recommended to know when the scroll amount reached this snap point(to load the next month).
Also of course, is there something similar in other browsers(this doesnt seem to be a standarts feature)? Probably using javascript, are there some simple solutions for handling momentum and snap?
Thanks for your ideas :)
Theres now an official sample ;)
http://code.msdn.microsoft.com/ie/Scrolling-panning-and-6834aaf9/sourcecode?fileId=68336&pathId=380363024
I need to create an image gallery where the main image is centered, when you click down on it and "swipe" it to the left or right, the next/prev image will be center.
It should kind of imitate the feel of the iphone page swipe motion.
Here is an image link.
Does anyone know any good tutorials or how I can get started with AS3?
Although this isn't exactly the same, it will give you a fantastic starting point
http://active.tutsplus.com/tutorials/effects/iphone-page-transition-flash/
What you need is to create could be called "touch (kinetic) scrolling with a snapping". Take a look at Scroller class source from Flex 4.5 SDK (Hero) and make it better. You will need to spend time on it to make it work good enough. If you're doing this for a mouse-based input — just forget about it since this is a good idea for touch-based input only.