I have css animations working based on the ng-show directive in Angular.
I'm trying to add ng-if directives to help me reduce the number of DOM elements in my page by removing hidden parts of it.
<div class="some classes" ng-show="isActive()" ng-if="isActive()">
<div class="other elements">
...
</div>
</div>
The problem is that the ng-if removes the element before it gets the chance to disappear "nicely".
The animation is a rollingUp/Down sort of animation and the outer div has a variable height dependent on the content of the inner div. I tried moving the ng-if down, but the problem stays the same as the height suddenly becomes 0 once the ng-if is true.
What would be the (best) strategy to achieve this? My main goal is to reduce the number of elements without sacrificing the animations.
(I'm using angular 1.2.0)
Related
I am very new to CSS..
I would like to know if there is a way to dynamically position a div element based on the length of the previous div element.
Example:
<div id="A">
</div>
<div id="B">
</div>
<div id="C">
</div>
If these div elements were full width each and i want one to come after the other based on the length of the previous one without adjusting the length on the top property myself.
Is this possible or is there any top value that can be used?
Thank you so much.
As of now, there is no way that you can style a div (or any other element for that matter) dynamically on the basis of a previous element. But you have some options here -
either you can use Javascript to manage the styles of elements dynamically, or,
you can use CSS FlexBox Model or CSS Grid to position and change height/width of elements, which is highly recommended and super powerful for making any layout of your choice.
Here are some places which I used to learn flexbox -
freeCodeCamp flexbox tut
Brad Traversy flexbox crash course
Now for CSS grid-
Brad Traversy CSS Grid
freeCodeCamp CSS Grid
I am using ngInfiniteScroll to enable infinite scrolling on my website. In order to get it to work I have had to set the height of the outer div to a value as shown below. If I don't do this the Infinite Scroll feature is triggered
<div style="height: 1px">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
<a style="bottom-padding 7%" infinite-scroll="nextPosts()" infinite-scroll-distance="1" href ng-click="nextPosts()" class="show-more">No more posts to show </a>
</div>
However, setting the height:1px kind of screws up my css styling and I feel like it is technically cheating, especially since I have to do the bottom-padding on the
Does anybody know a way I can get the Infinite Scroll to not be triggered on all scrolling events without using the style="height: 1px
I have already looked at this post but it has not really helped. How do you keep parents of floated elements from collapsing?
Thanks!
http://binarymuse.github.io/ngInfiniteScroll/documentation.html
Typically, you will use the infiniteScroll directive on an element
that contains another element that uses ngRepeat to show a series of
elements based on an array (or object); the expression you pass in to
the infinite-scroll attribute will generally add additional elements
to the array, expanding the ngRepeat.
maybe you could try the base example:
<div infinite-scroll="nextPosts()">
<post post-item="item" feed-items="items.feed" feed-name="feedName" ng-repeat="item in items.feed"></post>
</div>
Hey thanks for checking out my question, I am trying to create headers in ng-grid with an ng repeat but horizontally. I am able to the ng-repeat working but the items are repeating vertically. Is it possible to make them horizontal?
Here is my template:
headerCellTemplate: '<div ng-repeat="day in dayInfo" ng-class="col.colIndex()" >{{day.dayId}}</div>'
These elements are repeating vertically because you are using div's, which are block-level elements. To solve this, you can change your template to use an inline element like span:
<span ng-repeat="day in dayInfo" ng-class="col.colIndex()" >{{day.dayId}}</span>
You could use either add a CSS rule that styles these div's as inline or inline-block, but using span's is probably easiest.
I have a group of elements that look like this:
<div class="col-md-12 col-sm-12 col-xs-12">
<div class="showcasePane" ng-class="state.current.name">
<div class="contentPane" ui-view></div>
</div>
</div>
When ng-class is not present on showcasePane then contentPane is animated as expected (with enter/leave animations), however when ng-class is present contentPane no longer animates and instead only showcasePane does (as in, it gets -active suffixes added to the adding/removing classes) -- even though I do not want it to.
How can I get contentPane to animate when ng-class is present on the parent div?
The answer was related to several issues the stable Angular version(1.2) had, moving to the latest(beta-7) has fixed my problems though I am not entirely sure what the true causes were.
I suspect they were related to these now fixes issues:
ngAnimate clobbers ngClass
ngClass with ngAnimate breaks existing css transitions
I've got this HTML. Flash# divs are for flash objects (swfobjects). There is a container div container2 which I want to place it over its content, like a curtain when flash objects are updated and rebuilt to prevent the user from clicking them.
//rest of html code
<div id="container2">
<div id="flash1"></div>
<div id="flash2"></div>
<div id="flash3"></div>
<div id="flash4"></div>
</div>
//rest of html code
I've tried an absolute positioned div over the flash divs to achieve this but this doesn't work with jQuery slidetoggle effect which I use in a previous div (it has a weird width behaviour that narrows the page) therefore I've decided to try this different approach, which also seems to be more efficient.
Any idea of how to achieve this? I'm open mainly to jQuery but also to strict Javascript or whatever.
Delete div when slide up.
Add div when slide down.
Good luck =)
For me you have to add another div inside the container and use it to overlay the flash objs. Leave the container in position:relative and overflow:hidden and use a div child to cover the content!
Marco
I eventually follow the workaround proposed by mkk. This is to completely delete any applied rule to the slid div and have just worked for me.
Simple but effective.