Adobe Community: Message List - can we bind mouse events to a dynamic set of instructions in a JSON call?

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Wed, 22 Oct 2014 14:01:13 GMT

Just sent you the link. Thanks for offering to look!

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Wed, 22 Oct 2014 09:35:55 GMT

upload again the project file if you haven't found an answer yet, to see if i can help

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Tue, 21 Oct 2014 18:10:50 GMT

I just tried this but get an error on line 27 else if ($(this).data("jsonindex") == 1) {

Thank you for posting but , I'm not sure I understand this example.

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Tue, 21 Oct 2014 11:43:35 GMT

/* THIS WORKS

// ============================================================================

/* THIS WORKS $.getJSON('staffnames.json', function(data){

for(var i=0; i<data.length; i++)

{

var s = sym.createChildSymbol("teamThumb", "bigholder");

s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

s.$("thename").html(data[i].thename);

s.$("thetitle").html(data[i].thetitle);

s.$("certifications").html(data[i].certifications);

s.$("biography").html(data[i].biography);

s.getSymbolElement().css({"position":"absolute",

"left":i*180+"px",

"top":"30px"

});

s.attr("id", "nameofid");

s.$("thename").data("jsonindex", i);

}

});

s.$("thetitle").click("click", function (e) {

if ($(this).data("jsonindex") == 0) {

sym.$("#nameofid35").hide();

};

else if ($(this).data("jsonindex") == 1) {

sym.$("#nameofid55").hide();

sym.$("#nameofid45").show();

};

});

// ============================================================================

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Tue, 21 Oct 2014 10:34:23 GMT

you have to add class or add id and call it when you need to so it.

eg.

s.attr("id", "nameofid")

and then call as

sym.$("#nameofid0").hide(); // 0 is the data index of the json

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Tue, 21 Oct 2014 04:01:57 GMT

You can zip your file and put it on a cloud storage of your choice and PM me the link.

On Mon, Oct 20, 2014 at 5:15 PM, QuadrantProductions

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Tue, 21 Oct 2014 03:07:58 GMT

You can PM me a link to a zipped file from a cloud storage of your choice.

Thanks

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 22:15:27 GMT

//method dynamically loads JSON file with all items and iterates them on stage

// ============================================================================

$.getJSON('staffnames.json', function(data){

for(var i=0; i<data.length; i++)

{

var s = sym.createChildSymbol("teamThumb", "bigholder");

s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

s.$("thename").html(data[i].thename);

s.$("thetitle").html(data[i].thetitle);

s.$("certifications").html(data[i].certifications);

s.$("biography").html(data[i].biography);

s.getSymbolElement().css({"position":"absolute",

"left":i*180+"px",

"top":"30px"

});

}

});

// ============================================================================

/* THIS WORKS

// ============================================================================

/* THIS WORKS $.getJSON('staffnames.json', function(data){

for(var i=0; i<data.length; i++)

{

var s = sym.createChildSymbol("teamThumb", "bigholder");

s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

s.$("thename").html(data[i].thename);

s.$("thetitle").html(data[i].thetitle);

s.$("certifications").html(data[i].certifications);

s.$("biography").html(data[i].biography);

s.getSymbolElement().css({"position":"absolute",

"left":i*180+"px",

"top":"30px"

});

}

});

// ============================================================================

// BELOW IS PHASE 2. For absolute positioning.

/* below is what I've figured out so far for manually loading the individual symbols. I would want to do that so I could control the position of how the loading symbols that are going to be populated by JSON data woudl be discplayed.

//method dynamically loads JSON file with all items but manually calls them in place*/

// AS YOU CAN SEE ALOT OF REDUNDANCY. How do I effect the same dynamic control as above but with this kind of functionality

$.getJSON('staffnames.json', function(data){

{

var myclip = sym.$("teamThumb1");

var s2 = sym.getSymbol("teamThumb1");

s2.$("holder").css({"background-image":"url('"+data[0].image+"')"});

s2.$("thename").html(data[0].thename);

s2.$("thetitle").html(data[0].thetitle);

s2.$("certifications").html(data[0].certifications);

s2.$("biography").html(data[0].biography);

// insert below

//Sample Code

//element=sym.$("teamThumb1");

myclip.on({

mouseenter: function() {

// Do something

sym.$("biographyareaCopy").html(data[0].biography);

sym.$("thename").html(data[0].thename);

//alert( "hovered over a div" );

mouseleave: function() {

// Do something

//alert( "mouse left a div" );

click: function() {

// Do something

//alert( "clicked on a div" );

}

});

// end sample code

//insert above

}

});

// testing 2nd symbol

$.getJSON('staffnames.json', function(data){

{

var myclip2 = sym.$("teamThumb2");

var s2 = sym.getSymbol("teamThumb2");

s2.$("holder").css({"background-image":"url('"+data[1].image+"')"});

s2.$("thename").html(data[1].thename);

s2.$("thetitle").html(data[1].thetitle);

s2.$("certifications").html(data[1].certifications);

s2.$("biography").html(data[1].biography);

// insert below

//Sample Code

//element=sym.$("teamThumb2");

myclip2.on({

mouseenter: function() {

// Do something

sym.$("biographyareaCopy").html(data[1].biography);

sym.$("thename").html(data[1].thename);

//alert( "hovered over a div" );

mouseleave: function() {

// Do something

//alert( "mouse left a div" );

click: function() {

// Do something

//alert( "clicked on a div" );

}

});

// end sample code

//insert above

}

});

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 20:31:46 GMT

Where / How can I upload a file (animate file) so you can see what I've done. I just implemented your idea of nesting the calls inside an object instead of rendering them to the stage and that worked great. If I zipped the whole project, it would give you a better idea... See if you can all files are now in this dropbox link https://www.dropbox.com/sh/mltt8m5x2ihe3r1/AABfr-pGrl1FCzycv9zWpwNZa?dl=0... should save you some time.

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 20:25:01 GMT

I'll try to understand your structure and post a sample tomorrow.

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 20:23:52 GMT

I am wondering if you could not load your bio with the rest and then load that text on an event pertaining to a symbol that you load or for which you manipulate the opacity.

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 20:13:27 GMT

resdesign will do! Great suggestion. Just now I need to first figure out how too change the text on the external text object.

Re: can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 20:07:52 GMT

For you last question, why not use a container insted of the stage? That way you position your container and your data will load at (0.0) in that container.

can we bind mouse events to a dynamic set of instructions in a JSON call?

forums_noreply@adobe.com — Mon, 20 Oct 2014 19:51:12 GMT

//method dynamically loads JSON file with all items and iterates them on stage

$.getJSON('staffnames.json', function(data){

for(var i=0; i<data.length; i++)

{

var s = sym.createChildSymbol("teamThumb", "Stage");

s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

s.$("thename").html(data[i].thename);

s.$("thetitle").html(data[i].thetitle);

s.$("certifications").html(data[i].certifications);

s.$("biography").html(data[i].biography);

s.getSymbolElement().css({"position":"absolute",

"left":i*150+"px",

"top":"220px"

});

}

});

Using the above code block which dynamically loads the data in an array held inside a JSON file, how would we write a further instruction so that an additional data object in the JSON array could be loaded onto a stage element (outside of the symbol called teamThumb here).

So specifically, the data object "biography" is inside the array that is being loaded above. And 1 symbol for each data block in the JSON file is being loaded. Now I need to add a command that would load the "Biography" line item say on a mouse click.

Here's the whole code block view on the compositionReady

//method dynamically loads JSON file with all items and iterates them on stage

$.getJSON('staffnames.json', function(data){

for(var i=0; i<data.length; i++)

{

var s = sym.createChildSymbol("teamThumb", "Stage");

s.$("holder").css({"background-image":"url('"+data[i].image+"')"});

s.$("thename").html(data[i].thename);

s.$("thetitle").html(data[i].thetitle);

s.$("certifications").html(data[i].certifications);

s.$("biography").html(data[i].biography);

s.getSymbolElement().css({"position":"absolute",

"left":i*150+"px",

"top":"220px"

});

}

});

// BELOW IS PHASE 2. For absolute positioning.

//method dynamically loads JSON file with all items but manually calls them in place

$.getJSON('staffnames.json', function(data){

{

var s2 = sym.getSymbol("teamThumb1", "Stage");

s2.$("holder").css({"background-image":"url('"+data[0].image+"')"});

s2.$("thename").html(data[0].thename);

s2.$("thetitle").html(data[0].thetitle);

s2.$("certifications").html(data[0].certifications);

// this is saying the symbol name, id name's html should be the corresponding data name in the array

}

*/@

Any assistance is most appreciated!