|
 z-index value question |
| Posted by at on Sep-10-2012 18:15 |
|
Hi Peter,
I have a chart rendered inside a div in a window and is capable of zooming, my problem is that the zoom border is
behind the window, i suspect it's about z-index issue. Tried to change the z-index of the div to small value but
didn't work using jquery
$('#'+div_id).css('z-index', '10');
Any idea how to solve this? I attached a screenshot of the issue.
Thanks.
|
| Re: z-index value question |
| Posted by Peter Kwan on Sep-11-2012 04:58 |
|
Hi at,
In ChartDirector Ver 5.1, the zoom border is created the first time it is used. As the border can move, it is created as an absolute positioned element, and is appended to the <body>.
As the border is an absolute positioned element, it should stay on top of all static elements. Also, as it is append to the <body>, and therefore should be the last element, it should stay on top of all other absolute, relative or fixed positioned elements, unless the elements have a positive z-index.
As the border is created on first used, it should be created only after the chart has been displayed, and should therefore be on top of the chart. In your case, the followings are some possible reasons:
(a) Your framework somehow uses absolute, relative or fixed positioned elements for the DIV block.
(b) The DIV block is created after the border (and therefore after the chart). This makes the DIV block stay on top of the border. Some Javascript code then moves the chart into the DIV, but it does not move the border.
(c) Or some Javascript code moves the DIV block to the end of the <body> after the border is created, which will also move it on top of the border.
(d) Or or DIV block is created with a positive z-index, or some Javascript code assigns a positive z-index to it.
If the above is the cause of the issue, the followings may help:
(i) Assign 0 or -1 as the z-index of the DIV block. Note that assigning 0 will work only if the DIV block is not moved after the border in the <body> tag. (Try to insert your DIV block as the first element of <body>, rather than appending to the end.) Assigning -1 may move the DIV block behind other elements in your web page as well. Note that z-index only has effect on non-static elements. In case you are using multiple nested blocks (eg. a DIV block containing another DIV block), the z-index only have effect on the block that is non static.
(ii) Assign a large z-index to the border. To do this, you would need to find out the elements that implement the border. In ChartDirector Ver 5.1, the elements that implements the border all have id attribute in the pattern [imgId]_????. (The [imgId] refers to the id of the chart viewer itself, while ???? are some arbitrary text (can contain any number of characters).
(iii) Move the border to within the DIV block. If the border is within the DIV block, it must stay on top of the DIV block background.
Hope this can help.
Regrads
Peter Kwan |
| Re: z-index value question |
| Posted by at on Sep-13-2012 15:13 |
|
Hi Peter,
In our page, I forgot to mention that there are charts initially but are smaller and the zooming is working fine,
now if you want to have a larger version, we provided a button which popups a window containing the chart
with higher resolution containing also the zooming toolbar and is working fine except for the issue I mentioned
above. I tried your first suggestion but it's not working. In your 2nd suggestion, how can I get the elements that
handle the zoom border when an arbitrary value is appended to the chart_viewer? How can I possibly know that
value? Thanks. |
| Re: z-index value question |
| Posted by Peter Kwan on Sep-14-2012 00:06 |
|
Hi at,
After examining your screen shot carefully, I think the popup is not really a "window" (according to the Javascript definition of window), but is really an HTML element (such as a DIV block). The DIV block must have a high z-index, otherwise it would not popup over other HTML contents. Unluckily, the z-index is so high that it pops up over the zoom border as well. So I think reducing the z-index of the popup is not suitable in your case, and it will then become a "pop under" instead of a popup.
To increase the z-index of the border, you may search for all the IDs of all the elements to find the ones that starts with your WebChartViewer and is absolutely positioned. For example:
//look for this pattern
var pattern = viewer.getId() + "_";
var all = document.getElementsByTagName("*");
for (var i=0; i < all.length; i++) {
if (all[i].id.indexOf(pattern) == 0 && all[i].style.position == "absolute")
// .... element found - do something ....
}
}
Hope this can help.
Regards
Peter Kwan |
| Re: z-index value question |
| Posted by at on Sep-14-2012 17:53 |
|
Hi Peter, tried the example you provided and it can find 2 elements with that pattern but are appended with
'JsChartViewerState' and 'callBackURL'. I suspect that's not the arbitrary text you've mentioned? Besides they are
not of absolute style position because they will only be returned when I removed the 2nd condition of the 'if
statement' in your sample code, otherwise, no elements seem to fit the pattern. Maybe there something that I
missed? Thanks for the great help. |
| Re: z-index value question |
| Posted by Peter Kwan on Sep-15-2012 01:02 |
|
Hi at,
I assume you are already using ChartDirector Ver 5.1 (as you mentioned about using the JsChartViewer.addEventListener method, which is new to Ver 5.1). As mentioned in my previous message, the border will be created on first use (that is, the first time you try to drag out a box).
Unluckily, it is hard to determine when is the first time the border is used. I know there is a DOMNodeInserted event in the standard that can detect when an element is added, but it is not available in IE8 or earlier versions. So the only method I can think of is to simply check for changes every 50ms using a timer. (The check itself probably takes less than 1ms, so if it is running every 50ms, it will only consume 2% CPU.)
Regards
Peter Kwan |
|
Forum Home
Search
Message List
Post Message
(at)