[
http://issues.apache.org/jira/browse/COCOON-1209?page=comments#action_12358224
]
Alexander Malic commented on COCOON-1209:
-
The Problem is, that the z-Index of the Popup-DIV is lower that the z-Index of
the TAB-Content. Thats because the DIV for the Popup is created before the
Tabs. When you create a Div it always gets a higher zIndex than the DIV created
before. When you first create the Tabs or set the zIndex of the Popup to a
higher value than the Tabs it should work.
You can easily fix this if you set the z-Index of the Popup to a higher Value.
I posted an example-Screenshot using my own Popup-Object to called WdfDiv to
create Popup's. When i need a Popup i create it via dhtml and attach the object
to the body. when i hide it i remove it from the dom-tree and destroy it
afterwards. here some code-examples so you can imagine what i'm doing (i'm
using ajax to get dynamically a list of the images). maybe you can recyle my
code and use it for cocoon.
some attentive guys will notice that i also changed the look of the tabs so
they are rounded :)
btw: the screenshot is taken from our application based on cocoon, spring,
hibernate + worflowEngine
its some kind of employee portal with timeattendence information and
workflowRequests. You can f.e. make a request for a holiday. your manager has
to approve it and it will be automatically put into the timeattendence
information. ...
for more information visit ( www.workflow.at german only ) in Produkte/Testzone
you can see our old application with only simple sequential workflows.
fragments from my js-file
-
//global Variables :(
var globWfFixedTables=null;
//global for Caching
var xmldocs=new Array();
var htmldocs=new Array();
//load the Images and show them (srcElement ist the Button for selecting the
Images)
function showImagePopUp(srcElement,inputElementId){
var imageset = document.getElementById('imageset').value;
var url='./po_showImages.do?imageset='+ imageset + 'inputelementid=' +
inputElementId + 'cocoon-view=raw';
var xmlDoc=loadXmlDoc(url);
var imgsXML=xmlDoc.getElementsByTagName('image');
var imgs=new Array();
for(var i=0;iimgsXML.length;i++){
imgs[i]=imgsXML[i].firstChild.data+'';
}
var dim=new Dimension(srcElement);
try{globWdfdiv.terminate()}catch(e){}
globWdfdiv=new Wdfdiv();
globWdfdiv.setXpos(dim.x+dim.w+3);
globWdfdiv.setYpos(120);
globWdfdiv.setVisibility(true);
globWdfdiv.dive.style.overflowY='auto';
globWdfdiv.setWidth(300);
globWdfdiv.setHeight(400);
globImage=new ImagePreloader(imgs,showImagePopUp2)
return(false);
}
function showImagePopUp2(imgs){
var iHTML=new Array();
var imgpre='td style=width:16px;height:16pximg src=';
var imgpost=' width=16px height=16px';
imgpost+=' onmouseover=this.alt=this.src.split(\'16x16/\')[1];';
imgpost+=' onmousedown=
document.getElementById(\'imagepreview\').src=this.src;
document.getElementById(\'image\').value=this.src.split(\'16x16/\')[1];
try{globWdfdiv.terminate()}catch(e){};'
imgpost+='//td';
iHTML.push('table border=1');
for(var i=0;i(imgs.length-imgs.length%15)/15;i++){
iHTML.push('tr');
for(var j=0;j15;j++)
iHTML.push(imgpre + imgs[i*15+j].src + imgpost);
iHTML.push('/tr');
}
if(imgs.length%150){
iHTML.push('tr');
for(var i=imgs.length-imgs.length%15;iimgs.length;i++)
iHTML.push(imgpre + imgs[i].src + imgpost);
iHTML.push('td colspan=' + (15 - imgs.length%15 ) +
'nbsp;/td')
iHTML.push('/tr');
}
iHTML.push('/table');
globWdfdiv.setInnerHTML(iHTML.join(''));
globWdfdiv.setVisibility(true);
}
// here the Helper Objects/Functions
//=
// Image Preloader
function ImagePreloader(images,callback)
{
// store the callback
this.callback = callback;
// initialize internal state.
this.nLoaded = 0;
this.nProcessed = 0;
this.aImages = new Array;
// record the number of images.
this.nImages = images.length;
// for each image, call preload()
for ( var i = 0; i images.length; i++ )
this.preload(images[i]);
}
ImagePreloader.prototype.preload = function(image)
{
// create new Image object and add to array
var oImage = new Image;
this.aImages.push(oImage);
// set up event handlers for the Image object
oImage.onload = ImagePreloader.prototype.onload;
oImage.onerror = ImagePreloader.prototype.onerror;
oImage.onabort =
