13 Replies Latest reply on Oct 22, 2014 7:01 AM by QuadrantProductions

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

    QuadrantProductions Level 1

      //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.

      /* 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

      $.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!

        • 1. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
          resdesign Adobe Community Professional & MVP

          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.

          • 2. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
            QuadrantProductions Level 1

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

            • 3. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
              resdesign Adobe Community Professional & MVP

              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.

              • 4. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                resdesign Adobe Community Professional & MVP

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

                • 5. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                  QuadrantProductions Level 1

                  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.

                  • 6. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                    QuadrantProductions Level 1

                    //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

                      }

                    });

                    • 7. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                      resdesign Adobe Community Professional & MVP

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

                      Thanks

                      • 8. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                        resdesign Adobe Community Professional & MVP

                        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

                        • 9. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                          Zoze Level 2

                          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

                          • 10. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                            Zoze Level 2

                            /* 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();

                              };

                              });

                             

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

                            • 11. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                              QuadrantProductions Level 1

                              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.

                              • 12. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                                Zoze Level 2

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

                                • 13. Re: can we bind mouse events to a dynamic set of instructions in a JSON call?
                                  QuadrantProductions Level 1

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