I would like to add some animations to my angularjs applications, and surfing on dribble I found this example:
Can someone point me to the right direction for achieving this effect ? Are there some libs doing the work or is it entirely artisanal ?
Notice the 2 animations, the one from the front yellow button expanding to the full area, and the back area sliding/fading away
I am giving you an example, you can change the effects to meet your needs!
var app = angular.module('myApp', ['ngAnimate', 'fmp-card']);
app.controller('MainCtrl', function($scope) {
$scope.leftBackText = 'Here you can insert anything you want, may be a page!';
$scope.rightBackText = "http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69";
});
.my-card{
display: inline-block;
}
.back-text{
padding-top: 60px;
padding-left: 10px;
padding-right: 10px;
}
#container{
width: 100%;
}
#card-1{
float: left;
}
#card-2{
float: left;
}
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<title>AngularJS Flip Card</title>
<link href="style.css" rel="stylesheet" />
<link href="https://rawgit.com/souly1/angular-flip-card/master/css/fmpCardDirective.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script data-require="angular.js#1.3.x" src="https://code.angularjs.org/1.3.6/angular.min.js" data-semver="1.3.6"></script>
<script data-require="angular-animate#*" data-semver="1.3.6" src="https://code.angularjs.org/1.3.6/angular-animate.min.js"></script>
<script src="https://rawgit.com/souly1/angular-flip-card/master/fmpCardDirective.js"></script>
<script src="app.js"></script>
</head>
<body ng-controller="MainCtrl">
<div id="container">
<fmp-card class="my-card" id="card-1" suffix="left" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Left Card" small-card-width="200px" small-card-height="200px">
<div class="back-text"><img src={{rightBackText}} /></div>
</fmp-card>
<fmp-card class="my-card" id="card-2" suffix="right" image="http://sstatic.net/stackexchange/img/logos/so/so-icon.png?v=41f6e13ade69" front-caption="Right Card" small-card-width="200px" small-card-height="200px">
<div class="back-text">{{leftBackText}}</div>
</fmp-card>
</div>
</body>
</html>
Related
I am automating a web page using Selenium Webdriver and Java ,am hit with the Polymer Web page which has shadowRoot elements in the Html. I am not able to reach the elements required.
I need to access the element with id="Contain" and id="callButton", I have tried to use the examples in the web which gave me an idea to access but i am not able to reach to the element. Can i get this automated with selenium is what i need to understand.
When i try to get the page source dynamically while automating elements below the shadow-root are not accessible.
The above snapshot is while i inspect the element. Dynamically if i take the page source i get the below html. In this i dont get any element after the first shadow-root
' <!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta http-equiv="Cache-Control" content="no-cache">
<meta http-equiv="Cache-Control" content="no-store">
<meta name="description" content="">
<meta name="viewport" content="width=device-width,initial-
scale=1,minimum-scale=0.5,maximum-scale=3,user-scalable=yes">
<base href="/">
<title>Title</title>
<!--logo Favicon - http://www.favicon-generator.org/-->
<link rel="shortcut icon" type="image/x-icon"
href="./assets/img/favicon/favicon.ico">
<link rel="apple-touch-icon" sizes="57x57"
href="./assets/img/favicon/apple-icon-57x57.png">
<link rel="apple-touch-icon" sizes="60x60"
href="./assets/img/favicon/apple-icon-60x60.png">
<link rel="apple-touch-icon" sizes="72x72"
href="./assets/img/favicon/apple-icon-72x72.png">
<link rel="apple-touch-icon" sizes="76x76"
href="./assets/img/favicon/apple-icon-76x76.png">
<link rel="apple-touch-icon" sizes="114x114"
href="./assets/img/favicon/apple-icon-114x114.png">
<link rel="apple-touch-icon" sizes="120x120"
href="./assets/img/favicon/apple-icon-120x120.png">
<link rel="apple-touch-icon" sizes="144x144"
href="./assets/img/favicon/apple-icon-144x144.png">
<link rel="apple-touch-icon" sizes="152x152"
href="./assets/img/favicon/apple-icon-152x152.png">
<link rel="apple-touch-icon" sizes="180x180"
href="./assets/img/favicon/apple-icon-180x180.png">
<link rel="icon" type="image/png" sizes="192x192"
href="./assets/img/favicon/android-icon-192x192.png">
<link rel="icon" type="image/png" sizes="32x32"
href="./assets/img/favicon/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="96x96"
href="./assets/img/favicon/favicon-96x96.png">
<link rel="icon" type="image/png" sizes="16x16"
href="./assets/img/favicon/favicon-16x16.png">
<link rel="manifest" href="./assets/img/favicon/manifest.json">
<meta name="msapplication-TileColor" content="#ffffff">
<meta name="msapplication-TileImage"
content="./assets/img/favicon/ms-icon-144x144.png">
<meta name="theme-color" content="#ffffff">
<!--End of Favicon section--><!-- Web Fonts -->
<link href="https://fonts.googleapis.com/css?
family=Roboto&subset=latin,latin-ext" rel="stylesheet"
type="text/css">
<link href="styles.6818abb062a6ae399f29.bundle.css"
rel="stylesheet"/>
</head>
<body>
<app-login>
<!--Inline style for loading screen--><style>body, html {
height: 100%;
background: #FAFAFA;
}
#keyframes spinner {
to {transform: rotate(360deg);}
}
.spinner:before {
content: '';
box-sizing: border-box;
position: absolute;
top: 50%;
left: 50%;
width: 100px;
height: 100px;
margin-top: -50px;
margin-left: -50px;
border-radius: 50%;
border: 1px solid #CDCDCD;
border-top-color: #0277BD;
animation: spinner .6s linear infinite;
}
.app-loading {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
height: 100%;
}
</style>
<div class="app-loading">
<div class="spinner">
</div>
</div>
</app-login>
<script type="text/javascript"
src="inline.318b50c57b4eba3d437b.bundle.js"></script>
<script type="text/javascript"
src="polyfills.9a4f082a49343f8da8e1.bundle.js"></script>
<script type="text/javascript"
src="scripts.ccb2e44daa4fd4db3422.bundle.js"></script>
<script type="text/javascript"
src="main.aacb992b6c008772ed3d.bundle.js"></script>
</body>
</html>`
I have used a combination of Java script and XPaths to get the :
First element before the shadow-root by tagname
// Here i am using the getElementsByTagname to get tag which gets all the elements under the tag which is just before the second shadow-root.
' WebElement ironPages = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.getElementsByTagName('iron-pages')[0]",
edgeCallControl); '
once i get the above , i am able to access every element by "id" of each of the element as per the HTml
Get the button button , where the Button is the ID.
` WebElement button = (WebElement) jse.executeScript("return
arguments[0].shadowRoot.querySelector('#Button')",
edgeManualDial);'
this ideas i got from the "Shadow-dom support for selenium"
I have simple scenario but still, doesn't work..:
index.html
<!DOCTYPE html>
<html lang="en" ng-app="myapp">
<head>
<meta charset="utf-8">
<title>app</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<!-- Custom-->
<link rel="stylesheet" href="/css/style.css">
<script type="text/javascript" src="/js/lodash.js"></script>
<script type="text/javascript" src="/js/angular.js"></script>
<script type="text/javascript" src="/js/angular-simple-logger.js"></script>
<script type="text/javascript" src="/js/angular-google-maps.js"></script>
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
<script type="text/javascript" src="/js/app/app.js"></script>
<!-- Controllers -->
<script type="text/javascript" src="/js/app/controllers/MainController.js"></script>
</head>
<body ng-controller="MainController">
<ui-gmap-google-map center='map.center' zoom='map.zoom'></ui-gmap-google-map>
</body>
</html>
app.js
var myapp = angular.module('myapp', ['uiGmapgoogle-maps']);
myapp.config(function (uiGmapGoogleMapApiProvider) {
uiGmapGoogleMapApiProvider.configure({
key: 'MY_API_KEY',
// v: '3.28',
libraries: 'weather,geometry,visualization'
});
});
MainController.js
myapp.controller("MainController",function ($scope,uiGmapGoogleMapApi) {
uiGmapGoogleMapApi.then(function (maps) {
$scope.maps = maps;
$scope.map = { center: { latitude: 45, longitude: -73 }, zoom: 10 };
});
});
style.css
ui-gmap-google-map{
border: 1px dashed darkred;
width: 500px;
height: 300px;
display: inline-block;
}
.angular-google-map-container {
width: 400px;
height: 400px;
}
No errors in the console. The css is applying ok, the promise in the controller is working ok but no map is displayed.
The fact that the DOM is staying like that is bothering me :
<ui-gmap-google-map center="map.center" zoom="map.zoom"></ui-gmap-google-map>
because on the example site I saw that angular is changing it like that :
<ui-gmap-google-map center="map.center" zoom="map.zoom" class="ng-isolate-scope"><div class="angular-google-map"><div class="angular-google-map-container">
</div><div ng-transclude="" style="display: none"></div></div></ui-gmap-google-map>
(or something like that)
Any idea what am I doing wrong ?
Since your map is loading inside a promise, try using ng-if to render it conditionally (as specified here):
<ui-gmap-google-map ng-if='map.center'
center='map.center'
zoom='map.zoom'>
</ui-gmap-google-map>
Working demo here.
I found what is the problem, its because I have also included
<script type="text/javascript" src="/js/angular-google-maps-street-view.js"></script>
After removing it, everything starts working normal.
I tried adding angular-carousel in my application and I am getting this error
Failed to instantiate module ngMaterial due to:
Error: [$injector:modulerr] http://errors.angularjs.org/1.5.8/$injector/modulerr?p0=n...)
at Error (native)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:6:412
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:40:222
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355)
at g (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:319)
at https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:39:488
at q (https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js:7:355
I got this error only after adding ngMaterial in my application with carousel. I am using latest stable version 1.5.8 of angularjs. This is my code I tried until now,
<!DOCTYPE html>
<html ng-app="DemoApp">
<head>
<meta charset="UTF-8">
<title>angular-carousel demo</title>
<meta name="viewport" content="width=620, user-scalable=no">
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:400,700' rel='stylesheet' type='text/css'>
<link rel="stylesheet" type="text/css" href="css/angular-material.min.css">
<link href='css/angular-carousel.min.css' rel='stylesheet' type='text/css'>
</head>
<body ng-controller="DemoCtrl">
<style type="text/css">
.selected
{
background-color: red;
}
.demo
{
height: 500px;
width: 100%;
}
.carousel5
{
height: 500px !important;
width: 100% !important;
}
</style>
<div class="demo" >
<ul rn-carousel rn-carousel-index="carouselIndex6" rn-carousel-deep-watch rn-carousel-buffered class="carousel5">
<li><div style="height:500px;width:100%;background-color:blue;"></div></li>
<li><div style="height:500px;width:100%;background-color:cyan;"></div></li>
<li><div style="height:500px;width:100%;background-color:grey;"></div></li>
<li><div style="height:500px;width:100%;background-color:yellow;"></div></li>
</ul>
</div>
</div>
</div>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<script src="https://code.angularjs.org/1.5.8/angular-touch.js"></script>
<script src="js/angular-carousel.min.js"></script>
<script src="js/angular-material.min.js"></script>
<script>
angular.module('DemoApp', [
'ngMaterial','angular-carousel'
]).controller('DemoCtrl', function($scope) {});
</script>
</html>
Am I wrong by someway?. Can someone please help me?
First Include All Dependencies
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.15/angular-aria.js"></script>
Than include Angular Material JS file
<script src="https://gitcdn.link/repo/angular/bower-material/master/angular-material.js"></script>
Looks like to don't include the ngMaterial js files
This is my HTML code :
<!DOCTYPE html>
<html ng-app="starter">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
<title>Ionic List Directive</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="cordova.js"></script>
<script src="js/app.js"></script>
<script src="js/jsonCntrl.js"></script>
</head>
<body ng-controller="myCntrl">
<ion-header-bar class="bar-positive">
<h1 class="title">Items List</h1>
</ion-header-bar>
<ion-content>
<ion-list >
<ion-item ng-repeat="item in myData">
{{ item.Name }}
</ion-item>
</ion-list>
</ion-content>
</body>
</html>
This is my Controller Code :
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http.get("http://www.w3schools.com/angular/customers.php").then(function(response){
$scope.myData = response.data.records;
});
});
I am not getting a list view instead something like this
List response Link
But when i use the same code to populate data from an array its working fine.
Try this:
angular.module('starter', []).controller('myCntrl', function($scope,$http) {
$http
.get("http://www.w3schools.com/angular/customers.php")
.then(function(response) {
$scope.myData = angular.fromJson(response.data.records);
});
});
Use the same code you have and check the styles of .item class in ionic.css file with the line of 5646 else override that class with below style
border-color: #ddd;
background-color: #fff;
color: #444;
position: relative;
z-index: 2;
display: block;
margin: -1px;
padding: 16px;
border-width: 1px;
border-style: solid;
font-size: 16px;
I have done a program which does autocomplete using angucomplete statement.but iam unable to get when i enter any key it does not displaying it with scrollbar whne number of matches are done.CAn anyone help me to solve this
//Html file
<!DOCTYPE html>
<html ng-app="myapp">
<head>
<meta charset="UTF-8">
<title>Autocomplete using remote searching</title>
<script src="angularfiles/angular.min.js"></script>
<script src="angularfiles/angular-animate.js"></script>
<script src="angularfiles/ui-bootstrap-tpls-0.13.4.js"></script>
<link href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.3.1/css/bootstrap-combined.min.css" rel="stylesheet">
<script src="Jsfiles/autourl.js"></script>
<script src="angularfiles/angucomplete-alt.js"></script>
<link rel="stylesheet" href="angularfiles/style.css" />
<link rel="stylesheet" href="angularfiles/angucomplete-alt.css" />
<link rel="stylesheet" href="angularfiles/bariol.css" />
</head>
<body ng-controller="controller">
<angucomplete-alt id="members" pause="400" placeholder="Type to start"
selected-object="testObj" maxlength="40"
remote-url="http://maps.googleapis.com/maps/api/geocode/json?sensor=false&address="
remote-url-data-field="results"
title-field="formatted_address"
minlength="1"
discription-field="status"
/>
</body>
</html>
//JSfile
var app=angular.module("myapp",['ui.bootstrap','angucomplete-alt']);
app.controller("controller",function(){
});
To show scrollbar, you need to set the following css style to angucomplete-dropdown class, and then the directive automatically picks it up.
.angucomplete-dropdown {
overflow-y: auto;
max-height: 200px; // your preference
}
See example #1
For more Info: https://github.com/ghiden/angucomplete-alt