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.
Related
Recently I've discovered that devices such as my Surface Pro 4 while browsing, with a single swipe from left to the right - go back to the previous site.
If I made a <nav> that responds to the same movement, how would I approach it to not load the previous page ?
Or rather shouldn't such a movement be implemented on a website anyway?
Personally I think that swiping menu navigations are great, so it'd be nice to find something that blocks the event of loading the previous page.
How I've created menus to this point was making them touch friendly for mobile & desktop (even though it has no touch support, so the user could just hold the LMB & drag).
I've attached an image of this happening if somebody doesn't have a touch device like mine. (the grey block on the left shows up if a user swipes)
So in summary:
Is it doable to turn this feature off for a user?
Should other steps be taken.
I am building web-apps using Ratchet, replicating the look of native APPs.
Ratchet is doing a great job at replicating the look of iOS, but there is a feature which I really miss from iOS which is the ability to "move" an element to the next page by moving and zooming it.
Example: I have a list of articles. Upon clicking the thumbnail of the article, the thumbnail image gets bigger as the articles open, in a seamless transition.
The following gif. from Facebook "paper" illustrates well the effect I want to achieve:
http://d24njcbunk2gp2.cloudfront.net/assets/2014/02/Facebook-Paper-008.gif
My questions would be:
- Is this type of transition possible using only web-technologies?
- Is it possible, in general, to have one element moving in a continuous way from one page to another without any flickering effect?
- Would such effect be possible only with single-page applications? (say a single-page website built with angularJS)
- Would any framework / tool (PhoneGap?) be useful in achieving this result
Thanks so much.
Thomas
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
I have been looking to develop a mobile-device website. I've been looking at the available mobile layout frameworks and am currently looking at jQuery Mobile.
Since there's no room to display the menu all the time, I was thinking I want a button on the left side of the title bar that opens a drop-down menu. Similar to the drop-down menu on the left of the Facebook header.
I was surprised to find no examples of a menu like this. Can anyone point me to some examples of this, or perhaps offer some tips?
That element is commonly called a Side Menu, and there are ample resources online for it
quick google search gave me these results, but there are plenty more, good luck.
http://purecss.io/layouts/side-menu/
http://www.berriart.com/sidr/
http://ionicframework.com/docs/api/directive/ionSideMenus/
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