IEHOVER-FIX.js.org 4.48 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
//---------------------------------------------------------------------------------------------------------------------
/*
* 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
*/
//---------------------------------------------------------------------------------------------------------------------


// 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++) {
			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","");
}


//---------------------------------------------------------------------------------------------------------------------
//addOnloadEvent(sfHover);
addEvent(window, "load", sfHover);
// end