[
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 time&attendence 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 time&attendence
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;i<imgsXML.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:16px"><img 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;j<15;j++)
iHTML.push(imgpre + imgs[i*15+j].src + imgpost);
iHTML.push('</tr>');
}
if(imgs.length%15>0){
iHTML.push('<tr>');
for(var i=imgs.length-imgs.length%15;i<imgs.length;i++)
iHTML.push(imgpre + imgs[i].src + imgpost);
iHTML.push('<td colspan="' + (15 - imgs.length%15 ) +
'"> </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 = ImagePreloader.prototype.onabort;
// assign pointer back to this.
oImage.oImagePreloader = this;
oImage.bLoaded = false;
oImage.source = image;
// assign the .src property of the Image object
oImage.src = image;
}
ImagePreloader.prototype.onComplete = function()
{
this.nProcessed++;
if ( this.nProcessed == this.nImages )
this.callback(this.aImages);
}
ImagePreloader.prototype.onload = function()
{
this.bLoaded = true;
this.oImagePreloader.nLoaded++;
this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onerror = function()
{
this.bError = true;
this.oImagePreloader.onComplete();
}
ImagePreloader.prototype.onabort = function()
{
this.bAbort = true;
this.oImagePreloader.onComplete();
}
// Image Preloader
//=============================================================================
/*****************************************************
** Objekt Wdfdiv **
*****************************************************/
function dummy(){alert('test');}
var globWdfdiv=null;
function Wdfdiv(){
Wdfdiv.tagName=(this.tagName='WDFDIV');
Wdfdiv.dive=(this.dive=document.createElement('div'));
document.body.appendChild(Wdfdiv.dive);
Wdfdiv.dive.setAttribute('style','');
Wdfdiv.dive.style.position='absolute';
Wdfdiv.dive.style.visibility='hidden';
this.visibility=false;
//Wdfdiv.dive.addEventListener('mouseup',dummy,true);
}
Wdfdiv.prototype.getDimension=function(){
return(new Dimension(Wdfdiv.dive));
}
Wdfdiv.prototype.setDimension=function(x,y,w,h){
var wasV=this.visibility;
if(wasV)
this.setVisibility(false);
if (x) Wdfdiv.dive.style.left = x;
if (y) Wdfdiv.dive.style.top = y;
if (w) Wdfdiv.dive.style.width = w;
if (h) Wdfdiv.dive.style.height= h;
if(wasV)
this.setVisibility(true);
}
Wdfdiv.prototype.setXpos=function (x){
var wasV=this.visibility;
if(wasV)
this.setVisibility(false);
Wdfdiv.dive.style.left=x;
if(wasV)
this.setVisibility(true);
}
Wdfdiv.prototype.setYpos=function(y){
var wasV=this.visibility;
if(wasV)
this.setVisibility(false);
Wdfdiv.dive.style.top=y;
if(wasV)
this.setVisibility(true);
}
Wdfdiv.prototype.setWidth=function(w){
var wasV=this.visibility;
if(wasV)
this.setVisibility(false);
Wdfdiv.dive.style.width=w;
if(wasV)
this.setVisibility(true);
}
Wdfdiv.prototype.setHeight=function(h){
var wasV=this.visibility;
if(wasV)
this.setVisibility(false);
Wdfdiv.dive.style.height=h;
if(wasV)
this.setVisibility(true);
}
Wdfdiv.prototype.setVisibility=function(v){
if (v!=null && v==true){
var dimd=new Dimension(Wdfdiv.dive);
hideSelects(dimd);
Wdfdiv.dive.style.visibility='visible';
this.visibility=true;
}else{
showSelects();
Wdfdiv.dive.style.visibility='hidden';
this.visibility=false;
}
}
Wdfdiv.prototype.setInnerHTML=function(h){
Wdfdiv.dive.innerHTML=h+'';
}
Wdfdiv.prototype.terminate=function(){
this.setVisibility(false);
Wdfdiv.dive.parentNode.removeChild(Wdfdiv.dive);
}
/*****************************************************
** Ende Objekt Wdfdiv **
*****************************************************/
/*****************************************************
** Objekt Dimension **
*****************************************************/
function Dimension(element){
this.x=-1;
this.y=-1;
this.w=0;
this.h=0;
if (element==document){
this.x=element.body.scrollLeft;
this.y=element.body.scrollTop;
this.w=element.body.clientWidth;
this.h=element.body.clientHeight;
}else if (element!=null){
var e=element;
var left=e.offsetLeft;
while ((e=e.offsetParent)!=null) {
left+=e.offsetLeft;
}
var e=element;
var top=e.offsetTop;
while((e=e.offsetParent)!=null) {
top+=e.offsetTop;
}
this.x=left;
this.y=top;
this.w=element.offsetWidth;
this.h=element.offsetHeight;
}
}
/*****************************************************
** Ende Objekt Dimension **
*****************************************************/
//hide the selects under a dimension (because of a stupid IE-Bug)
function hideSelects(dim){
var selects=document.getElementsByTagName('select');
for (var i=0;i<selects.length;i++) {
var dims=new Dimension(selects[i]);
if(dims.x<=(dim.x+dim.w) && (dims.x+dims.w)>=dim.x &&
dims.y<=(dim.y+dim.h) && (dims.y+dims.h)>=dim.y)
if(selects[i].id.substr(0,3)!='dp_')
selects[i].style.visibility='hidden';
}
}
//show the Selects again
function showSelects(){
var selects=document.getElementsByTagName('select');
for (var i=0;i<selects.length;i++) {
selects[i].style.visibility='visible';
}
}
//AJAX but not asynchron :)
function loadXMLHttp(url){
var xmlhttp=null;
if(window.XMLHttpRequest){
xmlhttp=new XMLHttpRequest();
xmlhttp.open("GET",url,false);
xmlhttp.send(null);
}else{
xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
xmlhttp.open("GET",url,false);
xmlhttp.send();
}
//alert(url + '\n' + xmlhttp.responseText);
return(xmlhttp);
}
function loadHtmlDoc(url,neuladen){
//wenn das xmldoc noch nicht existiert oder
//wenn neuladen true ist, wird das xmldokument
//neu von der url geladen
if(!neuladen)
var neuladen=false;
if(!htmldocs[url] || neuladen==true){
htmldocs[url]=loadXMLHttp(url).responseText;
}
return(htmldocs[url]);
}
function loadXmlDoc(url,neuladen){
//wenn das xmldoc noch nicht existiert oder
//wenn neuladen true ist, wird das xmldokument
//neu von der url geladen
if(!neuladen)
var neuladen=false;
if(!xmldocs[url] || neuladen==true){
xmldocs[url]=loadXMLHttp(url).responseXML;
}
return(xmldocs[url]);
}
-------------------------------------
> JS 'popups' are rendered behind select lists and applets.
> ---------------------------------------------------------
>
> Key: COCOON-1209
> URL: http://issues.apache.org/jira/browse/COCOON-1209
> Project: Cocoon
> Type: Bug
> Components: Blocks: Forms
> Versions: 2.1.8
> Environment: Operating System: All
> Platform: All
> Reporter: Matthew Lynch
> Assignee: Cocoon Developers Team
> Attachments: PopupWindow.js, example.gif, screenshot.png
>
> The dynamic popups generated by PopupWindow.js in the Matt Kruse library have
> a
> common rendering error in that they render behind html select and applet
> elements.
> I will attach my fix to this once bug is created (silly bugzilla)
--
This message is automatically generated by JIRA.
-
If you think it was sent incorrectly contact one of the administrators:
http://issues.apache.org/jira/secure/Administrators.jspa
-
For more information on JIRA, see:
http://www.atlassian.com/software/jira
