I'm looking for a way to implement a text continuous scroll
Basically, I would like to have an in-line text with time table for the next boat departures, and I would like to scroll it horizontally, both ways and continuously, like a carousel.
Is it possible ? How shall I do it ?
Thanks in advance
Directive <ion-scroll > works for scrolling .
<ion-scroll zooming="true" direction="x" style="width: 500px; height: 500px">
</ion-scroll>
Take a look of this http://codepen.io/rajeshwarpatlolla/pen/xGWBja
You can check my codepen, not perfect but maybe it will be helpfull.
http://codepen.io/kmlzjc/pen/bZjjRg
The thing is to use ion-infinite-scroll with ion-scroll or ion-content. Sth like this
<ion-content class="padding" >
<ion-scroll direction="x" class="item">
<div ng-repeat="scrollItem in scrollItems" class="scroll-item">
<strong>{{ scrollItem.id }}</strong>
<hr />
<span>{{ scrollItem.index }}</span>
</div>
</ion-scroll>
<ion-infinite-scroll on-infinite="load()" distance="20%"></ion-infinite-scroll>
</ion-content>
In this case when scroll will be 20% from the end, the load function will be fired so new data can be loaded. Here I do it with dummy function that adds new items to scrollItems list.
$scope.load = function() {
var previousLength = $scope.scrollItems.length;
for(var i = 0; i < 10; i++) {
$scope.scrollItems.push({
id: Math.random() * 1000,
index: previousLength + i + 1
});
}
$scope.$broadcast('scroll.infiniteScrollComplete');
};
And once the data is loaded there is an event broadcasted, to refresh scroll. $scope.$broadcast('scroll.infiniteScrollComplete');
Check also ionic scroll documentation http://ionicframework.com/docs/api/directive/ionScroll/. There will be an explanation on ion-infinite-scroll.
Related
what I am trying to do is: make the cursor:no-drop; using css for this, fine works, but the problem is I am still getting the click when I click in the Icon.
If you see my Icon turn to red and I inserted cursor:no-drop; by css. for the user not be able to click, but the click still on how can I solve this? and block the click when the Icon turns to red?
thank you.
html + angular
<div ng-app>
<div ng-class="{'selected-gamepad':tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog1}"
ng-click="iTog1 = !iTog1"></i>
<span id='1' ng-click='tog=1; iTog1 = false;'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': iTog2}" ng-click="iTog2 = !iTog2"></i>
<span id='2' ng-click='tog=2; iTog2 = false;'>span 2</span>
</div>
</div>
css:
.selected-gamepad > span {
border: dotted pink 3px;
}
.selected-gamepad > i {
color: red;
cursor:no-drop;
}
.gamepad-blue,
.selected-gamepad .gamepad-blue{
color: blue;
}
jsfiddle: http://jsfiddle.net/zvLvg/290/
Changing the cursor property in CSS doesn't magically disable clicking - it just changes the cursor so it looks like you can't click. If you want to disable clicking, you need some additional logic in your code.
I've edited the code a bit to clean it up and moved some logic to controller. The code of course could be much better, but I leave it up to you - try to read some tutorials about it and get familiar with cleaner Angular syntax to write better code :-).
Coming back to the problem - what you really needed to do was to block player from clicking, when the pad is selected. I did it by adding a simple checking with if statement inside toggle function:
View:
<div ng-app="app">
<div ng-controller="GameController as vm">
<div ng-class="{'selected-gamepad':vm.tog==1}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[1]}" ng-click="vm.toggle(1)"></i>
<span id='1' ng-click='vm.selectPad(1)'>span 1</span>
</div>
<div ng-class="{'selected-gamepad':vm.tog==2}">
<br>
<i class="fa fa-lg fa-gamepad" ng-class="{'gamepad-blue': vm.iTogs[2]}" ng-click="vm.toggle(2)"></i>
<span id='2' ng-click='vm.selectPad(2)'>span 2</span>
</div>
</div>
</div>
Logic:
<script>
// Register module
angular.module('app', []);
// Create controller
angular.module('app')
.controller('GameController', function() {
var self = this;
self.tog = null;
self.iTogs = [false, false];
self.toggle = function(index) {
if (self.tog != index) {
self.iTogs[index] = !self.iTogs[index];
}
}
self.selectPad = function(index) {
self.tog = index;
self.iTogs[index] = false;
}
});
</script>
Here's working plunker:
http://jsfiddle.net/zvLvg/291/
A little explanation
What I did was move some of the logic to controller. Controllers let you separate different parts in the application and have more control over them. Also, the code is much cleaner when you use functions instead of direct expressions inside directives (like you did with ng-click earlier).
I've also created an array instead of naming variables with numbers. Further improvements would be to use ng-repeat to avoid code repetition - divs inside your pads list are pretty much the same and could be substituted with one div and ng-repeat. Also, names of the properties could be better - now they don't really say what they mean if you look at them.
I hope these small tips will help you to get better with Angular and with programming at all. :-)
I have template in my ionic app that looks something like this:
<ion-view>
<ion-content>
<div class="nav">
<span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
<span>{{ monthName }}</span>
<span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
</div>
<ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...
the div with the class 'nav' contains two buttons that let the user switch between two months. The months are in the <ion-scroll> element.
This works as it should. The buttons scroll the <ion-scrol> element horizontally. But every time the buttons are used, the entire <ion-view> is scrolled vertically down by 20px - thus hiding the buttons.
I've tried changing the <ion-scroll>s inline css (with angular.element) to not include 3d transforms, but they just get re-added.
This is the function that gets called upon click - and my attempt to prevent the transform3d on the parent element
$scope.goToMonth = function(id, event){
$location.hash(id);
if(id == 'thisMonth'){
$scope.monthName = monthLabels[thisMonth];
}
else{
$scope.monthName = monthLabels[nextMonth];
}
var elm = angular.element(document.querySelector('.nav'));
var parent = angular.element(elm.parent());
console.log(parent[0].style.transform);
parent[0].style.transform = 'none';
$ionicScrollDelegate.anchorScroll(true);
};
EDIT: I've also tried using event.stopPropagation - this breaks the functionality of the <ion-scroll> element
Can anyone tell me how to prevent this behaviour?
Silly me. It turns out this was very simple to solve. I simply just needed to add scroll="false" to the <ion-content> element. No additional controller logic was needed.
So the html code above now looks like this:
<ion-view>
<ion-content scroll="false">// <-- Here I altered the html
<div class="nav">
<span class="ion-chevron-left" ng-click="goToMonth('thisMonth', $event)"></span>
<span>{{ monthName }}</span>
<span class="ion-chevron-right" ng-click="goToMonth('nextMonth', $event)"></span>
</div>
<ion-scroll on-scroll="onScroll()" class="wide-as-needed" delegate-handle="calendarScroll" direction="x" paging="true" scrollbar-x="false" style="min-height: 215px" ng-style="scrollStyle">
...
I have an application with a chat functionality which works great, except for one part, when the keyboard appears, the ion-content won't resize to a proper height, so I am stuck when I want to scroll to the top and the header disappears completely. The view has a header, content and footer and what I want is the footer to appear above the keyboard and the content to resize so it fits between the header and the footer-bar. The view I have created is as followed:
<ion-view id="userMessagesView" cache-view="true" flow-init flow-name="imageTemp.imageTemp" ng-if="!inChatSettings">
<div class="loader-center" ng-if="!doneLoading">
<div class="loader">
<i class="icon ion-loading-c"></i>
</div>
</div>
<div class="loader-center" ng-if="errorLoading">
<div class="loader">{{'error_loading_messages'|translate}}</div>
</div>
<ion-content class="has-header has-footer" has-bouncing="true" delegate-handle="userMessageScroll" style="background:red;">
<ion-refresher pulling-text="{{'pull_load_earlier'|translate}}" on-refresh="loadMore()"></ion-refresher>
<div ng-repeat="message in messageThread.messages | orderBy : 'postDate'" class="message-wrapper">
<div class="chat-bubble" ng-class="{ false: 'left', true:'right'}[{{message.postedBy|isCurrentUser}}]">
<div class="message-detail">
<span class="bold">{{message.postedBy.name}}</span>
</div>
<div class="message" ng-bind-html="message.message | nl2br" autolinker></div>
<img ng-src="{{message.imageUrl}}" ng-if="message.imageUrl"/>
<small am-time-ago="message.postDate">{{message.postDate|timeago}}</small>
</div>
<div class="cf"></div>
</div>
</ion-content>
<ion-footer-bar class="bar-light message-footer">
<button class="button button-icon icon icon-upload" flow-btn flow-file-added="imageUploaded($file)" flow-name="imageTemp.imageUrlTemp"></button>
<label class="item-input-wrapper" for="newmessage">
<textarea focus-me="input.focusInput" id="newmessage" ng-model="input.message" value="" required minlength="1" maxlength="1500" msd-elastic></textarea>
</label>
<button class="button button-clear" type="submit" ng-disabled="!input.message || input.message === ''" ng-click="sendMessage()" translate="send"></button>
</ion-footer-bar>
</ion-view>
I tried adding the keyboard-attach attribute to the ion-footer-bar, but the footer only gets bigger when I add this. Plus the footer already stays on top of the keyboard, so it appears unneeded. I have the following situation, it also appears that when I type something, the view goes up a little more.
This is when the keyboard is shown:
This is when the keyboard is hidden:
Does any of you know how to resize the ion-content to a normal height when the keyboard appears?
I have tried some things and the problem seemed to disappear, yet I don't think the solution is the right one or if this is actually the thing what solved the issue. So if anyone got a better solution, please share. First thing I had to do was including the Ionic keyboard plugin to get events based on the keyboard.
Inside the CSS, I have added:
.message-footer { min-height: 44px; }
Inside my controller I added the following code:
$scope.$on('taResize', function (e, ta) {
if(!ta || !footerBar) return;
var taHeight = ta[0].offsetHeight + 10;
var newHeight = (taHeight < 44) ? 44 : taHeight;
scroller.style.bottom = newHeight + 'px';
footerBar.style.height = newHeight + 'px';
});
I want to be Toggling b/w two icons. For ex: When i clicked on grid icon it will show up grid data and hide List Icon.Again when i clicked on the same icon it will show up List data and hide grid Icon.
Here is my code in Tabs.html
<div menu-toggle="right" ng-hide="data.grid = !data.grid">>
And I found http://codepen.io/mhartington/pen/zxpwbK2 But it's related to Buttons.
At the same time one needs to be show and one needs to be hide,for that u can use ng-show and ng-hide
<div menu-toggle="right" ng-hide="data.grid = !data.grid">
for grid:
<div class="" ng-hide="data.grid = !data.grid">
for icon:
<div class="" ng-show="data.grid = !data.grid">
From my understanding, I think this is what you are expecting.
<ion-view view-title="Icon Sample">
<ion-header-bar>
<h1> Icon sample </h1>
</ion-header-bar>
<ion-content>
<button class="button button-icon" ng-click="toggleIcon()">
<i class="icon" ng-class="isToggled ? 'ion-ios-list-outline' : 'ion-grid'"></i>
{{buttonText}}</button>
</ion-content>
</ion-view>
and the controller code as follows:
.controller('sampleCtrl', function($scope){
$scope.isToggled = true;
$scope.buttonText = 'List';
$scope.toggleIcon = function(){
if($scope.isToggled){
$scope.isToggled = false;
$scope.buttonText ='Grid';
}
else{
$scope.isToggled = true;
$scope.buttonText ='List';
}
}
});
http://codepen.io/svswaminathan/pen/ByPKgp
Check out this codepen example to see if it fits your requirement.This has just the code to toggle the icon alternatively within a button. I believe you are able to load the data appropriately already
I'm building this application in Angular where a div table is formed by using ng-repeat through the following html:
HTML
<div ng-repeat="(key, value) in data.data.ipv4">
<div class="cellbody">{{value.descr}}</div>
<div class="cellbody">{{value.protocol}}</div>
<div class="cellbody">{{value.internip}}</div>
<div class="cellbody">{{value.internrange}}</div>
<div class="cellbody">{{value.externrange}}</div>
<div class="deletecell">
<span class="toggledelete" ng-click="deleteport($event, key, 4)">
<i class="icon-minus negativehover"></i>
</span>
<span class="toggledelete" style="display:none">
<span>PORT DELETED</span>
<span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
UNDO
</span>
</span>
</div>
</div>
The last div of each row, has a visible clickable button which sends a delete order to the server via the deleteport() function, and then, if everything goes all right, starts an animation where the whole cell is hidden and the previously hidden span with class 'deletedportundo' shows up.
Anyway the thing is my controller looks like this:
Angular Javascript Controller
$scope.deleteport = function(e,f) {
postData.index = f;
$http.post('serverside/router.php', postData)
.success(function(data, status, headers, config){
if (data.status == 'ok') {
var elem = angular.element(e.target);
$(elem).parent().parent().parent().children('.cellbody').hide('fast');
$(elem).parent().parent().children('.toggledelete').toggle();
$(elem).parent().parent().parent().children('.deletecell').animate({
width: "100%"
}, 300 );
$(elem).parent().parent().parent().children('.deletecell').addClass('macdeleted');
}
});
}
Which visually works as expected, except that I am aware that I should not be manipulating the DOM in the controller; I have been unsuccessfully trying to integrate this into a directive, but because every row is independent of the others I have not been able to achieve the desired effect.
Daniel,
There is nothing wrong with manipulating DOM in the controller. However, I can suggest an easier way to do it than to navigate with those nasty parent().parent().parent().parent().parent() ... calls :) .
Just add an ng-show to the toggledelete div, than just do $scope.portDeleted = false in your controller. This also works for the .cellbody tags.
As for the .deletecell class you can use ng-class, and just do $scope.deletecell = some_value.
<div ng-class="{deletecell:deletecell}">
<span class="toggledelete" ng-click="deleteport($event, key, 4)">
<i class="icon-minus negativehover"></i>
</span>
<span class="toggledelete" style="display:none">
<span>PORT DELETED</span>
<span class="deletedportundo" ng-click="restoreport($event, $index, 4)">
UNDO
</span>
</span>
</div>
For animate, you can use ngAnimate (http://www.nganimate.org/)