I would like to have the pop up "Shutdown (name of app)" on the back button and not on the default button that is right now..(Intel xdk app framework)
How could i do that? Please help me!
For that Add a custom header like.........
<div class="panel" title="Custom title" data-footer="footer_1" data-header='custom-header' id="page_5" data-appbuilder-object="page">
<div class="container" id="page_5_container" style="width:100%" data-appbuilder-object="container" data-position="static">
your content here...............
</div>
</div>
<header id="custom-header" data-appbuilder-object="header">
<a id="backButton" onclick="popup()" class="button back" style="visibility: visible; ">Back</a>
<h1 id="pageTitle" class="">
Custom title
</h1>
</header>
Related
I have a button that redirect me to another view, in a href tag. When I click on the button its redirect me to a href view. like:
<a ng-click="gotoChat()" /*Redirect to another view
class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0">
<button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button>
</i>*/When I click on the button its start gotoChat() and Close() instead of only Close()
</a>
How can I do that its redirect me to button function?
Change href to div in html as follow
<div ng-click="gotoChat()" class="item item-avatar-right item-icon-left">
<i class="icon" ng-hide="{{item.toClose}} == 0"><button ng-click="Close('{{item.key}}')" class="button button-assertive">סגור בקשה</button></i>*/When I click on the button its redirect me to a href function
</div>
and in your controller
$scope.gotoChat = function(){
$state.go("STATE OF PAGE FOR REDIRECT");
}
I'm making a simple app that keeps track of my hours at work. I'm developing the app for android and I'm having a problem with the scrolling.
Structure of the App:
I have a header bar and a footer which are both outside of the < ion-content > tab, so I don't expect that to be scrollable. Within the < ion-content > I have used an < ion-side-menus > tab and finally within the < ion-side-menu-content > tab I have put in a < ion-nav-view > tab which is controlled by my state provider.
Everything works fine, the menu is operational and the views change according to their design. Within one of my views I have a list that exceeds the size HERE IS WHERE THE PROBLEM BEGINS!. When using a computer, I can pull the page down (as if I were trying to refresh it) but when I try to scroll down the page goes straight to the top of the list unless I keep dragging and have my finger on the left click. Furthermore the rest of the content in the list is not loaded. The listed is literally cropped to where it stopped before I dragged down. When I export it to an android app I cant even drag to scroll. The scrolling is literally non-functional.
I've attached some code
var app = angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
// Hide the accessory bar by default (remove this to show the accessory bar above the keyboard
// for form inputs)
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
.config(function($stateProvider, $urlRouterProvider) {
$stateProvider
.state('home', {
url: '/',
templateUrl: "views/home.html",
controller: "MainController"
})
.state('rotas', {
url: '/rotas',
templateUrl: "views/rotas.html",
controller: "MainController"
})
.state('update', {
url: '/update',
templateUrl: "views/update.html",
controller: "UpdateController"
});
$urlRouterProvider.otherwise('/');
});
.scroll {
height: 100%;
}
/* Before i put in this CSS element, the content in the view was cropped SIGNIFICANTLY. not sure exactly what it does but it solved my problem. All other CSS elements are colour changes*/
index.html
<html>
<head>...</head>
<body ng-app="starter" ng-controller="MainController">
<ion-pane>
<ion-header-bar class="bar-stable">
<!--header bar -->
<h1 class="title">Shiftwiz.{{controllerCheck}}</h1>
</ion-header-bar>
<div class="bar bar-footer bar-stable">
<!--footer-->
<table id="footer-table">
<tr>
<td>
<a ui-sref="rotas" ng-click="activity.doRotas()">
<div>Rotas</div>
</a>
</td>
<td>
<a ui-sref="update" ng-click="activity.doUpdate()">
<div>Update</div>
</a>
</td>
</tr>
</table>
</div>
<ion-content>
<ion-side-menus>
<ion-side-menu-content overflow-scroll="true">
<!--menu-->
<button class="button button-full button-positive" ng-click="toggleLeft()">
Rotas: {{activity.rotas}} Update: {{activity.update}}
</button>
<ion-nav-view overflow-scroll="true"></ion-nav-view>
</ion-side-menu-content>
<ion-side-menu side="left">
<ion-item>Next Week</ion-item>
<ion-item ng-click="toggleLeft(); activity.chooseThisWeek(); calcDates()">This Week</ion-item>
<div id="further-weeks" ng-show="activity.rotas">
<ion-item>Last Week</ion-item>
<ion-item>Last Two</ion-item>
<ion-item>Last Three</ion-item>
</div>
</ion-side-menu>
</ion-side-menus>
</ion-content>
</ion-pane>
</body>
</html>
update.html
<!-- this view contains the list which isn't rendering-->
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
Your update.html contents should be wrapped in <ion-view> and <ion-content> elements.
<ion-view>
<ion-content>
<div class="card" ng-repeat="day in unPublishedRota">
<a ng-click="day.toggleState()">
<div class="item item-divider">
<p class="day">{{ day.date | date:"EEEE" }}
<br />{{day.date | date:"d, MMM y"}}</p>
<p class="times">{{day.start}} | {{day.finish}}
<br />{{day.hours}} hrs</p>
</div>
</a>
</div>
</ion-content>
</ion-view>
You can also have a look at a working sidemenu example by Ionic.
dunno whats going on with my image slider under the 'support' tab section its not showing up correctly, its cutting half of it off and looking weird. The main image slider is good. But, when you inspect element all of a sudden the 'support' orbital image slider looks normal. This is with the foundation framework.
here's a link to see the bug:
http://www.omegadesignla.com/virtual/
and some html:
<div class="content" id="panel6">
<div class="row">
<div class="large-4 columns">
<h3> OFLVS Contact Info:</h3>
<ul>
<li>Student Support</li>
<li>Parent Support</li>
<li>Support links and resources</li>
</ul>
</div>
<div class="large-8 columns">
<ul class="example-orbit" data-orbit>
<li>
<img src="imgs/flash3.jpg" alt="slide 1" />
<div class="orbit-caption">
Caption One.
</div>
</li>
<li>
<img src="imgs/flash12.jpg" alt="slide 2" />
<div class="orbit-caption">
Caption Two.
</div>
</li>
<li>
<img src="imgs/flash9.jpg" alt="slide 3" />
<div class="orbit-caption">
Caption Three.
</div>
</li>
</ul>
</div>
</div>
Learn More
Sign Up
</div>
javascript:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('reflow');
}
},
orbit: {
pause_on_hover: false,
timer_speed: 6000
}
});
I think your error stems from the fact that the orbit slider is in the tab content section. I had a similar error with a range slider in a tab section.
Try reflowing the javascript in a JS file with a tab callback like so:
$(document).foundation({
tab: {
callback : function (tab) {
$(document).foundation('orbit', 'reflow');
}
}
});
EDIT: I've corrected my answer and added a working fiddle.
I'm trying to scroll down to delegate-handle="start" with ionic on load. When i try to run it, i get this message in console.
Delegate for handle "small" could not find a corresponding element with delegate-handle="small"! scrollTop() was not called!
Possible cause: If you are calling scrollTop() immediately, and your element with delegate-handle="small" is a child of your controller, then your element may not be compiled yet. Put a $timeout around your call to scrollTop() and try again.
My code looks like this, can somebody maybe see what is wrong?
$timeout(function() {
$ionicScrollDelegate.$getByHandle('start').scrollTop();
}, 10);
If i use $ionicScrollDelegate.scrollBottom(), it will scroll to the bottom, so it must be a problem with the specific function.
The html code
<ion-view title="Kalender">
<ion-content>
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div delegate-handle="start"></div>
</ion-content>
</ion-view>
Thanks.
Ionic 1.0.0-beta14 has some strange issue with getByHandle() so you can do it this way:
$timeout(function() {
var startHandle = _.find($ionicScrollDelegate._instances, function (s) {
return s.$$delegateHandle === "start";
});
startHandle.scrollTop();
});
Solution source at forum.ionicframework.com
I think there is a misunderstanding about what the delegate handle does here. Delegate handle is a way to name scroll/content containers. Think of it like a way to give your <ion-content> container a unique name that can be later used with the service. It is possible to have multiple <ion-content> containers on a single view, and this is why the naming is necessary. If you only have one scroll area or don't specify the handle, then it just uses the first view it finds.
You want to scroll to a particular place in the application, which is the job of $ionicScrollDelegate.anchorScroll('element-id');. Take a look at your code here with some modifications. I've put the delegate handle in the correct place, and then use the anchorScroll method to automatically scroll to that ID in the page.
Markup
<ion-view title="Kalender">
<ion-content delegate-handle="kalendar">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
<div id="start"></div>
</ion-content>
</ion-view>
Controller
$timeout(function() {
$ionicScrollDelegate.$getByHandle('kalendar').anchorScroll('start');
}, 10);
Specify the dalegate-handler in ion-content
<ion-view title="Kalender">
<ion-content delegate-handle="start">
<ion-list ng-repeat="activity in calendar">
<div class="item item-divider" ng-show="activity.date_divider != null" data-year="{{activity.year}}">
<div class="header-divider-small">{{activity.year}}</div>
<div class="header-divider">{{activity.date_divider}}</div>
</div>
<div class="item item-icon-right calendar" ng-show="activity.date_divider == null">
<span class="header">{{activity.name}}</span>
<br />
<span class="text">{{activity.time}} - {{activity.place}}</span>
<a class="button button-icon icon {{activity.icon}} right not-selected"></a>
</div>
</ion-list>
</ion-content>
</ion-view>
Scroll top can be achieved by forgetting the scroll position which can be achieved by using
$scope.$on("$destroy", function() {
var delegate = $ionicScrollDelegate.$getByHandle('start');
delegate. forgetScrollPosition();
});
Use
$ionicScrollDelegate.$getByHandle('start').scrollTop(); //To scroll to Top.
As I noticed delegate-handle won't work if used with overflow-scroll.
I managed to do it this way:
$scope.scrollHandle = some-handle-value-that-you-want-to-use;
$scope.$on('$ionicView.loaded', function () {
$timeout(function () {
scrollView = $ionicScrollDelegate._instances.filter(function (s) {
if (!s.$$delegateHandle) return false;
return $parse(s.$$delegateHandle.slice(2, -2))
(angular.element(s.element).scope()) == $scope.scrollHandle;
})[0];
}).then(function () {
scrollView.scrollTo(0, 0, false);
});
});
In the template:
delegate-handle="{{scrollHandle}}"
EDIT:
This doesn't work anymore, check this answer for new solution: https://stackoverflow.com/a/32123613/1630623
On a page, using ng-repeat, I try to place buttons on a grid layout.
Iterating through an array which is defined in a controller $scope.btnNames[]. buttons are place on Total number of buttons equal to array size of $scope.btnNames[]
I would like to put say 4 buttons per row.
As $scope.btnNames[] size is 20, then I like to place 20 buttons on 5 rows,
where each row will have 4 buttons.
1) on Controller :
- I have an array with button names
$scope.btnNames['aa', 'bb', 'cc','dd', 'ee', 'ff'....] whose size is 20.
2) on the page:
- using ng-repeat, iterate throught the
$scope.btnNames[] and put buttons as per follwoing code
<body ng-controller="PopupCtrl">
<div class="row responsive-sm">
<div ng-repeat="btnName in btnNames">
<button id={{$index}} class="button button-dark col" >{{btnName}}</button>
</div>
</div>
Please help me defining class="row" and class="col" and such a way that,
during ng-repate, after 4th button, it should add a new row and place 4 buttons till it reach end of ng-repeat.
Being new to both ionic and angulrJs, I'm not able to define class="row" during ng-repeat ( similar like a for loop, where, put a new class="row", when iterator counter in this case {{index}} greater than 4.
Use flex-wrap
You can get this behavior by using style="flex-wrap: wrap;" + the following CSS classes:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-25" ng-repeat="btnName in btnNames">
<button class="button button-dark" >{{btnName}}</button>
</div>
</div>
http://codepen.io/Jossef/pen/doeJJP
You can find a possible solution here : https://stackoverflow.com/a/23780288/1015046
I have taken the above solution and implemented it for Ionic : http://codepen.io/arvindr21/pen/EaVLRN
<div ng-repeat="btnName in btnNames">
<div ng-if="$index%4==0" class="row">
<div class="col">
<button id={{$index}} class="button button-dark">{{btnNames[$index]}}</button>
<button id={{$index+1}} class="button button-dark">{{btnNames[$index+1]}}</button>
<button id={{$index+2}} class="button button-dark">{{btnNames[$index+2]}}</button>
<button id={{$index+3}} class="button button-dark">{{btnNames[$index+3]}}</button>
</div>
</div>
</div>
If you want the grid to be dynamic, you can take a look at : https://stackoverflow.com/a/27080632/1015046
Thanks.
Ok, So if you want to stack images like me in rows, See how the ng-repeat holds col-50.
<div class="row gallery">
<div class="col col-50" ng-repeat="photo in photos">
<img id="fitWidth" ng-src="{{photo.url}}"/>
</div>
</div>
Then with your css.
.gallery {
-webkit-flex-wrap: wrap;
flex-wrap: wrap;
}
Tested on IOS, Hope that helps :)
I would just like to add to the #Jossef Harush's answer (which, btw, worked).
However, when I tested it in the Ionic View application on iPhone, it didn't work. When I tested it in the Ionic View application on Android it worked as expected (multiple rows).
The solution was to add this as a style:
style="display: -webkit-flex; -webkit-flex-wrap: wrap; display: flex; flex-wrap: wrap;"
because, as you can see here Safari needs a -webkit prefix.
Hope this helps someone who will choose this solution over #Arvind's.
Worked for me as soon as I added flex-wrap: wrap in the styling.
Since i have set col-50 I started getting rows with two columns as intended.
Example:
<div class="row" style="flex-wrap: wrap;">
<div class="col col-50" ng-repeat="picture in pictures">
{{picture.src}}
</div>
</div>
There's a limitTo starting $index in AngularJS,
Maybe that can simplify things
<div class="row" ng-repeat="element in elements" ng-if="$index % 4==0">
<div class="element" ng-repeat="element in elements|limitTo:4:$index">...</div>
</div>
That will make sure that {{ index + 1 }} fall on a non-existent cell ..