I know about IE7's bug regarding z-index and how you can add a higher z-index to the parent of the element that you want to appear above its parent's siblings. But I have several list items of the same classname (each list item and its children have the same DOM structure), and each LI has a child element that must appear above the next list item in the DOM. For reasons I won't go into, I cannot place an unique classname or ID on each LI.
In IE7 the popdown is below the next LI. Any ideas given that I can't target the parent LI with a higher z-index? Thanks.
Example screenshot here: http://tinypic.com/r/2m5ud/6
Related
For some reason, I have to implement a global Tooltip. Basically we have a global Tooltip component on a high level in react tree and whenever someone hovers overe certain elements the tooltip with the content of the hovered element shows up.
I do that from a Wrapper Component for the item where I need the tooltip, with the use of context. I even tried to provide 2 contexts, one for coordinates and content (of the tooltip/element) and one for setCoordinates and setContent. The values will be used in the tooltip itself and the setters in the Wrapper Component. I do this in order to avoid updates on all consumers of a context, but
Problem is, currently we are talking about a table with a list of items. Each item is wrapped with that Wrapper Component, therefore is connected to context (that provides only setCoordinates and setContent. Is there a way to stop all the elements in the list update when I interact only with one? Setting the Tooltip is trigger on hover, but when I hover over one element, I see all the others in dev tools updating.
TL;DR
Context is consumed by each element of an array. When hovering over one element I set the data in the Context with that element's content, it updates, but all it's brothers (items in the array which also consumes the Context) render again once. How can I stop them from doing that?
I am removing an element in ng-repeat using javascript splice method ..elements of my ng-repeat are in two rows not in list styles ...now i need to apply a animation on the rest of element(not on the element being removed. when rest of element re adjust them..according to their position ...mainly i need to show the animation when they move from one place to another .
This forked Plunker shows two ng-repeats each displaying an array as a list. Each list item uses a custom directive to animate whenever an up or down arrow is clicked.
The first list, which records changes to array item values animates correctly but the second, which records changes to array item indexes does not.
Can anybody suggest how to edit the directive to animate the second list correctly?
The way you move the elements triggers incorrect animation. Try to do it like this
function arrayMove(arrayVar, from, to) {
var item = arrayVar.splice(from, 1).pop();
arrayVar.splice(to, 0, angular.copy(item));
}
You need to make a (deep) copy of the element to preserve some properties like $$hashkey used by AngularJS to track the objects.
Plunker
This plunker shows an array displayed as a list using ng-repeat
Each array item has an up and down button allowing it to to change position with the array item above or below.
I'm also using angular-animateto flash each item red when it's position is changed.
But what I'd like to do is flash red the item moving up and and flash blue the item moving down.
Any suggestions welcome
I'm not an expert at angularJS, but, I do have an idea:
http://jptacek.com/2015/03/angularJS-CSS-Animation/
There are five AngularJS events
enter - DOM element is add to the DOM tree
leave - DOM element is removed from the DOM tree
move - DOM element is moved within the DOM tree
addClass - A class is added to an element
removeClass - A class is removed from an element
So, although "move" is only working on the button you are clicking, you can change your javascript to add a class to the other elements that you swap with and move.
Then you can trigger the CSS animation by using something in your css following the
[class]-[event]-[state]
model, where it can be like
.ng-addClass { ... }
.ng-addClass-active { ... }
I want to show children element as a part of parent element when parent is hide.
In practical terms, I need to show div when parent is hide.
Ext-Js is a container, item system. So elements can only have one parent, if you really want to do this you can move the element to another parent that is visible on that action. Your better bet is to hide all items on the parent that you wish not to display, and not actually hide the parent