IEHOVER-FIX.js 4.9 KB
Newer Older
Thitichaipun Wutthisak committed
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 118 119 120 121 122 123 124 125 126 127 128 129 130 131 132 133 134 135 136 137 138 139
//---------------------------------------------------------------------------------------------------------------------
/*
* Created a long, long time ago by Tanny O'Haley
* Update history.
* 24 Oct 2006 - Added to http://tanny.ica.com
* 14 Jul 2006 - Modified the way the iframe is added to the DOM. I no longer use 
*			innerHTML but use DOM methods.
* 15 Sep 2006 - Added a check to see if the target element onmouseout is contained
*			in the onmouseout element. If it is then I dont' remove the
*			sfhover class. I made use of the Microsoft proprietary
*			obj.contains() method.
*		    Added check to make sure that the sfhover class is not already in
*			the li element.
/*

//---------------------------------------------------------------------------------------------------------------------
/*
*  Original Source from : Select tag overlap in IE
*  URL          :  http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/select-tag-overlap-in-ie
*                       http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-ii
*                       http://tanny.ica.com/ICA/TKO/tkoblog.nsf/dx/select-tag-overlap-in-ie-part-iii
*  Example  : http://tanny.ica.com/ICA/TKO/test.nsf/suckerfish/examplefix.htm
*
*  Modified by       : James
*  Version     : 2.0
*  Last Modified   : 09/01/2551
*  Require		: EVENTS.js for add event
*
*---------------------------------------------------------------------------------------------------------------------
*  edit by james [24/7/2552] : fix error in function setHover on loop ieULs =>ul haven't li 
*
*/
//---------------------------------------------------------------------------------------------------------------------


// for iframe
var offWidth = 5 ;
var offHeight = 20 ;

var MLDDM_ID = 'nav'						//  Id of dropdown menu( tag UL )
var MLDDM_CLASS = 'mlddm'		//  Class name of dropdown menu( tag UL )


sfHover = function() {
	// Support the standard nav without a class of nav.
	var el = document.getElementById(MLDDM_ID);
	if(el != null ){
		//if(!/\bnav\b/.test(el.className) && el.tagName == "UL")
		if(el.className != MLDDM_CLASS && el.tagName == "UL") {
			setHover(el);
		}
		// Find all unordered lists.
		var ieNavs = document.getElementsByTagName('ul');
		for(i=0; i<ieNavs.length; i++) {
			var ul = ieNavs[i];
			// If they have a class of nav add the menu hover.
			//if(/\bnav\b/.test(ul.className))
			if(ul.className == MLDDM_CLASS){
				setHover(ul);
			}
		}
	}

}

function setHover(nav) {
	var ieULs = nav.getElementsByTagName('ul');
	if (navigator.appVersion.substr(22,3)!="5.0") {
		// IE script to cover <select> elements with <iframe>s
		for (j=0; j<ieULs.length; j++) {
			if(ieULs[j].children.length>0) {		 //  edit by james [24/7/2552] : fix error when ul haven't li 
				var ieMat=document.createElement('iframe');
				if(document.location.protocol == "https:") {
					ieMat.src="//0";
				} else if(window.opera != "undefined") {
					ieMat.src="";
				} else {
					ieMat.src="javascript:false";
				}
				ieMat.scrolling="no";
				ieMat.frameBorder="0";

				// edit by james
				//ieMat.style.width=ieULs[j].offsetWidth+"px";
				//ieMat.style.height=ieULs[j].offsetHeight+"px";			
				ieMat.style.width=ieULs[j].offsetWidth +offWidth +"px";
				ieMat.style.height=ieULs[j].offsetHeight +offWidth+"px";
				// end 

				ieMat.style.zIndex="-1";
				ieULs[j].insertBefore(ieMat, ieULs[j].childNodes[0]);
				ieULs[j].style.zIndex="101";
			}
		}
		// IE script to change class on mouseover
		var ieLIs = nav.getElementsByTagName('li');
		for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
			// Add a sfhover class to the li.
			ieLIs[i].onmouseover=function() {
				if(!/\bsfhover\b/.test(this.className))
					this.className+=" sfhover";
			}
			ieLIs[i].onmouseout=function() {
				if(!this.contains(event.toElement))
					this.className=this.className.replace(' sfhover', '');
			}
		}
	} else {
		// IE 5.0 doesn't support iframes so hide the select statements on hover and show on mouse out.
		// IE script to change class on mouseover
		var ieLIs = document.getElementById(MLDDM_ID).getElementsByTagName('li');
		for (var i=0; i<ieLIs.length; i++) if (ieLIs[i]) {
			ieLIs[i].onmouseover=function() {this.className+=" sfhover";hideSelects();}
			ieLIs[i].onmouseout=function() {this.className=this.className.replace(' sfhover', '');showSelects()}
		}
	}
}

// If IE 5.0 hide and show the select statements.
function hideSelects(){
	var oSelects=document.getElementsByTagName("select");
	for(var i=0;i<oSelects.length;i++)
		oSelects[i].className+=" hide";
}

function showSelects(){
	var oSelects=document.getElementsByTagName("select");
	for(var i=0;i<oSelects.length;i++)
		oSelects[i].className=oSelects[i].className.replace(" hide","");
}


//---------------------------------------------------------------------------------------------------------------------
/*
// move to place, that call menu -> emv-topmenu.jsp
// sfHover must call befor menu initial
addEvent(window, "load", sfHover);
*/
// end