cocoon-dev mailing list archives

Site index · List index
Message view « Date » · « Thread »
Top « Date » · « Thread »
From "Alexander Malic (JIRA)" <j...@apache.org>
Subject [jira] Commented: (COCOON-1209) JS 'popups' are rendered behind select lists and applets.
Date Tue, 22 Nov 2005 11:07:42 GMT
    [ 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 ) + '">&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 = 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


Mime
View raw message