In my Ionic3 app, I have a slides component with a bunch of slides, and I want to be able to click on each of them. So code would look like:
<ion-slides>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
The problem I have is that very often, when I try to click on the slide, it actually does a swipe of the current slide and shows the next one, therefore the click never happens. This happens mostly using a tablet, as I guess my finger is less stable and if the click is not perfect then it will slide.
Is there any way to make the click less sensitive (so that even a small variation of distance between down and up event is recognized as click not swipe)?
You can just first get your swiper using querySelector:
let mySwiper = document.querySelector('yourSwiperSelector');
Then just change the treshold:
mySwiper.threshold = 100;
It worked for me. In my case it was ionic2-calendar and my selector looked like this:
let mySwiper = document.querySelector('.swiper-container')['swiper'];
There's a lot of options available that ionic don't list but you can see them here in the library that ionic slides uses:
http://idangero.us/swiper/api/
Setting the Touches threshold to a reasonable value should help.
If you have a reference to your slider, you can simply say this.slider.threshold = 100;
<ion-slides pager>
<ion-slide *ngFor="let s of slides" (click)="onClick()">Slide</ion-slide>
</ion-slides>
Related
I want to build a "Picker Menu" inside a screen. I think the time picker popup components are not smooth enough to use, because they require extra clicks instead of just dragging to the wanted element.
The component should return the selected value + change the color of the selected value. I thought of ListView/ ScrollView, but I couldn't find a way to get that working yet.
Below: A great gimp graphic to show what the goal is, placing the Android Time Picker inside the screen as visual example.
That's what it could look like
Any ideas where to start? How can I build something like this with the React-Native components?
You can use react-native-wheel-picker or react-native-wheel-picker-android. These libraries provide wheel picker without opening any popup.
Is there a way in Ionic 2 to be able to transition between pages as if we were in a Slides component? Meaning that as soon as I start swiping a little left or right I start seeing a piece of the next or previous page? If I continue swiping then I transition to the next/previous page, else I go back to seeing only my current page.
It's like having a dynamic slides component, where ion-slide are automatically added. A little bit like the way the infinite scroll works, we could have 2 to 3 ion-slide in the DOM and they'd be reused as we move forward/backward.
This feature will be available in beta 7 (we are in beta 6) for tabs in material design. The option to swipe back in the pages stack is already available but you must be running on a device to see it in action. Check out the Ionic2 road map to see whats up and coming: https://docs.google.com/document/d/1Qlc5X2eJyOB0izkFlH7KJ5BmMi0MeXUZRHJHt3hS6Wo/edit
Morning,
I wanted to find out if its possible to make a change to the current foundation 5 navbar without breaking it for mobile and desktop views.
basically the current one sits the left text/image to the far left and the nav menu to the far right, which is great when the design is across the entire page, but if the content is centralized in the middle sort of like the normal 960 web layouts, it looks a bit weird at times.
is it possible to have the left image/text and nav menu links centralized in the center like it would be seen if it was in a 960px wrapper.
this all ofc without stopping the responsiveness of it.
Thanks
It sounds like what your are trying to accomplish is to center a top-bar navigation within a row.
If that's the case then you can use <div class="contain-to-grid"> to keep your top-bar within your grid layout and something like <div class="small-9 small-centered columns"> to center the row that the top-bar is in. I created a codepen example for you to look at here: http://cdpn.io/jJhyn.
The classes mentioned above are all part of Foundation so you will not be affecting the responsiveness of your design.
For a complete list of the options available to customize the top-bar see the Zurb Foundation Top Bar documentation.
If I have misunderstood your question let me know, and code is always appreciated.
I hope that helps.
EDIT: 02/13/2014
I was looking into another issue when I stumbled upon this, How to center top-bar nav?. It center's the buttons/links within the top-bar, not the top bar itself. They page they used as an example is Mister Dutch. I updated the codepen above to reflect what I found on the Foundation Forum.
Again, if I have misunderstood your question let me know.
I'm using Foundation's Orbit slider to show levels of a house, the first slide is always the basement but this is not the slide that we would like to start with. We would like the page to first show the first floor, which is the second slide. We are using Foundation 4.
There is nothing in the documentation about setting a starting slide and adding the active class on the second slide in the HTML doesn't solve it either.
Check out my JSBin example: http://jsbin.com/IVisAWA/2/edit. Here the starting slide is '0' but I would like it to be '1'.
I can't find any built in option, you can use the orbit:ready event callback and force a click to the next element.
Code:
$("ul").on("orbit:ready", function(event) {
$(".orbit-next").click();
});
Demo: http://jsbin.com/ekarucuc/1/edit
You can include two lines of code to the foundation.orbit.js to use and customize it your way:
Add this line
self._goto(settings.start_slide, true);
at the end of the "self.init" function.
In the
Foundation.libs.orbit
inside the "settings" list, add this new setting
start_slide: 0
to start always on the first slide by default.
Now, reset the parameter of the starting slide you want to:
<ul data-orbit data-options="start_slide:1;">.
knowing that your list starts at 0, the second item should be 1: data-options="start_slide:1;" in your HTML slide list.
Now you can use even two or more slides in the same page, one starting in the first slide, and the other starting where you want.
I was looking for something similar, but couldn't use Fabricio's solution as I didn't have scope to change the Foundation.orbit.js file.
I ended up enabling the bullet point nav items when initialising Orbit, then just triggering a 'click' on the appropriate bullet point. But I didn't actually want to display the bullet points, so I hid them with some CSS.
Something like:
var button = $('div.orbit-container').find('li[data-orbit-slide="1"]');
button.trigger('click');
And:
div.orbit-bullets-container {
display: none;
}
You can do this after you initialize your orbit slider.
$('#orbit-slide').data('orbit-instance')._goto(indexSlide, true);
I am having trouble stopping the first scrolling once the page loads. You can see it here http://foundation.zurb.com/docs/components/joyride.html . After loading the website, joyride window scrolls automatically page littlebit lower
See it better in the old demo http://zurb.com/playground/jquery-joyride-feature-tour-plugin
I need the website to load normally (with top bar) and then activate scrolling after "next" button is clicked.
I am using latest version of Foundation 4 and foundation.min
Currently I am trying the docs page and it does not scroll, so either they fixed it or it was not a problem at all initially.
http://foundation.zurb.com/docs/components/joyride.html
Either ways, I see the best solution for you is to have the first step way above in the page, so that even when it takes focus, there's no page scrolling needed.