Column and Link issues AnyLink JS Drop Down Menu v2.3

[scottsbt]

1) Script Title: AnyLink JS Drop Down Menu v2.3

2) Script URL (on DD): http://www.dynamicdrive.com/dynamici...pmenuindex.htm

3) Describe problem:

ACTUALLY, I HAVE TWO PROBLEMS.

PROBLEM ONE:
Possible browser compatibility issue? I'm hoping someone might be able to clue me in on how to fix it.

I merged the Anylink code into one scottsbtmenu.js file. The html being called by document writes. The css is merged into my site css file.

I'm using a mix of single col and multi-col dropdowns. The problem is that it works great on Mozilla and Google Chrome. BUT NOT on IE9. I don't have any way atm to see if it works on older IE versions.

On IE, the multi-col is not displaying correctly. It shows up instead as one column with just a slightly wider spacing where the efc break should be.

You can view our site/menu here:
http://www.scottsbt.com

PROBLEM TWO:
This one I can live with if I have to, but I'd really like it if it could be solved.

I can't link to an outside site / full web address. If I try, it sticks http://www.scottsbt.com/ in front of the addresses. I had this problem even when testing the script code in it's original separate file format.

I worked around it by just using /fishing/index.htm, etc., and kept all the addresses within our site. There are however a few outside links that I'd really like to include, like linking to NJ fish and wildlife site, our facebook page, etc.

Doing the links this way results in another problem, where sometimes the links get confused if you click on another link on the menu, and it mixes up the sub folder for that link with the one you are on, resulting in a 404 error.

I made a "reset" button for that to make it more obvious to the users that they can reset it if the menu gets glitchy, even though technically, they could click on any of the actual buttons to reload the website back to the default address.


It won't let me post the js here, it made the post two long. I'll add it to this thread in two pieces. (turned out to be 4 quick replies to make the blocks short enough)

Here's my css for anylink:

/* begin anylinkmenu css */
/* 9/16/2011 scottsbt.com/navigation/ menu settings anylinkmenu sample css
http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
*/	
.selectedanchor{ /*CSS class that gets added to the currently selected anchor link (assuming it's a text link)*/
background: yellow;
}

/* ######### Default class for drop down menus ######### */

.anylinkmenu{
position: absolute;
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
border-bottom-width: 0;
font: normal 12px Verdana;
line-height: 18px;
z-index: 100; /* zIndex should be greater than that of shadow's below */
background: lightyellow;
width: 200px; /* default width for menu */
}

.anylinkmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenu ul li a{
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkmenu a:hover{ /*hover background color*/
background: black;
color: white;
}

/* ######### Alternate multi-column class for drop down menus ######### */


.anylinkmenucols{
position: absolute;
width: 550px; /* This was 250, my link names are longer, or three column, so I made it wider */
left: 0;
top: 0;
visibility: hidden;
border: 1px solid black;
padding: 0px; /* padding was 10px */
font: normal 12px Verdana;
z-index: 100; /*zIndex should be greater than that of shadow's below*/
background: #DFFDF4;/* items below this copied from single col CSS to modify the dual */
line-height: 18px;
}

.anylinkmenucols li a{
/* items below this copied from single col CSS to modify the dual orig: padding-bottom: 3px; 
added "a" next to "li" above to make it affect the link? as done in single col */
width: 100%;
display: block;
text-indent: 3px;
border-bottom: 1px solid black;
border-right-width:medium; /* removing right radius got rid of the curve on the right side of the underline on columns */
padding: 2px 0;
text-decoration: none;
font-weight: bold;
text-indent: 5px;
}

.anylinkmenucols .column{
float: left;
padding: 3px 8px;
margin-right: 5px;
background: #DFFDF4; /* #c1f9e9; my orig col color*/
/* items below this copied from single col CSS to modify the dual */
/* border: 1px solid black; <--- this doesn't look right, made box within box, ugh */ 
}

.anylinkmenucols .column ul{
margin: 0;
padding: 0;
list-style-type: none;
}

.anylinkmenucols a:hover{ /*hover background color - copied from the single col to match */
background: black;
color: white;
}

/* ######### class for shadow DIV ######### */


.anylinkshadow{ /*CSS for shadow. Keep this as is */
position: absolute;
left: 0;
top: 0;
z-index: 99; /*zIndex for shadow*/
background: black;
visibility: hidden;
}

/* end anylinkmenu css */

Any help at all would be wonderful! I've been pretty happy with the DD script overall. I was using MenuMaker previously and wanted to get away from program dependancy.

Thanks! ~Mo

[scottsbt]

This is actuall the TOP of the full js file, for some reason that quick reply didn't post, so it's out of order

/************************************************ 
Dynamic Countdown script- © Dynamic Drive (http://www.dynamicdrive.com)
* This notice MUST stay intact for legal use* 
Visit http://www.dynamicdrive.com/ for this script and 100s more.
***********************************************/
//************************************************************************************************************
//** AnyLink JS Drop Down Menu v2.0- (c) Dynamic Drive DHTML code library: http://www.dynamicdrive.com
//** Script Download/ instructions page: http://www.dynamicdrive.com/dynamicindex1/dropmenuindex.htm
//** January 29th, 2009: Script Creation date

//**May 22nd, 09': v2.1
	//1) Automatically adds a "selectedanchor" CSS class to the currrently selected anchor link
	//2) For image anchor links, the custom HTML attributes "data-image" and "data-overimage" can be inserted to set the anchor's default and over images.

//**June 1st, 09': v2.2
	//1) Script now runs automatically after DOM has loaded. anylinkmenu.init) can now be called in the HEAD section

//**May 23rd, 10': v2.21: Fixes script not firing in IE when inside a frame page

//**June 28th, 11': v2.3: Menu updated to work properly in popular mobile devices such as iPad/iPhone and Android tablets.

/* 
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
 My notes: I merged all three files from AnyLink into one working javascript file to use as called header navigation in the site. The html portion is done in here via document writes. The CSS is merged into my site's CSS file.
 
 I'm using a mix of single columns and multi-columns, withe the multi-column css adjusted to match the single.
 
 10/29/11 It works as is w/CSS in the htm file where the script is called with one problem. The multi-columns are not displaying as columns on Explorer. It works great on Mozilla and Google Chrome, but NOT in ie9 (possibly not old older ie either, no way to test atm)
---------------------------------------------------------------------------------------------------
---------------------------------------------------------------------------------------------------
*/

if (typeof dd_domreadycheck=="undefined") //global variable to detect if DOM is ready
	var dd_domreadycheck=false

var anylinkmenu={

menusmap: {},
preloadimages: [],
effects: {delayhide: 200, shadow:{enabled:true, opacity:0.3, depth: [5, 5]}, fade:{enabled:true, duration:500}}, //customize menu effects

dimensions: {},
ismobile:navigator.userAgent.match(/(iPad)|(iPhone)|(iPod)|(android)|(webOS)/i) != null, //boolean check for popular mobile browsers

getoffset:function(what, offsettype){
	return (what.offsetParent)? what[offsettype]+this.getoffset(what.offsetParent, offsettype) : what[offsettype]
},

getoffsetof:function(el){
	el._offsets={left:this.getoffset(el, "offsetLeft"), top:this.getoffset(el, "offsetTop"), h: el.offsetHeight}
},

getdimensions:function(menu){
	this.dimensions={anchorw:menu.anchorobj.offsetWidth, anchorh:menu.anchorobj.offsetHeight,
		docwidth:(window.innerWidth ||this.standardbody.clientWidth)-20,
		docheight:(window.innerHeight ||this.standardbody.clientHeight)-15,
		docscrollx:window.pageXOffset || this.standardbody.scrollLeft,
		docscrolly:window.pageYOffset || this.standardbody.scrollTop
	}
	if (!this.dimensions.dropmenuw){
		this.dimensions.dropmenuw=menu.dropmenu.offsetWidth
		this.dimensions.dropmenuh=menu.dropmenu.offsetHeight
	}
},

isContained:function(m, e){
	var e=window.event || e
	var c=e.relatedTarget || ((e.type=="mouseover")? e.fromElement : e.toElement)
	while (c && c!=m)try {c=c.parentNode} catch(e){c=m}
	if (c==m)
		return true
	else
		return false
},

setopacity:function(el, value){
	el.style.opacity=value
	if (typeof el.style.opacity!="string"){ //if it's not a string (ie: number instead), it means property not supported
		el.style.MozOpacity=value
		if (document.all && typeof el.style.filter=="string"){
			el.style.filter="progid:DXImageTransform.Microsoft.alpha(opacity="+ value*100 +")"
		}
	}
},

showmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	clearTimeout(menu.hidetimer)
	this.getoffsetof(menu.anchorobj)
	this.getdimensions(menu)
	var posx=menu.anchorobj._offsets.left + (menu.orientation=="lr"? this.dimensions.anchorw : 0) //base x pos
	var posy=menu.anchorobj._offsets.top+this.dimensions.anchorh - (menu.orientation=="lr"? this.dimensions.anchorh : 0)//base y pos
	if (posx+this.dimensions.dropmenuw+this.effects.shadow.depth[0]>this.dimensions.docscrollx+this.dimensions.docwidth){ //drop left instead?
		posx=posx-this.dimensions.dropmenuw + (menu.orientation=="lr"? -this.dimensions.anchorw : this.dimensions.anchorw)
	}
	if (posy+this.dimensions.dropmenuh>this.dimensions.docscrolly+this.dimensions.docheight){  //drop up instead?
		posy=Math.max(posy-this.dimensions.dropmenuh - (menu.orientation=="lr"? -this.dimensions.anchorh : this.dimensions.anchorh), this.dimensions.docscrolly) //position above anchor or window's top edge
	}
	if (this.effects.fade.enabled){
		this.setopacity(menu.dropmenu, 0) //set opacity to 0 so menu appears hidden initially
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, 0) //set opacity to 0 so shadow appears hidden initially
	}
	menu.dropmenu.setcss({left:posx+'px', top:posy+'px', visibility:'visible'})
	if (this.effects.shadow.enabled){
		//menu.shadow.setcss({width: menu.dropmenu.offsetWidth+"px", height:menu.dropmenu.offsetHeight+"px"})
		menu.shadow.setcss({left:posx+anylinkmenu.effects.shadow.depth[0]+'px', top:posy+anylinkmenu.effects.shadow.depth[1]+'px', visibility:'visible'})
	}
	if (this.effects.fade.enabled){
		clearInterval(menu.animatetimer)
		menu.curanimatedegree=0
		menu.starttime=new Date().getTime() //get time just before animation is run
		menu.animatetimer=setInterval(function(){anylinkmenu.revealmenu(menuid)}, 20)
	}
},

revealmenu:function(menuid){
	var menu=anylinkmenu.menusmap[menuid]
	var elapsed=new Date().getTime()-menu.starttime //get time animation has run
	if (elapsed<this.effects.fade.duration){
		this.setopacity(menu.dropmenu, menu.curanimatedegree)
		if (this.effects.shadow.enabled)
			this.setopacity(menu.shadow, menu.curanimatedegree*this.effects.shadow.opacity)
	}
	else{
		clearInterval(menu.animatetimer)
		this.setopacity(menu.dropmenu, 1)
		menu.dropmenu.style.filter=""
	}
	menu.curanimatedegree=(1-Math.cos((elapsed/this.effects.fade.duration)*Math.PI)) / 2
},

setcss:function(param){
	for (prop in param){
		this.style[prop]=param[prop]
	}
},

setcssclass:function(el, targetclass, action){
	var needle=new RegExp("(^|\\s+)"+targetclass+"($|\\s+)", "ig")
	if (action=="check")
		return needle.test(el.className)
	else if (action=="remove")
		el.className=el.className.replace(needle, "")
	else if (action=="add" && !needle.test(el.className))
		el.className+=" "+targetclass
},