Boxover and Select objects in IE

[HenryHartley]

The "boxover is hidden by select objects" was getting me down. I've come up with a way to get boxover tool tips to show up on top of select objects. It works in IE 6 and Firefox 1.5. I'd be glad if someone would confirm that this works in other versions. I don't know for sure what the story is on updates to boxover.js but if appropriate, I'd be happy to have my changed incorporated into the main version. You'll need to add a coverselect=[on] parameter to the title string in the place of hideselect=[on] for the new code to work. Please let me know if you find any errors or omissions or have any comments or questions.

--
Henry

[goofing off]

My hidden selects get displayed on mouse out and I would love to check out your fix so that I don't have to hack it myself, but the zip file is corrupted when I download... Does the forum cause that?

Anyway you could either post actual code or repost the zip file or simply post it as a text file?
Thanks!

[HenryHartley]

Originally Posted by goofing off

My hidden selects get displayed on mouse out and I would love to check out your fix so that I don't have to hack it myself, but the zip file is corrupted when I download... Does the forum cause that?

I didn't have any trouble recovering the code out of the zip file but I don't mind posting it here. It won't fit in one post (max 10,000 characters) so I'll split it into multiple posts. Here's the first half of the js file (which I named "boxover-cover.js"):

/* --- BoxOver ---
/* --- v 2.1 17th June 2006
By Oliver Bryant with help of Matthew Tagg
http://boxover.swazz.org */

/* Modified 2006/12/01 by Henry Hartley to allow boxover to cover <select> objects in IE */
/*
In your HTML file add an IFrame as follows:
<iframe id="coverSelect" frameborder="0" style="display:none;"></iframe>
*/

if (typeof document.attachEvent!='undefined') {
   window.attachEvent('onload',init);
   document.attachEvent('onmousemove',moveMouse);
   document.attachEvent('onclick',checkMove); }
else {
   window.addEventListener('load',init,false);
   document.addEventListener('mousemove',moveMouse,false);
   document.addEventListener('click',checkMove,false);
}

var oDv=document.createElement("div");
var dvHdr=document.createElement("div");
var dvBdy=document.createElement("div");
var oCoverSelect=document.createElement("iframe");
var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft,oCoverSelect;
boxOpen=false;
ox=10;
oy=10;
lockX=0;
lockY=0;

function init() {
	oDv.appendChild(dvHdr);
	oDv.appendChild(dvBdy);
	oDv.style.position="absolute";
	oDv.style.visibility='hidden';
	oDv.style.zIndex=100;
	document.body.appendChild(oDv);	

	oCoverSelect = document.getElementById('coverSelect');
	oCoverSelect.style.display='none';
	oCoverSelect.style.background='#ffffff';
	oCoverSelect.style.position='absolute';
	oCoverSelect.style.top='0px';
	oCoverSelect.style.left='0px';
	oCoverSelect.scrolling='no';
}

function defHdrStyle() {
	dvHdr.innerHTML='<img  style="vertical-align:middle"  src="info.gif">  '+dvHdr.innerHTML;
	dvHdr.style.fontWeight='bold';
	dvHdr.style.width='150px';
	dvHdr.style.fontFamily='arial';
	dvHdr.style.border='1px solid #A5CFE9';
	dvHdr.style.padding='3';
	dvHdr.style.fontSize='11';
	dvHdr.style.color='#4B7A98';
	dvHdr.style.background='#D5EBF9';
	dvHdr.style.filter='alpha(opacity=85)'; // IE
	dvHdr.style.opacity='0.85'; // FF
}

function defBdyStyle() {
	dvBdy.style.borderBottom='1px solid #A5CFE9';
	dvBdy.style.borderLeft='1px solid #A5CFE9';
	dvBdy.style.borderRight='1px solid #A5CFE9';
	dvBdy.style.width='150px';
	dvBdy.style.fontFamily='arial';
	dvBdy.style.fontSize='11';
	dvBdy.style.padding='3';
	dvBdy.style.color='#1B4966';
	dvBdy.style.background='#FFFFFF';
	dvBdy.style.filter='alpha(opacity=85)'; // IE
	dvBdy.style.opacity='0.85'; // FF
}

function checkElemBO(txt) {
if (!txt || typeof(txt) != 'string') return false;
if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1)) 
   return true;
else
   return false;
}

function scanBO(curNode) {
	  if (checkElemBO(curNode.title)) {
         curNode.boHDR=getParam('header',curNode.title);
         curNode.boBDY=getParam('body',curNode.title);
			curNode.boCSSBDY=getParam('cssbody',curNode.title);			
			curNode.boCSSHDR=getParam('cssheader',curNode.title);
			curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;
			curNode.IEbugfixC=(getParam('coverselects',curNode.title)=='on')?true:false;
			curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));
			curNode.fixY=parseInt(getParam('fixedrely',curNode.title));
			curNode.absX=parseInt(getParam('fixedabsx',curNode.title));
			curNode.absY=parseInt(getParam('fixedabsy',curNode.title));
			curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;
			curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;
			curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;
			curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;
			curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;
			if (getParam('requireclick',curNode.title)=='on') {
				curNode.requireclick=true;
				document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);
				document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);
			}
			else {// Note : if requireclick is on the stop clicks are ignored   			
   			if (getParam('doubleclickstop',curNode.title)!='off') {
   				document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);
   			}	
   			if (getParam('singleclickstop',curNode.title)=='on') {
   				document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);
   			}
   		}
			curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;
			curNode.title='';
			curNode.hasbox=1;
	   }
	   else
	      curNode.hasbox=2;   
}


function getParam(param,list) {
	var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');
	var res = reg.exec(list);
	var returnvar;
	if(res)
		return res[2].replace('[[','[').replace(']]',']');
	else
		return '';
}

function Left(elem){	
	var x=0;
	if (elem.calcLeft)
		return elem.calcLeft;
	var oElem=elem;
	while(elem){
		 if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))
		 	x+=parseInt(elem.currentStyle.borderLeftWidth);
		 x+=elem.offsetLeft;
		 elem=elem.offsetParent;
	  } 
	oElem.calcLeft=x;
	return x;
	}

function Top(elem){
	 var x=0;
	 if (elem.calcTop)
	 	return elem.calcTop;
	 var oElem=elem;
	 while(elem){		
	 	 if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))
		 	x+=parseInt(elem.currentStyle.borderTopWidth); 
		 x+=elem.offsetTop;
	         elem=elem.offsetParent;
 	 } 
 	 oElem.calcTop=x;
 	 return x;
 	 
}

var ah,ab;
function applyStyles() {
	if(ab)
		oDv.removeChild(dvBdy);
	if (ah)
		oDv.removeChild(dvHdr);
	dvHdr=document.createElement("div");
	dvBdy=document.createElement("div");
	CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();
	CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();
	dvHdr.innerHTML=CBE.boHDR;
	dvBdy.innerHTML=CBE.boBDY;
	ah=false;
	ab=false;
	if (CBE.boHDR!='') {		
		oDv.appendChild(dvHdr);
		ah=true;
	}	
	if (CBE.boBDY!=''){
		oDv.appendChild(dvBdy);
		ab=true;
	}	
}

var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;
var ini=false;

// Customised function for inner window dimension
function SHW() {
   if (document.body && (document.body.clientWidth !=0)) {
      width=document.body.clientWidth;
      height=document.body.clientHeight;
   }
   if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {
      width=document.documentElement.clientWidth;   
      height=document.documentElement.clientHeight;   
   }   
   return [width,height];
}

[HenryHartley]

And the second part of the js file. Note that this doesn't have the +"px" that someone suggested in a different thread. I haven't had a chance to test that addition and it doesn't seem necessary, at least in the browsers I've used. Also note that you should use either coverselects=[on] or hideselects=[on] but not both. If you use hideselects, it will continue to hide and then reveal your selects, whether you use coverselects or not.

var ID=null;
var IDCov=null;
function moveMouse(e) {
   //boxMove=true;
	e?evt=e:evt=event;
	
	CSE=evt.target?evt.target:evt.srcElement;
	
	if (!CSE.hasbox) {
	   // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement
	   iElem=CSE;
	   while ((iElem.parentNode) && (!iElem.hasbox)) {
	      scanBO(iElem);
	      iElem=iElem.parentNode;
	   }	   
	}
	
	if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){		
	   if (!CSE.boxItem) {
			iterElem=CSE;
			while ((iterElem.hasbox==2)&&(iterElem.parentNode))
					iterElem=iterElem.parentNode; 
			CSE.boxItem=iterElem;
			}
		iterElem=CSE.boxItem;
		if (CSE.boxItem&&(CSE.boxItem.hasbox==1))  {
			LBE=CBE;
			CBE=iterElem;
			if (CBE!=LBE) {
				applyStyles();
				if (!CBE.requireclick)
					if (CBE.fade) {
						if (ID!=null)
							clearTimeout(ID);
						if (IDCov!=null)
							clearTimeout(IDCov);
						IDCov=setTimeout("coverSelects()",CBE.delay);
						ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);
					}
					else {
						if (ID!=null)
							clearTimeout(ID);
						if (IDCov!=null)
							clearTimeout(IDCov);
						COL=1;
						IDCov=setTimeout("coverSelects()",CBE.delay);
						ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);						
					}
				if (CBE.IEbugfix) {hideSelects();} 
				if (CBE.IEbugfixC) {coverSelects();} 
				fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;
				fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;			
				lockX=0;
				lockY=0;
				boxMove=true;
				ox=CBE.offX?CBE.offX:10;
				oy=CBE.offY?CBE.offY:10;
			}
		}
		else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove))	{
			// The conditional here fixes flickering between tables cells.
			if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {   			
   			CBE=null;
   			if (ID!=null)
  					clearTimeout(ID);
			if (IDCov!=null)
					clearTimeout(IDCov);
   			fadeOut();
   			showSelects();
   			uncoverSelects();
			}
		}
		LSE=CSE;
	}
	else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {
		totalScrollLeft=0;
		totalScrollTop=0;
		
		iterElem=CSE;
		while(iterElem) {
			if(!isNaN(parseInt(iterElem.scrollTop)))
				totalScrollTop+=parseInt(iterElem.scrollTop);
			if(!isNaN(parseInt(iterElem.scrollLeft)))
				totalScrollLeft+=parseInt(iterElem.scrollLeft);
			iterElem=iterElem.parentNode;			
		}
		if (CBE!=null) {
			boxLeft=Left(CBE)-totalScrollLeft;
			boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft;
			boxTop=Top(CBE)-totalScrollTop;
			boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop;
			doCheck();
		}
	}
	
	if (boxMove&&CBE) {
		// This added to alleviate bug in IE6 w.r.t DOCTYPE
		bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;
		bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;
		mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft;
		mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop;
		if ((CBE)&&(CBE.windowLock)) {
			mouseY < -oy?lockY=-mouseY-oy:lockY=0;
			mouseX < -ox?lockX=-mouseX-ox:lockX=0;
			mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;
			mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;			
		}
		oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px";
		oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";		
		oCoverSelect.style.width=oDv.offsetWidth;
		oCoverSelect.style.height=oDv.offsetHeight;
		oCoverSelect.style.top=oDv.style.top;
		oCoverSelect.style.left=oDv.style.left;
		
	}
}

function doCheck() {	
	if (   (mouseX < boxLeft)    ||     (mouseX >boxRight)     || (mouseY < boxTop) || (mouseY > boxBottom)) {
		if (!CBE.requireclick)
			fadeOut();
		if (CBE.IEbugfix) {showSelects();}
		if (CBE.IEbugfixC) {uncoverSelects();}
		CBE=null;
	}
}

function pauseBox(e) {
   e?evt=e:evt=event;
	boxMove=false;
	evt.cancelBubble=true;
}

function showHideBox(e) {
	oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';
}

function hideBox(e) {
	oDv.style.visibility='hidden';
}

var COL=0;
var stopfade=false;
function fadeIn(fs) {
		ID=null;
		COL=0;
		oDv.style.visibility='visible';
		fadeIn2(fs);
}

function fadeIn2(fs) {
		COL=COL+fs;
		COL=(COL>1)?1:COL;
		oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';
		oDv.style.opacity=COL;
		if (COL<1)
		 setTimeout("fadeIn2("+fs+")",20);		
}


function fadeOut() {
	oDv.style.visibility='hidden';
	
}

function isChild(s,d) {
	while(s) {
		if (s==d) 
			return true;
		s=s.parentNode;
	}
	return false;
}

var cSrc;
function checkMove(e) {
	e?evt=e:evt=event;
	cSrc=evt.target?evt.target:evt.srcElement;
	if ((!boxMove)&&(!isChild(cSrc,oDv))) {
		fadeOut();
		if (CBE&&CBE.IEbugfix) {showSelects();}
		if (CBE&&CBE.IEbugfixC) {uncoverSelects();}
		boxMove=true;
		CBE=null;
	}
}

function showSelects(){
   var elements = document.getElementsByTagName("select");
   for (i=0;i< elements.length;i++){
      elements[i].style.visibility='visible';
   }
}

function hideSelects(){
   var elements = document.getElementsByTagName("select");
   for (i=0;i< elements.length;i++){
   elements[i].style.visibility='hidden';
   }
}

function uncoverSelects(){
	oCoverSelect.style.display		= 'none';
}

function coverSelects(){
	oCoverSelect.style.width		= oDv.offsetWidth;
	oCoverSelect.style.height		= oDv.offsetHeight;
	oCoverSelect.style.top			= oDv.style.top;
	oCoverSelect.style.left			= oDv.style.left;
	oCoverSelect.style.zIndex		= oDv.style.zIndex - 1;
	oCoverSelect.style.display		= 'block';
}

And now the example HTML document which uses that:

<html>
<head>
<title>BoxOver on top of Select Objects in IE</title>
<script src="boxover-cover.js"></script>
</head>
<body>
<h1>BoxOver on top of Select Objects in IE</h1>
<div style="font-weight:bold;border:1px solid #000000;padding:5px;width: 250px;" title="header=[A tooltip] body=[Note the select box is hidden by the tool tip.] coverselects=[on]">Move over this text to bring up a tooltip.  Notice how the select box is hidden by the tool tip.</div>
<select>
	<option value="1">A select object with multiple options</option>
	<option value="2">Option 2</option>
	<option value="3">Option 3</option>
	<option value="4">Option 4</option>
</select>
<iframe id="coverSelect" frameborder="0" style="display:none;"></iframe>
</body>
</html>

[IndustriousBird]

Thanks so much for posting your code! It works great. I noticed, however, that the tooltip was displaying some extra whitespace in firefox. Specifying height and width seems to have helped (lines 22 & 23)

oCoverSelect.style.width='220px';
oCoverSelect.style.height='100px';

[boycy]

Henry,

Good solution -- I'd just done the exact same thing myself and came to post it before realising you'd done one!
In function moveMouse() you need to modify the position/dimension setting lines to the following:

oCoverSelect.style.width=oDv.offsetWidth + 'px';
oCoverSelect.style.height=oDv.offsetHeight + 'px';
oCoverSelect.style.top=oDv.offsetTop + 'px';
oCoverSelect.style.left=oDv.offsetLeft + 'px';

The 'px' is required as the style position/dimension parameters require the unit as well as the number and offsetX parameters are all integers.
I used offsetTop and offsetLeft in preference to style.top and style.left just to keep the two lines consistent with the previous two, although in reality you can use either.

At the top of the file, why have you declared and created a new iframe, then redeclared the variable, then just retrieved an existing iframe from the HTML? This seems very backwards as it requires the manual insertion of an iframe into the HTML, and also incorrect as it declares oCoverSelect twice. It should create the iframe then use 'document.body.appendChild(oCoverSelect);' to add it to the body.

My version is attached for info -- I think you've probably handled the fadeIn/Out situation better, I didn't look at that as I don't use it. Perhaps a combination of the two solutions would be good?

Mine fix is not verified under NetscapeNavigator which suffers from this problem on all form elements.

[Carlton Bale]

This is a great addition to boxover.js. This should be incorporated into the main release as it solves problems for many people when hidden selects are being used on a page.

Also, there should be more documentation on the hideselects function in general on the main page for the tool. A more useful description would have been very helpful for me.

Change description of hideselects parameter to: Specifies whether to hide all SELECT boxes on page when popup is activated. This addresses a bug in IE that causes form select objects to remain on top of popup objects.

(Same would apply to the CoverSelects parameter if that is added.)

Thanks for the great utility and for the great fixes from the user community!

[HenryHartley]

Originally Posted by boycy

In function moveMouse() you need to modify the position/dimension setting lines to the following:

oCoverSelect.style.width=oDv.offsetWidth + 'px';
oCoverSelect.style.height=oDv.offsetHeight + 'px';
oCoverSelect.style.top=oDv.offsetTop + 'px';
oCoverSelect.style.left=oDv.offsetLeft + 'px';

The 'px' is required as the style position/dimension parameters require the unit as well as the number and offsetX parameters are all integers.

Finally getting back to this. In my fairly heavily modified version of boxover.js I quickly added the "+ 'px'" to those lines. This caused errors when viewed in IE 6 and in Firefox 2. Leaving them out was NOT reported as an error in either browser. Turns out that by using oDv.style.top and oDv.style.left, I did NOT need to add them since they are already included in those values.

So, anyone reading this, if you use oDv.offsetTop and oDv.offsetLeft, then DO add "+'px'". If you use oDv.style.top and oDv.Style.left, DO NOT add that or you will generate errors. They are already included in the definition of those values a few lines above.

Note that this is true also for the similar lines in the coverSelects() function I added to boxover.js.

--
Henry

[HenryHartley]

Originally Posted by HenryHartley

One more thing. It seems that if you load this into Internet Explorer on an https connection you will be given a security warning saying there are both secure and nonsecure items on the page. Here's the fix. Since you don't always know if the site will be secure or not, I'd suggest doing this whenever you create an iframe for boxover.

Create a dummy html page with no real content. Give it any name you want. In this example I call it dummy.html.

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<html><head></head><body></body></html>

Then, modify your iframe tag to point to that document as its source:

<iframe src="dummy.html" id="coverSelect" frameborder="0" ...

Simple but not exactly obvious. If these changes get rolled into the production code, I'd suggest distributing a dummy file for this purpose.

--
Henry

[waveform]

Hi guys,

I've implemented the iframe shim thing, and fixed it up for fading in. Works well in IE6 and FF1.5.

I also bundled with it the changes I did for "opacity=[xx]" (manual opacity overrides the default) and "clickoff=[on]" (useful for form fields: click element to turn tooltip off) - see my recent posts about those.

Hope that's helpful.