User Name Password Register
DaniWeb IT Discussion Community
All
What is DaniWeb IT Discussion Community?
You're currently browsing the HTML and CSS section within the Web Development category of DaniWeb, a massive community of 391,150 software developers, web developers, Internet marketers, and tech gurus who are all enthusiastic about making contacts, networking, and learning from each other. In fact, there are 3,146 IT professionals currently interacting right now! Registration is free, only takes a minute and lets you enjoy all of the interactive features of the site.
Please support our HTML and CSS advertiser: Lunarpages Web Hosting
Views: 4408 | Replies: 8
Reply
Join Date: Aug 2007
Posts: 3
Reputation: Jurnee is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
Jurnee Jurnee is offline Offline
Newbie Poster

Question HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #1  
Aug 13th, 2007
After hours of searching for for a nice looking drop-down menu in CSS I found the perfect one on the Dynamic Drive website. It's working wonderfully - as long as I don't try and position it anywhere on the page except for the default position. As soon as I moved the top menu, the drop-down menu practically disappears off the side of the page. I've looked at the three files involved (a JavaScript file, a CSS file, and the HTML file) for hours until I'm cross eyed but none of the fixes I've tried worked. That's probably because I don't really do any JavaScript coding and I suspect the problem is there.

Here is the link to the drop down menu - Example #4: http://www.dynamicdrive.com/dynamici...roptabmenu.htm

Here is what it looks like on the test page am working on: http://66.51.163.67/Indexnew.cfm (you'll see the drop-down boxes are off to the right of the page)

And below is the main html file:
I enclose the Nav bar in a Div ID called "topbuttons" and coded it like this:
position: relative;
width: 400px;
top: -12%;
right: 0px;
left: 42%;
}

The top-level menu is exactly where I want it. The drop-down boxes are driving me absolutely nuts. If I can't get help on this, I'll have to scrap the whole nav bar - something I'd hate to do because it looks great and I've already sunk hours into it trying t get it to work

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Le Zeste Catering and Consulting</title>

<!-- Meta Information -->
<meta http-equiv="content-type" content="text/html; charset=iso-8859-1" />
<meta name="keywords" content="Keywords" />
<!-- Stylesheets --><br />
<script src="Scripts/AC_RunActiveContent.js" type="text/javascript"></script>
<link href="CSS/default.css" rel="stylesheet" type="text/css" />

</head>

<body>
<div id="container">


<div id="header"><img src="images/TopBar.jpg" alt="Le Zeste Catering Menu Items" /> </div>
<!-- end div#header -->


<div id="toplogo">
<div id="logo"> <img src="images/LaZesteLogoTop.gif" alt="La Zeste Logo" /></div>

</div> <!-- end div#toplogo -->

<div id="topnav">
<div id="logo2"> <img src="images/LeZesteLogoBottom.gif" alt="La Zeste Logo" /></div>
<div id="topbuttons"> <cfinclude template="NavTest1.html"></cfinclude></div>
</div>
<!-- end div#topnav -->

<div id="content">

<div class="column" id="left">
<script type="text/javascript">
AC_FL_RunContent( 'codebase','http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0','width','250','height','250','title','La Zeste Menus','src','images/Zestnav','quality','high','pluginspage','http://www.macromedia.com/go/getflashplayer','movie','images/Zestnav' ); //end AC code
</script><noscript><object classid="clsid27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=7,0,19,0" width="250" height="250" title="La Zeste Menus">
<param name="movie" value="images/Zestnav.swf" />
<param name="quality" value="high" />
<embed src="images/Zestnav.swf" quality="high" pluginspage="http://www.macromedia.com/go/getflashplayer" type="application/x-shockwave-flash" width="250" height="250"></embed>
</object></noscript>
</div>
<!-- end div.column div#left -->

<div id="center">

center content

</div> <!-- end div#center -->

</div> <!-- end div#content -->

<div id="footer">

footer

</div> <!-- end div#footer -->


</div> <!-- end div#container -->


</body>
</html>
Last edited by Jurnee : Aug 13th, 2007 at 3:22 am. Reason: code error
AddThis Social Bookmark Button
Reply With Quote  
Join Date: Aug 2007
Posts: 3
Reputation: Jurnee is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
Jurnee Jurnee is offline Offline
Newbie Poster

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #2  
Aug 13th, 2007
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)<this.dropmenuobj.contentmeasure) //up no good either?
edgeoffset=this.dropmenuobj.y+obj.offsetHeight-topedge
}
this.dropmenuobj.firstlink.style.borderTopWidth=(edgeoffset==0)? 0 : "1px" //Add 1px top border to menu if dropping up
}
return edgeoffset
},

dropit:function(obj, e, dropmenuID){
if (this.dropmenuobj!=null){ //hide previous menu
this.dropmenuobj.style.visibility="hidden" //hide menu
if (this.previousmenuitem!=null && this.previousmenuitem!=obj){
if (this.previousmenuitem.parentNode.className.indexOf("default")==-1) //If the tab isn't a default selected one
this.previousmenuitem.parentNode.className=""
}
}
this.clearhidemenu()
if (this.ie||this.firefox){
obj.onmouseout=function(){tabdropdown.delayhidemenu(obj)}
obj.onclick=function(){return !tabdropdown.disablemenuclick} //disable main menu item link onclick?
this.dropmenuobj=document.getElementById(dropmenuID)
this.dropmenuobj.onmouseover=function(){tabdropdown.clearhidemenu()}
this.dropmenuobj.onmouseout=function(e){tabdropdown.dynamichide(e, obj)}
this.dropmenuobj.onclick=function(){tabdropdown.delayhidemenu(obj)}
this.showhide(this.dropmenuobj.style, e, obj)
this.dropmenuobj.x=this.getposOffset(obj, "left")
this.dropmenuobj.y=this.getposOffset(obj, "top")
this.dropmenuobj.style.left=this.dropmenuobj.x-this.clearbrowseredge(obj, "rightedge")+"px"
this.dropmenuobj.style.top=this.dropmenuobj.y-this.clearbrowseredge(obj, "bottomedge")+obj.offsetHeight+1+"px"
this.previousmenuitem=obj //remember main menu item mouse moved out from (and into current menu item)
this.positionshim() //call iframe shim function
}
},

contains_firefox:function(a, b) {
while (b.parentNode)
if ((b = b.parentNode) == a)
return true;
return false;
},

dynamichide:function(e, obj2){ //obj2 refers to tab menu item mouse is currently over
var evtobj=window.event? window.event : e
if (this.ie&&!this.dropmenuobj.contains(evtobj.toElement))
this.delayhidemenu(obj2)
else if (this.firefox&&e.currentTarget!= evtobj.relatedTarget&& !this.contains_firefox(evtobj.currentTarget, evtobj.relatedTarget))
this.delayhidemenu(obj2)
},

delayhidemenu:function(obj2){
this.delayhide=setTimeout(function(){tabdropdown.dropmenuobj.style.visibility='hidden'; if (obj2.parentNode.className.indexOf('default')==-1) obj2.parentNode.className=''},this.disappeardelay) //hide menu
},

clearhidemenu:function(){
if (this.delayhide!="undefined")
clearTimeout(this.delayhide)
},

positionshim:function(){ //display iframe shim function
if (this.enableiframeshim && typeof this.shimobject!="undefined"){
if (this.dropmenuobj.style.visibility=="visible"){
this.shimobject.style.width=this.dropmenuobj.offsetWidth+"px"
this.shimobject.style.height=this.dropmenuobj.offsetHeight+"px"
this.shimobject.style.left=this.dropmenuobj.style.left
this.shimobject.style.top=this.dropmenuobj.style.top
}
this.shimobject.style.display=(this.dropmenuobj.style.visibility=="visible")? "block" : "none"
}
},

hideshim:function(){
if (this.enableiframeshim && typeof this.shimobject!="undefined")
this.shimobject.style.display='none'
},

isSelected:function(menuurl){
var menuurl=menuurl.replace("http://"+menuurl.hostname, "").replace(/^\//, "")
return (tabdropdown.currentpageurl==menuurl)
},

init:function(menuid, dselected){
this.standardbody=(document.compatMode=="CSS1Compat")? document.documentElement : document.body //create reference to common "body" across doctypes
var menuitems=document.getElementById(menuid).getElementsByTagName("a")
for (var i=0; i<menuitems.length; i++){
if (menuitems[i].getAttribute("rel")){
var relvalue=menuitems[i].getAttribute("rel")
document.getElementById(relvalue).firstlink=document.getElementById(relvalue).getElementsByTagName("a")[0]
menuitems[i].onmouseover=function(e){
var event=typeof e!="undefined"? e : window.event
tabdropdown.dropit(this, event, this.getAttribute("rel"))
}
}
if (dselected=="auto" && typeof setalready=="undefined" && this.isSelected(menuitems[i].href)){
menuitems[i].parentNode.className+=" selected default"
var setalready=true
}
else if (parseInt(dselected)==i)
menuitems[i].parentNode.className+=" selected default"
}
}

}
Reply With Quote  
Join Date: Feb 2005
Posts: 427
Reputation: autocrat is on a distinguished road 
Rep Power: 4
Solved Threads: 12
autocrat autocrat is offline Offline
Posting Pro in Training

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #3  
Aug 15th, 2007
Ermmm seems to be working in IE6 and MFF1.5 on Win XP SP2
Reply With Quote  
Join Date: Jan 2007
Posts: 2,510
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 103
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #4  
Aug 16th, 2007
We need the css too.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Aug 2007
Posts: 3
Reputation: Jurnee is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
Jurnee Jurnee is offline Offline
Newbie Poster

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #5  
Aug 16th, 2007
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.
Last edited by Jurnee : Aug 16th, 2007 at 2:38 am.
Reply With Quote  
Join Date: Oct 2007
Posts: 1
Reputation: csgraham74 is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
csgraham74 csgraham74 is offline Offline
Newbie Poster

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #6  
Oct 16th, 2007
Originally Posted by Jurnee View Post
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
Reply With Quote  
Join Date: Jan 2007
Posts: 2,510
Reputation: MidiMagic is on a distinguished road 
Rep Power: 7
Solved Threads: 103
MidiMagic's Avatar
MidiMagic MidiMagic is offline Offline
Posting Maven

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #7  
Oct 19th, 2007
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.
Daylight-saving time uses more gasoline
Reply With Quote  
Join Date: Oct 2007
Posts: 2
Reputation: naptown is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
naptown naptown is offline Offline
Newbie Poster

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #8  
Oct 23rd, 2007
Originally Posted by Jurnee View Post
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.
Reply With Quote  
Join Date: Oct 2007
Posts: 2
Reputation: naptown is an unknown quantity at this point 
Rep Power: 0
Solved Threads: 0
naptown naptown is offline Offline
Newbie Poster

Re: HELP with CSS/Javascript Drop down menu from Dynamic Drive

  #9  
Oct 24th, 2007
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 <body>. 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>
Reply With Quote  
Reply

Only community members can participate in forum threads. You must register or log in to contribute.

Currently Active Users Viewing This Thread: 1 (0 members and 1 guests)

 

DaniWeb HTML and CSS Marketplace
Thread Tools Display Modes

Similar Threads
Other Threads in the HTML and CSS Forum

All times are GMT -4. The time now is 7:00 am.
Forum system based on vBulletin Copyright ©2000 - 2008, Jelsoft Enterprises Ltd.
©2003 - 2008 DaniWeb® LLC