PDA

View Full Version : Drop Down Tabs not working



Dariune
02-16-2008, 05:11 PM
Hi guys

I am trying to use the Drop Down Tabs (5 styles) to create a drop down navigation bar on one of my websites and after 6 hours of going through it i thought i would ask for assistance.

Its just not working. The url is http://www.dynamicdrive.com/dynamicindex1/droptabmenu.htm

Below is the code. I guess im supposed to tell the page where to look for the JS file but cant figure out where.

If anyone is able to help it would save me the largest headache since i started learning HTML.

Thanks very much in advance
Dariune


<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Dragon's Touch - Home</title>
<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
-->
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style3 {font-size: medium}
a:visited {
color: #d01foa;
}
a:hover {
color: #d01foa;
}
a:active {
color: #d01foa;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<script type="text/JavaScript">
<!--


function MM_preloadImages() { //v3.0
var d=document; if(d.images){ if(!d.MM_p) d.MM_p=new Array();
var i,j=d.MM_p.length,a=MM_preloadImages.arguments; for(i=0; i<a.length; i++)
if (a[i].indexOf("#")!=0){ d.MM_p[j]=new Image; d.MM_p[j++].src=a[i];}}
}
//-->
</script>
<link href="../dropdowntabs/dropdowntabfiles/ddcolortabs.css" rel="stylesheet" type="text/css" />
</head>

<body onload="MM_preloadImages('../Images/Linkart/links_b.gif')">
<div class="style3" id="outer">
<div id="Header"></div>
<div id="SecNav"><p align="center">Secondary Navigation<br />

<div id="ddcolortabs" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com">Home</a></li>
<li><a href="http://www.dynamicdrive.com/style/" rel="dropmenu1">CSS</a></li>
<li><a href="http://www.dynamicdrive.com/resources/" rel="dropmenu2">Partners</a></li>
<li><a href="http://tools.dynamicdrive.com">Tools</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu1" class="ddcolortabs">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a></div>
"
"

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("bluemenu", 0)
</script>

</div>
<div id="links"><br />
<p align="left">Home<br />Dragons<br />Etc

<div id="news">
This is the news area
<!-- TemplateBeginEditable name="News" -->News<!-- TemplateEndEditable -->
<p> Dragons Touch will be launching our first DT Festival in 2009 </p>
</div>
</div>


<div id="Main">
<div align="center">

<!-- TemplateBeginEditable name="Main" --><!-- TemplateEndEditable --></div>
</div>


<div id="Footer"><img src="../Images/Footer2.png" width="400" height="107" /></div>
</div>
</body>
</html>

ddadmin
02-17-2008, 02:19 AM
Please post a link to the page on your site that contains the problematic script so we can check it out. It sounds like the references to the .css files of the script in the HEAD section of your page aren't correct.

Dariune
02-17-2008, 09:15 AM
Im afraid i cant

My website is local to my machine at the moment.

You think im pointing to the wrong place for the CSS?

I havent pointed it to the JS at all yet because i dont know where or how.

MuzicAngel
02-17-2008, 01:15 PM
Hi, i have been working to set-up these DD tabs since the past 7 days. I'm a novice at web designing but have used many of scripts from Dynamic drive in my website already.... without any problem. I totally agree that there's no where in the script for pointing to .JS file. It seems that some part of the script is missing. Lets hope that we get help for this soon.... :)

Dariune
02-17-2008, 05:14 PM
Im begginning to think i may have to try something else. I asked 4 forums at the same time as this one and no one knows how to make this code work :(

If i find a decent alternative i will let you know.

ddadmin
02-17-2008, 09:05 PM
Dariune:
Without a live URL to look at the problem, it's much harder to diagnose things. But just looking at the source you posted above, it seems to be missing the script reference at the very top of your page:


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

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

Take a look at the source of the demo page (http://www.dynamicdrive.com/dynamicindex1/dropdowntabsdemo.htm) you downloaded (zip file) again, and make sure your page includes every component referenced there.

Dariune
02-18-2008, 11:03 AM
Thankyou ddadmin, its really coming along now. Im almost there. It works but the tabs are being shown in the center of the screen rather than below the tabs.

Below is a screenshot of what i have so far and the updated html.

http://www.dragonstouch.co.uk/userimages/menutest.jpg


<!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" />
<!-- TemplateBeginEditable name="doctitle" -->
<title>Dragon's Touch - Home</title>

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

/***********************************************
* Drop Down Tabs Menu- (c) Dynamic Drive DHTML code library (www.dynamicdrive.com)
* This notice MUST stay intact for legal use
* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code
***********************************************/

</script>

<!-- TemplateEndEditable -->
<style type="text/css">
<!--
body {
background-color: #000000;
}
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
-->
-->
</style>
<link href="../Stylesheets/DT CSS.css" rel="stylesheet" type="text/css" />
<style type="text/css">
<!--
a:link {
color: #b46633;
}
.style3 {font-size: medium}
a:visited {
color: #d01foa;
}
a:hover {
color: #d01foa;
}
a:active {
color: #d01foa;
}
-->
</style>
<!-- TemplateBeginEditable name="head" --><!-- TemplateEndEditable -->
<link rel="stylesheet" type="text/css" href="../dropdowntabs/dropdowntabfiles/ddcolortabs.css" />
</head>

<body>
<div class="style3" id="outer">
<div id="Header"></div>
<div id="SecNav">
<div id="colortab" class="ddcolortabs">
<ul>
<li><a href="http://www.dynamicdrive.com" title="Home"><span>Home</span></a></li>
<li><a href="http://www.dynamicdrive.com/new.htm" title="New"><span>New</span></a></li>
<li><a href="http://www.dynamicdrive.com/style/" title="CSS" rel="dropmenu1_a"><span>CSS</span></a></li>
<li><a href="http://www.dynamicdrive.com/resources/" title="Partners" rel="dropmenu2_a"><span>Partners</span></a></li>
<li><a href="http://tools.dynamicdrive.com" title="Useful Tools"><span>Tools</span></a></li>
</ul>
</div>

<div class="ddcolortabsline">&nbsp;</div>
<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</div>

<div id="links"><br />
<p align="left">Home<br />Dragons<br />Etc

<div id="news">
This is the news area
<!-- TemplateBeginEditable name="News" -->News<!-- TemplateEndEditable -->
<p> Dragons Touch will be launching our first DT Festival in 2009 </p>
</div>
</div>


<div id="Main">
<div align="center">

<!-- TemplateBeginEditable name="Main" --><!-- TemplateEndEditable --></div>
</div>


<div id="Footer"><img src="../Images/Footer2.png" width="400" height="107" /></div>
</div>
</body>
</html>

block306
02-18-2008, 02:56 PM
Hi Daruine,
I have similar problems. I could not figure out where the .js files are supposed to be or whether we have to upload them somewhere 1st. Can you share your experience with me? I tried to pm you but your settings do not allow that. Please email me at block306 at gmail.com and I would like to pick your brains. Thanks.

ddadmin
02-18-2008, 07:06 PM
Most of the positioning problems with the drop down menus can be solved by making sure the HTML for the drop down DIVs themselves, plus the initialization JavaScript code, are outside any container tag on the page other than the BODY. So in your case, try moving all the drop down DIVs to the bottom of your page, just above the "</body>" tag:


<!--1st drop down menu -->
<div id="dropmenu1_a" class="dropmenudiv_a">
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C1/">Horizontal CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C2/">Vertical CSS Menus</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C4/">Image CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C6/">Form CSS</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C5/">DIVs and containers</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C7/">Links and Buttons</a>
<a href="http://www.dynamicdrive.com/style/csslibrary/category/C8/">Other</a>
</div>


<!--2nd drop down menu -->
<div id="dropmenu2_a" class="dropmenudiv_a" style="width: 150px;">
<a href="http://www.cssdrive.com">CSS Drive</a>
<a href="http://www.javascriptkit.com">JavaScript Kit</a>
<a href="http://www.codingforums.com">Coding Forums</a>
<a href="http://www.javascriptkit.com/jsref/">JavaScript Reference</a>
</div>

<script type="text/javascript">
//SYNTAX: tabdropdown.init("menu_id", [integer OR "auto"])
tabdropdown.init("colortab", 3)
</script>

</body>

Dariune
02-21-2008, 02:22 PM
Thats fantastic. It now works perfectly on the template page. Thankyou so much for your help!

My only problem is it doesnt work on the client pages. Because i am using Dreamweaver i am using template pages. I realises this is a longshot but does anyone here use dreamweaver templates and if you do, do you know why none of the bottom divs (dropdown divs) would show on any page other than the template page?

ddadmin
02-21-2008, 09:17 PM
It actually shouldn't matter whether or not you're using DW, as long as it doesn't inadvertently modify what you've pasted to the page at the end. For example, I use MS Frontpage, and if that works, DW certainly should. You may want to post a link to the page on your site that contains the problematic script so we can check it out.

Dariune
02-21-2008, 10:37 PM
Its ok i solved it.
Just so you can have a chuckle on a cold eve i will tell you the stupid thing i did.

I put the link to the JS page in an editable region inside the head tags. This editable region of course did not show up on the client pages.

Thankyou all very much for your help with this one.

Especially DDadmin, who rather saved the day as far as this is concerned.

Dariune
02-23-2008, 11:23 AM
One more question. Is there anyway to center the tabs? I am now using sliding doors.

Below is the css


.slidetabsmenu{
float:left;
width:50%;
font-size: 12px;
line-height:normal;

}

* html .slidetabsmenu{ /*IE only. Add 1em spacing between menu and rest of content*/
margin-bottom: 1em;
}

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

.slidetabsmenu li{
display:inline;
margin:0;
padding:0;
}

.slidetabsmenu a{
float:left;
background:url(media/slide-left.gif) no-repeat left top;
margin:0;
margin-right: 5px;
padding:0 0 0 9px;
text-decoration:none;
}

.slidetabsmenu a span {
float:left;
display:block;
background:url(media/slide-right.gif) no-repeat right top;
padding:2px 13px 2px 4px;
font-weight:bold;
color:#3B3B3B;
}

/* Commented Backslash Hack hides rule from IE5-Mac \*/
.slidetabsmenu a span {float:none;}
/* End IE5-Mac hack */

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
color: black;
}

.slidetabsmenu a:hover, .slidetabsmenu li.selected a{
background-position:0% -125px;
}

.slidetabsmenu a:hover span, .slidetabsmenu li.selected a span{
background-position:100% -125px;
}

html>/**/body .IEonlybr{ /*None IE browsers hack*/
display: none; /*Hide BR tag in non IE browsers, since it's not needed*/
}


/* ######### Style for Drop Down Menu ######### */

.dropmenudiv_c{
position:absolute;
top: 0;
border: 1px solid #918d8d; /*THEME CHANGE HERE*/
border-width: 0 1px;
font:normal 12px Verdana;
line-height:18px;
z-index:100;
background-color: white;
width: 200px;
visibility: hidden;
}


.dropmenudiv_c a{
width: auto;
display: block;
text-indent: 5px;
border: 0 solid #918d8d; /*THEME CHANGE HERE*/
border-bottom-width: 1px;
padding: 2px 0;
text-decoration: none;
font-weight: bold;
color: black;
}

* html .dropmenudiv_c a{ /*IE only hack*/
width: 100%;
}

.dropmenudiv_c a:hover{ /*THEME CHANGE HERE*/
background-color: #eaeaea;
}

ddadmin
02-23-2008, 08:06 PM
Hmm centering tabs that are floated (as in this case) in general is tricky. To be honest I've yet to stumble across an easy solution. You may want to do some research on Google regarding centering floated elements in CSS.

Dariune
02-24-2008, 10:07 AM
Ok i will do that, thanks :)