Once I get to the final slide I want to disable the bounce effect that happens when you try and swipe further. I have ion-option-buttons on the final page and swiping them causes the screen to wobble due to the slides.
I still want to be able to move back to the left / previous slide
If you aren't using the Swiper widget I would recommend it because it offers a lot more flexibility/options with your slide boxes. (Ionic documention on it here, as well).
All you need to do is watch the slide delegate, if you hit the last slide, lock sliding to next (stops the bouncy effect you mentioned). Then unlock sliding if you are not on the last slide.
$scope.$watch('data.sliderDelegate', function(newVal, oldVal) {
if (newVal != null) {
$scope.data.sliderDelegate.on('slideChangeEnd', function() {
$scope.data.currentPage = $scope.data.sliderDelegate.activeIndex;
if($scope.data.currentPage == $scope.data.lastSlide){
$scope.data.sliderDelegate.lockSwipeToNext();
}
else{
$scope.data.sliderDelegate.unlockSwipeToNext();
}
$scope.$apply();
});
}
});
Here is a codepen for the exmaple.
I know this is an old post, but I just managed this in Ionic 4.0, and though that someone might find some value in it.
You can use the command:
this.slides.lockSwipeToNext(true);
To prevent the user from swiping right. There is similarly another command to prevent it going left:
this.slides.lockSwipeToPrev(true);
I placed it in the " ionViewWillEnter()" function to initially disable the swiping, then created a function that I call whenever I want to manually move to the next slide like this:
ionViewWillEnter(){
this.slides.lockSwipeToNext(true);
}
nextSlide(){
this.slides.lockSwipeToNext(false);
this.slides.slideNext();
this.slides.lockSwipeToNext(true);
}
Hope this helps someone looking for a similar soution.
Related
I'm using $ionicSlideBoxDelegate.next() with a custom button to advance a slider. That works fine.My goal is to slow down the slide animation when someone actually pressed the next button.
Sadly some versions of ionic have some inconsistency based on documentation. You can try $ionicSlideBoxDelegate.slide(slideNumber, speed). And create an index on scope to control slideNumber. :/
var slide = $ionicSlideBoxDelegate;
var nextIndex = slider.currentIndex()+1;
slider.slide(nextIndex,1000);
In my controller i am using $firebaseArray and $ionicScrollDelegate to show messages in a chat. when my $firebaseArray is loaded, i am using the scroll delegate to scroll to the bottom and it works fine, no issues there.
But when a new child is added, i am again using scroll delegate to scroll to bottom, that scrolls down without any issues but it freezes the scroll, i.e i am not able to scroll back to the top
code
chat.html
<ion-content delegate-handle="mainScroll">
//chat list
</ion-content>
chat controller
app.controller('chatCtrl',function($scope,$firebaseArray,$ionicScrollDelegate){
var chatRef = new Firebase("my ref");
$scope.messages = $firebaseArray(chatRef);
$scope.messages.$loaded().then(function(){
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
});
chatRef.on('child_added', function(childSnapshot, prevChildKey) {
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
});
});
I believe you are using android phone to test right? If android I'm pretty sure there have a bug by using animation to scroll to bottom. Have you try to remove the animation by delete 'true' value on the function? Ex:
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom(true);
to
$ionicScrollDelegate.$getByHandle('mainScroll').scrollBottom();
Try It.. hope it helps you.
UPDATE (SOLUTION):
Okay I found the solution.. It seem we need to set 'jsScrolling: true' instead of by default is 'jsScrolling: false' for android.
Please modified/edit this on 'ionic-angular.js'
Hope it helps others :)
can anyone please explain to me why the html SELECT control (or any other control like BUTTON) placed inside the div (that is registered with dojox/gesture/swipe events) cannot be opened? I'd welcome any workarounds pls
require({
}, [ 'dojo/dom', 'dojox/gesture/swipe', 'dojo/on', 'dojo/_base/event' ], function(dom, swipe, on, event) {
var div = dom.byId('testSwipe');
var isSwipe = false;
on(div, swipe.end, function(e) {
console.log("### SWIPE");
});
});
http://jsfiddle.net/zLyck884/
based on the documentation here, particularly the image : http://dojotoolkit.org/reference-guide/1.10/dojox/gesture.html
the image depicts how the dojo standardizes the events (also for desktops) and how the swipe is just another layer of the touch events. so I reckoned if the mouse events are replaced by touchstart or something, then it most likely blocks the default mouse action...
once I've stopped propagating the event (on the SELECT) further, then it worked ok.
query("select", this.domNode).on(touch.press, function(e){e.stopPropagation()});
where this.domNode is the element on which the swipe is enabled
on(this.domNode, swipe, lang.hitch(this, "_onSwipe"));
Unfortunately the swipe (touch) event overriding the default behaviour is not very handy, I just left dojox/gesture/swipe or touch for now. Seems like I'll rather implement my own touch event handling.
I am having a bit of a weird problem with iOS platform for a page i am developing. This is the page in question. When clicking any of the case study images, the page will first unhide the required case study then scroll to it.
This works on all desktop browsers on Windows and Mac, but on the iPhone and iPad you get a horrible flicker as it scrolls down.
Not quite sure how to debug or fix this issue.
Any ideas would be of great help!
Thanks in advance,
Shadi
UPDATE 1
The latest page can be found here. Still haven't found a fix - if anyone has any idea it would be amazing!
If you need vertical scroll only, you could use {'axis':'y'} as settings to scrollTo method.
$.scrollTo(*selector*, *time*, {'axis':'y'});
Have you tried this:
$('a[href=#target]').
click(function(){
var target = $('a[name=target]');
if (target.length)
{
var top = target.offset().top;
$('html,body').animate({scrollTop: top}, 1000);
return false;
}
});
If you're just scrolling the page vertically you can replace the entire jQuery scrollTo plugin with this simple line:
$('html,body').animate({scrollTop: $("#scrollingTo").offset().top}, 1000, 'easeOutCubic');
Personally I do something like this
$('html,body').animate({scrollTop: $("#step-1").offset().top-15}, 1000, 'easeOutCubic',function(){
//do stuff
});
I found that if I try to do other js work while it's scrolling it makes the browser crunch and the animation isn't smooth. But if you use the callback it'll scroll first, then do what you need.
I put a -15 at the end of .top because I wanted to show the top edge of the div I was scrolling do, simply for aesthetic purposes. 1000 is the duration in milliseconds of the animation.
Credit goes to the poster, animate, for the tip off.
Defining {'axis':'y'} has made it right! It helped me with slideUp/Down flickering.
I'm not sure if this applies to jquery animations. But the following seems to affect CSS animations.
http://css-infos.net/property/-webkit-backface-visibility
Syntax
-webkit-backface-visibility: visibility;
Parameters
visibility
Determines whether or not the back face of a transformed element is visible. The default value is visible.
edit
Try applying it to every element and see what happens.
*{
-webkit-backface-visibility: visible;
}
and try
*{
-webkit-backface-visibility: hidden;
}
It's just a guess really...
I will also confirm Tund Do's method works flawlessly. If you need a "left/right" variation of the same thing (as I did) here it is:
$('.pg6').click(function(){
var target = $('#page6');
if (target.length)
{
var left = target.offset().left;
$('html,body').animate({scrollLeft: left}, 1000);
return false;
}
});
I would guess you could combine the two, grab the top position and chain the animates for a "left/right/up/down" animation also.
I had the same problem.
The problem is the ScrollTo plugin. Instead of using scrollto.js just use .animate with scrollTop. No more flickering in ipad/iphone.
Here it is with no flickering http://www.sneakermatic.com
You should include {axis: 'y'} in your options object. Also be sure that you have not enabled interrupt option. You can test this with {interrupt: false}.
You need to add e.preventDefault(); to each .click() call. This prevents the browser's default action, which is to stay in the same place. Hope this helps!
i.e.
$("#quicksand li, .client-list li").click(function (e) {
e.preventDefault();
...
});
I'm having the same flickering on iPhone -- even with the preventDefault and return false options of canceling the default click event. It appears that on the device it tries to go back to the top of the page before scrolling. If you have both a scrollTop and scrollLeft animation going on it really gets buggy. It's jQuery's issue.. I've seen a scrolling method with mootools that doesn't have this issue. See this page: http://melissahie.com/
Thanks nicole for giving the example with mootools.
It really seems to be a jQuery issue when trying to do a animation on BOTH scrollTop and scrollLeft.
With mootools:
var scroll = new Fx.Scroll(window, {duration: 1000, wait: false, transition: Fx.Transitions.quadInOut});
scroll.start(y, x);
it works flawlessly on iOS5!
I'm creating a webapp for the iPhone, based in HTML/CSS/JS. I'm using forms to receive input and pass data to the script, but a problem I'm encountering is that the keyboard won't disappear. The user will enter the information, hit submit, and since it's JavaScript the page doesn't reload. The keyboard remains in place, which is a nuisance and adds another step for users (having to close it).
Is there any way to force the keyboard in Safari to go away? Essentially, I have a feeling this question is equivalent to asking how I can force an input box to lose focus or to blur. Looking online, I find plenty of examples to detect the blur event, but none to force this event to occur.
Even more simply, you can call blur() on the currently focused element. $("#inputWithFocus").blur()
document.activeElement.blur();
You could try focus()ing on a non-text element, like the submit button.
Here's a small code snippet that always hides the keyboard whenever the focus is in an input or textarea field and the user taps outside of that element (the normal behaviour in desktop browsers).
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
document.addEventListener('touchstart', function(e) {
if (!isTextInput(e.target) && isTextInput(document.activeElement)) {
document.activeElement.blur();
}
}, false);
To detect when the return button is pressed use:
$('input').bind('keypress', function(e) {
if(e.which === 13) {
document.activeElement.blur();
}
});
I came across this issue and have spent some time until getting a satisfactory solution. My issue was slightly different from the original question as I wanted to dismiss the input event upon tapping outside input element area.
The purposed answers above work but I think they are not complete so here is my attempt in case you land this page looking for the same thing I was:
jQuery solution
We append a touchstart event listener to the whole document. When the screen is touched (doesn't matter if it's a tap, hold or scroll) it will trigger the handler and then we will check:
Does the touched area represent the input?
Is the input focused?
Given these two conditions we then fire a blur() event to remove focus from the input.
ps: I was a little bit lazy so just copied the line from above response, but you can use the jQuery selector for document in case you want to keep consistency of code
$(document).on('touchstart', function (e) {
if (!$(e.target).is('.my-input') && $('.my-input').is(':focus')) {
document.activeElement.blur();
}
});
Hammer.JS solution
Alternatively you can use Hammer.JS to handle your touch gestures. Let's say that you want to dismiss that on a tap event but the keyboard should be there if the users is just scrolling the page (or let's say, hold a text selection so he can copy that and paste into your input area)
In that situation the solution would be:
var hammer = new Hammer(document.body);
hammer.on('tap', function(e) {
if (!$(e.target).is('.search-input') && $('.search-input').is(':focus')) {
document.activeElement.blur();
}
});
Hope it helps!
$('input:focus').blur();
using the CSS attribute for focused element, this blurs any input that currently has focus, removing the keyboard.
Be sure to set, in CSS:
body {
cursor: pointer;
}
otherwise, your event handler calling document.activeElement.blur() will never get fired. For more info, see: http://www.shdon.com/blog/2013/06/07/why-your-click-events-don-t-work-on-mobile-safari
For anyone using Husky's code in AngularJs here is the rewrite:
function isTextInput(node) {
return ['INPUT', 'TEXTAREA'].indexOf(node.nodeName) !== -1;
}
angular.element($document[0]).on('touchstart', function(e) {
var activeElement = angular.element($document[0].activeElement)[0];
if(!isTextInput(e.target) && isTextInput(activeElement)) {
activeElement.blur();
}
});
In my case, I have an app:
AppComponent -> ComponentWithInput
and with the html:
<div class="app-container" (click)="onClick()">
<component-with-input></component-with-input>
</div>
And everything I do is adding (click)="onClick()"
You can leave the method empty as I did:
onClick() {
// EMPTY
}
This works for me.