423,682 Members | 1,327 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 423,682 IT Pros & Developers. It's quick & easy.

Fancy Drop Down in JS

P: 1
I'm a total newbie. I really need help with this script. Its a drop down menu formatted with a CSS. It's not a formatting issue but i can't get the JS to run. I think I'm having issues calling it or something. If you generate the code obviously it'll look screwy since it doesn't have the CSS but the problem is i can't get the menu to collapse or expand. Do I need an onClick statement or something?Here it is. Help!

[HTML]<html>
<head>
<title>j</title>
<link rel="stylesheet" type="text/css" href="sdmenu.css" />
<script type="text/javascript" src="sdmenu.js">
<script type="text/javascript">
// <![CDATA[
var myMenu;
window.onload = function() {
myMenu = new SDMenu("my_menu");
myMenu.init();
};
// ]]>
</script>

</head>
<body>

<div style="float: left" id="my_menu" class="sdmenu">
<div><span>Inventory</span></div>
<div><span>Field Descriptions</span>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventFields.html#Field_Desc" class="submenu">General Fields</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventFields.html#UserTab" class="submenu">User/Location Tab</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventFields.html#CoverageTab" class="submenu">Coverage Tab</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventFields.html#POTab" class="submenu">P.O. Tab</a>
</div>
<div>
<span>Adding a Record</span>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventAddEquip.html#User_Location_tab" class="submenu">User/Location Tab</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventAddEquip.html#Coverage_tab" class="submenu">Coverage Tab</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventAddEquip.html#PO_Info_tab" class="submenu">P.O. Tab</a>
</div>
<div>
<span>Edit/Update Existing Record</span>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventEditRec.html#Transfer_to_different_user:" class="submenu">Transfer to different user</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventEditRec.html#Change_info_other_than_user:" class="submenu">Other Changes</a>
</div>
<div>
<span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/InventDisposeRec.html">Disposing Equipment</a></span>
</div>
<div>
<span>Help Desk</span>
</div>
<div>
<span>Field Descriptions</span>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDFields.html#TicketInfo" class="submenu">Ticket Info</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDFields.html#AssetTag" class="submenu">Asset Tag</a>
<a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDFields.html#Desc_Fields" class="submenu">Description Fields</a>
</div>
<div>
<span> <a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDOpenTicket.html" class="menu1"> Opening a new ticket</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDUpdateTicket.html" class="menu1"> Updating Open Ticket </a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDCloseTicket.html" class="menu1"> Closing a Ticket</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/HDKnowBase.html" class="menu1"> Knowledge base/Searching for records</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/TaskPanel.html" class="menu1"> Task Panel Button Descriptions</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/BasicCommands.html" class="menu1"> Filemaker Tips and Tricks</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/AdminTools.html" class="menu1" onClick="showHide('Admin_menu')"> Admin Tools</a></span></div>
<div><span><a href="http://webcontent.courtnet.org/w1_www/courts/DistrictOffices/6thDistrict/ops/Instructions/UCICS/default.html" class="menu1">Main Page</a></span></div>
</div>

</body>
</html>
[/HTML]

the JS file is:

Expand|Select|Wrap|Line Numbers
  1. var SDMenu;
  2. SDMenu = new SDMenu("my_menu");
  3.  
  4. function SDMenu(id) {
  5.     if (!document.getElementById || !document.getElementsByTagName)
  6.         return false;
  7.     this.menu = document.getElementById(id);
  8.     this.submenus = this.menu.getElementsByTagName("div");
  9.     this.remember = true;
  10.     this.speed = 3;
  11.     this.markCurrent = true;
  12.     this.oneSmOnly = false;
  13. }
  14. SDMenu.prototype.init = function() {
  15.     var mainInstance = this;
  16.     for (var i = 0; i < this.submenus.length; i++)
  17.         this.submenus[i].getElementsByTagName("a")[0].onclick = function() {
  18.             mainInstance.toggleMenu(this.parentNode);
  19.         };
  20.     if (this.markCurrent) {
  21.         var links = this.menu.getElementsByTagName("a");
  22.         for (var i = 0; i < links.length; i++)
  23.             if (links[i].href == document.location.href) {
  24.                 links[i].className = "current";
  25.                 break;
  26.             }
  27.     }
  28.     if (this.remember) {
  29.         var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
  30.         var match = regex.exec(document.cookie);
  31.         if (match) {
  32.             var states = match[1].split("");
  33.             for (var i = 0; i < states.length; i++)
  34.                 this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
  35.         }
  36.     }
  37. };
  38. SDMenu.prototype.toggleMenu = function(submenu) {
  39.     if (submenu.className == "collapsed")
  40.         this.expandMenu(submenu);
  41.     else
  42.         this.collapseMenu(submenu);
  43. };
  44. SDMenu.prototype.expandMenu = function(submenu) {
  45.     var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;
  46.     var links = submenu.getElementsByTagName("a");
  47.     for (var i = 0; i < links.length; i++)
  48.         fullHeight += links[i].offsetHeight;
  49.     var moveBy = Math.round(this.speed * links.length);
  50.  
  51.     var mainInstance = this;
  52.     var intId = setInterval(function() {
  53.         var curHeight = submenu.offsetHeight;
  54.         var newHeight = curHeight + moveBy;
  55.         if (newHeight < fullHeight)
  56.             submenu.style.height = newHeight + "px";
  57.         else {
  58.             clearInterval(intId);
  59.             submenu.style.height = "";
  60.             submenu.className = "";
  61.             mainInstance.memorize();
  62.         }
  63.     }, 30);
  64.     this.collapseOthers(submenu);
  65. };
  66. SDMenu.prototype.collapseMenu = function(submenu) {
  67.     var minHeight = submenu.getElementsByTagName("div")[0].offsetHeight;
  68.     var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);
  69.     var mainInstance = this;
  70.     var intId = setInterval(function() {
  71.         var curHeight = submenu.offsetHeight;
  72.         var newHeight = curHeight - moveBy;
  73.         if (newHeight > minHeight)
  74.             submenu.style.height = newHeight + "px";
  75.         else {
  76.             clearInterval(intId);
  77.             submenu.style.height = "";
  78.             submenu.className = "collapsed";
  79.             mainInstance.memorize();
  80.         }
  81.     }, 30);
  82. };
  83. SDMenu.prototype.collapseOthers = function(submenu) {
  84.     if (this.oneSmOnly) {
  85.         for (var i = 0; i < this.submenus.length; i++)
  86.             if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")
  87.                 this.collapseMenu(this.submenus[i]);
  88.     }
  89. };
  90. SDMenu.prototype.expandAll = function() {
  91.     var oldOneSmOnly = this.oneSmOnly;
  92.     this.oneSmOnly = false;
  93.     for (var i = 0; i < this.submenus.length; i++)
  94.         if (this.submenus[i].className == "collapsed")
  95.             this.expandMenu(this.submenus[i]);
  96.     this.oneSmOnly = oldOneSmOnly;
  97. };
  98. SDMenu.prototype.collapseAll = function() {
  99.     for (var i = 0; i < this.submenus.length; i++)
  100.         if (this.submenus[i].className != "collapsed")
  101.             this.collapseMenu(this.submenus[i]);
  102. };
  103. SDMenu.prototype.memorize = function() {
  104.     if (this.remember) {
  105.         var states = new Array();
  106.         for (var i = 0; i < this.submenus.length; i++)
  107.             states.push(this.submenus[i].className == "collapsed" ? 0 : 1);
  108.         var d = new Date();
  109.         d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));
  110.         document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";
  111.     }
  112. };
Jun 21 '07 #1
Share this Question
Share on Google+
1 Reply


pbmods
Expert 5K+
P: 5,821
Heya, priscbean.

Ewww. Here's some extra code tags in case you ran out:

[/code][/code][/code][/code]
[code][code][code][code]

Just drop them into your next post in reverse order, and you'll be all set!

Are you getting an error, or is the code just not executing? Try adding some alert statements in key locations to verify that your code is getting run.
Jun 21 '07 #2

Post your reply

Sign in to post your reply or Sign up for a free account.