Opened 10 years ago

Closed 7 years ago

Last modified 5 years ago

#3486 closed Bug (invalid)

fckpanel statick zindex problem

Reported by: Odd-Henrik Aasen Owned by:
Priority: Normal Milestone:
Component: UI : Floating Panel Version: FCKeditor 2.6.4
Keywords: Cc: t.bussmann@…

Description

Our AJAX framework uses a “bringElementToFront” function/algorithm witch job it is to make sure that a panel, window or such that should be on top in the zindex stack will be on top/have the highest zindex. The algorithm basically traverses the relevant stacking context of the DOM and finds the highest zindex, then return that + 1 (can provide code if you need it). I then have two windows/panels with FCKeditor, and up on loading the second window the above mentioned algorithm will find the FloatingPanelsZIndex in the stacking context and give the new window a higher zindex. This will then in turn result in style, format etc. drop down panels being displayed with a lower zindex and such behind the editor/current window/panel as seen in the picture. So the FloatingPanelsZIndex setting is not the best all round solution. This should probably be found dynamically as described above. Or at leaset this could be an option.

Sugested solution: So I implementet a somwhat crude function getNextHighestZindex (Thanks to Jason J. Jaeger http://greengeckodesign.com/blog/2007/07/get-highest-z-index-in-javascript.html):

function getNextHighestZindex(obj) {
    var highestIndex = 0;
    var currentIndex = 0;
    var elArray = Array();
    if (obj) { elArray = obj.getElementsByTagName('*'); } else { elArray = document.getElementsByTagName('*'); }
    for (var i = 0; i < elArray.length; i++) {
        if (elArray[i].currentStyle) {
            currentIndex = parseFloat(elArray[i].currentStyle['zIndex']);
        } else if (window.getComputedStyle) {
            currentIndex = parseFloat(document.defaultView.getComputedStyle(elArray[i], null).getPropertyValue('z-index'));
        }
        if (!isNaN(currentIndex) && currentIndex > highestIndex) { highestIndex = currentIndex; }
    }
    return (highestIndex + 1);
}

Then changed fckpanel.js line 78, old code:

FCKDomTools.SetElementStyles( oIFrame,
{
	position	: 'absolute',
	zIndex		: FCKConfig.FloatingPanelsZIndex
} ) ;

New code:

FCKDomTools.SetElementStyles(D,
{ 
    position: 'absolute',
    zIndex: getNextHighestZindex(this._Window.document)
});

This solves the problem. However as I said this implementation is more to the point of proof of concept. The function getNextHighestZindex is not a very efficient way to do this. Using the concept of stacking context to eliminate traversing all of the DOM is a better approach but more complicated. Also maybe the root of the problem is to where in the DOM the new panel is appended??

Hope you can look into this and find a good, robust and efficient solution.

Attachments (1)

zindexLayerProblem.jpg (49.4 KB) - added by Odd-Henrik Aasen 10 years ago.

Download all attachments as: .zip

Change History (3)

Changed 10 years ago by Odd-Henrik Aasen

Attachment: zindexLayerProblem.jpg added

comment:1 Changed 7 years ago by Jakub Ś

Resolution: invalid
Status: newclosed

FCKeditor was retired and is no longer supported. All active development was moved to its successor, CKEditor 3.x, that is a fully mature and far superior product. We recommend you upgrade as soon as possible.

comment:2 Changed 5 years ago by Tobias Bussmann

Cc: t.bussmann@… added
Note: See TracTickets for help on using tickets.
© 2003 – 2019 CKSource – Frederico Knabben. All rights reserved. | Terms of use | Privacy policy