dynamic ajax menu

[bruckerrlb]

Hello all

 

I am working with a dynamic ajax menu, similar to that of slashdot. What happens is, the menu dynamically slides down when you click on the span, it dynamically slides down and presents links, you can get a better view of it from the site here http://www.dynamicdrive.com/dynamicindex1/slashdot.htm For my home menu, there is no sublinks, so I made it so that the home section doesn't have links. The problem is when clicked a random menu is opened. I hope I'm making sense, let me post my code here.

 

The javascript is as follows

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 = 5;
this.markCurrent = true;
this.oneSmOnly = true;
}
SDMenu.prototype.init = function() {
var mainInstance = this;
for (var i = 0; i < this.submenus.length; i++)
	this.submenus[i].getElementsByTagName("span")[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("span")[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=/";
}
};

 

To get a better look at this in action, here is the tool bar

<div id="menu">
            	<div id="my_menu" class="sdmenu">
			<ul>
                		<span class="title1"><a class="nosub" href="index.php" style="color:#FFFFFF; font-weight:bold; text-decoration:none;">Home</a></span>
      
                     <div class="collapsed">
                    <span>About</span>
                  
				<li><a href="aboutoverview.php">Overview</a></li>
                    <li><a href="aboutmanagment.php">Management</a></li>
                  
                    
                    </div>
                     <div class="collapsed">
                    <span>Industries</span>
                    <li><a href="industriesoverview.php">Overview</a></li>
				<li><a href="industriessoftware.php">Software</a></li>
                    <li><a href="industriesmarketing.php">Interactive Marketing</a></li>
                    <li><a href="industriessemi.php">Semiconductor</a></li>
                    </div>
                    
                     <div class="collapsed">
                    <span>Services</span>
				<li><a href="servicescontract.php">Contract</a></li>
                    <li><a href="servicesnamegeneration.php">Name Generation</a></li>
                    <li><a href="servicescontingency.php">Contingency</a></li>
                   <!-- <li><a href="servicesretained.php">Retained</a></li> -->
                    <li><a href="servicesrpo.php">Full RPO</a></li>
                    </div>
                    
                     <div class="collapsed">
                    <span>Career Center</span>
                    <li><a href="careerpositions.php">Current Positions</a>
				<li><a href="resumesubmission.php">Submit Your Resume</a><!--popup box -->
                    </li>
                    </div>
                    
                     <div class="collapsed">                    
                     <span>Log in</span>
				<li><a href="clientlogin.php">Client Log in</a>
                    <li><a href="partnerlogin.php">Partner Log in</a>
                     <li><a href="employeelogin.php">Employee Log in</a>
                    </li>
                    </div>
                    
                  <span class="title2"><a class="nosub" href="contact.php" style="color:#FFFFFF; font-weight:bold; text-decoration:none;">Contact Us</a></span>
			</ul>

 

I am trying to figure out how I can get the toolbar to not expand when I have the home or the contact page clicked, because it doesn't make sense for another tab to be opened. I really am at a loss for how I can make this work right, any suggestions are much appreciated.

 

Thanks!

[hansford]

looks like you have to do this.

 

SDMenu.prototype.init = function() {

var mainInstance = this;

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

              if(i == 0 || i == 6) { continue; }

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

mainInstance.toggleMenu(this.parentNode);

};

 

[bruckerrlb]

Thanks for the help, I think I am halfway there now. That didn't exactly work, but what did was if I took your if statement and stuck it under the remember function

if (this.remember) {
	var regex = new RegExp("sdmenu_" + encodeURIComponent(this.menu.id) + "=([01]+)");
	var match = regex.exec(document.cookie);
	if(i == 0 || i == 6) { return false; } //here is where I inserted your statement
//also tried a seperate if(i == 6) {return false; } as well as 5 and 7 just to make sure I wasn't crazy
//problem is 6 is still not functioning properly, but 0 is working fine

	if (match) {
		var states = match[1].split("");
		for (var i = 0; i < states.length; i++)
			this.submenus[i].className = (states[i] == 0 ? "collapsed" : "");
	}

 

Now, when I click on the home link (which doesn't have a submenu) none of the submenu's open, but still on the 6th link, it doesn't work. Do you or anyone know if i == 0 works i == 6 doesn't function the same way?

 

[hansford]

you have to find the piece of code which assigns the onclick function to the span tags - I thought it was that one, but i guess not. The span tag for home is 0 in the array and the span tag for contact is 6

 

then when i == 0 OR i == 6 we skip this loop and go to the next

[bruckerrlb]

Right, that definitely helped me figure out what it is I was trying to do, but I can't seem to figure out why it works fine for i == 0 but not for i == 6, it's in the remember function, which stores a cookie in the browser to remember where the user was. It doesn't do that though if i == 0, any thoughts on why it won't work for i == 6?