I have a playlist page where i create my custom tabs. Tabs working very well but the problem is that when i scroll down first tab content and then move to another tab then scroll position remain same, i am not able to see the content of second tab.
And I don't want to use default tabs of ionic.
Here is plnkr link where i implement my code:-
<ion-view view-title="Playlists" class="tabSection">
<div class="tabs-striped tabs-top tabs-background-dark tabs-color-energized">
<div class="tabs">
<a class="tab-item" ng-click="articles(false)">
Home
</a>
<a class="tab-item" ng-click="categories(true)">
Favorites
</a>
</div>
</div>
<ion-content>
<div class="articleSection" ng-hide="showme">
<ion-list>
<ion-item ng-repeat="playlist in playlists" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
<div class="categorySection" ng-show="showme">
<ion-list>
<ion-item ng-repeat="playlist in favorites" href="#/app/playlists/{{playlist.id}}">
{{playlist.title}}
</ion-item>
</ion-list>
</div>
</ion-content>
</ion-view>
http://plnkr.co/edit/nlUgR8?p=preview
Any Suggestion?
Thanks
You can use $ionicScrollDelegate.
.controller('PlaylistsCtrl', function($scope,$ionicScrollDelegate) {
$ionicScrollDelegate.scrollTop();
});
This will show scroll content from top.
Hope it works for you.
Related
I created a menu component which has the menu-button and the ion-menu inside because i want to use this component on multiple pages. To use this component on different pages, i created a module with the menu component inside which than gets imported on every page that should have the menu.
When accessing the page i get the error
Menu: must have a "content" element to listen for drag events on
app.component.html
<ion-app>
<ion-router-outlet id="main-menu"></ion-router-outlet>
</ion-app>
menu.component.html
<div id="menu-button" (click)="this.toggleMenu()">
<span></span>
<span></span>
<span></span>
</div>
<ion-menu side="start" contentId="main-menu" menuId="main-menu">
<ion-content>
<ion-menu-toggle auto-hide="false">
<ion-list lines="none">
<ion-item [routerLink]="'/list-view'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.LISTVIEW.LISTVIEW' | translate }}
</ion-item>
<ion-item [routerLink]="'/settings'">
<ion-icon name="list-outline" slot="start"></ion-icon>
{{ 'PAGES.SETTINGS.PKEY' | translate }}
</ion-item>
<ion-item (click)="logout()">
<ion-icon name="log-out-outline" slot="start"></ion-icon>
{{ 'PAGES.LOGIN.LOGOUT' | translate }}
</ion-item>
</ion-list>
</ion-menu-toggle>
</ion-content>
</ion-menu>
I use ion-split-pane directly inside
this code works:
app.component.html
<ion-app>
<ion-split-pane contentId="menu-content">
<ion-menu contentId="menu-content" menu="menu-content-dx" side="end" type="overlay">
<ion-header>
<ion-menu-toggle>
<ion-toolbar>
<ion-title>menu (under construction) </ion-title>
</ion-toolbar>
</ion-menu-toggle>
</ion-header>
<ion-content>
<ion-list>
<ion-menu-toggle>
<ion-item [routerLink]="['/auth/logout']">
<ion-icon name="information-outline" slot="start"></ion-icon>
<ion-label>Logout</ion-label>
</ion-item>
</ion-menu-toggle>
</ion-list>
</ion-content>
</ion-menu>
<!-- router outlet here -->
<ion-router-outlet id="menu-content" main></ion-router-outlet>
</ion-split-pane>
</ion-app>
home.page.html
in toolbar reference to menu id : menu="menu-content-dx"
<ion-header [translucent]="true">
<ion-toolbar>
<ion-buttons slot="end">
<ion-menu-button menu="menu-content-dx"></ion-menu-button>
</ion-buttons>
<ion-title>
home menu
</ion-title>
</ion-toolbar>
</ion-header>
I am trying to put a full width image with certain height at the top of the ionic page (under the nav, before the list). The image does work as I put it in the list, it's just not showing at the top. Any ideas?
<ion-view view-title="{{pageTitle}}">
<ion-content>
<img ng-src="{{post.acf.top_image_full_list}}">
<ion-list>
<div class="list">
<a ng-repeat="post in posts"
href="#/tab/watch/{{current_category_id}}/{{post.id}}"
class="item item-thumbnail-left">
<img ng-src="{{post.acf.top_single_msg}}">
<div class="postcat">
<span style="font-size: 17px;">{{post.title.rendered}}</span>
<p>{{post.date | date}}</p></div>
</a>
</div>
</ion-list>
</ion-content>
</ion-view>
you are trying to access the image post.acf.top_image_full_list - which is within a 'post' object. However you do not create the 'post' object until further down in the list with the line <a ng-repeat="post in posts" - you are trying to use the 'post' object outside of the ng-repeat.
I am currently working on $ionicScrollDelegate in my mobile app. My objectives is when the user click the header bar, it will scroll to top automatically.The problem I have right now is when I include the ion-side-menu in my code, the $ionicScrollDelegate cannot scroll back, I created a button which it returns their position, but cannot scroll back. I am trying to figure out why $ionicScrollDelegate cannot scroll back to top when I included the side menu but when I removed the side menu, the $ionicScrollDelegate seems to work fine and it can scroll back to top.
Working code - without ion-side-menu
<ion-view>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Details </h1>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
<ion-view>
Not working - With side menu
<ion-view>
<ion-side-menus>
<ion-side-menu-content>
<ion-header-bar class="bar-positive">
<button class="button button-icon" ng-click="toggleLeft()" menu-toggle="left">
<i class="icon ion-navicon"></i>
</button>
<h1 class="title">Expenses Details</h1>
<a class="button button-icon ion-plus-round" href="#/addExpensesForm"></a>
</ion-header-bar>
<ion-content delegate-handle="mainContent" ng-controller="detailCtrl">
Load More
<ion-list can-swipe="listCanSwipe">
<ion-item ng-repeat="data in tempData |limitTo: limit"
item="data"
href="#/expenseDetail/{{data.id}}"
class="item-remove-animate">
Date:{{data.modifiedDate | date: "yyyy-MM-dd"}}<br />
<ion-option-button class="button-assertive"
ng-click="showPopup(data)">
Delete
</ion-option-button>
<ion-option-button class="button-calm"
ng-click="edit(data)"
ng-disabled="data.status!= 'Draft'">
Edit
</ion-option-button>
</ion-item>
</ion-list>
<button class="button button-icon ion-android-arrow-up" ng-click="scrollListToTop()">Scroll Top</button>
</ion-content>
</ion-side-menu-content>
<ion-side-menu side="left">
<header class="bar bar-header bar-assertive">
<h1 class="title">Menu</h1>
</header>
<ion-list>
<ul class="list">
<a ui-sref="tabs.home" class="item">Home</a>
<a ui-sref="about" class="item">About</a>
<a ui-sref="tabs.setting" class="item">Settings</a>
</ul>
</ion-side-menu>
</ion-side-menus>
</ion-view>
In My controller, I have
$scope.scrollListToTop = function () {
var result = $ionicScrollDelegate.$getByHandle('mainContent').getScrollPosition();
alert('Result:' + result.top + " " + result.left);
//$ionicScrollDelegate._instances[2].scrollTop();
}
It may be related to your markup structure.
Both the links below suggest that ion-side-menu-content should contain an ion-nav-bar then an ion-nav-view
https://github.com/driftyco/ionic-starter-sidemenu/blob/master/templates/menu.html and http://mcgivery.com/understanding-ionics-side-menu/
Switching that around and putting your ion-content in there may give you back control.
Drop us a codepen or similar if not.
I am working on this app where i want menu + tabs for..
i have seen on one example on codepen and try to implement it ..here's the link "look for second seaction"
http://codepen.io/kmartinezmedia/pen/mFdkB
but its not working the way it suppose to be ..
I am using the page below as one tab and the same page with different content on another tab and I want no animation to give a feel that only the content has changed.
I think if there is any way i can remove the animation from this view , it will work....
or any other way to do that,....i am trying to fix this from 6 hrs ,
<ion-view class="tech-view" ng-controller="hrlDetailCtrl" view-title="C Language">
<ion-nav-bar class="bar-balanced big-bar" animation="no-animation" >
<ion-nav-back-button>
</ion-nav-back-button>
</ion-nav-bar>
<div class="tabs-background-balanced tabs-color-light" style="padding:0px;margin:0px;" >
<div class=" bar bar-subheader tabs tabs-icon-top" style="box-shadow: 0 2px 5px rgba(0,0,0,.26);">
<a nav-clear class="tab-item disable-user-behavior active" title="Home" nav-clear ui-sref="app.c">
<i class="icon ion-ios-book "></i>
Topic
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Chat" nav-clear ui-sref="app.cpro">
<i class="icon ion-code"></i>
Programs
</a>
<a nav-clear class="tab-item disable-user-behavior" title="Drink" nav-clear ui-sref="app.cques">
<i class="icon ion-document-text"></i>
Ques / Ans
</a>
</div>
</div>
<ion-content class="padding spc-from-subheader" name="tabContent" animation="no-animation">
<div ng-controller="hrlistCtrl">
<div class="sub-topics-list" ng-repeat="hrl in hrlist | limitTo: 29 | limitTo: -14" class="my-item item-icon-left">
<a class="item item-icon-right " animation="no-animation" href="#/app/ct/{{hrl.id}}" style="border-width:0;border-style:none;background-color:#1E824C;">
<div class="has-border">
<h3 style="background-color:#1E824C;color:white">{{hrl.title}}</h3>
</div>
<i class="icon ion-ios-arrow-right"> </i>
</a>
</div>
</div>
</ion-content>
This works in Ionic 1.3.20.
angular.module('YOUR_APP_NAME_HERE').config(function($ionicConfigProvider) {
$ionicConfigProvider.views.transition('none');
});
http://ionicframework.com/docs/api/provider/$ionicConfigProvider#views.transition
Try using the config to disable:
$ionicConfigProvider.navBar.transition('none');
I'm writing a small ionic app and have an issue. I'm using a sidemenu and also tabs. I have an ionic slide-box in one of my views, when I wipe this slidebox from left to right the side menu slides out. I've read through various related topics on the ionic forum but none have worked.
I've tried adding drag-content="false" to various tags and also added $ionicSideMenuDelegate.canDragContent(false); to my controller.
Neither worked. I think it's because I'm using a sidemenu, with tabs and views in the tabs. Heres my code:
index.html
<ion-side-menus>
<!-- Header bar -->
<ion-side-menu-content ng-controller="NavCtrl" drag-content="false">
<ion-nav-bar class="bar-positive">
<ion-nav-back-button class="button-icon ion-ios7-arrow-back">
</ion-nav-back-button>
</ion-nav-bar>
<!-- Page content -->
<ion-nav-view drag-content="false" animation="slide-left-right"></ion-nav-view>
</ion-side-menu-content>
<!-- Side menu -->
<ion-side-menu side="left" class="side-menu">
<ion-header-bar class="bar bar-header bar-dark">
<h1 class="title">Menu</h1>
</ion-header-bar>
<ion-content has-header="true">
<div ng-if="authData.twitter" class="logged-in-user item item-avatar">
<img ng-src="{{authData.twitter.cachedUserProfile.profile_image_url}}"/>
<h2>Hello, {{authData.twitter.displayName}}</h2>
<p>Logged in via Twitter</p>
</div>
<div ng-if="authData.facebook" class="logged-in-user item item-avatar">
<img ng-src="{{authData.facebook.cachedUserProfile.picture.data.url}}"/>
<h2>Hello, {{authData.facebook.displayName}}</h2>
<p>Logged in via Facebook</p>
</div>
<ul class="list">
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/venue">
<i class="icon ion-ios7-location"></i>Venue
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/lunch">
<i class="icon ion-pizza"></i>Lunch
</a>
</li>
<li>
<a class="item item-icon-left" menu-close nav-clear href="#/wifi">
<i class="icon ion-wifi"></i>Wifi
</a>
</li>
</ul>
</ion-content>
<ion-footer-bar class="bar bar-dark">
<button class="button button-icon icon ion-log-out menu-close nav-clear" ng-controller="LoginCtrl" ng-click="logout()"> Logout</button>
</ion-footer-bar>
</ion-side-menu>
</ion-side-menus>
and my view:
<ion-view title="Agenda">
<ion-content drag-content="false">
<ion-slide-box on-slide-changed="slideHasChanged($index)">
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Happening now</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">some guy</h2>
<p class="header-card__text">Some title</p>
</div>
</div>
</div>
</ion-slide>
<ion-slide>
<div class="header-card header-card--image">
<div class="overlay">
<div class="item item-text-wrap">
<h3 class="header-card__heading">Coming Next</h3>
<img ng-src="img/me.jpeg" class="header-card__avatar"/>
<h2 class="header-card__heading">Some guy</h2>
<p class="header-card__text">Slowly taking over the world</p>
</div>
</div>
</div>
</ion-slide>
</ion-slide-box>
<ion-list>
<ion-item ng-repeat="(id,agendaItem) in agendaItems" type="item-text-wrap" href="#/tab/agendaItem/{{agendaItem.$id}}" class="item item-avatar item-with-grid">
<img ng-src="{{agendaItem.image}}">
<p>{{agendaItem.startTime}} <i ng-if="agendaItem.hasNotificationSet == true" class="icon-left ion-ios7-bell"></i></p>
<h2>{{agendaItem.title}}</h2>
<p>{{agendaItem.speaker}}</p>
<ion-option-button ng-class="agendaItem.hasNotificationSet ? 'button-balanced icon ion-ios7-bell' : 'button-positive icon ion-ios7-bell-outline'" ng-controller="NotificationCtrl" ng-click="add(agendaItem)"></ion-option-button>
<!--<ion-option-button ng-click="getNotificationIds()"></ion-option-button>-->
</ion-item>
</ion-list>
</ion-content>
and my controller:
.controller('AgendaCtrl', function($scope, AgendaFactory, $ionicSideMenuDelegate, $rootScope, $ionicPopup, $timeout, $cordovaLocalNotification, NotificationFactory) {
$ionicSideMenuDelegate.canDragContent(false); // doesn't seem to work
var agendaItems = AgendaFactory.getAgenda();
// Loop through agenda itens and check which have notifications set
agendaItems.$loaded().then(function(array) {
angular.forEach(array, function(value, key) {
if (NotificationFactory.isNotificationScheduled(value.notificationId) == true) {
value.hasNotificationSet = true;
} else {
value.hasNotificationSet = false;
}
});
$scope.getNotificationIds = function () {
$cordovaLocalNotification.getScheduledIds().then(function (scheduledIds) {
console.log(scheduledIds);
});
};
$scope.agendaItems = agendaItems;
});
$scope.firstTimeLogin = $rootScope.firstTimeLogin;
})
I'm using something like this on my app:
.controller('AgendaCtrl', function($scope, $ionicSideMenuDelegate){
$scope.$on('$ionicView.enter', function(){
$ionicSideMenuDelegate.canDragContent(false);
});
$scope.$on('$ionicView.leave', function(){
$ionicSideMenuDelegate.canDragContent(true);
});
})
now, when you leave the view it's draggable again.
ion-side-menu-content drag-content="false" put this code in your ion-sidemenu's ion-pane tag
<ion-side-menus>
<ion-side-menu-content drag-content="false">
............
</ion-side-menu-content>
</ion-side-menus>
this is sample code follow #Chetan Buddh's answer