This is actually based upon a previous thread located here: http://forums.adobe.com/message/5596353#5596353
I thought about simply adding to that thread, but in many ways, it deserves it's own seperate discussion.
I used the examples Zaxist and AMULI put up to great success. On a navigation bar located directly within the root.
Now the issue is doing the same with a nested menu inside of a symbol.
In my example, I have a button that when clicked animates a navbar symbol downwards. That works. Also, the LINK button keeps it's background color set to black until another button in the main navbar is clicked. OK, there are no other buttons in this example. So just pretend and believe me, it works.
Now in the nested clip, there's a similar function I definited in the compositionReady. Then added my actions to each of the four buttons inside of the nested navlink symbol. The rollover/hover effects work out great. But the click event brings up an error. It's basically the same click event as the navigation bar on the root, which does not bring up an error.
My code inside of compositionReady is;
// Reset Every Buttons State
buttons = {
reset:function(){
sym.getSymbol("btnLink").$("back").css({"opacity":"0"})
}
}
// which button ? Zero Means No One !!
// we set this variable to get know e clicked on which button
WB = 0;
// Reset Every Sub Buttons State
buttonsub = {
reset:function(){
sym.getSymbol("btnCommunication").$("back").css({"opacity":"0"})
sym.getSymbol("btnIndividuality").$("back").css({"opacity":"0"})
sym.getSymbol("btnCreativity").$("back").css({"opacity":"0"})
sym.getSymbol("btnInclusivity").$("back").css({"opacity":"0"})
}
}
// which button ? Zero Means No One !!
// we set this variable to get know e clicked on which sub button
SB = 0;
I'd like it where there are two functions. One for all the main buttons and one for all the child buttons. That way I can have two buttons stuck at the hover effect when clicked in sequence. Hopefully, that made some sense.
Here's my click event inside the button 'btnIndividuality' inside of the nested navLink symbol:
buttonsub.reset();
sym.getSymbol("btnIndividuality").$("back").css({opacity: 1})
SB = 1;
The other three buttons are basically the same.
So I tried a number of ideas. Mainly going directly from the Stage and drilling downwards in JQuery. Nope.
So the error in Firebug is 'Javascript error in event handler! Event Type = element'on line 162 of edge.2.0.0.min.js. This is that line:
function(a){if(a){if(!this.aSymbolInstances)this.aSymbolInstances=[];t his.aSymbolInstances.push(a.getSymbolElement())}};Y=function(a,c,b){fu nction f(c,b){if(b.length>=2&&typeof b[0]==="object"&&typeof b[1]==="object"&&b[1].type!=="onError"){var e;e=d.Event("onError");if(g)e.compId=g.getComposition().compId;e.orig inalEvent=b[1];d(document).triggerHandler(e)}window.console.log("Javas cript error in event handler! Event Type = "+a)}var e=this[b[0]],g=this;if(typeof e==="function")if(b.slice(1),a==="element")return function(){var a;
Why would I be getting this here and not on the root? What is the correct path to make this all work? So close, but not home just yet.
Files are located at: