How do I have to style my core-tooltip to have a z-order above all other elements. See screenshot:
Currently the core-tooltip is behind the next table row.
Related
I have a recursive function that creates divs inside divs on demand by the user, but I've stumbled on a problem where I need to separate those divs as in a specific manner, similar to "layers".
Example:
I have created a div, firstborn - and inside it, the user created another div (lets call this one child div). Inside this secondary div, the user created yet another div (and this one grandchild div) - I need to know the number of child divs of the firstborn div, and the number of child divs that the child div has (grandchild divs)
I've stumbled upon this issue because the way I was trying to get them was by:
numberOfFirstbornDivs = document.getElementsByClassName("firstBornDiv").length
numberOfChildrenDivs = document.getElementsByClassName("recursivelyCreatedDiv")[index].getElementsByClassName("recursivelyCreatedDiv").length
What I wanted was the number of divs named "recursivelyCreatedDiv" only under the first "layer", but instead, I get the number of divs from all subsequent "layers" (in the given example I wanted to have:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 1,
but instead I get:
numberOfFirstbornDivs = 1 and
numberOfChildrenDivs = 2).
I understand this happens because I name my divs by the same ClassName, but I don't know how to workaround this as they are created recursively (and on demand by the user).
To only select direct childs of an element you can use the '>' css selector instead of getting elements by class name.
For example, .firstBornDiv > .recursivelyCreatedDiv will target all elements with the recursivelyCreatedDiv class that are direct children of a div with the firstBornDiv class
Edit 1: To be more precise, you can use the querySelectorAll() method with any css selector to get the array of elements targeted by your selector which is what you would need with this answer.
I want 2 sprites on the one index position. The sprites have different coordinates (x attributes), so, each of them are visible when the child position is active.
Clarification, the code:
addChildAt( sprite1, 1 );
addChildAt( sprite2, 1 );
Are both of the sprites visible?
The documentation gives you the answer of what will happen with your snippet.
index:int — The index position to which the child is added. If you specify a currently occupied index position, the child object that exists at that position and all higher positions are moved up one position in the child list.
Two objects can't share the same index because it wouldn't make sense. How would you display two overlapping objects at the same index?
No, you can't. But you can add extra sprite between parent and children to easily control visibility or whatever.
Sample:
parentSprite.addChild(extra)
extra.addChildAt( sprite1, 1 );
extra.addChildAt( sprite2, 2 );
I'm having a problem building tooltips for elements inside an html table. Basically I have this:
Table1
a b
c d
Table2
a b
c d
Every element (a,b,c,d) is composed of an image and an empty paragraph which will host the description. Every image has a function, onMouseOver=showDescription(idParagraphToBeShowed, Text), which shows the description of the image when you hover the mouse. The <td> elements have the CSS attribute:
position: relative
and the paragraphs have:
position: absolute
text-align: center
z-index: 1
In this way I'm able to center the description with respect to the image on each cell of the table.
All works perfectly, the only (big) problem is that is I hover (for example) on the cell c, Table1 the description follows on the cell b instead of going beyond the table covering Table2 and its cells. This is of course an extremely nasty bug.
So, how can I 'allow' the description to go over other elements outside its container?
Trying to get a column to freeze on my table. The answer by skube for this question is the closest to what I need. However, I need to go one div deeper. This causes the absolutely positioned column to not show though it is positioned correctly.
Here is the example that is not showing colA (Header A, Header B and Header C): http://jsbin.com/uxecel/667/
Any help would be greatly appreciated.
It's not visible because you have left:-100px on .colA
Remove that style, and it works as (I think) you expect.
update: sorry:
Set left:0px on .colA. Also, you won't need left:-100px on the table for ie7.
I want to create an Html List box in html such that there is no space/gap between the option element's top-left coordinate and the select element's top-left.By default there is about 3px gap between them (As shown by Accessibility explorer)
With respect to the above image, I want to get rid of of the white space between the edges of the option apple and the border of the select.
Currently the option apple is at offset 3px,3px w.r.t the select element , I want to make the offset as 0px,0px .
So that if select's screen position is 10,10 , the option's screen position would also be 10,10.
I have seen such thing possible but can't get the source to see how is it done.(but it was done using asp.net)
Thanks for your time.
EDIT:
Following is how it looks after setting martin to 0px in the Acc Explorer:
Give it a negative margin:
http://jsfiddle.net/zTatx/14/
Actually a simple padding: 0; should remove all the white space:
http://jsfiddle.net/TAxuD/1/