I am trying to get the NVD3 tooltip to go above all other divs. The problem is that I have three charts in a row, and very large tooltips that spill out of their div. I can set the z-index on one or the other side, but one will always be below another.
For example, if I set the center div to have the highest z-index, then the tooltip generated from the left or right side is cut off in the center area, and so on.
Changing the z-index of the tooltip doesn't have any effect, as it's ultimately a child of the respective chart. How can I make it stay above everything?
Easy fix was to add a CSS3 hover selector to the divs that increased the z-index.
Related
When setting overflow:scroll to have scrollbars instead of panning in treechart, facing strange issues. On folding the top rood node cells, the node going behind outline container and not centre aligned. The outline container is fixed in position and always visible.
Graph.fit is not the option which i am looking for, is there any way i can resize the graph container according to the size of graph?
Expectation is to call a method, so that the folded cell should be present in the place where it was got clicked or at-least come to the centre and visible.
Not full answer, but if you want to resize graph container, there is doResizeContainer method. It accepts width and height as its parameters
Is there a simple way to trigger a hover event on all overlapping elements? I'd love to be able to do it with just CSS.
Here is a little example: jsFiddle
Basically I have a few rows of divs which will move with the page when I scroll. Then a single overlapping div with it's position set to fixed. Both sets of divs have a CSS:hover event to change their background color so they get highlighted when I mouseover them.
My goal is to make it so that when I mouse over overlapping it turns red AND whatever sample text div that is behind it turns grey.
The only way I can think of to do this right now is with javascript. And it's inelegant. Basically get the mouse position on the overlapping div, and loop through all the sample text divs to check if their position is under the mouse.
I'm trying to create a situation where I have 4 columns that split the entire view. I'd like to implement a hover effect that occurs when the columns are hovered over.
I'd like each columns background to scale up slightly, but only within its allocated 25% (width) and 100% (height) area, but have one word related to that column appear vertically centered across the entire screen with a width of say 90% and a semi-transparent overlay color. This would have to not be affected by the 25%, 100% rule the background is restricted by.
I have tried and tried and can't figure it out for the life of me.
I'm not going to write the code for you, but I would recommend to do this you use JavaScript.
You could have hidden elements (for the centred text, with the properties you've described) which are positioned absolutely which then become visible once you've hovered over the relevant column. This is why you'll need to use JavaScript, to have an event listener on each of those columns and show the relevant centred text when hovered over.
I am having difficulty positioning my c3 chart. I have three divs in each row and attaching a separate chart to each of them. However, as you can see there is a lot of gap between the top and the bottom row. Any pointers how do remove this? I have tried positioning the div but it does not work.
Also, in the top row, my charts appear at different positions. I am unable to align them.
long time listener, first time caller.
I have a matrix of icons that can be navigated horizontally in a carousel, and vertically as categories (which are rows of icons) that are detached/appended as the app cycles through the categories with up/down arrows.
I want to make the lowest row of icons fade in opacity (I have a black background) from the native colors of the icons into blackness as you go from top to bottom, to indicate that there are subsequent rows beneath. The only way I have been able to determine how to do this is using background: -webkit-gradient, as indicated here:
CSS3 Transparency + Gradient
I apply this to a DIV which I overlay above my lowest row. Unfortunately, I lose clickability of the items behind the overlaid div. I have to use the overlay, however, because the property is a background property.
Is there any other way I can implement a gradient opacity on a row of clickable icons that fades to black without sacrificing the clickability? I don't want an overlay that only covers the lower 25%/whatever either... I need an all-or-nothing solution to this. So far it's looking like "nothing" is my only option.
Thank you very much in advance.
Hmmm... two solutions come to mind.
First, you could use the overlay, and track mouse events on that element. Then, with some math, you could probably figure out what the underlying element is use jQuery to trigger the click of that element (ie. $("#icon14").click(); ).
The second option would be to draw out a companion transparent div with each icon you make in your matrix. Place it in exactly the same spot as the icon itself, but give it a css z-index that brings it above the overlay. This transparent div can now handle all the mouse events for you, and still live above the overlay.
If you go down this road, I'd look into using the .data() function that lets you quickly tack on variables to any jQuery object. You can set this companion div to be a property of the normal icons in the matrix, with something like $("#icon14").data('clickDiv', $("#icon14_click")); (though you'd probably want to assign these in a loop or something =)
Good luck!