Fancy Drop Down in JS

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

 var SDMenu;

SDMenu = new SDMenu("my_menu");
 
function SDMenu(id) {

    if (!document.getElementById || !document.getElementsByTagName)

        return false;

    this.menu = document.getElementById(id);

    this.submenus = this.menu.getElementsByTagName("div");

    this.remember = true;

    this.speed = 3;

    this.markCurrent = true;

    this.oneSmOnly = false;

}

SDMenu.prototype.init = function() {

    var mainInstance = this;

    for (var i = 0; i < this.submenus.length; i++)

        this.submenus[i].getElementsByTagName("a")[0].onclick = function() {

            mainInstance.toggleMenu(this.parentNode);

        };

    if (this.markCurrent) {

        var links = this.menu.getElementsByTagName("a");

        for (var i = 0; i < links.length; i++)

            if (links[i].href == document.location.href) {

                links[i].className = "current";

                break;

            }

    }

    if (this.remember) {

        var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");

        var match = regex.exec(document.cookie);

        if (match) {

            var states = match[1].split("");

            for (var i = 0; i < states.length; i++)

                this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");

        }

    }

};

SDMenu.prototype.toggleMenu = function(submenu) {

    if (submenu.className == "collapsed")

        this.expandMenu(submenu);

    else

        this.collapseMenu(submenu);

};

SDMenu.prototype.expandMenu = function(submenu) {

    var fullHeight = submenu.getElementsByTagName("span")[0].offsetHeight;

    var links = submenu.getElementsByTagName("a");

    for (var i = 0; i < links.length; i++)

        fullHeight += links[i].offsetHeight;

    var moveBy = Math.round(this.speed * links.length);
 
    var mainInstance = this;

    var intId = setInterval(function() {

        var curHeight = submenu.offsetHeight;

        var newHeight = curHeight + moveBy;

        if (newHeight < fullHeight)

            submenu.style.height = newHeight + "px";

        else {

            clearInterval(intId);

            submenu.style.height = "";

            submenu.className = "";

            mainInstance.memorize();

        }

    }, 30);

    this.collapseOthers(submenu);

};

SDMenu.prototype.collapseMenu = function(submenu) {

    var minHeight = submenu.getElementsByTagName("div")[0].offsetHeight;

    var moveBy = Math.round(this.speed * submenu.getElementsByTagName("a").length);

    var mainInstance = this;

    var intId = setInterval(function() {

        var curHeight = submenu.offsetHeight;

        var newHeight = curHeight - moveBy;

        if (newHeight > minHeight)

            submenu.style.height = newHeight + "px";

        else {

            clearInterval(intId);

            submenu.style.height = "";

            submenu.className = "collapsed";

            mainInstance.memorize();

        }

    }, 30);

};

SDMenu.prototype.collapseOthers = function(submenu) {

    if (this.oneSmOnly) {

        for (var i = 0; i < this.submenus.length; i++)

            if (this.submenus[i] != submenu && this.submenus[i].className != "collapsed")

                this.collapseMenu(this.submenus[i]);

    }

};

SDMenu.prototype.expandAll = function() {

    var oldOneSmOnly = this.oneSmOnly;

    this.oneSmOnly = false;

    for (var i = 0; i < this.submenus.length; i++)

        if (this.submenus[i].className == "collapsed")

            this.expandMenu(this.submenus[i]);

    this.oneSmOnly = oldOneSmOnly;

};

SDMenu.prototype.collapseAll = function() {

    for (var i = 0; i < this.submenus.length; i++)

        if (this.submenus[i].className != "collapsed")

            this.collapseMenu(this.submenus[i]);

};

SDMenu.prototype.memorize = function() {

    if (this.remember) {

        var states = new Array();

        for (var i = 0; i < this.submenus.length; i++)

            states.push(this.submenus[i].className == "collapsed" ? 0 : 1);

        var d = new Date();

        d.setTime(d.getTime() + (30 * 24 * 60 * 60 * 1000));

        document.cookie = "sdmenu_" + encodeURIComponent(this.menu.id) + "=" + states.join("") + "; expires=" + d.toGMTString() + "; path=/";

    }

};

Jun 21 '07 #1

Subscribe Post Reply

6933

pbmods

5,821

Expert 4TB

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

Similar topics

Problem with dependant drop down

by: PT | last post by:

I got a form with many text boxes, checkboxes and 3 drop downs. From that 3, 2 are dependant. I can choose one drop down, and the next drop down should display the dependant values of the first...

ASP / Active Server Pages

Changing drop-down field to text field.

by: ehm | last post by:

I am working on creating an editable grid (for use in adding, deleting, and editing rows back to an Oracle database). I have a JSP that posts back to a servlet, which in turns posts to a WebLogic...

Javascript

Cannot Read Value from Drop Down Script

by: Dan | last post by:

This is one that has me stumped and I need an expert's input. Any ideas why the values from the second script-generated drop down list isn't recognized by the script to add time values to the...

Javascript

HOWTO: Wrap Text or Wider the Drop Down Box? (Web Control)

by: Don Wash | last post by:

Hi There! I have a Server-side Drop-down box in ASP.NET (VB) page. What do I do to widen the Drop down box's Pull-Down list's width? I'm not talking about the Drop-down box's width but the box...

ASP.NET

creating drop down list at run time

by: Yoshitha | last post by:

hi I have 2 drop down lists in my application.1st list ontains itmes like java,jsp,swings,vb.net etc.2nd list contains percentage i.e it conatains the items like 50,60,70,80,90,100. i will...

ASP.NET

Automatically Reload after Drop Down box

by: pmelanso | last post by:

Hello, I have a drop down list which is dynatically loaded from a database and I have a second drop down list that is also dynatically loaded depending on what is selected in the first drop down...

ASP.NET

Help with limiting drop-down boxes.

by: callawayglfr | last post by:

I am building a database in access where I have a drop down box that relates to a text box, that part I have working but when someone selects information from the first drop down I need it to limit...

Microsoft Access / VBA

CSS Drop Down Menu in IE7

by: TycoonUK | last post by:

Hi, As I do not have IE7 on my computer, I was wondering if there is a fault in my CSS Menu when using IE7. Please can someone look at my site - http://www.worldofmonopoly.co.uk and tell me...

HTML / CSS

Fill other drop down lists using value selected from a drop down list

by: penny111 | last post by:

Hi there, For my application, i need to have 3 drop down lists 1. drop down list of folder names 2. drop down list of documents in the folder selected 3. drop down list of instances of the...

Javascript

Batch import of multiple excel files into the database

by: ryjfgjl | last post by:

If we have dozens or hundreds of excel to import into the database, if we use the excel import function provided by database editors such as navicat, it will be extremely tedious and time-consuming...

Data Management

Merging data from multiple Excel files

by: ryjfgjl | last post by:

In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...

Data Management

Looking to do Android software development, any suggestions? Is flutter better?

by: nemocccc | last post by:

hello, everyone, I want to develop a software for my android phone for daily needs, any suggestions?

General

Is that possible of reading the .csv file in column wise and the column have different lengths ?

by: Sonnysonu | last post by:

This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...

C / C++

Changing the language in Windows 10

by: Hystou | last post by:

Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...

Windows Server

Problem With Comparison Operator <=> in G++

by: Oralloy | last post by:

Hello folks, I am unable to find appropriate documentation on the type promotion of bit-fields when using the generalised comparison operator "<=>". The problem is that using the GNU compilers,...

C / C++

Maximizing Business Potential: The Nexus of Website Design and Digital Marketing

by: jinu1996 | last post by:

In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...

Online Marketing

The easy way to turn off automatic updates for Windows 10/11

by: Hystou | last post by:

Overview: Windows 11 and 10 have less user interface control over operating system update behaviour than previous versions of Windows. In Windows 11 and 10, there is no way to turn off the Windows...

Windows Server

Discussion: How does Zigbee compare with other wireless protocols in smart home applications?

by: tracyyun | last post by:

Dear forum friends, With the development of smart home technology, a variety of wireless communication protocols have appeared on the market, such as Zigbee, Z-Wave, Wi-Fi, Bluetooth, etc. Each...

General