I am trying to add ion scroll where it will add active class to the middle item. It should show three items at once, is it possible?
<ion-scroll direction="x" class="wide-as-needed animate-show" ng-show="" style="float:left;width:100%;" has-bouncing="false">
<ul class="hNav clearfix" style="width:100%;"> <!--style="width:500px;"-->
<li><img ng-src="img/img0" width="80" height="80" /></li>
<li ><img ng-src="img/img1" width="80" height="80" /></li>
<li ><img ng-src="img/img2" width="80" height="80" /></li>
<li ><img src="img/img4" width="80" height="80" /></li>
<li ><img src="img/img5" width="80" height="80" /></li>
</ul>
</ion-scroll>
I would like to add class="active" whichever item is in the middle. Please help.
Everytime user scrolled, you can get the position to your left and you can handle however you want to handle.
HTML
<ion-content direction="x" class="wide-as-needed animate-show" ng-show="showFilterStatus" style="float:left;width:100%;"
on-scroll="testSwipe()" scroll-event-interval="1000" has-bouncing="false" delegate-handle="small" padding="false" start-x="getXStart()">
<ul class="hNav clearfix" style="width:800px;"> <!--style="width:500px;"-->
<!--<li ><a href="#"> </a></li>
<li ng-repeat="filter in filterList"><a ng-class="{sltItm: $index==showFilterSelected}" ng-click="changeFilter($index)">{{filter.filterType}}</a></li>-->
<li><img src="img/spacer.png" width="80" height="80" /></li>
<li ng-repeat="filter in fTest">
<img ng-src="{{filter.not_selected}}" width="80" height="80" ng-show="filSel != $index" ng-click="clickFilter($index)"/>
<img ng-src="{{filter.selected}}" width="80" height="80" ng-show="filSel == $index" ng-click="showFilter()"/>
</li>
<!--<li ><img src="img/spacer.png" width="80" height="80" /></li>-->
</ul>
</ion-content>
$scope.testSwipe = function(){
scroll_position = delegate.getScrollPosition().left;
console.log("SCOPE SCROLL POSITION "+scroll_position);
if (preSetFilterView){
delegate.scrollTo(100*lastSelection, 0 , true);
preSetFilterView = false;
}
else if (scroll_position < 60 && $scope.showFilterStatus == true){
$scope.filSel = 0;
}else if (scroll_position >60 && scroll_position<140 && $scope.showFilterStatus == true){
$scope.filSel = 1;
}else if (scroll_position > 140 && scroll_position < 240 && $scope.showFilterStatus == true){
$scope.filSel = 2;
}else if (scroll_position > 240 && $scope.showFilterStatus == true){
$scope.filSel = 3;
}
/*else if (scroll_position > 240 && scroll_position < 340){
$scope.filSel = 3;
}else{
$scope.filSel = 4;
}*/
if ($scope.filSel < 4 && $scope.showFilterStatus == true && lastSelection != $scope.filSel){
lastSelection = $scope.filSel;
startAtX = (100*$scope.filSel);
delegate.scrollTo(100*$scope.filSel, 0 , true);
$scope.changeFilter($scope.filSel);
//delegate.rememberScrollPosition('position-set');
}else if ($scope.filSel == 4 && $scope.showFilterStatus == true && lastSelection != $scope.filSel){
lastSelection = $scope.filSel;
delegate.scrollTo(100*$scope.filSel, 0 , true);
var time = $timeout(function() {
$scope.showFilterDetail();
return true;
}, 1000);
//
}
console.log("SCOPE TEST SWIPE SELE" + $scope.filSel);
// alert("INSIDE TEST SWIPE " + JSON.stringify(delegate.getScrollPosition()));
};