Link to home
Start Free TrialLog in
Avatar of benjamin_007
benjamin_007Flag for United States of America

asked on

What is this code used to create the flyout menus & why is it invisible in IE + Opera? [Updating a previous developer's code]

Hello,

I am updating a website, http://www.masterfonics.com/mastering/. I am moderately seasoned in HTML, CSS, but the only java ive used is Dreamweaver's Behaviours.

This site im updating, has a horizontal flyout menu, and it is completely gone when viewed in IE7. I cant recognize the code that was used to create this. its Javascript, and starts with

//Swipe Menu : 1.0

Whoever did this before me maybe used Frontpage or some other layout app, but its all foreign to me. Until i trash it all (its a HUGE amount of code, too!), I am hoping to find out why its not displayed in IE7. Its invisible in Opera as well.

What is this code used to create the flyout menus & why is it invisible in IE + Opera, and can you help me hack it to display in these browsers?

Many Thanks,
ben
<script language="javascript" type="text/javascript">
<!--
 
//Swipe Menu : 1.0
is = {};
is.agent = navigator.userAgent.toLowerCase();
is.ie4 = (is.agent.indexOf("msie 4") != -1);
is.ie5 = (is.agent.indexOf("msie 5") != -1);
is.ie55 = (is.agent.indexOf("msie 5.5") != -1);
is.ie6 = (is.agent.indexOf("msie 6") != -1);
is.ns4 = (is.agent.indexOf("4") != -1 && document.layers);
is.ns6 = (is.agent.indexOf("netscape6") != -1 && is.agent.indexOf("6.1") == -1);
is.ns6x = (is.agent.indexOf("netscape6") != -1);
is.ie = (is.ie4 || is.ie5 || is.ie55 || is.ie6);
is.moz = (is.agent.indexOf("gecko")!= -1);
is.mac = (is.agent.indexOf("mac") != -1);
is.win = (is.agent.indexOf("win") != -1);
is.iestrict = (is.win && is.ie6 && document.compatMode == "CSS1Compat");
is.macstrict = (is.ie5 && is.mac && document.doctype && document.doctype.name.indexOf(".dtd") != -1);
is.strict = (is.iestrict || is.macstrict);
is.iemac =(is.mac && is.ie5);
is.dom = (is.ie5 || is.ie55 || is.ie6 || is.ns6x || is.moz);
var css_px = (is.ns4) ?"" : "px";
 
function menuObj(obj, par, nst, p) {
    page = new Object();
    page.width = (is.ns6 || is.ns6x || is.ns4 || is.moz) ? innerWidth : document.body.clientWidth;
    page.height = (is.ns6 || is.ns6x || is.ns4 || is.moz) ? innerHeight : document.body.clientHeight;
    if (!is.ns4) {
        this.lyr = (is.dom) ? document.getElementById(obj) : document.all[obj];
    } else {
        this.lyr = (!nst) ? document.layers[obj] : document.layers[nst].document.layers[obj];
    }
    this.sty = (!is.ns4) ? this.lyr.style : this.lyr;
    this.parent = par;
    this.obj = obj + "SwipeLayer";
    eval(this.obj + "= this");
}
menuObj.prototype.timer = null;
menuObj.prototype.wipe = 0;
if (is.iemac){
menuObj.prototype.offX = Function('oX = this.lyr.offsetLeft -6+-(mAtt.border)+0; return oX');
menuObj.prototype.offY = Function('oY = this.lyr.offsetTop-2+-(mAtt.border)+0+(0);return oY;');
} else {
menuObj.prototype.offX = Function('oX = (is.dom) ? this.lyr.offsetLeft  : parseInt(this.sty.left);return oX');
menuObj.prototype.offY = Function('oY = (is.dom) ? this.lyr.offsetTop  : parseInt(this.sty.top);return oY;');
}
menuObj.prototype.offW = Function('oW = (!is.ns4) ? this.lyr.offsetWidth : this.lyr.clip.width; return oW;')
menuObj.prototype.offH = Function('oH = (!is.ns4) ? this.lyr.offsetHeight : this.lyr.clip.height; return oH;')
menuObj.prototype.maxWipe = function() {
   	if(is.dom) return this.offH()+10;
	if(is.ns4) return (sAtt.height*this.lyr.document.layers.length)+10;
}
var pd = "padding:0px 6px 0px 6px;"
wipeMenu.prototype.addMain = function(name, hasSub, txt, url) {
	menuName = this.name, wipePos = this.pos, mAtt = this.mAtt, sAtt = this.sAtt;
	var pf = Math.ceil(((mAtt.height-mAtt.font_size)/2)-2);
	var styStr2 = "position:absolute; visibility:hidden; clip:rect(0px "+(sAtt.width+20)+"px 0px 0px); border:solid 1px "+sAtt.border_color+"; border-width:"+sAtt.border+"px 0px 0px 0px; cursor:default;"
	if(this.main[name]) return;
	if(is.ns4) {
		var mainMenu = new Layer(mAtt.width);
		var styStr = "text-decoration:none; font-weight:"+mAtt.font_weight+"; z-index:1; color:"+mAtt.fg_off+"; padding:"+((mAtt.height/2)-(mAtt.font_size/2)-1)+"px 0px 0px 0px; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+";"
		mainMenu.document.write('<div align="'+mAtt.align+'" style="'+pd+'"><a href="'+url+'" style="'+styStr+'">'+txt+'</a></div>');
		mainMenu.document.close();
		var mainMenu1 = new Layer(mAtt.width);
		mainMenu.captureEvents(Event.MOUSEUP);
		mainMenu.resizeTo(mAtt.width,mAtt.height);
		if(mAtt.bg_off.indexOf("url") != -1) {
			mainMenu.background.src = mAtt.bg_off.substring(4,mAtt.bg_off.length-1);
			mainMenu.background.src = mAtt.bg_off.substring(4,mAtt.bg_off.length-1);
		} else mainMenu.bgColor = mAtt.bg_off;
		mainMenu.visibility = "visible";
		}
	if(is.dom) {
		var mainMenu = document.createElement("DIV");
		var wf = (is.ns6x || is.moz || is.strict) ? 12 : 0;
		var pf2 = (mAtt.height%2 == 0) ? 1 : 0;
		var styStr = "position:absolute; font-weight:"+mAtt.font_weight+"; z-index:1; width:"+(mAtt.width-wf)+"px; border:solid "+mAtt.border+"px "+mAtt.border_color+"; color:"+mAtt.fg_off+";  text-align:"+mAtt.align+"; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+mAtt.bg_off+"; cursor:pointer; cursor:hand;"
		mainMenu.innerHTML = txt;
		mainMenu.id = name+menuName;
		mainMenu.style.cssText = styStr;
		mainMenu.setAttribute("style", styStr);
		document.body.appendChild(mainMenu);
	}
	if(is.ie4) {
		var mM = '<div id="'+name+menuName+'" style="'+styStr+'">'+txt+'</div>';
		var wf = 12; 
		var styStr = "position:absolute; font-weight:"+mAtt.font_weight+"; z-index:1; width:"+(mAtt.width-wf)+"px; border:solid "+mAtt.border+"px "+mAtt.border_color+"; color:"+mAtt.fg_off+";  text-align:"+mAtt.align+"; font-size:"+mAtt.font_size+"px; font-family:"+mAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+mAtt.bg_off+"; cursor:pointer; cursor:hand;"
		document.body.insertAdjacentHTML("beforeEnd", mM);
		var mainMenu = document.all[name+menuName];
	}
	mainMenu.onmouseover = Function('if('+hasSub+')'+menuName+'.subs["'+name+'"].show("'+wipePos+'"); over_out(this, "'+mAtt.bg_on+'", "'+mAtt.fg_on+'")');
	mainMenu.onmouseout = Function('if('+hasSub+')'+menuName+'.subs["'+name+'"].hide();over_out(this, "'+mAtt.bg_off+'", "'+mAtt.fg_off+'")');
	mainMenu.onmousedown = Function('location.href = "'+url+'"');
	this.main[name] = new menuObj(mainMenu.id);
	this.mainNum[this.mainNum.length] = this.main[name];
	if(!hasSub) return;
	if(is.ns4) {
		var subC = new Layer(sAtt.width);
		subC.resizeTo(sAtt.width,0);
		subC.visibility = "hidden";
	}
	if(is.dom) {
		var subC = document.createElement("DIV");
		subC.id = name+menuName+"Sub";
		var wf = (is.ns6x || is.moz) ? 4 : 0;
		subC.style.cssText = styStr2;
		subC.setAttribute("style", styStr2);
		document.body.appendChild(subC);
	}
	if(is.ie4) {
		var sC = '<div id="'+name+menuName+'Sub" style="'+styStr2+'"></div>';
		document.body.insertAdjacentHTML("beforeEnd", sC);
		var subC = document.all[name+menuName+"Sub"];
	}
	this.subs[name] = new menuObj(subC.id, this.main[name]);
	subC.onmouseover = Function(menuName+'.subs["'+name+'"].show("'+wipePos+'");');
	subC.onmouseout = Function(menuName+'.subs["'+name+'"].hide();');
}
wipeMenu.prototype.addSub = function(name, parent, txt, url) {
	var pf2 = (mAtt.height%2 == 0) ? 1 : 0;
	var pf = Math.ceil(((sAtt.height-sAtt.font_size)/2)-2);
	if(is.ns4) {
		var tempsub = new Layer(sAtt.width, this.subs[parent].lyr);
		var styStr = "text-decoration:none; font-weight:"+mAtt.font_weight+"; color:"+sAtt.fg_off+"; padding:"+((sAtt.height/2)-(sAtt.font_size/2)-2)+"px 0px 0px 0px; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+";"
		tempsub.document.write('<div align="'+sAtt.align+'" style="'+pd+'"><a href="'+url+'" style="'+styStr+'">'+txt+'</a></div>');
		tempsub.document.close();
		tempsub.captureEvents(Event.MOUSEUP);
		tempsub.resizeTo(sAtt.width,sAtt.height);
		tempsub.moveTo(0,(sAtt.height*(this.subs[parent].lyr.document.layers.length-1)));
		if(sAtt.bg_off.indexOf("url") != -1) {
			tempsub.background.src = sAtt.bg_off.substring(4,sAtt.bg_off.length-1);
			tempsub.background.src = sAtt.bg_off.substring(4,sAtt.bg_off.length-1);
		} 
		else tempsub.bgColor = sAtt.bg_off;
		tempsub.visibility = "inherit";
	}
	if(is.dom) {
		var tempsub = document.createElement("DIV");
		var wf = (is.ns6x || is.moz || is.strict) ? 12 : 0;
		var styStr = "width:"+(sAtt.width-wf)+"px; font-weight:"+mAtt.font_weight+"; border:solid "+sAtt.border+"px "+sAtt.border_color+"; border-top-width:0px; color:"+sAtt.fg_off+";  text-align:"+sAtt.align+"; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+sAtt.bg_off+"; cursor:pointer; cursor:hand;"
		tempsub.id = name+menuName+"SubItem";
		tempsub.innerHTML = txt;
		tempsub.style.cssText = styStr;
		tempsub.setAttribute("style", styStr);
		this.subs[parent].lyr.appendChild(tempsub);
	}
	if(is.ie4) {
		var wf =  12; 
		var styStr = "width:"+(sAtt.width-wf)+"px; font-weight:"+mAtt.font_weight+"; border:solid "+sAtt.border+"px "+sAtt.border_color+"; border-top-width:0px; color:"+sAtt.fg_off+";  text-align:"+sAtt.align+"; font-size:"+sAtt.font_size+"px; font-family:"+sAtt.font+"; padding:"+pf+"px 6px "+(pf+pf2)+"px 6px; background:"+sAtt.bg_off+"; cursor:pointer; cursor:hand;"
		var ts = '<div id="'+name+menuName+'SubItem" style="'+styStr+'" onmouseover="over_out(this, \''+sAtt.bg_on+'\',\''+sAtt.fg_on+'\')" onmouseout="over_out(this, \''+sAtt.bg_off+'\', \''+sAtt.fg_off+'\')" onmousedown="location.href=\''+url+'\'">'+txt+'</div>';
		this.subs[parent].lyr.insertAdjacentHTML("beforeEnd", ts);
	}
	if(!is.ie4) {
		tempsub.onmouseover = Function('over_out(this, "'+sAtt.bg_on+'", "'+sAtt.fg_on+'")');
		tempsub.onmouseout = Function('over_out(this, "'+sAtt.bg_off+'", "'+sAtt.fg_off+'")');
		tempsub.onmousedown = Function('location.href = "'+url+'"');
	}
}
menuObj.prototype.show = function(p) {
 if( is.iemac && p == "v") {
  this.sty.left = this.parent.offX()+mAtt.width+css_px;
  this.sty.top = this.parent.offY()+(+mAtt.height%2);
 } else if (p=="h") {
  this.sty.left = this.parent.offX()+ css_px;
  this.sty.top = this.parent.offY()+ this.parent.offH()+css_px;
 } else {
  this.sty.left = this.parent.offX()+this.parent.offW()+css_px;
  this.sty.top = this.parent.offY()+css_px;
 }
 this.sty.visibility = "visible";
 this.sty.zIndex = "1";
 this.doShow();
}
menuObj.prototype.doShow = function() {
	clearTimeout(this.timer);
	this.clipIt(0, this.offW(), this.wipe, 0);
	this.wipe += 10;
	if(this.wipe <= this.maxWipe()) this.timer = setTimeout(this.obj + ".doShow()",50);
}
menuObj.prototype.hide = function() {
	clearTimeout(this.timer)
	this.clipIt(0, this.offW(), this.wipe-10, 0);
	this.wipe -= 10;
	if(this.wipe >= 0) this.timer = setTimeout(this.obj + ".hide()",50);
	else this.sty.visibility = "hidden";
}
function over_out(obj, bg, fg) {
	if(is.ns4) {
		if(bg.indexOf("url") != -1) obj.background.src = bg.substring(4,bg.length-1)
		else obj.background.src = "", obj.bgColor = bg;
	}
	else {
		if(bg.indexOf("url") != -1) obj.style.backgroundImage = bg;
		else obj.style.backgroundImage = "url(blank)", obj.style.backgroundColor = bg;
		obj.style.color = fg;
	}
}
menuObj.prototype.clipIt = function(t,r,b,l) {
	if(!is.ns4) this.sty.clip = "rect("+t+"px, "+r+"px, "+b+"px, "+l+"px)"
	else {
		this.sty.clip.top = t;
		this.sty.clip.right = r;
		this.sty.clip.bottom = b;
		this.sty.clip.left = l;
	}
}
wipeMenu.prototype.buildMenu = function(x,y,spacing) {
	this.mainNum[0].sty.left = x+css_px;
	this.mainNum[0].sty.top = y+css_px;
	if(!is.ns4 && spacing == 0) var spacing = -this.mAtt.border;
	for(i = 1; i < this.mainNum.length; i++) {
		if(this.pos == "h") {
			this.mainNum[i].sty.left = this.mainNum[i-1].offX()+this.mainNum[i-1].offW()+spacing+css_px;
			this.mainNum[i].sty.top = this.mainNum[i-1].offY()+css_px;
		} else {
			this.mainNum[i].sty.left = this.mainNum[i-1].offX()+css_px;
			this.mainNum[i].sty.top = this.mainNum[i-1].offY()+this.mainNum[i-1].offH()+spacing+css_px;
	}
	}
}
 
function wipeMenu(menu, p, ma, sa) {
    this.name = menu;
    this.pos = p;
    this.mAtt = ma;
    this.sAtt = (!sa) ? ma : sa;
    this.main = [];
    this.mainNum = [];
    this.subs = [];
}
function macGo(){
if (is.iemac) {
history.go(0);
}
}
if(document.layers) { 
var pX = innerWidth;
var pY = innerHeight; 
	onresize= function(){ 
		if(pX!= innerWidth || pY!= innerHeight) history.go(0); 
	}
}
image1 = new Image()
image1.src = "images/a2.gif"
image2 = new Image()
image2.src = ""
image3 = new Image()
image3.src = ""
image4 = new Image()
image4.src = ""
//M2Preload
//FinishM2
 
function initSwipeMenu() {
	hMenu1Att = new Array();
	hMenu1Att["width"] = 102,
	hMenu1Att["height"] = 20,
	hMenu1Att["align"] = "center";
	hMenu1Att["font"] = "Arial";
	hMenu1Att["font_size"] = 11;
	hMenu1Att["font_weight"] = "normal";
	hMenu1Att["bg_off"] = "url(images/a2.gif)";
	hMenu1Att["bg_on"] = "#999999";
	hMenu1Att["fg_off"] = "#FFFFFF";
	hMenu1Att["fg_on"] = "#FFFFFF";
	hMenu1Att["border"] = 0;
	hMenu1Att["border_color"] = "#000000";
 
	hMenu1SubAtt = new Array();
	hMenu1SubAtt["width"] = 102,
	hMenu1SubAtt["height"] = 20,
	hMenu1SubAtt["align"] = "center";
	hMenu1SubAtt["font"] = "Arial";
	hMenu1SubAtt["font_size"] = 11;
	hMenu1SubAtt["font_weight"] = "normal";
	hMenu1SubAtt["bg_off"] = "#000000";
	hMenu1SubAtt["bg_on"] = "#999999";
	hMenu1SubAtt["fg_off"] = "#FFFFFF";
	hMenu1SubAtt["fg_on"] = "#FFFFFF";
	hMenu1SubAtt["border"] = 1;
	hMenu1SubAtt["border_color"] = "#CCCCCC";
 
hMenu1 = new wipeMenu("hMenu1", "h", hMenu1Att, hMenu1SubAtt);
//MenuTypeEnd
//xMenu1
hMenu1.addMain("Menu1", true, "Tommy Dorsey", "aboutus/engineers/dorsey.htm");
hMenu1.addSub("Menu1Sub1", "Menu1", "Contact", "aboutus/engineers/contactdorsey.htm");
hMenu1.addSub("Menu1Sub2", "Menu1", "About Tommy", "aboutus/engineers/dorsey.htm");
hMenu1.addSub("Menu1Sub3", "Menu1", "Mastering Room", "studio/tommysroom.htm");
hMenu1.addSub("Menu1Sub4", "Menu1", "Publicity", "aboutus/clientlist.htm");
//xMenu1End
//xMenu2
hMenu1.addMain("Menu2", true, "Jonathan Russell", "aboutus/engineers/russell.htm");
hMenu1.addSub("Menu2Sub1", "Menu2", "Contact", "aboutus/engineers/contactrussell.htm");
hMenu1.addSub("Menu2Sub2", "Menu2", "About Jonathan", "aboutus/engineers/russell.htm");
hMenu1.addSub("Menu2Sub3", "Menu2", "Mastering Room", "studio/jonathansroom.htm");
hMenu1.addSub("Menu2Sub4", "Menu2", "Publicity", "aboutus/clientlist.htm");
 
//xMenu2End
//xMenu3
hMenu1.addMain("Menu3", true, "Services", "services/index.htm");
hMenu1.addSub("Menu3Sub1", "Menu3", "Mastering Rates", "services/rates.htm");
hMenu1.addSub("Menu3Sub2", "Menu3", "Formats Accepted", "services/checklist.htm");
//xMenu3End
//xMenu4
hMenu1.addMain("Menu4", true, "News", "news/index.htm");
hMenu1.addSub("Menu4Sub1", "Menu4", "Press", "news/press.htm");
//xMenu4End
//xMenu5
hMenu1.addMain("Menu5", true, "Nashville", "nashville/index.htm");
hMenu1.addSub("Menu5Sub1", "Menu5", "Explore Nashville", "nashville/index.htm");
hMenu1.addSub("Menu5Sub2", "Menu5", "Map to Studio", "nashville/map.htm");
hMenu1.addSub("Menu5Sub3", "Menu5", "Hotels", "nashville/hotels.htm");
//xMenu5End
//xMenu6
hMenu1.addMain("Menu6", true, "Resources", "resources/index.htm");
hMenu1.addSub("Menu6Sub1", "Menu6", "Contact Us", "resources/contactus.htm");
hMenu1.addSub("Menu6Sub2", "Menu6", "Industry Links", "links/index.htm");
hMenu1.addSub("Menu6Sub3", "Menu6", "Site Map", "resources/sitemap.htm");
//xMenu6End
//xMenu7
//xMenu7End
//XtraMenusEnd
hMenu1.buildMenu(135,74,0);
//Additional
}
//SwipeMenuEnd
//-->
</script>

Open in new window

ASKER CERTIFIED SOLUTION
Avatar of Jason C. Levine
Jason C. Levine
Flag of United States of America image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial