HELP with CSS/Javascript Drop down menu from Dynamic Drive

[Jurnee]

center content

footer

[Jurnee]

I better include the JavaScript file as well:

//Drop Down Tabs Menu- Author: Dynamic Drive ( http://www.dynamicdrive.com )
//Created: May 16th, 07'

var tabdropdown={
disappeardelay: 200, //set delay in miliseconds before menu disappears onmouseout
disablemenuclick: false, //when user clicks on a menu item with a drop down menu, disable menu item's link?
enableiframeshim: 1, //1 or 0, for true or false

//No need to edit beyond here////////////////////////
dropmenuobj: null, ie: document.all, firefox: document.getElementById&&!document.all, previousmenuitem:null,
currentpageurl: window.location.href.replace("http://"+window.location.hostname, "").replace(/^\//, ""), //get current page url (minus hostname, ie: http://www.dynamicdrive.com/ )

getposOffset:function(what, offsettype){
var totaloffset=(offsettype=="left")? what.offsetLeft : what.offsetTop;
var parentEl=what.offsetParent;
while (parentEl!=null){
totaloffset=(offsettype=="left")? totaloffset+parentEl.offsetLeft : totaloffset+parentEl.offsetTop;
parentEl=parentEl.offsetParent;
}
return totaloffset;
},

showhide:function(obj, e, obj2){ //obj refers to drop down menu, obj2 refers to tab menu item mouse is currently over
if (this.ie || this.firefox)
this.dropmenuobj.style.left=this.dropmenuobj.style.top="-500px"
if (e.type=="click" && obj.visibility==hidden || e.type=="mouseover"){
if (obj2.parentNode.className.indexOf("default")==-1) //if tab isn't a default selected one
obj2.parentNode.className="selected"
obj.visibility="visible"
}
else if (e.type=="click")
obj.visibility="hidden"
},

iecompattest:function(){
return (document.compatMode && document.compatMode!="BackCompat")? document.documentElement : document.body
},

clearbrowseredge:function(obj, whichedge){
var edgeoffset=0
if (whichedge=="rightedge"){
var windowedge=this.ie && !window.opera? this.standardbody.scrollLeft+this.standardbody.clientWidth-15 : window.pageXOffset+window.innerWidth-15
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetWidth
if (windowedge-this.dropmenuobj.x < this.dropmenuobj.contentmeasure) //move menu to the left?
edgeoffset=this.dropmenuobj.contentmeasure-obj.offsetWidth
}
else{
var topedge=this.ie && !window.opera? this.standardbody.scrollTop : window.pageYOffset
var windowedge=this.ie && !window.opera? this.standardbody.scrollTop+this.standardbody.clientHeight-15 : window.pageYOffset+window.innerHeight-18
this.dropmenuobj.contentmeasure=this.dropmenuobj.offsetHeight
if (windowedge-this.dropmenuobj.y < this.dropmenuobj.contentmeasure){ //move up?
edgeoffset=this.dropmenuobj.contentmeasure+obj.offsetHeight
if ((this.dropmenuobj.y-topedge)

[autocrat]

Ermmm seems to be working in IE6 and MFF1.5 on Win XP SP2

[MidiMagic]

We need the css too.

[Jurnee]

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

[csgraham74]

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

Ok i think i hva ethe exact same problem using the same control all i seem to get is 'tabdropdown' is undefined.

If you have a fix could you please send it to me

thanks

CG

[MidiMagic]

Could this be a problem with different screen resolutions making a mess of absolute and relative rendering?

Either do everything absolute with reference to the same fixed point, or do all of the relative addressing the same way.

[naptown]

Hi MidMagic,

I had to get this working (cauase the job needs to get finished), so I kept thinking of different solutions to try. That evening I managed to fix the problem. If anyone else is having problems with the drop-down boxes lining up when you position the nav bar with CSS - let me know and I'll send you the fix.

Please post the fix so others can view it. I am experiencing the same issues.

Thanks in advance.

[naptown]

I I figured it out from a message on another forum. Basically, you need to remove the dropdown menu divs outside everything except for the . Here is the code sample:

<html>
	<head>
		<script type="text/javascript" src="dropdowntabfiles/dropdowntabs.js"></script>

		<link rel="stylesheet" type="text/css" href="dropdowntabfiles/ddcolortabs.css" />

		<style type="text/css">
			td {padding=2px;}
			#container {position: absolute; left: 50%; width: 750px; margin-left: -375px; border: 0px; background-color: silver;}
			#content {margin-top: 20px;}
			#nav {position: fixed; top: 0; width: 750px; border-top: 2px solid black; border-bottom: 1px solid black;}
		</style>
	</head>

	<body bgcolor = #888888>
		<div id="container">
			<div id="nav">
				<div id="colortab" class="ddcolortabs">
					<ul>
						<li><a href="" title="Home"><span>Home</span></a></li>
						<li><a href="" title="About" rel="dropmenu1_a"><span>About</span></a></li>
						<li><a href="" title="Contact"><span>Contact</span></a></li>
						<li><a href="" title="Audio" rel="dropmenu2_a"><span>Audio</span></a></li>
						<li><a href="" title="Links"><span>Links</span></a></li>
					</ul>
				</div>

				<div class="ddcolortabsline">&nbsp;</div>

			</div>

			<div id="content">
				<center>
					<table border=0>
						<tr>
							<td style="padding=40px;">Left Side</td>
							<td style="padding=40px;"><img src="" width=300px height=200px /></td>
							<td style="padding=40px;">Right Side</td>
						</tr>
					</table>
				
					<hr /><p>Bottom</p>
				</center>
			</div>
		</div>

				<!--1st drop down menu-->
				<div id="dropmenu1_a" class="dropmenudiv_a">
					<a href="">Brief</a>
					<a href="">Prices</a>
					<a href="">Open Slots</a>
				</div>

				<!--2nd drop down menu-->
				<div id="dropmenu2_a" class="dropmenudiv_a">
					<a href="">Beginners</a>
					<a href="">Intermediate</a>
					<a href="">Advanced</a>
				</div>

				<script type="text/javascript">
				tabdropdown.init("colortab", 3)
				</script>
	</body>
</html>