/v2/javascript/boxover.js

http://mightmedia.googlecode.com/ · JavaScript · 372 lines · 327 code · 36 blank · 9 comment · 66 complexity · e24b203b1e46c07b29d4df18f40fbabc MD5 · raw file 

    

  1. /* --- BoxOver ---

    2. 

  2. /* --- v 2.1 17th June 2006

    3. 

  3. By Oliver Bryant with help of Matthew Tagg

    4. 

  4. http://boxover.swazz.org */

    5. 

  5. 

    6. 

  6. if (typeof document.attachEvent!='undefined') {

    7. 

  7.    window.attachEvent('onload',init);

    8. 

  8.    document.attachEvent('onmousemove',moveMouse);

    9. 

  9.    document.attachEvent('onclick',checkMove); }

    10. 

  10. else {

    11. 

  11.    window.addEventListener('load',init,false);

    12. 

  12.    document.addEventListener('mousemove',moveMouse,false);

    13. 

  13.    document.addEventListener('click',checkMove,false);

    14. 

  14. }

    15. 

  15. 

    16. 

  16. var oDv=document.createElement("div");

    17. 

  17. var dvHdr=document.createElement("div");

    18. 

  18. var dvBdy=document.createElement("div");

    19. 

  19. var windowlock,boxMove,fixposx,fixposy,lockX,lockY,fixx,fixy,ox,oy,boxLeft,boxRight,boxTop,boxBottom,evt,mouseX,mouseY,boxOpen,totalScrollTop,totalScrollLeft;

    20. 

  20. boxOpen=false;

    21. 

  21. ox=10;

    22. 

  22. oy=10;

    23. 

  23. lockX=0;

    24. 

  24. lockY=0;

    25. 

  25. 

    26. 

  26. function init() {

    27. 

  27. 	oDv.appendChild(dvHdr);

    28. 

  28. 	oDv.appendChild(dvBdy);

    29. 

  29. 	oDv.style.position="absolute";

    30. 

  30. 	oDv.style.visibility='hidden';

    31. 

  31. 	document.body.appendChild(oDv);	

    32. 

  32. }

    33. 

  33. 

    34. 

  34. function defHdrStyle() {

    35. 

  35. 	dvHdr.innerHTML='<img  style="vertical-align:middle"  src="info.gif">&nbsp;&nbsp;'+dvHdr.innerHTML;

    36. 

  36. 	dvHdr.style.fontWeight='bold';

    37. 

  37. 	dvHdr.style.width='150px';

    38. 

  38. 	dvHdr.style.fontFamily='arial';

    39. 

  39. 	dvHdr.style.border='1px solid #A5CFE9';

    40. 

  40. 	dvHdr.style.padding='3';

    41. 

  41. 	dvHdr.style.fontSize='11';

    42. 

  42. 	dvHdr.style.color='#4B7A98';

    43. 

  43. 	dvHdr.style.background='#D5EBF9';

    44. 

  44. 	dvHdr.style.filter='alpha(opacity=85)'; // IE

    45. 

  45. 	dvHdr.style.opacity='0.85'; // FF

    46. 

  46. }

    47. 

  47. 

    48. 

  48. function defBdyStyle() {

    49. 

  49. 	dvBdy.style.borderBottom='1px solid #A5CFE9';

    50. 

  50. 	dvBdy.style.borderLeft='1px solid #A5CFE9';

    51. 

  51. 	dvBdy.style.borderRight='1px solid #A5CFE9';

    52. 

  52. 	dvBdy.style.width='150px';

    53. 

  53. 	dvBdy.style.fontFamily='arial';

    54. 

  54. 	dvBdy.style.fontSize='11';

    55. 

  55. 	dvBdy.style.padding='3';

    56. 

  56. 	dvBdy.style.color='#1B4966';

    57. 

  57. 	dvBdy.style.background='#FFFFFF';

    58. 

  58. 	dvBdy.style.filter='alpha(opacity=85)'; // IE

    59. 

  59. 	dvBdy.style.opacity='0.85'; // FF

    60. 

  60. }

    61. 

  61. 

    62. 

  62. function checkElemBO(txt) {

    63. 

  63. if (!txt || typeof(txt) != 'string') return false;

    64. 

  64. if ((txt.indexOf('header')>-1)&&(txt.indexOf('body')>-1)&&(txt.indexOf('[')>-1)&&(txt.indexOf('[')>-1)) 

    65. 

  65.    return true;

    66. 

  66. else

    67. 

  67.    return false;

    68. 

  68. }

    69. 

  69. 

    70. 

  70. function scanBO(curNode) {

    71. 

  71. 	  if (checkElemBO(curNode.title)) {

    72. 

  72.          curNode.boHDR=getParam('header',curNode.title);

    73. 

  73.          curNode.boBDY=getParam('body',curNode.title);

    74. 

  74. 			curNode.boCSSBDY=getParam('cssbody',curNode.title);			

    75. 

  75. 			curNode.boCSSHDR=getParam('cssheader',curNode.title);

    76. 

  76. 			curNode.IEbugfix=(getParam('hideselects',curNode.title)=='on')?true:false;

    77. 

  77. 			curNode.fixX=parseInt(getParam('fixedrelx',curNode.title));

    78. 

  78. 			curNode.fixY=parseInt(getParam('fixedrely',curNode.title));

    79. 

  79. 			curNode.absX=parseInt(getParam('fixedabsx',curNode.title));

    80. 

  80. 			curNode.absY=parseInt(getParam('fixedabsy',curNode.title));

    81. 

  81. 			curNode.offY=(getParam('offsety',curNode.title)!='')?parseInt(getParam('offsety',curNode.title)):10;

    82. 

  82. 			curNode.offX=(getParam('offsetx',curNode.title)!='')?parseInt(getParam('offsetx',curNode.title)):10;

    83. 

  83. 			curNode.fade=(getParam('fade',curNode.title)=='on')?true:false;

    84. 

  84. 			curNode.fadespeed=(getParam('fadespeed',curNode.title)!='')?getParam('fadespeed',curNode.title):0.04;

    85. 

  85. 			curNode.delay=(getParam('delay',curNode.title)!='')?parseInt(getParam('delay',curNode.title)):0;

    86. 

  86. 			if (getParam('requireclick',curNode.title)=='on') {

    87. 

  87. 				curNode.requireclick=true;

    88. 

  88. 				document.all?curNode.attachEvent('onclick',showHideBox):curNode.addEventListener('click',showHideBox,false);

    89. 

  89. 				document.all?curNode.attachEvent('onmouseover',hideBox):curNode.addEventListener('mouseover',hideBox,false);

    90. 

  90. 			}

    91. 

  91. 			else {// Note : if requireclick is on the stop clicks are ignored   			

    92. 

  92.    			if (getParam('doubleclickstop',curNode.title)!='off') {

    93. 

  93.    				document.all?curNode.attachEvent('ondblclick',pauseBox):curNode.addEventListener('dblclick',pauseBox,false);

    94. 

  94.    			}	

    95. 

  95.    			if (getParam('singleclickstop',curNode.title)=='on') {

    96. 

  96.    				document.all?curNode.attachEvent('onclick',pauseBox):curNode.addEventListener('click',pauseBox,false);

    97. 

  97.    			}

    98. 

  98.    		}

    99. 

  99. 			curNode.windowLock=getParam('windowlock',curNode.title).toLowerCase()=='off'?false:true;

    100. 

  100. 			curNode.title='';

    101. 

  101. 			curNode.hasbox=1;

    102. 

  102. 	   }

    103. 

  103. 	   else

    104. 

  104. 	      curNode.hasbox=2;   

    105. 

  105. }

    106. 

  106. 

    107. 

  107. 

    108. 

  108. function getParam(param,list) {

    109. 

  109. 	var reg = new RegExp('([^a-zA-Z]' + param + '|^' + param + ')\\s*=\\s*\\[\\s*(((\\[\\[)|(\\]\\])|([^\\]\\[]))*)\\s*\\]');

    110. 

  110. 	var res = reg.exec(list);

    111. 

  111. 	var returnvar;

    112. 

  112. 	if(res)

    113. 

  113. 		return res[2].replace('[[','[').replace(']]',']');

    114. 

  114. 	else

    115. 

  115. 		return '';

    116. 

  116. }

    117. 

  117. 

    118. 

  118. function Left(elem){	

    119. 

  119. 	var x=0;

    120. 

  120. 	if (elem.calcLeft)

    121. 

  121. 		return elem.calcLeft;

    122. 

  122. 	var oElem=elem;

    123. 

  123. 	while(elem){

    124. 

  124. 		 if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderLeftWidth)))&&(x!=0))

    125. 

  125. 		 	x+=parseInt(elem.currentStyle.borderLeftWidth);

    126. 

  126. 		 x+=elem.offsetLeft;

    127. 

  127. 		 elem=elem.offsetParent;

    128. 

  128. 	  } 

    129. 

  129. 	oElem.calcLeft=x;

    130. 

  130. 	return x;

    131. 

  131. 	}

    132. 

  132. 

    133. 

  133. function Top(elem){

    134. 

  134. 	 var x=0;

    135. 

  135. 	 if (elem.calcTop)

    136. 

  136. 	 	return elem.calcTop;

    137. 

  137. 	 var oElem=elem;

    138. 

  138. 	 while(elem){		

    139. 

  139. 	 	 if ((elem.currentStyle)&& (!isNaN(parseInt(elem.currentStyle.borderTopWidth)))&&(x!=0))

    140. 

  140. 		 	x+=parseInt(elem.currentStyle.borderTopWidth); 

    141. 

  141. 		 x+=elem.offsetTop;

    142. 

  142. 	         elem=elem.offsetParent;

    143. 

  143.  	 } 

    144. 

  144.  	 oElem.calcTop=x;

    145. 

  145.  	 return x;

    146. 

  146.  	 

    147. 

  147. }

    148. 

  148. 

    149. 

  149. var ah,ab;

    150. 

  150. function applyStyles() {

    151. 

  151. 	if(ab)

    152. 

  152. 		oDv.removeChild(dvBdy);

    153. 

  153. 	if (ah)

    154. 

  154. 		oDv.removeChild(dvHdr);

    155. 

  155. 	dvHdr=document.createElement("div");

    156. 

  156. 	dvBdy=document.createElement("div");

    157. 

  157. 	CBE.boCSSBDY?dvBdy.className=CBE.boCSSBDY:defBdyStyle();

    158. 

  158. 	CBE.boCSSHDR?dvHdr.className=CBE.boCSSHDR:defHdrStyle();

    159. 

  159. 	dvHdr.innerHTML=CBE.boHDR;

    160. 

  160. 	dvBdy.innerHTML=CBE.boBDY;

    161. 

  161. 	ah=false;

    162. 

  162. 	ab=false;

    163. 

  163. 	if (CBE.boHDR!='') {		
    164. 

  164. 		oDv.appendChild(dvHdr);

    165. 

  165. 		ah=true;

    166. 

  166. 	}	

    167. 

  167. 	if (CBE.boBDY!=''){

    168. 

  168. 		oDv.appendChild(dvBdy);

    169. 

  169. 		ab=true;

    170. 

  170. 	}	

    171. 

  171. }

    172. 

  172. 

    173. 

  173. var CSE,iterElem,LSE,CBE,LBE, totalScrollLeft, totalScrollTop, width, height ;

    174. 

  174. var ini=false;

    175. 

  175. 

    176. 

  176. // Customised function for inner window dimension

    177. 

  177. function SHW() {

    178. 

  178.    if (document.body && (document.body.clientWidth !=0)) {

    179. 

  179.       width=document.body.clientWidth;

    180. 

  180.       height=document.body.clientHeight;

    181. 

  181.    }

    182. 

  182.    if (document.documentElement && (document.documentElement.clientWidth!=0) && (document.body.clientWidth + 20 >= document.documentElement.clientWidth)) {

    183. 

  183.       width=document.documentElement.clientWidth;   

    184. 

  184.       height=document.documentElement.clientHeight;   

    185. 

  185.    }   

    186. 

  186.    return [width,height];

    187. 

  187. }

    188. 

  188. 

    189. 

  189. 

    190. 

  190. var ID=null;

    191. 

  191. function moveMouse(e) {

    192. 

  192.    //boxMove=true;

    193. 

  193. 	e?evt=e:evt=event;

    194. 

  194. 	

    195. 

  195. 	CSE=evt.target?evt.target:evt.srcElement;

    196. 

  196. 	

    197. 

  197. 	if (!CSE.hasbox) {

    198. 

  198. 	   // Note we need to scan up DOM here, some elements like TR don't get triggered as srcElement

    199. 

  199. 	   iElem=CSE;

    200. 

  200. 	   while ((iElem.parentNode) && (!iElem.hasbox)) {

    201. 

  201. 	      scanBO(iElem);

    202. 

  202. 	      iElem=iElem.parentNode;

    203. 

  203. 	   }	   

    204. 

  204. 	}

    205. 

  205. 	

    206. 

  206. 	if ((CSE!=LSE)&&(!isChild(CSE,dvHdr))&&(!isChild(CSE,dvBdy))){		

    207. 

  207. 	   if (!CSE.boxItem) {

    208. 

  208. 			iterElem=CSE;

    209. 

  209. 			while ((iterElem.hasbox==2)&&(iterElem.parentNode))

    210. 

  210. 					iterElem=iterElem.parentNode; 

    211. 

  211. 			CSE.boxItem=iterElem;

    212. 

  212. 			}

    213. 

  213. 		iterElem=CSE.boxItem;

    214. 

  214. 		if (CSE.boxItem&&(CSE.boxItem.hasbox==1))  {

    215. 

  215. 			LBE=CBE;

    216. 

  216. 			CBE=iterElem;

    217. 

  217. 			if (CBE!=LBE) {

    218. 

  218. 				applyStyles();

    219. 

  219. 				if (!CBE.requireclick)

    220. 

  220. 					if (CBE.fade) {

    221. 

  221. 						if (ID!=null)

    222. 

  222. 							clearTimeout(ID);

    223. 

  223. 						ID=setTimeout("fadeIn("+CBE.fadespeed+")",CBE.delay);

    224. 

  224. 					}

    225. 

  225. 					else {

    226. 

  226. 						if (ID!=null)

    227. 

  227. 							clearTimeout(ID);

    228. 

  228. 						COL=1;

    229. 

  229. 						ID=setTimeout("oDv.style.visibility='visible';ID=null;",CBE.delay);						

    230. 

  230. 					}

    231. 

  231. 				if (CBE.IEbugfix) {hideSelects();} 

    232. 

  232. 				fixposx=!isNaN(CBE.fixX)?Left(CBE)+CBE.fixX:CBE.absX;

    233. 

  233. 				fixposy=!isNaN(CBE.fixY)?Top(CBE)+CBE.fixY:CBE.absY;			

    234. 

  234. 				lockX=0;

    235. 

  235. 				lockY=0;

    236. 

  236. 				boxMove=true;

    237. 

  237. 				ox=CBE.offX?CBE.offX:10;

    238. 

  238. 				oy=CBE.offY?CBE.offY:10;

    239. 

  239. 			}

    240. 

  240. 		}

    241. 

  241. 		else if (!isChild(CSE,dvHdr) && !isChild(CSE,dvBdy) && (boxMove))	{

    242. 

  242. 			// The conditional here fixes flickering between tables cells.

    243. 

  243. 			if ((!isChild(CBE,CSE)) || (CSE.tagName!='TABLE')) {   			

    244. 

  244.    			CBE=null;

    245. 

  245.    			if (ID!=null)

    246. 

  246.   					clearTimeout(ID);

    247. 

  247.    			fadeOut();

    248. 

  248.    			showSelects();

    249. 

  249. 			}

    250. 

  250. 		}

    251. 

  251. 		LSE=CSE;

    252. 

  252. 	}

    253. 

  253. 	else if (((isChild(CSE,dvHdr) || isChild(CSE,dvBdy))&&(boxMove))) {

    254. 

  254. 		totalScrollLeft=0;

    255. 

  255. 		totalScrollTop=0;

    256. 

  256. 		

    257. 

  257. 		iterElem=CSE;

    258. 

  258. 		while(iterElem) {

    259. 

  259. 			if(!isNaN(parseInt(iterElem.scrollTop)))

    260. 

  260. 				totalScrollTop+=parseInt(iterElem.scrollTop);

    261. 

  261. 			if(!isNaN(parseInt(iterElem.scrollLeft)))

    262. 

  262. 				totalScrollLeft+=parseInt(iterElem.scrollLeft);

    263. 

  263. 			iterElem=iterElem.parentNode;			

    264. 

  264. 		}

    265. 

  265. 		if (CBE!=null) {

    266. 

  266. 			boxLeft=Left(CBE)-totalScrollLeft;

    267. 

  267. 			boxRight=parseInt(Left(CBE)+CBE.offsetWidth)-totalScrollLeft;

    268. 

  268. 			boxTop=Top(CBE)-totalScrollTop;

    269. 

  269. 			boxBottom=parseInt(Top(CBE)+CBE.offsetHeight)-totalScrollTop;

    270. 

  270. 			doCheck();

    271. 

  271. 		}

    272. 

  272. 	}

    273. 

  273. 	

    274. 

  274. 	if (boxMove&&CBE) {

    275. 

  275. 		// This added to alleviate bug in IE6 w.r.t DOCTYPE

    276. 

  276. 		bodyScrollTop=document.documentElement&&document.documentElement.scrollTop?document.documentElement.scrollTop:document.body.scrollTop;

    277. 

  277. 		bodyScrollLet=document.documentElement&&document.documentElement.scrollLeft?document.documentElement.scrollLeft:document.body.scrollLeft;

    278. 

  278. 		mouseX=evt.pageX?evt.pageX-bodyScrollLet:evt.clientX-document.body.clientLeft;

    279. 

  279. 		mouseY=evt.pageY?evt.pageY-bodyScrollTop:evt.clientY-document.body.clientTop;

    280. 

  280. 		if ((CBE)&&(CBE.windowLock)) {

    281. 

  281. 			mouseY < -oy?lockY=-mouseY-oy:lockY=0;

    282. 

  282. 			mouseX < -ox?lockX=-mouseX-ox:lockX=0;

    283. 

  283. 			mouseY > (SHW()[1]-oDv.offsetHeight-oy)?lockY=-mouseY+SHW()[1]-oDv.offsetHeight-oy:lockY=lockY;

    284. 

  284. 			mouseX > (SHW()[0]-dvBdy.offsetWidth-ox)?lockX=-mouseX-ox+SHW()[0]-dvBdy.offsetWidth:lockX=lockX;			

    285. 

  285. 		}

    286. 

  286. 		oDv.style.left=((fixposx)||(fixposx==0))?fixposx:bodyScrollLet+mouseX+ox+lockX+"px";

    287. 

  287. 		oDv.style.top=((fixposy)||(fixposy==0))?fixposy:bodyScrollTop+mouseY+oy+lockY+"px";		

    288. 

  288. 		

    289. 

  289. 	}

    290. 

  290. }

    291. 

  291. 

    292. 

  292. function doCheck() {	

    293. 

  293. 	if (   (mouseX < boxLeft)    ||     (mouseX >boxRight)     || (mouseY < boxTop) || (mouseY > boxBottom)) {

    294. 

  294. 		if (!CBE.requireclick)

    295. 

  295. 			fadeOut();

    296. 

  296. 		if (CBE.IEbugfix) {showSelects();}

    297. 

  297. 		CBE=null;

    298. 

  298. 	}

    299. 

  299. }

    300. 

  300. 

    301. 

  301. function pauseBox(e) {

    302. 

  302.    e?evt=e:evt=event;

    303. 

  303. 	boxMove=false;

    304. 

  304. 	evt.cancelBubble=true;

    305. 

  305. }

    306. 

  306. 

    307. 

  307. function showHideBox(e) {

    308. 

  308. 	oDv.style.visibility=(oDv.style.visibility!='visible')?'visible':'hidden';

    309. 

  309. }

    310. 

  310. 

    311. 

  311. function hideBox(e) {

    312. 

  312. 	oDv.style.visibility='hidden';

    313. 

  313. }

    314. 

  314. 

    315. 

  315. var COL=0;

    316. 

  316. var stopfade=false;

    317. 

  317. function fadeIn(fs) {

    318. 

  318. 		ID=null;

    319. 

  319. 		COL=0;

    320. 

  320. 		oDv.style.visibility='visible';

    321. 

  321. 		fadeIn2(fs);

    322. 

  322. }

    323. 

  323. 

    324. 

  324. function fadeIn2(fs) {

    325. 

  325. 		COL=COL+fs;

    326. 

  326. 		COL=(COL>1)?1:COL;

    327. 

  327. 		oDv.style.filter='alpha(opacity='+parseInt(100*COL)+')';

    328. 

  328. 		oDv.style.opacity=COL;

    329. 

  329. 		if (COL<1)

    330. 

  330. 		 setTimeout("fadeIn2("+fs+")",20);		

    331. 

  331. }

    332. 

  332. 

    333. 

  333. 

    334. 

  334. function fadeOut() {

    335. 

  335. 	oDv.style.visibility='hidden';

    336. 

  336. 	

    337. 

  337. }

    338. 

  338. 

    339. 

  339. function isChild(s,d) {

    340. 

  340. 	while(s) {

    341. 

  341. 		if (s==d) 

    342. 

  342. 			return true;

    343. 

  343. 		s=s.parentNode;

    344. 

  344. 	}

    345. 

  345. 	return false;

    346. 

  346. }

    347. 

  347. 

    348. 

  348. var cSrc;

    349. 

  349. function checkMove(e) {

    350. 

  350. 	e?evt=e:evt=event;

    351. 

  351. 	cSrc=evt.target?evt.target:evt.srcElement;

    352. 

  352. 	if ((!boxMove)&&(!isChild(cSrc,oDv))) {

    353. 

  353. 		fadeOut();

    354. 

  354. 		if (CBE&&CBE.IEbugfix) {showSelects();}

    355. 

  355. 		boxMove=true;

    356. 

  356. 		CBE=null;

    357. 

  357. 	}

    358. 

  358. }

    359. 

  359. 

    360. 

  360. function showSelects(){

    361. 

  361.    var elements = document.getElementsByTagName("select");

    362. 

  362.    for (i=0;i< elements.length;i++){

    363. 

  363.       elements[i].style.visibility='visible';

    364. 

  364.    }

    365. 

  365. }

    366. 

  366. 

    367. 

  367. function hideSelects(){

    368. 

  368.    var elements = document.getElementsByTagName("select");

    369. 

  369.    for (i=0;i< elements.length;i++){

    370. 

  370.    elements[i].style.visibility='hidden';

    371. 

  371.    }

    372. 

  372. }
    373.