Hi,
On dynamic created symbols I have actions:
MouseEnter: to change color when mouse is over the button.
MouseOut: to reset the color when the mouse is going to another button.
And I have problem on click event because I can't keep the blck color, which means clicked to the symbol, as I have A mouseout that reset it.
here is the code:
$.getJSON("menubuttons.json").success (
function (data) {
$.each(data, function (index, item){
var menubtn = stage.createChildSymbol("templ-menubuttons", "Stage");
var menubtnelem = menubtn.getSymbolElement();
menubtnelem.attr("id", item.title)
.css({ "background-size": "contain", "left": 1256, "top":"95px","cursor":"pointer" });
menubtn.$("txt").html(item.title);
//MouseOver
menubtnelem.on("mouseenter", function () {
if ($(this).attr("id")==="Exit"){
TweenLite.to(menubtn.$("imageholder"),0.3, {backgroundColor:"red",left:"2px"});
}
else{
TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"black",left:"2px"});
}
});
//MouseOut
menubtnelem.on("mouseleave", function () {
TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"#ffcf00",left:"0px"});
});
//Click
menubtnelem.on("mousedown", function () {
// With "for" I am trying to reset the color of all the buttons to yellow and then the one that is clicked to be black ----- but doesn't work ---- How is Possible to work?
for(var i=0; i<data.length; i++){
TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"#ffcf00",left:"0px"});
}
TweenLite.to(menubtn.$("imageholder"),0.1, {backgroundColor:"black",left:"2px"});
});
});
});