I am trying to change the position of the legends to the bottom of piechart [which is top by default]. In normal nvd3.js without angular-nvd3, it's suggested to use:
d3.select(".nv-legendWrap")
.attr("transform", "translate(100,100)");
Is it possible to do this in angular-nvd3 or is there another option?
Override the CSS with your custom attributes:
.your-div-class .nv-series:nth-child(1){ transform: translate(0, 0); }
.your-div-class .nv-series:nth-child(2){ transform: translate(0, 20px); }
.your-div-class .nv-series:nth-child(3){ transform: translate(0, 40px); }
.your-div-class .nv-series:nth-child(4){ transform: translate(0, 60px); }
.your-div-class .nv-series:nth-child(5){ transform: translate(0, 80px); }
.your-div-class .nv-series:nth-child(6){ transform: translate(0, 100px); }
.your-div-class .nv-series:nth-child(7){ transform: translate(0, 120px); }
.your-div-class .nv-legend{ transform: translate(180px, 150px); }
.your-div-class .nv-legendWrap{ transform: translate(-80px, 70px); }
your-div-class refers to the class applied to the div container which contains your chart directive. Change the translate(0, 0) property with your (x, y) pixel values.
Related
I have a client who wants this exact keyframes animation to be migrated from their old website, except we want it to infinitely loop. I know that I can create a brand new slideshow from a JS array, but I was wondering if a preprocessor like Sass would enable me to just loop this thing the way it is. I appreciate any input.
#keyframes slidySlidesFadeInOut {
0% {
opacity:1;
}
8% {
opacity:1;
}
25% {
opacity:0;
}
92% {
opacity:0;
}
100% {
opacity:1;
}
}
#slidySlides {
position:relative;
height:301px;
width:318px;
margin:0 auto;
}
#slidySlides img {
position:absolute;
animation-name: slidySlidesFadeInOut;
animation-timing-function: ease-in-out;
animation-iteration-count: 1;
animation-duration: 180s;
}
#slidySlides img:nth-of-type(1) {
animation-delay: 150s;
}
#slidySlides img:nth-of-type(2) {
animation-delay: 120s;
}
#slidySlides img:nth-of-type(3) {
animation-delay: 90s;
}
#slidySlides img:nth-of-type(4) {
animation-delay: 50s;
}
#slidySlides img:nth-of-type(5) {
animation-delay: 15s;
}
#slidySlides img:nth-of-type(6) {
animation-delay: 0;
}
If you just want the animation to loop add this to style:
animation-iteration-count:infinite;
Or replace the animation name with:
animation: slidySlidesFadeInOut 180s infinite;
And this does not require SASS, although it is completely valid in SASS.
I am new to web development Trying to create a sliding page in angular ng-view but its not working as expected when the page two is entering its displaying below the page one till page one is available.please see the code here.
.slide.ng-enter{
transition-duration: 500ms;
transform: translateX(100%);
}
.slide.ng-enter-active{
transform: translateX(0%);
}
.slide.ng-leave{
transition-duration: 500ms;
transform: translateX(0%);
}
.slide.ng-leave-active{
transform: translateX(-100%);
}
I also need to make the page one slide from left to right.Can someone help me on this
I have added position: absolute to .slide. If that is acceptable in the project you are working then the below solution works fine. Please check the updated plunker.
.slide {
top: 0;
position: absolute;
width: 100%;
}
https://plnkr.co/edit/qC0YS2Gj3ddiNvuhjKzV?p=preview
Here's a plunker of the phenomenon: http://plnkr.co/edit/xLfXyDcwKtHPM7Sdhygf?p=preview
Ignore the hideous layout; the problem is evident when you click "log in" - the FadeOutDown animation fires, the div dutifully proceeds towards the bottom of the page, but just as the animation ends it reappears briefly in its original position.
I'm very new to the whole webdev game, so I'm unsure if this problem is to do with ngAnimate, ui-router, or the way I'm using ng-enter/ng-leave in the CSS. I'd obviously like for the div to remain gone once it's faded out of view.
My approach is to trigger a transition via an ui-sref, then animate the transition with this kind of CSS
[ui-view].ng-leave #first-div {
animation: fadeOutDown 1s;
}
And so forth for the other divs. It technically works but has this weird artifact at the end of the animation period.
Any ideas? Thanks!
you can use that:
[ui-view].ng-enter, [ui-view].ng-leave {
position: absolute;
left: 0;
right: 0;
-webkit-transition:all .5s ease-in-out;
-moz-transition:all .5s ease-in-out;
-o-transition:all .5s ease-in-out;
transition:all .5s ease-in-out;
}
[ui-view].ng-enter {
opacity: 0;
-webkit-transform:scale3d(0.5, 0.5, 0.5);
-moz-transform:scale3d(0.5, 0.5, 0.5);
transform:scale3d(0.5, 0.5, 0.5);
}
[ui-view].ng-enter-active {
opacity: 1;
-webkit-transform:scale3d(1, 1, 1);
-moz-transform:scale3d(1, 1, 1);
transform:scale3d(1, 1, 1);
}
[ui-view].ng-leave {
opacity: 1;
/*padding-left: 0px;*/
-webkit-transform:translate3d(0, 0, 0);
-moz-transform:translate3d(0, 0, 0);
transform:translate3d(0, 0, 0);
}
[ui-view].ng-leave-active {
opacity: 0;
/*padding-left: 100px;*/
-webkit-transform:translate3d(100px, 0, 0);
-moz-transform:translate3d(100px, 0, 0);
transform:translate3d(100px, 0, 0);
}
http://plnkr.co/edit/i9wHL9dNbV55EKZr06dn?p=preview
You can just add.
Documentation: https://docs.angularjs.org/api/ngAnimate#css-based-animations
[ui-view].ng-leave-active {
opacity: 0;
}
I've been trying to get a sequence of two animations running but I'm getting really annoyed as I just can't make it work! I need to fade a div in and then slide it to the right. Fade in is easy using:
.fadein.ng-hide-remove {
animation: 0.8s appear;
display: block!important;
}
.fadein.ng-hide-remove.ng-hide-remove-active {
opacity:1;
}
#keyframes appear {
from {
opacity: 0;
}
to {
opacity: 1;
}
}
and
<div id="settings" ng-show="settingsPanel" class="fadein"></div>
and
$scope.showSettings = function(){
$scope.settingsPanel = true;
}
Settings looks like this:
#settings {
background:#353734;
position:fixed;
top:0;
bottom:0;
left:-280px;
width:500px;
z-index:100;
}
I've completed sliding too in a similar way but to get them to trigger one after the other is proving impossible for me. Could someone show me how to do this please?
How about using keyframes as follows:
#settings {
background:#353734;
position:fixed;
top:25px;
bottom:0;
left:0px;
width:200px;
z-index:100;
}
.fadein.ng-hide-remove {
animation: 2.8s appear;
display: block!important;
}
#keyframes appear {
0% {
left: -100px;
opacity: 0;
}
50% {
left: -100px;
opacity: 1;
}
100% {
left: 0;
opacity: 1;
}
}
See working fiddle here:
http://jsfiddle.net/HB7LU/20650/
Why not set keyframes up for animations and simply set different stages for each animation. Bit like this
#keyframes slide-right {
0% {
left: -450px;
}
100% {
left: 0;
}
}
I am new to AngularJS, I made donut pie chart using NDV3 and just want to move the legend to the right side but I can't get it working.
Now I tried to move legend to the right side of the donut pie chart by using legendposition, but it is not working. Can anyone guide me on how to do this?thanks
Here is my code: Plunker
NVD3 does not support the option to change the placement of the legend. You'll have to do it manually or modify the source. You can of course also modify the CSS for the nv-legendWrap and try positioning the legend.
I found a workaround, you can play with the positions in the CSS by overriding the default transform property. The first value is the X position and the second is the Y position.
.nv-series:nth-child(1){ transform: translate(0, 0); }
.nv-series:nth-child(2){ transform: translate(0, 20px); }
.nv-series:nth-child(3){ transform: translate(0, 40px); }
.nv-series:nth-child(4){ transform: translate(0, 60px); }
.nv-series:nth-child(5){ transform: translate(0, 80px); }
.nv-series:nth-child(6){ transform: translate(0, 100px); }
.nv-series:nth-child(7){ transform: translate(0, 120px); }
.nv-legend{ transform: translate(350px, 100px); }
Here is a preview in your Plunker