...

View Full Version : Need help with Expandable/Collapsible menus



jjfletch
12-22-2005, 02:43 AM
The script below allows me to create expandable/collapsible menus and uses HTML tags to determine parent/child categories.



<ul id="menu">
<li>This is the Parent
<ol><li>This is the child</li></ol>
</ul>


What I'm trying to figure out, and have been brutally unsuccessful thus far, is how to expand the menus upon an initial visit.

For example, on the home page, I have a link to "Colors" and a link to "Groceries". When a user clicks on either "Colors" or "Groceries", they are taken to a page that (among other things) features these collapsible menus as a navgiation tool:


Colors
Groceries

If they were to click on Colors, the menu would expand and the user would see:


Colors
- Red
- Blue
- Yellow

Groceries

If they were to click on Groceries, the menu would expand and the user would see:


Colors
Groceries
- Milk
- Eggs
- Bread


What I want is for the user to see the expanded version upon the initial visit to the page with the collapsible menus, depending on whether they clicked "Colors" or "Groceries" on the homepage. (So, if they click on Colors, the Colors menu would be expanded, and if they clicked on Groceries, the groceries menu would be expanded).

I should also mention that the site is primarily written in php, and the url is already passing variables to my php script. So, the url that includes the collapsible menus is, for example, http://abc.someurl.com/index.php?colors=red&groceries=milk

Can someone please tell me how to grab the "red" out of the URL, and then write an if/else statement for it? Even better, can someone provide a working example?

Here's the JS code:



<!-- BEGIN COLLAPSIBLE MENUS -->

<script language="JavaScript">
<!--
function SymError()
{
return true;
}

window.onerror = SymError;
var SymRealWinOpen = window.open;

function SymWinOpen(url, name, attributes)
{
return (new Object());
}

window.open = SymWinOpen;

//-->
</script>

<script type="text/javascript">

// Node Functions

if(!window.Node){
var Node = {ELEMENT_NODE : 1, TEXT_NODE : 3};
}

function checkNode(node, filter){
return (filter == null || node.nodeType == Node[filter] || node.nodeName.toUpperCase() ==
filter.toUpperCase());
}
function getChildren(node, filter){
var result = new Array();
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
if(checkNode(children[i], filter)) result[result.length] = children[i];
}
return result;
}
function getChildrenByElement(node){
return getChildren(node, "ELEMENT_NODE");
}
function getFirstChild(node, filter){
var child;
var children = node.childNodes;
for(var i = 0; i < children.length; i++){
child = children[i];
if(checkNode(child, filter)) return child;
}
return null;
}
function getFirstChildByText(node){
return getFirstChild(node, "TEXT_NODE");
}
function getNextSibling(node, filter){
for(var sibling = node.nextSibling; sibling != null; sibling = sibling.nextSibling){
if(checkNode(sibling, filter)) return sibling;
}
return null;
}
function getNextSiblingByElement(node){
return getNextSibling(node, "ELEMENT_NODE");
}


// Menu Functions & Properties

var activeMenu = null;

function showMenu(){
if(activeMenu){
activeMenu.className = "";
getNextSiblingByElement(activeMenu).style.display = "none";
}
if(this == activeMenu){
activeMenu = null;
}else{
this.className = "active";
getNextSiblingByElement(this).style.display = "block";
activeMenu = this;
}
return false;
}
function initMenu(){
var menus, menu, text, a, i;
menus = getChildrenByElement(document.getElementById("menu"));
for(i = 0; i < menus.length; i++){
menu = menus[i];
text = getFirstChildByText(menu);
a = document.createElement("a");
menu.replaceChild(a, text);
a.appendChild(text);
a.href = "#";
a.onclick = showMenu;
a.onfocus = function(){this.blur()};
}
}


if(document.createElement) window.onload = initMenu;

</script>

<!-- END COLLAPSIBLE MENUS -->

jjfletch
12-22-2005, 06:56 PM
I could really use some help here!

Isn't there a way that I could just say,

<?
// In php:

if $variable == "Red"

?>

<!-- then this is an active menu in javascript --> ?

Meaning, it'll work as though I "clicked" on Colors? I'm so stuck, and really running out of time. Could really, really use and appreciate some help!

vwphillips
12-22-2005, 07:09 PM
working examples of using the ? string

http://forums.js-x.com/viewtopic.php?t=1248

vwphillips
12-22-2005, 07:28 PM
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
</head>

<body>
<a href="test2.htm?RED" >TEST</a>
</body>

</html>



<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">

<html>

<head>
<title></title>
<script language="JavaScript" type="text/javascript">
<!--

function TestQ(){
var QS=self.location.toString().split('?')[1];
if (QS){
alert(QS);
}
}
//-->
</script></head>

<body onload="TestQ();" >

</body>

</html>

jjfletch
12-22-2005, 08:05 PM
I've gotten further. How can I show that a menu is an activeMenu without having clicked on it? Please see "THIS IS WHERE I'M STUCK" in the code below:



var curURL = window.location.href;
var key = new Array();
for (var i=0;i<curURL.replace(/^.+\?/,'').split('&').length;i++) {
key[curURL.replace(/^.+\?/,'').split('&')[i].split('=')[0]] = curURL.replace(/^.+\?/,'').split('&')[i].split('=')[1];}

alert(key['groceries']);
alert(key['colors']);

switch (key['groceries']) {
case 'milk':
// THIS IS WHERE I'M STUCK
break; case 'bread':
// do stuff
break;
case 'cheese':
// do stuff
break;
default: break;
}

vwphillips
12-22-2005, 09:22 PM
key[curURL.replace(/^.+\?/,

this unnecessary

?milk:cheese:bread'

ary=loc.split('?')[1].split(':');

equates to

ary=('milk','cheese','bread');

then use the required ary field



EZ Archive Ads Plugin for vBulletin Copyright 2006 Computer Help Forum