Fancy Drop Down in JS

1 New Member

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 Reply

6939

pbmods

5,821

Recognized Expert Expert

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

2451

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

11009

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

2880

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

6137

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

12594

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

2485

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

2422

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

9270

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

7326

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

7004

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

7167

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++

6890

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

7379

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

4593

Couldn’t get equations in html when convert word .docx file to html file in C#.

by: conductexam | last post by:

I have .net C# application in which I am extracting data from word file and save it in database particularly. To store word all data as it is I am converting the whole word file firstly in HTML and...

C# / C Sharp

3095

Trying to create a lan-to-lan vpn between two differents networks

by: TSSRALBI | last post by:

Hello I'm a network technician in training and I need your help. I am currently learning how to create and manage the different types of VPNs and I have a question about LAN-to-LAN VPNs. The...

Networking - Hardware / Configuration

3085

Windows Forms - .Net 8.0

by: adsilva | last post by:

A Windows Forms form does not have the event Unload, like VB6. What one acts like?

Visual Basic .NET

1423

transfer the data from one system to another through ip address

by: 6302768590 | last post by:

Hai team i want code for transfer the data from one system to another through IP address by using C# our system has to for every 5mins then we have to update the data what the data is updated ...

C# / C Sharp

292

Comprehensive Guide to Website Development in Toronto: Expert Insights from BSMN Consultancy

by: bsmnconsultancy | last post by:

In today's digital era, a well-designed website is crucial for businesses looking to succeed. Whether you're a small business owner or a large corporation in Toronto, having a strong online presence...

General