AngularJS fade-in div element when requirement is met with ng-show - javascript

I would like this fade class div to show on the page with a slow fade-in effect when the ng-show requirement has been met. In jQuery I could do this in a jiffy but it's proving difficult in Angular due to lack of working examples. Here is the working code:
Here is the index.html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<link data-require="bootstrap-css#3.1.1" data-semver="3.1.1" rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css" />
<script data-require="jquery#*" data-semver="2.1.1" src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script data-require="angular.js#*" data-semver="1.3.0-beta.5" src="https://code.angularjs.org/1.3.0-beta.5/angular.js"></script>
<script data-require="bootstrap#*" data-semver="3.1.1" src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="style.css" />
<script src="script.js"></script>
</head>
<body ng-controller="mainCtrl" class="container" style="padding-top:30px">
<user-info-card></user-info-card>
</body>
</html>
Here is the script.js:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope) {
$scope.user = {
name: 'Luke Skywalker',
address: {
street: 'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends: [
'Han',
'Leia',
'Chewbacca'
],
rank: 'scout',
score: 27
}
});
angular.module('app').directive('userInfoCard', function() {
return {
templateUrl: "userInfoCard.html",
restrict: "E",
controller: function($scope) {
$scope.knightMe = function(user) {
if (user.score > 25) {
user.rank = 'miner';
}
}
}
}
})
Here is the template file userInfoCard.html loaded by the directive:
<div class="panel panel-primary">
<div class="panel-heading">{{user.name}}</div>
<div class="panel-body">
<div ng-show='!!user.address'>
<h4>Address:</h4>
{{user.address.street}} <br />
{{user.address.city}}<br />
{{user.address.planet}}
</div> <br />
<h4>Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div>
Rank: {{user.rank}}
</div><br>
<div ng-show="user.score >= 25" ng-class="ng-show" class="fade">
<span>Congratulations, you have the ranked up! Click the button below to claim your new rank now.</span><br />
<button class="btn btn-success" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
</div>
And last but not least, the style.css:
.fade.ng-hide {
opacity: 0;
}
.fade.ng-show {
transition: 0.5s linear all;
opacity: 1;
}
So in a nutshell, when the user score is more than 25, which it is in this case, I would like that fade class div to load in a gentle fade-in fashion. It's loading now fine but I'm not sure how to add the effect. Thanks for your time.

In order to animate ngShow/Hide elements you first need to include ngAnimate module:
angular.module('app', ['ngAnimate']);
Then all you need just a few little CSS rules:
.fade {
opacity: 1;
}
.fade.ng-hide {
opacity: 0;
}
.fade.ng-hide-remove {
transition: all .5s linear;
display: block !important;
}
Demo: http://plnkr.co/edit/qHcMEL2Da5Fome7nUenf?p=info

You can do it by the following step:
Step1: First add the library/package of angular-animate.js
Step2: Then include the library in the module angular.module('app', ['ngAnimate']);
Step3 You can manipulate the UI like angular.element(element).fadeIn(1000, doneFn);
Check the documentation for Reference :https://docs.angularjs.org/api/ngAnimate

you are missing angular.module('app', ['ngAnimate']); otherwise animations wont work.
You may also wantto add Angular Animate

Related

Tizen TAU - Trying to add "More Options" but giving TypeError

I'm a absolute beginner to Tizen. I want to make a little app. For this app, I want to add "More Options". It's not working and I really don't know. I followed each step in the documentation (I also followed this: https://developer.tizen.org/ko/development/guides/web-application/user-interface/tizen-advanced-ui/applications-circular-ui/implementing-more-options) but this didn't help me either. Here's my code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width,user-scalable=no">
<title>List</title>
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.min.css">
<link rel="stylesheet" href="lib/tau/wearable/theme/default/tau.circle.min.css">
<link rel="stylesheet" href="css/more_options.css">
</head>
<body>
<div id="moreoptionsPage" class="ui-page">
<header class="ui-header ui-has-more">
<h2 class="ui-title">Einkaufsliste</h2>
<button type="button" class="ui-more ui-icon-overflow">More Options</button>
</header>
<div class="ui-content">
<ul class="shopping_list ul-listview">
</ul>
</div>
<!--Rectangular profile-->
<div id="moreoptionsPopup" class="ui-popup" data-transition="slideup">
<div class="ui-popup-header">Options</div>
<div class="ui-popup-content">
<ul class="ui-listview">
<li>Hinzufügen</li>
<li>Entfernen</li>
</ul>
</div>
</div>
<!--Circular profile-->
<div id="moreoptionsDrawer" class="ui-drawer" data-drawer-target="#moreoptionsPage" data-position="right" data-enable="true" data-drag-edge="1">
<div id="selector" class="ui-selector">
<div class="ui-item add-icon" data-title="Hinzufügen"></div>
<div class="ui-item remove-icon" data-title="Entfernen"></div>
</div>
</div>
</div>
</body>
<script src="lib/tau/wearable/js/tau.min.js"></script>
<script src="js/circle-helper.js"></script>
<script src="js/app.js"></script>
<script src="js/lowBatteryCheck.js"></script>
<script src="js/more_options.js"></script>
</html>
here's my more_options.js:
(function() {
var page = document.querySelector('#moreoptionsPage'),
popup = page.querySelector('#moreoptionsPopup'),
handler = page.querySelector('.ui-more'),
drawer = page.querySelector('#moreoptionsDrawer'),
selector = page.querySelector('#selector'),
helper,
clickHandlerBound;
function clickHandler(event) {
alert("calling");
if (tau.support.shape.circle) {
tau.openPopup(popupCircle);
} else {
tau.openPopup(popup);
}
}
page.addEventListener('pagebeforeshow', function() {
if (tau.support.shape.circle) {
helper = tau.helper.DrawerMoreStyle.create(drawer, {
handler: '.drawer-handler'
});
} else {
/* Shape is square */
clickHandlerBound = clickHandler.bind(null);
handler.addEventListener('click', clickHandlerBound);
}
});
page.addEventListener('pagebeforehide', function() {
if (tau.support.shape.circle) {
handler.removeEventListener('click', clickHandlerBound);
helper.destroy();
}
});
})();
and here's my more_options.css:
#moreoptionsDrawer {
display: none;
}
#media all and (-tizen-geometric-shape: circle) {
#moreoptionsDrawer {
display: block;
background-color: rgba(255, 255, 255, 0.1);
border-radius: 100%;
}
#moreoptionsPopup {
display: none;
}
}
I get errors when using tau.helper.DrawerMoreStyle.create and in the examples on Github it is not used at all. Check it out:
https://github.com/Samsung/TAU/tree/tau_1.2/examples/wearable/UIComponents/contents/assistviews

comment is not showing after entering some text

When I try to run, it not show my comment after I enter some text in comment box. Why? Also my another problem is the log show
ReferenceError: angular is not defined".
But I already place <script src="js/angular.min.js"></script> link to my js folder. What is wrong with my coding? I create app using ionic cordova and try to make comment that have upvote and downvote. Here the coding:
Script
angular.module('starter', ['ionic'])
.run(function($ionicPlatform) {
$ionicPlatform.ready(function() {
if (window.cordova && window.cordova.plugins.Keyboard) {
cordova.plugins.Keyboard.hideKeyboardAccessoryBar(true);
cordova.plugins.Keyboard.disableScroll(true);
}
if (window.StatusBar) {
StatusBar.styleDefault();
}
});
})
Vue.component('post', {
template: "#post-template",
props: ['post'],
data: function() {
return {
upvoted: false,
downvoted: false
};
},
methods: {
upvote: function() {
this.upvoted = !this.upvoted;
this.downvoted = false;
},
downvote: function() {
this.downvoted = !this.downvoted;
this.upvoted = false;
}
},
computed: {
votes: function() {
if (this.upvoted) {
return this.post.votes + 1;
} else if (this.downvoted) {
return this.post.votes - 1;
} else {
return this.post.votes;
}
}
}
});
var vm = new Vue({
el: "#app",
data: {
comments: [{}],
comment: ""
},
methods: {
postComment: function() {
this.comments.push({
title: this.comment,
votes: 0
})
this.comment = "";
}
}
});
CSS
a {
padding-left: 5px;
}
.disabled {
color: orange;
}
/* some simple transitions to make the upvote and downvote
buttons fade in as a visual cue for the user */
.glyphicon {
opacity: 1;
transition: opacity .25s ease-in-out;
-moz-transition: opacity .25s ease-in-out;
-webkit-transition: opacity .25s ease-in-out;
}
.glyphicon:hover {
opacity: 0.75;
cursor: pointer;
}
HTML
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title></title>
<link rel="manifest" href="manifest.json">
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/bootstrap.min.css" rel="stylesheet">
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css-->
<!-- ionic/angularjs js -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<!-- cordova script (this will be a 404 during development) -->
<script src="cordova.js"></script>
<!-- your app's js -->
<script src="js/app.js"></script>
<!--https://code.jquery.com/jquery-2.2.0.js-->
<script src="js/jquery-1.11.0.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<!--https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js-->
<!--https://cdn.jsdelivr.net/vue/1.0.16/vue.js-->
<script src="js/vue.js"></script>
<script src="js/angular.min.js"></script>
</head>
<body ng-app="starter">
<ion-pane>
<ion-header-bar class="bar-stable">
<h1 class="title">Ionic Blank Starter</h1>
</ion-header-bar>
<ion-content>
<div id="app">
<div class="container-fluid">
<ul class="list-group">
<post v-for="comment in comments" :post="comment"></post>
</ul>
<div id="comment-box">
<div class="input-group">
<input type="text" class="form-control" placeholder="Enter a comment..." v-model="comment" #keyup.enter="postComment">
<span class="input-group-btn">
<button class="btn btn-primary" type="button" #click="postComment">Submit</button>
</span>
</div>
</div>
</div>
</div>
<template id="post-template">
<li class="list-group-item">
<i class="glyphicon glyphicon-chevron-up" #click="upvote" :class="{disabled: upvoted}"></i>
<span class="label label-primary">{{ votes }}</span>
<i class="glyphicon glyphicon-chevron-down" #click="downvote" :class="{disabled: downvoted}"></i>
<a>{{ post.title }}</a>
</li>
</template>
</ion-content>
</ion-pane>
</body>
</html>

Unable to implement angular-intro.js on angular-material app

I am unable to use angular-intro.js on my angular-material app. I have tried to implement it outside my app on a simplified plunker and still have not had positive results. Can anyone point out to me what I am doing wrong ??
http://plnkr.co/edit/T94BixuBl7NBBKe2UUyN?p=preview
I have yet to find an example of someone implementing this on an angular-material app, I have only seen it on an angular-js app. Below is my view. In both my app and the plunker CallMe() never seems to be called.
<html>
<head>
<link href="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.css" rel="stylesheet" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2" />
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.0-rc2/angular-material.min.js" data-require="angular-material#1.1.0-rc2" data-semver="1.1.0-rc2"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.min.js" data-require="angularjs#1.5.3" data-semver="1.5.3"></script>
<script src="https://code.angularjs.org/1.5.3/angular-animate.js" data-require="angular-animate#1.5.3" data-semver="1.5.3"></script>
<script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.min.js" data-require="angular-aria#1.5.3" data-semver="1.5.3"></script>
<script src="https://github.com/itzgAndEnenbee" data-require="angular-messages#1.5.3" data-semver="1.5.3"></script>
<link href="style.css" rel="stylesheet" />
<link href="introjs.css" rel="stylesheet" />
<script type="text/javascript" src="intro.js"></script>
<script type="text/javascript" src="angular-intro.js"></script>
<script type="text/javascript" src="script.js"></script>
</head>
<body layout="column" layout-fill ng-app="YourApp" ng-controller="DemoCtrl">
<div ng-intro-options="IntroOptions" ng-intro-method="CallMe">
<md-toolbar class="top">
<div class="md-toolbar-tools">
<button class="btn btn-large btn-success" ng-click="CallMe();">Demo</button>
</div>
</md-toolbar>
<md-content class="md-padding" flex>
<div class="step0" layout-xs="column" layout="row">
<p>Testing</p>
</div>
</md-content>
<md-toolbar class="bottom">
<div class="md-toolbar-tools">
<button class="step2 btn btn-large btn-success">Button 1</button>
</div>
</md-toolbar>
<div id="step1" layout-xs="column" layout="row">
<button class="btn btn-large btn-success">Button 2</button>
</div>
</div>
</body>
</html>
My DemoCtrl is below:
angular
.module('YourApp', ['ngMaterial', 'angular-intro'])
.config(function($mdThemingProvider){
$mdThemingProvider.theme('default')
.primaryPalette('blue')
.dark();
})
.controller('DemoCtrl', function ($scope) {
$scope.IntroOptions = {
steps:[
{
element: document.querySelector('.step0'),
intro: 'Testing',
position: 'right'
},
{
element: '#step1',
intro: 'Testing',
position: 'bottom'
},
{
element: '.step2',
intro: 'Testing 2',
position: 'right'
}],
showStepNumbers: false,
exitOnOverlayClick: true,
exitOnEsc: true,
nextLabel: '<strong>NEXT!</strong>',
prevLabel: '<span style="color:green">Previous</span>',
skipLabel: 'Exit',
doneLabel: 'Thanks'
};
$scope.ShouldAutoStart = false;
});
EDIT: So I have been able to fix this in my application by moving the ng-intro-options and ng-intro-method attributes from the same element where the ng-controller attribute was defined. I got this idea from here. This fix did not fix my plunker example, though. And also I am now having an issue in my app where intro.js makes a md-toolbar disappear from view when the overlay is active.
It looks like one or more AngularJS/AngularMaterial files you are loading is causing a problem:
I replaced the files you load with those used by the AM demos
<link rel="stylesheet" href="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.css" />
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-animate.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-aria.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.5/angular-messages.min.js"></script>
<script src="https://cdn.gitcdn.link/cdn/angular/bower-material/v1.1.0-rc.5/angular-material.js"></script>
and it seems to work - Plunker
Note: rel="stylesheet" should be added to any link tag otherwise the style is not processed.

css, html, angularjs or jade issue?

I am having issue getting my css to display. I think its because I applied the html through a directive.
here is my js file:
angular.module('app', []);
angular.module('app').controller('mainCtrl', function($scope){
$scope.user = {
name:'Chelsey',
address:{
street:'PO Box 123',
city: 'Secret Rebel Base',
planet: 'Yavin 4'
},
friends:[
'Hans',
'chewbacca',
'Leia'
]
}
});
angular.module('app').directive('userInfoCard', function(){
return {
templateUrl:"userInfoCard.html",
restrict:"E",
controller: function($scope){
$scope.knightMe=function(user){
user.rank="knight";
};
}
}
});
my root html:
<!DOCTYPE html>
<html ng-app="app">
<head>
<scriptsrc="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.6/angular.js"> </script>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="http://maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel ="stylesheet" href="style.jade" type="text/css/">
<script src= "app.js"></script>
</head>
<body ng-controller = "mainCtrl" class="container" style ="padding-top:30px">
<h1>Hello World!</h1>
**<user-info-card></user-info-card>**
</body>
</html>
The html that I want the css applied too (user-info-card.html):
<div class="panel panel-Primary">
**<div class="panel-heading">{{user.name}}</div>**
<div class="panel-body">
<div ng-show = 'user.address'>
<h4>Address: </h4>
{{user.address.street}}<br />
{{user.address.city}}<br />
{{user.address.planet}}
</div><br />
<h4> Friends:</h4>
<ul>
<li ng-repeat='friend in user.friends'>
{{friend}}
</li>
</ul>
<div ng-show ="user.rank">
Rank: {{user.rank}}
</div>
<button ng-show="!user.rank" class="btn btn-sucess" ng-click="knightMe(user)">Knight Me</button>
</div>
</div>
and my css in jade:
style.
.panel-heading {
text-decoration-color: blue;
}
I am just trying to get my css to display {{user.name}} in blue right now but it keeps saying that the class is never used. I am a little new to this so anything would be helpful.
text-decoration-color is for the color of the underline. You might want to use color instead.
Also, please note that text-decoration-color has, as of now, poor browser support. See browser support on caniuse
EDIT: Jade is a templating engine for html documents, not for css stylesheets. So in your root html, include the stylesheet as the following :
<link rel="stylesheet" href="style.css" type="text/css">
and in style.css :
.panel-heading {
color: blue;
}

Angularjs with ngAnimate all images display when only one has the active class

I have been experimenting with ngAnimate and have created a web-site that has an animation similar to the one for the phonecat tutorial. The web-site is shown here. The way it is supposed to work is that there are 5 thumbnails of animals. Below the thumbnails one image should show which is the first image. When any of the other thumbnails are clicked on a new image slides up into place and fades in and the old image slides up and fades out. What is happening though is all the images are showing when the web-site first loads. I can't understand why this is as only one image has the active class and should be the only one showing. However if all the other images are clicked on the web-site works the way it should and only one image shows at a time.
Below is the code.
Index.html
<!doctype html>
<html lang="en" ng-app="myApp">
<head>
<meta charset="UTF-8">
<title>Images Project</title>
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap-theme.min.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="//netdna.bootstrapcdn.com/bootstrap/3.1.1/js/bootstrap.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.2.16/angular.js"></script>
<script src="angular-animate.js"></script>
<script src="angular-resource.js"></script>
<script src="angular-route.js"></script>
<script src="myapp.js"></script>
<script src= "controllers.js"></script>
</head>
<body>
<div class="view-container"
<div ng-view class="view-frame"></div>
</body>
</body>
</html>
display-images.html
<div class="container">
<div class="row">
<div ng-repeat="image in images" class="col-sm-4 col-md-2">
<div href="#" class="thumbnail">
<img ng-src="{{ image.image }}"
ng-click="setImage(image.image)"
alt="{{ image.alt }}">
</div>
</div>
</div>
<hr>
<div ng-repeat="image in images">
<img ng-src="{{ image.image }}"
class="photos"
ng-class="{active: mainImageUrl==image.image}">
</div>
</div> <!-- /container -->
myApp.js
angular.module('myApp', ['ngAnimate', 'ngRoute', 'displayControllers'])
.config(['$routeProvider',
function($routeProvider) {
$routeProvider.
when('/', {
templateUrl: 'display-images.html',
controller: 'DisplayImagesCtrl'
}).
otherwise({
redirectTo: '/'
});
}])
.animation('.photos', function() {
var animateUp = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 1500,
display: 'block'
});
jQuery(element).animate({
top: 300
}, done);
return function(cancel) {
if (cancel) {
element.stop();
}
};
}
var animateDown = function(element, className, done) {
if(className != 'active') {
return;
}
element.css({
position: 'absolute',
top: 300
});
jQuery(element).animate({
top: -1500
}, done);
return function(cancel) {
if(cancel) {
element.stop();
}
};
}
return {
addClass: animateUp,
removeClass: animateDown
};
})
.factory('DisplayImagesService',
function() {
return {
imageObj: function() {
images = [
{ image: 'images/animal1.jpg', alt: 'Picture of two sheep'},
{ image: 'images/animal2.jpg', alt: 'Picture of a dog'},
{ image: 'images/animal3.jpg', alt: 'Picture of a gorilla'},
{ image: 'images/animal4.jpg', alt: 'Picture of a bull'},
{ image: 'images/animal5.jpg', alt: 'Picture of a horse'}
];
return images;
}
}
});
controller.js
var displayControllers = angular.module('displayControllers', []);
displayControllers.controller('DisplayImagesCtrl', ['$scope','DisplayImagesService',
function($scope, DisplayImagesService) {
$scope.images = DisplayImagesService.imageObj();
$scope.setImage = function(imageUrl) {
$scope.mainImageUrl = imageUrl;
}
$scope.mainImageUrl = 'images/animal1.jpg';
}]);
I could not find a way to fix this problem it seems that in the phonecat tutorial they compensated for it with css in the following way:
They limited the height of the display area.
The set the overflow to hidden.
The background colour of the images is white the same as the background colour of the web page.
I found if I placed my images on a white background using the gimp and limited the height of the display area and set overflow to hidden I could get a result that looks resonable.

Categories