This one is a little confusing, but bear with me.
Basically I have a three level navigation menu made up of vertical
columns of boxes. You click box A in column 1 and its children boxes
appear in column 2. You click box B in column 2 and its children boxes
appear in column 3, etc.
There's also some code to make the change more apparent. Here's what
happens:
You click a box in column 1:
- the box you clicked gets slightly bigger
- all the other column 1 boxes fade slightly so the box you clicked is
brighter
- the child box appears vertically aligned to the box you clicked (so
if you click a box halfway down the list, the children appear next to
it, not at the top of the column)
I have a pretty enormous function handling all of this, probably
poorly written too, but I'm new to all this. When I click a column 1
box, the other boxes in that column all fade properly. However, when I
click a level 2 box, the difference between the box I clicked and
other boxes around it is much less apparent than in level 1. Even
though it's the same code, it seems the clicked box is being faded
more than it should. My only guess is that the function is fading the
level 2 boxes even when I click on a level 1 box, which shouldn't
happen. Here's my function, and a sample of it being called.
Apologies for the size.
function oneFunctionToRuleThemAll(currentBox, currentLevel, parentBox,
parentLevel, newBox, newLevel)
{
// shrink parent boxes
if(currentLevel == "level1") // there is no parent level, so shrink
#1
{
myNodes = $(currentLevel).select('div'); // grab all divs inside
currentLevel
for(x=0;x<myNodes.length;x++) { // loop through each div
if(!$(myNodes[x]).hasClassName(currentBox)) {
// scales everything except currentBox
// fade other boxes and shrink them
$(myNodes[x]).setStyle({width: '65px',
height: '65px', fontSize:
'12px'});
new Effect.Fade(myNodes[x], {duration:
0.2, to: 0.5});
//new Effect.Scale(myNodes[x],
onceUnselected, {scaleX: true,
scaleY: true, scaleContent: false});
}
}
// keep the box they clicked at 100% opacity and make it bigger
$(currentBox).setStyle({fontSize: '14px',
position:'relative'});
new Effect.Fade(currentBox, {duration: 0.0, to: 1.0});
new Effect.Scale(currentBox,100,{scaleX: true, scaleY:
true,
scaleContent: false});
//}
} else { // it's not level 1, so shrink the parent level
myNodes = $(currentLevel).select('div'); // grab all
divs inside
currentLevel
// scales everything except parentBox
for(x=0;x<myNodes.length;x++) { // loop through each div
if(!$(myNodes[x]).hasClassName(currentBox)) {
// fade other boxes and shrink them
$(myNodes[x]).setStyle({width: '65px',
height: '65px', fontSize:
'12px'});
new Effect.Fade(myNodes[x], {duration:
0.2, to: 0.5});
//new Effect.Scale(myNodes[x],
onceUnselected, {scaleX: true,
scaleY: true, scaleContent: false});
}}
// keep the box they clicked at 100% opacity and make it bigger
$(currentBox).setStyle({fontSize: '14px'});
new Effect.Fade(currentBox, {duration: 0.0, to: 1.0});
new Effect.Scale(currentBox,100,{scaleX: true, scaleY:
true,
scaleContent: false});
}
if(currentLevel == "level1") { // hide other boxes
$$('.container').each(function(node) { if(node.id != newBox)
node.hide(); });
$$('.container3').each(function(node) { if(node.id != newBox)
node.hide(); });
} else if (currentLevel == 'level2a') {
myNodes = $('level3').select('div'); // grab all divs inside lv3
for(x=0;x<myNodes.length;x++) { // loop through each div
if(!$(myNodes[x]).hasClassName(newBox)) {
//myNodes[x].hide();
new Effect.Fade(myNodes[x], {duration: 0.0, to: 0.0});
}
}
} else if(currentLevel == "level2") { // hide other boxes
$$('.container3').each(function(node) { if(node.id != newBox)
node.hide(); });
}
// work out where to show the children boxes
var coordinates = $(currentBox).cumulativeOffset();
var boxTopDistance = coordinates[1]-90 + "px";
// show the relevant box
$(newBox).setStyle({marginTop: boxTopDistance});
new Effect.Appear(newBox); // show new box
}
---
Level 1 Boxes:
<div class="1A 1_2" id="1_2"> <a href="javascript://"
onclick="oneFunctionToRuleThemAll('1_2', 'level1', '', '', '2',
'level2');">Evaluate</a></div>
<div class="1A 1_3" id="1_3"> <a href="javascript://"
onclick="oneFunctionToRuleThemAll('1_3', 'level1', '', '', '3',
'level2');">Prototype</a></div>
Level 2 Boxes:
<div class="lv2a 2_1" id="2_1"> <a href="javascript://"
onclick="oneFunctionToRuleThemAll('2_1', 'level2', '1', 'level2',
'3_1', 'level3');">Design Brief</a></div>
<div class="lv2a 2_2" id="2_2"> <a href="javascript://"
onclick="oneFunctionToRuleThemAll('2_2', 'level2', '1', 'level2',
'3_2', 'level3');">Design Proposals</a></div>
---
I don't really except people to fully understand what I'm doing here
but I can't post a demo since it's confidential client work :(
--~--~---------~--~----~------------~-------~--~----~
You received this message because you are subscribed to the Google Groups
"Prototype & script.aculo.us" group.
To post to this group, send email to [email protected]
To unsubscribe from this group, send email to [EMAIL PROTECTED]
For more options, visit this group at
http://groups.google.com/group/prototype-scriptaculous?hl=en
-~----------~----~----~----~------~----~------~--~---
