Like the title says is it possible to fade out bullets or thumbnails when starting to slide and fade in when its stopping with the slide animation? I looked into the development section but can't seem to find anything about it.
At the moment I just always show the thumbnails but it looks weird when the sliding animation is running. It would be great if there's a way to do this without to much custom code.
Given you have a bullet navigator element as follows,
<div u="navigator" class="jssorb03" ...>
...
</div>
You can make it fade out while swipe start, and fade in while swipe end.
function SwipeStartEventHandler(position) {
if(Math.floor(position) == position)
$(".jssorb03").fadeOut();
}
function SwipeEndEventHandler(position) {
if(Math.floor(position) == position)
$(".jssorb03").fadeIn();
}
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_START, SwipeStartEventHandler);
jssor_slider1.$On($JssorSlider$.$EVT_SWIPE_END, SwipeEndEventHandler);
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);
I'm on one of my last pieces of functionality for my chat application in my Ionic app where I'm trying to infinitely scroll to the "first" message created between two individuals, similar to any other chat app you've used, be it Facebook, Skype, Slack, etc.
The problem I'm running into is a few things.
When I add the infinite scroll code above the <ul> that houses all the messages, I get a giant 200px height whitespace (I think to account for the loading spinner). Here is my code:
<ion-infinite-scroll (ionInfinite)="scrolled($event)"
threshold="10px"
position="top">
<ion-infinite-scroll-content></ion-infinite-scroll-content>
</ion-infinite-scroll>
<ul>
<li *ngFor="let message of messages; let i = index">
... other code to build the message
</li>
</ul>
I have my chat setup to grab just the first 10 messages for the particular conversation, with the idea being that once it his the "top" infinite scroll area, it queries for the next 10, etc. The problem is that when the chats load, there is a momentary pause before the scroller gets scrolled down to the bottom of the screen to show the last message that was sent. However, in that brief moment, the scroller is already at the top of the page which seems to indicate to the <ion-infinite-scroll> to fire the scrolled() function.
Has anyone else run into something like this? The messages load asynchronously once the page is rendered, so I'm trying to figure out the best way to prevent the <ion-infinite-scroll> from firing on page load. Is there something simple I'm missing here?
Thanks in advance! :)
For #2, you can disable the scroll while loading your first batch of chats.
Import ViewChild and InfiniteScroll:
import { ViewChild } from '#angular/core';
import { InfiniteScroll } from 'ionic-angular';
Then create a property for infiniteScroll:
#ViewChild(InfiniteScroll) infiniteScroll: InfiniteScroll;
Then disable it, load your stuff, do the scroll, and re-enable:
ionViewDidLoad(): void {
// Disable to give time for loading & scrolling
this.infiniteScroll.enable(false);
loadFirstTenChats().then(() => {
// Fiddle with the timing depending on what you are doing.
// If you have footers or other dynamic content to worry about.
setTimeout( () => this.content.resize(), 100);
// Scroll to the bottom once the size has been calculated:
setTimeout( () => this.content.scrollToBottom(100), 200);
// The scroll above has to be finished before enabling or
// else the IS might think it needs to load the next batch.
setTimeout( () => this.infiniteScroll.enable(true), 1000);
});
}
For #1, I don't know why it takes up so much space, but if the above works, it will be scrolled off page and won't be noticed.
To solve #1, you can use disabled property of the ion-infinite-scroll component. When true, it won't take any space. You can have a logic for when your paginated content ends, then disable the ion-infinite-scroll.
<ion-infinite-scroll [disabled]="true"></ion-infinite-scroll>
And to solve #2, you can use the same above logic. On page load you can disable the ion-infinite-scroll, and after the scroll to bottom event, you enable the ion-infinite-scroll.
Reverse infinite scroll for Chat functionality works fine for me. This is what my code looks like
HTML
<ion-infinite-scroll (ionInfinite)="doInfiniteChat($event)" position="top">
<ion-infinite-scroll-content loadingText="Loading more chats...">
</ion-infinite-scroll-content>
</ion-infinite-scroll>
and you have to reverse your array which you are using in *ngFor
<div *ngFor="let msg of msgArray.reverse()">
The above code worked fine. Thanks
Update Your Code from
<ion-infinite-scroll (ionInfinite)="scrolled($event)"
threshold="10px"
position="top">
to
<ion-infinite-scroll (ionInfinite)="scrolled($event)"
threshold="10px"
position="bottom">
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.
I'm implementing some custom components for openui5/sapui5.
For the component, I want to have a css animation when it is initially loaded.
This is quite straight forward as I add the following css:
#-webkit-keyframes card-in-animation {
from {
-webkit-transform: translateY(50em) rotate(5deg);
opacity:0;
}
}
.card {
animation:card-in-animation 0.7s .2s ease-out both;
-webkit-animation:card-in-animation 0.7s .2s ease-out both;
}
The problem arises when the component is re-rendered for some reason by the openui5 framework.
The DOM elements are then destroyed and new ones are created.
This causes the animation to triggered once again.
To see this in practice:
Go to http://elsewhat.github.io/openui5-cards/cdn/latest/example3.html
The initial animation is triggered as wanted
Click on the menu icon in the top right corner of any card
A new unwanted animation is triggered
What's the preferred method of avoiding this in openui5?
Inside of your renderer you can set an flag that this control/component is rendered once.
second time you'll run into this renderer you'll check this flag and doesn't render this specific class.
if(!oControl._renderedOnce) {
oRm.addClass('rotate');
oControl._renderedOnce = true;
}
oRm.writeClasses();
Not sure how to overcome the unwanted re-rendering, but would it be an option to remove the animation class after the cards are rendered? (You may need to trigger it after a few seconds after onLoad for all cards to be set in place)
Something like this:
$("<element_of_your_cards>").removeClass("card")
I'm using jqTouch. Trying to figure out why when the scene / div change, it just change abruptly without the slide animation?
Here is the setting that I have now:
var jQT = new $.jQTouch({
slideSelector: '.link',
useAnimations: true
});
Again the scene change works just fine, just that I don't see the slide animation.
What am I missing?
Thanks,
Tee
Found out why.
The slideSelector needs to be applied to <a> tag.
Tee