Log in

View Full Version : Chrome CSS menu problem


Digital Gear
12-08-2008, 09:03 PM
Greetings and welcome to my first post...

I have been trying for 2 days now to make the Chrome CSS dropdown menu work on a webpage I am building - so far without much luck. I keep getting the following error when the page loads:

" 'cssdropdown' is undefined "

Everything on the page loads, except the menu loads on the left as text, including all the drop-down menus.

I feel like a complete moron; I've tried everything I can think of to make it work but have had no success. I'm not even sure this is a CSS problem, and from reading through most of the posts, it doesn't appear anyone else has had this problem.

Thanks for any assistance...

I'm using MS Frontpage, and I'm sure you've seen the .js and css file for Chrome CSS (I haven't altered them) - and the site isn't published yet. Here is my html:

<html>

<head>
<meta http-equiv="Content-Type" content="text/html; charset=windows-1252">
<title>Shared Top Border</title>
<meta name="Microsoft Border" content="none">
<link rel="stylesheet" type="text/css" href="chromestyle.css" />
<script type="text/javascript" src="chrome.js">

/***********************************************
* Chrome CSS Drop Down 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>

<meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" />

</head>


<body bgcolor="#000000">



<p align="center"><img border="0" src="../images/ELSLBanner06.jpg"></p>
<p align="center">&nbsp;</p>


<div class="chromestyle" id="elslmenu">
<ul>
<li><a href="http://www.eaglelakesportsmenslodge.com">Home</a></li>
<li><a href="#" rel="dropmenu01">Fishing</a></li>
<li><a href="#" rel="dropmenu02">Hunting</a></li>
<li><a href="#" rel="dropmenu03">Cabins</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/rates.htm">Rates</a></li>
<li><a href="#" rel="dropmenu04">Contact</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/album.htm">Photo Album</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/links.htm">Links</a></li>
</ul>
</div>

<!--1st drop down menu -->
<div id="dropmenu01" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/fishing.htm">Fishing Eagle Lake</a>
<a href="http://www.eaglelakesportsmenslodge.com/photo08.htm">Fishing photos 2008</a>
<a href="http://www.eaglelakesportsmenslodge.com/rates.htm">Rates</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu02" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/hunts.htm">Hunts</a>
<a href="http://www.eaglelakesportsmenslodge.com/album.htm">Hunting Photos</a>
<a href="http://www.eaglelakesportsmenslodge.com/rates.html">Rates</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu03" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/cabins.html">All Cabins</a>
<a href="http://www.eaglelakesportsmenslodge.com/lodge.htm">Main Lodge</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_one.htm">Cabin 1</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_two.htm">Cabin 2</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_three.htm">Cabin 3</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_four.htm">Cabin 4</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_five.htm">Cabin 5</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_six.htm">Cabin 6</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_seven.htm">Cabin 7</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_eight.htm">Cabin 8</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_nine.htm">Cabin 9</a>
</div>

<!--4th drop down menu -->
<div id="dropmenu04" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/contact.htm">Contact Us</a>
<a href="http://www.eaglelakesportsmenslodge.com/map.htm">Map and Directions</a>
<a href="http://www.eaglelakesportsmenslodge.com/regs.htm">Border Crossing info</a>
</div>

<script type="text/javascript">
cssdropdown.startchrome ("elslmenu")
</script>

</body>
</html>
Snookerman
12-08-2008, 09:32 PM
If you need help with scripts from Dynamic Drive you should always post in the Dynamic Drive scripts help forum (http://www.dynamicdrive.com/forums/forumdisplay.php?f=2).
You should also post a link to the script you are using (http://www.dynamicdrive.com/dynamicindex1/chrome/index.htm).
Also, you should wrap your code in code tags (button looks like this #).

I rewrote your code and it works now:

<!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" lang="en" xml:lang="en">
<head>
<title>Chrome CSS Drop Down Menu</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" type="text/css" href="chrometheme/chromestyle.css" />
<script type="text/javascript" src="chromejs/chrome.js">

/***********************************************
* Chrome CSS Drop Down 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>
</head>
<body bgcolor="#000000">
<div class="chromestyle" id="chromemenu">
<ul>
<li><a href="http://www.eaglelakesportsmenslodge.com">Home</a></li>
<li><a href="#" rel="dropmenu01">Fishing</a></li>
<li><a href="#" rel="dropmenu02">Hunting</a></li>
<li><a href="#" rel="dropmenu03">Cabins</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/rates.htm">Rates</a></li>
<li><a href="#" rel="dropmenu04">Contact</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/album.htm">Photo Album</a></li>
<li><a href="http://www.eaglelakesportsmenslodge.com/links.htm">Links</a></li>
</ul>
</div>
<!--1st drop down menu -->
<div id="dropmenu01" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/fishing.htm">Fishing Eagle Lake</a>
<a href="http://www.eaglelakesportsmenslodge.com/photo08.htm">Fishing photos 2008</a>
<a href="http://www.eaglelakesportsmenslodge.com/rates.htm">Rates</a>
</div>

<!--2nd drop down menu -->
<div id="dropmenu02" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/hunts.htm">Hunts</a>
<a href="http://www.eaglelakesportsmenslodge.com/album.htm">Hunting Photos</a>
<a href="http://www.eaglelakesportsmenslodge.com/rates.html">Rates</a>
</div>

<!--3rd drop down menu -->
<div id="dropmenu03" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/cabins.html">All Cabins</a>
<a href="http://www.eaglelakesportsmenslodge.com/lodge.htm">Main Lodge</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_one.htm">Cabin 1</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_two.htm">Cabin 2</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_three.htm">Cabin 3</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_four.htm">Cabin 4</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_five.htm">Cabin 5</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_six.htm">Cabin 6</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_seven.htm">Cabin 7</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_eight.htm">Cabin 8</a>
<a href="http://www.eaglelakesportsmenslodge.com/c_nine.htm">Cabin 9</a>
</div>

<!--4th drop down menu -->
<div id="dropmenu04" class="dropmenudiv" style="width: 150px;">
<a href="http://www.eaglelakesportsmenslodge.com/contact.htm">Contact Us</a>
<a href="http://www.eaglelakesportsmenslodge.com/map.htm">Map and Directions</a>
<a href="http://www.eaglelakesportsmenslodge.com/regs.htm">Border Crossing info</a>
</div><script type="text/javascript">

cssdropdown.startchrome("chromemenu")

</script>
</body>
</html>
Digital Gear
12-09-2008, 03:08 PM
Snookerman:

Thank-you for your invaluable time, but... your rewrite didn't work. I am still coming up with the same error: 'cssdropdown' not defined.

Any ideas? Again, I am using MS FrontPage, the site is being constructed but is not published to the web yet (hence, no link), and I am using Java 1.6.7.

Again, thank-you for your time.
Snookerman
12-09-2008, 03:56 PM
That's strange, I tested it in FF3, IE7 and Opera 9.6 and they all worked great. Make sure you use the entire page because I also fixed your doctype and that the .js and .css files are in the right place.
Digital Gear
12-09-2008, 04:18 PM
Snookerman:

Thanks again for your time.

I copied your code directly into the page, totally cutting out everything already there. Did that with the Demo page code as well... same error: 'cssdropdown' not defined.

Let me ask this: I was trying to place the menu into a shared border - the top shared border. I didn't think it would make any difference; however, when I moved your code into the body of the page (not a shared border), it performed perfectly.

The only other thing I noticed was when I took off the ">" at the end of the line #<div class="chromestyle" id="elslmenu">#, the line #<script type="text/javascript"> cssdropdown.startchrome ("elslmenu")# changed colors to the expected colors - as if it was suddenly noticed. I don't know what this has to do with the price of tea in China, but... I'll hang it out there. I am now suspecting it has more to do with using a shared border.

Again, thank-you for your time. Your prompt answers and straight talk are appreciated.
Snookerman
12-10-2008, 12:26 PM
Your welcome! I'm afraid I don't understand what you mean by "shared" border. Could you please explain that and post a link to you site or attach your code?
Digital Gear
12-10-2008, 02:08 PM
Snookerman:

It's called a shared border in MS FrontPage, but think of it as a frame - this particular website I am over-hauling has 3 frames - 1 on top, down the left side, and one at the bottom. Example is the old site: http://www.eaglelakesportsmenslodge.com/ . Notice the "sign" in the top frame, the navigation menu in the left frame, and another navigation menu in the bottom frame. All of these frames appear static as the frame in the center changes as one selects links from the left or bottom frame.

The "new" site, still under construction, has only a top and bottom frame - and I wanted to put the Chrome CSS menu in the top frame so that the code only had to be placed on one page. That way it also "appeared" on every page selected - at the top (it actually never leaves). That was the plan, but I haven't been able to make it work. It works perfectly, however, in middle section - just not in the top or the bottom frame (shared border). Weird.

Anyways - any suggestions you may have would be greatly appreciated. As always, thanks for your time and assistance.