I am creating a simple app with the ionic framework, and I want to run a function on each of the swipe events or drag events.
like this :
When user swipe up/drag up arrow, it will open it ( like open notifications smarthphone ).
swipe down or drag down, it will close it.
Can anyone help provide sample HTML & JS to listen to gesture event?
Regarding gesture events handlers you can check the Ionic docs, for example:
http://ionicframework.com/docs/api/directive/onDragUp/
AFAIK no official component fits with your requirement (the most similar is ionSlides but works horizontally). However there are some 3rd party directives or demos like the following you may adapt to your needs:
https://github.com/bramus/ion-drawer-vertical
https://github.com/darylrowland/ionic-contrib-swipe-cards
http://www.idangero.us/swiper/demos/#.VrxDjfnhC71
Related
Because 2sxc Accordion App have in settings "Initially open/close" switch for each section, I wonder is it possible to tweak this in some way to get Accordion initially open for desktop page view and initially closed for mobile page view?
It would save space / scrolling time and look more appealing in mobile page view.
Or just take this as idea for some next version of this App.
This would be fairly easy to do. I suggest you do the following:
The toggle for open/close could be replaced with the boolean-tristate, so you have a true (open), false (closed) and null (automatic).
Then adjust the razor code a bit to make this happen.
If you got it to work, it would be awesome if you could contribute your code to the app in github: https://github.com/2sic/app-accordion
I noticed that Polymer "consumes" gestures on my own web components.
I have 2 web components on my page: google-map (Polymer based) and animated button (native one, written by myself, not using any frameworks).
They are imported in this way:
google-map folder has the following structure:
Angular ng-click is defined on animated button:
<animated-button-web-component ng-click="fireEvent('click');" data-src="" data-src-click="" data-src-hover="" data-text="foo" class=""></animated-button-web-component>
When I use Chrome in regular mode click event is fired as expected but when I use Chrome in the device mode the similar touch event is not fired from the animated button. If I remove google-map completely from the page it starts working.
Do you have any idea how to "isolate" Polymer so it doesn't interfere with the events in the document?
Thank you,
Alex
I'm using the Ionic Framework to build a hybrid app and its heavily dependant on drag and drop features. Using the 'sidemenu' template I have created one main view, and two side menus.
The main view will use the Ionic Calendar to display data. The two side menus will be used as views where data will initial be stored in list form. I need to be able to drag elements from side menu and into the main screen, where they can then be dropped on the calendar.
All the events work perfect when in calendar view (ie. onClickItem, onClickTime, etc). The drag and drop call backs work fine too, when remaining in the side menu display area. However, when I try to drag the element out of the side menu area and into the calendar, only the onDragStop event is recognized and not the onClickTime event from the calendar.
I realize I'm trying to fuse a few things together here in a not so usual way. I can't even find anyone else making posts about the same thing. Maybe I'm making the wrong searches.
Any help, advice, or direction would be appreciated.
I'm using the Ext.device.Camera component to take photos in my sencha touch app. I'd like to change some things of this component:
Change the text of the buttons retake and use
Add a button to show the camera roll (The camera roll view is ready, so the button will only change the view)
After the call at success function I would like that the camera won't close and it gives the possibility to the user to take another photo
Thanks
You cant do that from ST2. That's native stuff, if you are wrapping with phonegap/cordova you could create a custom plugin.
I am working on silverlight 4 application and need to implement google maps in the same app.
Now to implement the google maps, i was planning to use WebBrowser control but when i used it i found out that it will run only in out of browser mode.
So, i decided to use another approach since i want to implement google maps inside of my application. I then used http://csharperimage.jeremylikness.com/2010/09/hosting-html-in-silverlight-not-out-of.html alternative which was having to use iframe to show web page there. It was seems to be good alternative in start. But Here comes another twist.
On top of my app, i have one top MENU for navigation, its a classic web menu, user hover over the menu item and its sub item will expand vertically.
Now just underneath the MENU i have above HTML control to display my map. Now since the HTML browser control has higher z-Index so my vertical sub menu is goes underneath the google map and hence it not visible.
And giving silverlight app higher z-Index the iframe for HTML does not show up as it goes behind the app.
So how can i get my HTML MAP and MENU both to work? If you guys have any other alternative to implement google maps then please let me know
Thanks
I would recommend using the Silverlight Bing Maps control, with the tile-source set to Google Maps. This will give you the maps you desire, via a proper Silverlight control. You can find out about how to provide a custom tile source from Google here:
http://www.scottlogic.co.uk/blog/colin/2011/02/google-sky-on-windows-phone-7/