1 2 Previous Next 44 Replies Latest reply on Dec 6, 2013 8:17 AM by Zoze

    JSON content - click to show another symbol on the stage

    Zoze Level 1

      Hi,

       

      Thanks to Zaxist I have a working code like the one below:

       

      $.getJSON("content.json",

                function(data){

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

                          var s = sym.createChildSymbol("template","content");

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

       

       

       

       

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

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

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

                          s.$("imageholder").data('Large', data[i].largeimage);

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

                                                                  sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});

             

                                                                  });

                          }

      });

       

       

      Now, I am trying on the click function to show specific symbol on the stage, for example when click on the first item the symbol red will appear, if cliked the second item the (previous symbols that was appeared will be hided) and the new symbol blue will appear. An so on with all the other ellements that JSON files has.

       

       

      I tried this on the code, but nothing:

       

       

       

       

      $.getJSON("content.json",

                function(data){

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

                          var s = sym.createChildSymbol("template","content");

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

       

       

       

       

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

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

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

                          s.$("imageholder").data('Large', data[i].largeimage);

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

                                                                  sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});

                                                                  if (data[i]=3) {

                                                                                                                                                                                                                                                                  sym.getComposition().getStage().$("red").show();

       

       

                                                                  }

                                                                  else {

                                                                  sym.getComposition().getStage().$("red").hide();

                                                                  }

                                                                  if (data[i]=5) {

                                                                                                                                                                                                                                                                                                                               sym.getComposition().getStage().$("blue").show();

       

       

                                                                  }

                                                                  else {

                                                                  sym.getComposition().getStage().$("blue").hide();

                                                                  }

                                                                  });

                          }

      });

       

       

       

       

      Could you help me?

       

       

       

      Thanks in advanced!

        • 1. Re: JSON content - click to show another symbol on the stage
          Zaxist Level 4

          well, if i understood correctly, you want to check your image index and if that index was 3 or 5 you show a correct symbol for that...

           

          i want to tell you something befor i tell you how you can doing this:

           

          data[i] is your json file index that return your json file's data not a number, and if your json file is something like this :

           

          [

                    {     "image" : "images/toy-B.jpg",

                           "title": "1st Image",

                           "Names":"toy-B"

                    }

          ]

           

          data[0] means ( i'm looking for object of json that have index 0 )

          well in this address we have a object but no data !! because we didnt tell him witch data we want, so it just returning an unreadable data (just Object), so if we say

          data[0].image ( now we have data in image and this will return us images/toy-B.jpg

           

          so we can't simply say that data[i]

           

          you need to doing it this way:

           

          s.$("imageholder").data('Large', data[i].largeimage);

          s.$("imageholder").data('myIndex', i); // we need another variable to save our index

           

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

                              sym.getComposition().getStage().$("finte").css({"background-image":"u rl("+$(this).data('Large')+")"});

                                  if ($(this).data("myIndex") == 3){ // right way to read value and checking it

                                  sym.getComposi tion().getStage().$("blue").hide();

                                  sym.getComposition().getStage().$("red").show();

                                  }

                                  else if ($(this).data("myIndex") == 5) {

                                  sym.getComposi tion().getStage().$("red").hide();

                                  sym.getComposition().getStage().$("blue").show();

                                                                                          }

                                  });

                              }

          });

           

           

           

          also you wrote your if and else statement in incorrect way, learn the Correct way from above for future use

           

          if you had any question feel free to ask

           

          Zaxist


           


          • 2. Re: JSON content - click to show another symbol on the stage
            Zoze Level 1

            Dear Zaxist,

             

            You were very explainable!

             

             

            And where I thought that I have learned something, I realize that I haven't.

             

            Now, with all that discussion, I tried to insert the title of the clicked thumbnail to another element on the stage but I can't do it to work.

             

            What I've write is:

             

             

            sym.menuoff = function() {

            sym.getComposition().getStage().$("red").hide();

            sym.getComposition().getStage().$("blue").hide();

            sym.getComposition().getStage().$("Ellipse").hide();

            sym.getComposition().getStage().$("Ellipse2").hide();

            }

            sym.$("PlaceHolderText").html("");

             

             

            $.getJSON("content.json",

                      function(data){

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

                                var s = sym.createChildSymbol("template","content");

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

             

             

             

             

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

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

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

                                s.$("imageholder").data('Large', data[i].largeimage);

                                s.$("imageholder").data('myIndex', i);

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

                                                                        sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});

                                                                        sym.getComposition().getStage().$("PlaceHolderText").html(+$(this).data('title'));

                                                                        if ($(this).data("myIndex") == 0){ // right way to read value and checking it

                                    sym.getComposition().getStage().menuoff();

                                    sym.getComposition().getStage().$("red").show();

             

             

                                    }

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

                                    sym.getComposition().getStage().menuoff();

                                    sym.getComposition().getStage().$("blue").show();

                                                                                            }

                                    else if ($(this).data("myIndex") == 2) {

                                    sym.getComposition().getStage().menuoff();

                                    sym.getComposition().getStage().$("Ellipse").show();

                                                                                            }

             

             

                                                                        });

                                }

            });

             

             

            Not even works with  sym.getComposition().getStage().$("PlaceHolderText").html(data[i].title);

             

            I want when i click to store the Title to another symbol/element.

             

            But again what I've done wrong?

             

            Also, I am getting this warning and error message

             

            event.returnValue is deprecated. Please use the standard event.preventDefault() instead.

            Uncaught TypeError: Cannot read property 'title' of undefined

            • 3. Re: JSON content - click to show another symbol on the stage
              Zaxist Level 4

              well this line is Correct

               

              sym.getComposition().getStage().$("PlaceHolderText").html(data[i].title);

               

              but this line will not work on Click function because when you go to Click function state you dont have access to your json file's data

               

              to fix that we need to save or data in Data Part like before we did save :

              s.$("imageholder").data('Large', data[i].largeimage);

              s.$("imageholder").data('myIndex', i);

               

              so this time we need to save our title too, we add this line :

              s.$("imageholder").data('title',data[i].title);

               

              now we can call it in click function with reffering it to our saved data :

               

              sym.getComposition().getStage().$("PlaceHolderText").html(+$(this).data('title'));

               

               

              if you see i bold two title, you should know now we referred our title to

              .data('title',data[i].title); we made before

               

              i hope you undrestand it well now

               

              Zaxist

              1 person found this helpful
              • 4. Re: JSON content - click to show another symbol on the stage
                Zoze Level 1

                Oh yes!

                 

                I believe  that I understand Zaxist!!!!

                 

                Excellent explanation!!!!

                 

                 

                By the way, it doesn't display the title, it display a NaN text.

                • 5. Re: JSON content - click to show another symbol on the stage
                  Zaxist Level 4

                  you're welcome, and Sorry about my misstype

                   

                  you should remove that + before $

                   

                  should be like this :

                   

                  sym.getComposition().getStage().$("PlaceHolderText").html($(this).data('title'))

                   

                  Zaxist

                  • 6. Re: JSON content - click to show another symbol on the stage
                    Zoze Level 1

                    Yes, correct.

                     

                    it is working.

                     

                    There is no sorry.

                     

                    Sorry for my questions!!

                     

                     

                    THANK YOU ZAXIST!!!!!

                    • 7. Re: JSON content - click to show another symbol on the stage
                      Zaxist Level 4

                      No Problem

                      enjoy your Dynamic Content

                       

                      Zaxist

                      • 8. Re: JSON content - click to show another symbol on the stage
                        Zoze Level 1

                        I'll try to do some more things now.

                         

                        Could you tell me the + sign when we have to use it?

                        • 9. Re: JSON content - click to show another symbol on the stage
                          Zaxist Level 4

                          when we have Static text like this

                           

                          sym.getComposition().getStage().$("PlaceHolderText").html("This Text is:"+$(this).data ('title'))

                           

                          then we see

                           

                          This Text is : (in here we see our title data)

                           

                          Zaxist

                          1 person found this helpful
                          • 10. Re: JSON content - click to show another symbol on the stage
                            Zoze Level 1

                            Zaxist,

                             

                            and how could I make the thumbnails to appear as a table of 4x5?

                             

                            I suppose that this will be done on the contect element (that holds them) with css.

                            Right?

                            • 11. Re: JSON content - click to show another symbol on the stage
                              Zaxist Level 4

                              yes, doing it like this :

                               

                              s.$("imageholder").css({

                                                                 

                                                                  "background-image":"url('"+data[i]. image+"')",

                                                                  "background-size":"contain"

                                                                

                                                                 });

                               

                              you have many options like :

                               

                              Cover

                              100%

                              4px     5px

                              and more

                              See them here : http://www.w3schools.com/cssref/playit.asp?filename=playcss_background-size&preval=cover

                               

                              Zaxist

                              • 12. Re: JSON content - click to show another symbol on the stage
                                Zoze Level 1

                                Oh, thanks again!!!

                                 

                                And sorry for too many questions!

                                 

                                I am grateful to you!!!

                                • 13. Re: JSON content - click to show another symbol on the stage
                                  Zaxist Level 4

                                  you're welcome

                                   

                                  feel free to ask your questions

                                   

                                  Zaxist

                                  • 14. Re: JSON content - click to show another symbol on the stage
                                    Zoze Level 1

                                    Zaxist,

                                     

                                    how can i hide the childsymbol that is created in the compositionready?

                                     

                                    I mean: the created childsymbol

                                     

                                    var s = sym.getSymbol("base").createChildSymbol("template", "content");

                                     

                                     

                                    on  on an element at the stage with click action, to hide the template content and display another childsymbol for example template2.

                                     

                                    I tried with:

                                     

                                    sym.getSymbol('content').$("template").hide();

                                     

                                    sym.getComposition().getStage().getSymbol("content").$("template").hide();

                                     

                                    sym.getComposition().getStage().$("base").hide(); - this worked but it hide's the whole symbol

                                     

                                     

                                    sym.getComposition().getStage().getSymbol("base").getParentSymbol("content").$("template") .hide();

                                     

                                     

                                    sym.getComposition().getStage().getSymbol("base").getSymbol(sym.content.getSymbolElement() ).deleteSymbol();

                                     

                                    sym.getComposition().getStage();

                                    sym.getChildSymbols().hide();

                                     

                                     

                                    But I can't make it work.

                                    • 15. Re: JSON content - click to show another symbol on the stage
                                      Zaxist Level 4

                                      well, this is not that easy, you should set id for your dynamic symbols so you can have access to them after they created on the stage, but you should make uniq id for each to make them accessible one by one...

                                       

                                      like this :

                                       

                                      var s = sym.getSymbol("base").createChildSymbol("template", "content");

                                       

                                      s.element.attr('id', 'New ID Name For Our Dynamic Symbol Here')

                                       

                                      like :


                                      s.element.attr('id', 'symbol'+i) // we can use i in loop to make every symbol uniq ID

                                       

                                      then later we can have access to them like this

                                       

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

                                       

                                      or

                                       

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


                                       

                                      i hope this can help you

                                       

                                      Zaxist

                                      • 16. Re: JSON content - click to show another symbol on the stage
                                        Zoze Level 1

                                        One more time you were very helpful!!!

                                         

                                         

                                        Thank you again and i hope to make it work!!!

                                        • 17. Re: JSON content - click to show another symbol on the stage
                                          Zoze Level 1

                                          Zaxist,

                                           

                                          I change my JSON structure in order to have a tittle and below the this title to display all the items, but what I have to change on the code.

                                           

                                          JSON structure:

                                           

                                          {

                                             "Nature": [

                                                {

                                                      "title" : "1st nature",

                                                     "description": "1st Image",

                                                           "seira":"toy-B",

                                                                 "image": "images/wheel_cool.png",

                                                                 "largeimage": "images/wheel_cool.png"

                                           

                                           

                                                },

                                                {

                                                      "title" : "2nd Nature",

                                                     "description": "1st Image",

                                                           "seira":"toy-B",

                                                                 "image": "images/wheel_cool.png",

                                                                 "largeimage": "images/wheel_cool.png"

                                           

                                           

                                                }

                                              

                                             ],

                                             "City": [

                                                {

                                                      "title" : "1st nature",

                                                     "description": "1st Image",

                                                           "seira":"toy-B",

                                                                 "image": "images/wheel_cool.png",

                                                                 "largeimage": "images/wheel_cool.png"

                                                },

                                                {

                                                      "title" : "2nd nature",

                                                     "description": "1st Image",

                                                           "seira":"toy-B",

                                                                 "image": "images/wheel_cool.png",

                                                                 "largeimage": "images/wheel_cool.png"

                                                }

                                           

                                           

                                             ]

                                           

                                           

                                          }

                                           

                                           

                                           

                                          thanks in advanced

                                          • 18. Re: JSON content - click to show another symbol on the stage
                                            Zaxist Level 4

                                            this is very simple to having access to each

                                             

                                            you can have access like this :

                                             

                                            data.Nature[0].title

                                            data.Nature[0].image

                                            data.Nature[1].title

                                            data.Nature[1].image

                                            data.City[0].title

                                            data.City[0].image

                                            and ....

                                             

                                             

                                            be cause you made Nature and City with array structure so you should add index to them for each object like above i wrote for you

                                             

                                            and i think you should already know that you can use simple i (from our for loop) to make access to them instead of using numbers like my sample !

                                             

                                            Zaxist

                                            • 19. Re: JSON content - click to show another symbol on the stage
                                              Zoze Level 1

                                              I don't understand this with loop.

                                               

                                               

                                              And How I could have the words "Nature" and "City" to be displayed in a text field?

                                               

                                               

                                              $.getJSON("content3.json",

                                                        function(data){

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

                                                                  var s = sym.createChildSymbol("template","content");

                                                                  s.$("title").html(data.Nature[0].title);

                                                                  s.$("description").html(data.Nature[0].description);

                                                                  s.$("seira").html(data.Nature[0].seira);

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

                                                                  s.$("imageholder").data('Large', data[i].Nature[0].largeimage);

                                                                  s.$("imageholder").data('myIndex', i);

                                                                  s.$("imageholder").data('title',data[i].Nature[0].title);

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

                                                                                                          sym.getComposition().getStage().$("finte").css({"background-image":"u rl("+$(this).data('Large')+")"});

                                                                                                          sym.getComposition().getStage().$("PlaceHolderText").html($(this).data ('title'))

                                                                                                          if ($(this).data("myIndex") == 0){ // right way to read value and checking it

                                                                      sym.getComposition().getStage().menuoff();

                                                                      sym.getComposition().getStage().$("red").show();

                                                                      }

                                               

                                               

                                              Something si wrong with the above, but what?

                                              • 20. Re: JSON content - click to show another symbol on the stage
                                                Zaxist Level 4

                                                you used loop in your first post so i thought you know what i mean !!

                                                 

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

                                                                    var s = sym.createChildSymbol("template","content");

                                                                    s.$("title").html(data[i].title);  //you used loop to read every data's title

                                                 

                                                 

                                                and about Array Names, there is too many ways but i suggest you the easiest way !

                                                 

                                                its better to use it this way with this new structure you made :

                                                 

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

                                                          $.each(data, function (array, index) {

                                                                        $.each(index, function (i, value) {

                                                            var s = sym.createChildSymbol("template","content");

                                                                                                  s.$("Title").html(index[i].title);

                                                                                                  s.$("description").html(index[i].description);

                                                                                                  s.$("seira").html(index[i].seira);

                                                                         .

                                                                         .

                                                                         ....

                                                                         till End of your commands it will loop each array one by one and will

                                                                         make your content with informations

                                                                                    });

                                                    });

                                                });

                                                 

                                                 

                                                and if you want to get array name you just need to add this line, i didnt know the name of your symbols and div so i use div as sample

                                                 

                                                s.$("div").html("Array Name is : "+array)

                                                 

                                                this way is more simple, after you made a good structure, isnt it ?

                                                 

                                                Zaxist

                                                 


                                                • 21. Re: JSON content - click to show another symbol on the stage
                                                  Zoze Level 1

                                                  where I am wrong again?

                                                   

                                                  It doesn't display the items of the JSON.

                                                   

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

                                                            $.each(data, function (array, index) {

                                                                          $.each(index, function (i, value) {

                                                              var s = sym.createChildSymbol("template","content");

                                                              s.$("PlaceHolderText").html("Array Name is : "+array);

                                                                                                    s.$("Title").html(index[i].title);

                                                                                                    s.$("description").html(index[i].description );

                                                                                                    s.$("seira").html(index[i].seira);

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

                                                                      s.$("imageholder").data('Large', data[i].largeimage);

                                                                      s.$("imageholder").data('myIndex', i);

                                                                      s.$("imageholder").data('title',data[i].title);

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

                                                                          sym.getComposition().getStage().$("finte").css({"background-image":"u rl("+$(this).data('Large')+")"});

                                                                          sym.getComposition().getStage().$("PlaceHolderText").html($(this).data ('title'));

                                                                          if ($(this).data("myIndex") == 0){ // right way to read value and checking it

                                                                          sym.getComposition().getStage().menuoff();

                                                                          sym.getComposition().getStage().$("red").show();

                                                   

                                                   

                                                   

                                                   

                                                                          }

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

                                                                          sym.getComposition().getStage().menuoff();

                                                                          sym.getComposition().getStage().$("blue").show();

                                                                                                                                   }

                                                                          else if ($(this).data("myIndex") == 2) {

                                                                          sym.getComposition().getStage().menuoff();

                                                                          sym.getComposition().getStage().$("Ellipse").show();

                                                                                                                                   }

                                                   

                                                   

                                                   

                                                   

                                                                                                              });

                                                                      }

                                                  });

                                                  • 22. Re: JSON content - click to show another symbol on the stage
                                                    Zaxist Level 4

                                                    well, you had some small problem, you should do more precision

                                                     

                                                    i wrote a comment every where you had problem (Bold)

                                                    ////////////////////////////////////////////////////////////////////////////////////////// ///////

                                                     

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

                                                              $.each(data, function (array, index) {

                                                                            $.each(index, function (i, value) {

                                                           var s = sym.createChildSymbol("template","content");

                                                                s.$("PlaceHolderText").html("Array Name is : "+array);

                                                                s.$("Title").html(index[i].title);

                                                                s.$("description").html(index[i].description );

                                                                s.$("seira").html(index[i].seira);

                                                                s.$("imageholder").css({"background-image":"url('"+index[i].image+"')"}); // you should replace data with index like what you did for seira and others above

                                                                s.$("imageholder").data('Large', index[i].largeimage); // Same Here

                                                                s.$("imageholder").data('myIndex', i);

                                                                s.$("imageholder").data('title',index[i].title); // Same here

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

                                                                sym.getComposition().getStage().$("finte").css({"background-image":"url("+$(this).data('L arge')+")"});

                                                                sym.getComposition().getStage().$("PlaceHolderText").html($(this).data('title'));

                                                                if ($(this).data("myIndex") == 0){ // right way to read value and checking it

                                                                      sym.getComposition().getStage().menuoff();

                                                                      sym.getComposition().getStage().$("red").show();

                                                                }// if 0

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

                                                                      sym.getComposition().getStage().menuoff();

                                                                      sym.getComposition().getStage().$("blue").show();

                                                                }// if 1

                                                                else if ($(this).data("myIndex") == 2) {

                                                                      sym.getComposition().getStage().menuoff();

                                                                      sym.getComposition().getStage().$("Ellipse").show();

                                                                }// if 2

                                                                        }); // each (index)

                                                              }); // each (data)    / missing parenthesis

                                                    }); // $.getJSON

                                                     

                                                     

                                                    i hope this time you can make it work

                                                     

                                                    Zaxist

                                                    • 23. Re: JSON content - click to show another symbol on the stage
                                                      Zoze Level 1

                                                      I think that is working now, i'll try to do modyfications now!

                                                       

                                                      Thank you Zaxist!

                                                       

                                                      Have a nice day!

                                                      • 24. Re: JSON content - click to show another symbol on the stage
                                                        Zaxist Level 4

                                                        you're welcome

                                                         

                                                        if you liked my answers you can mark them as helpful so others can find them helpful

                                                         

                                                        Zaxist

                                                        • 25. Re: JSON content - click to show another symbol on the stage
                                                          Zoze Level 1

                                                          oops, I've forgot!

                                                           

                                                           

                                                          • 26. Re: JSON content - click to show another symbol on the stage
                                                            Zoze Level 1

                                                            Zaxist please I need your help again.

                                                             

                                                             

                                                            I have this:

                                                             

                                                             

                                                             

                                                            $.getJSON("images1.json",

                                                                      function(data){

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

                                                                                var s = sym.getSymbol("base").createChildSymbol("template", "content");

                                                                                s.element.attr('id', 'basara'+i)

                                                                                                    s.getSymbolElement().css({"background-size":"contain",

                                                                                                       "float": "left",

                                                            "margin": "100 125px 125px 100",

                                                            "clearboth":"{ clear: both; }"

                                                                                                                        });

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

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

                                                                                s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')",

                                                                                                                                                                                                                             "background-size":"cover"

                                                                                                        });

                                                                                s.$("imageholder").data('myIndex', i);

                                                                                                                                  s.$("imageholder").data('Large', data[i].image);

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

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

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                    }

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

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                                                                             }

                                                                                    else if ($(this).data("myIndex") == 2) {

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder1").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                                                                             }

                                                            });

                                                                                }

                                                            });

                                                             

                                                             

                                                            $.getJSON("images2.json",

                                                                      function(data){

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

                                                                               var s = sym.getSymbol("podia").createChildSymbol("template", "contentpodia");

                                                                                                   s.getSymbolElement().css({"background-size":"contain",

                                                                                                       "float": "left"});

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

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

                                                                                s.$("imageholder").css({"background-image":"url('"+data[i]. image+"')",

                                                                                                                                                                                                                             "background-size":"cover"

                                                                                                        });

                                                                                s.$("imageholder").data('myIndex', i);

                                                                                                                                  s.$("imageholder").data('Large', data[i].image);

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

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

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                    }

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

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                                                                             }

                                                                                    else if ($(this).data("myIndex") == 2) {

                                                            sym.getComposition().getStage().getSymbol('holders').$("holder2").css({"background-image": "url("+$(this).data('Large')+")"});

                                                                                                                                             }

                                                             

                                                             

                                                             

                                                             

                                                            });

                                                                                }

                                                            });

                                                             

                                                             

                                                            I want to import symbol podia inside to base to handle it by content2.

                                                             

                                                            I am writing this:

                                                             

                                                            var basewithpodia = sym.getSymbol("base").createChildSymbol("podia", "content2");

                                                             

                                                            it places the symbol inside, without the data of the JSON file.

                                                             

                                                            How can I make it to work?

                                                            • 27. Re: JSON content - click to show another symbol on the stage
                                                              Zaxist Level 4

                                                              try this to see if its working

                                                               

                                                               

                                                               

                                                              var bwp = sym.getSymbol("base").createChildSymbol("podia", "content2");

                                                              $.getJSON("images2.json",

                                                                        function(data){

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

                                                                               var s = bwp.getSymbol("podia").createChildSymbol("template", "contentpodia");

                                                                                   s.element.css({"background-size"          :"contain",

                                                                                                                                                                                                                      "float"                                        : "left"});

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

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

                                                               

                                                               

                                                              Zaxist

                                                              • 28. Re: JSON content - click to show another symbol on the stage
                                                                Zoze Level 1

                                                                Unfortunatelly, didn't work.

                                                                 

                                                                It doesn't display either ,the JSON items in "podia" at the stage.

                                                                 

                                                                 

                                                                Any other suggestion?

                                                                • 29. Re: JSON content - click to show another symbol on the stage
                                                                  Zaxist Level 4

                                                                  can you zip up your project for me so i can find a soloution for you

                                                                   

                                                                  Zaxist

                                                                  • 30. Re: JSON content - click to show another symbol on the stage
                                                                    Zoze Level 1

                                                                    If you have problem to get it, tell me.

                                                                    I didn't include images folder because it was huge.

                                                                     

                                                                    https://www.dropbox.com/sh/xtut4fuuekb7eyo/shLSMY0qk2

                                                                    • 31. Re: JSON content - click to show another symbol on the stage
                                                                      Zoze Level 1

                                                                      Zaxist,

                                                                       

                                                                      did you find something?

                                                                       

                                                                      I am thinking to have just one JSON with all the data and with

                                                                       

                                                                      s.element.attr('id', 'symbol'+i)

                                                                       

                                                                      then later we can have access to them like this

                                                                       

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

                                                                       

                                                                       

                                                                      to display only the wanted.

                                                                       

                                                                      I'd like to know how can I hide/show multiple items instead of multiple lines like:

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

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

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

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

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

                                                                      etc

                                                                       

                                                                       

                                                                      if i can write something as

                                                                       

                                                                      on click event:

                                                                       

                                                                      sym.$("#symbol0"<="#symbol30").hide

                                                                      sym.$("#symbol31"<="#symbol70").show

                                                                       

                                                                      is it possible?

                                                                      • 32. Re: JSON content - click to show another symbol on the stage
                                                                        Zaxist Level 4

                                                                        well i found a way for what you wanted, i just forgot to post it !!

                                                                         

                                                                        var bwp = sym.getSymbol("base").createChildSymbol("podia", "content2");

                                                                         

                                                                        $.getJSON("images2.json",

                                                                                  function(data){

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

                                                                                          var s = bwp.createChildSymbol("template", "contentpodia");

                                                                         

                                                                        this will make what you wanted

                                                                         

                                                                         

                                                                        about hide() and show(), the way you are thinking about, is completely wrong !!

                                                                         

                                                                        you should do use class when you want to do multiple items hide() or show() at once

                                                                         

                                                                        like below :

                                                                         

                                                                        s.element.addClass("First")

                                                                         

                                                                        then

                                                                         

                                                                        $(".First").hide() or $(".First").show()

                                                                         

                                                                        Zaxist

                                                                        • 33. Re: JSON content - click to show another symbol on the stage
                                                                          Zoze Level 1

                                                                          Excellent Zaxist!!!

                                                                           

                                                                          I am trying now to make some hidings but...

                                                                           

                                                                          I can't again

                                                                           

                                                                          https://www.dropbox.com/s/o7n91b2mu2xwkgo/withbuttons.zip

                                                                           

                                                                          Please if you can again, i need your ligths.

                                                                          • 34. Re: JSON content - click to show another symbol on the stage
                                                                            Zaxist Level 4

                                                                            set a class name for your ellipses, then show and hide them this way :

                                                                             

                                                                             

                                                                            sym.$(".ClassNameThatYouChoosed").hide()

                                                                            sym.$(".ClassNameThatYouChoosed").show()

                                                                             

                                                                            Note : when you click on your Ellipse on the left panel, where you can change your Ellipse name you can see a C word, click on it and write your class name and dont put dot before your class name

                                                                             

                                                                            but you should put dot when you want to show or hide it

                                                                             

                                                                            Zaxist

                                                                            • 35. Re: JSON content - click to show another symbol on the stage
                                                                              Zoze Level 1

                                                                              Zaxist,

                                                                               

                                                                              I want at the right when click the bas and load the symbol podi inside.

                                                                               

                                                                              The 3 ellipses appear.

                                                                               

                                                                              When click the first then shows the items of the template.

                                                                               

                                                                              I want when click at the 3rd item to hide all this items

                                                                              and again the 3 Ellipses. (to come back as it was)

                                                                               

                                                                               

                                                                              else if ($(this).data("myIndex") == 2) {

                                                                                                                                                              sym.getComposition().getStage().getSymbol('base') .$("content2").hide();

                                                                                                                                                              sym.getComposition().getStage().getSymbol('podia' ).$("Ellipse").show();

                                                                                                                                                              sym.getComposition().getStage().getSymbol('podia' ).$("Ellipse2").show();

                                                                                                                                                              sym.getComposition().getStage().getSymbol('podia' ).$("Ellipse3").show();

                                                                              • 36. Re: JSON content - click to show another symbol on the stage
                                                                                Zaxist Level 4

                                                                                what do you mean by :

                                                                                 

                                                                                I want when click at the 3rd item to hide all this items ?

                                                                                 

                                                                                Pod text or Ellipse3  ?

                                                                                 

                                                                                Zaxist

                                                                                • 37. Re: JSON content - click to show another symbol on the stage
                                                                                  Zoze Level 1

                                                                                  Currently,

                                                                                   

                                                                                  symbol podia has as child the template that loads the JSON

                                                                                   

                                                                                  the symbol podia is loading inside to symbol base.

                                                                                   

                                                                                   

                                                                                  At the symbol base I want to click on ellipse1 and show the contents od podia (the items of JSON file).

                                                                                   

                                                                                  On this 3rd item (the items of JSON) when click on it to give as a result the 3 ellipse again.

                                                                                   

                                                                                  So, to click on ellipse 2 or 3 and show me another content that will load another JSON file.

                                                                                  • 38. Re: JSON content - click to show another symbol on the stage
                                                                                    Zoze Level 1

                                                                                    Zaxist,

                                                                                     

                                                                                    I have this code and worked:

                                                                                     

                                                                                    $.getJSON("images1.json",

                                                                                              function(data){

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

                                                                                                        var rts = sym.createChildSymbol("template", "content");

                                                                                                                                                                                  rts.element.attr("id5","idnew");

                                                                                     

                                                                                    but I can't hide the data with:

                                                                                     

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

                                                                                     

                                                                                    It doesn't work.

                                                                                     

                                                                                     

                                                                                    Do you have any suggestion?

                                                                                    • 39. Re: JSON content - click to show another symbol on the stage
                                                                                      Zaxist Level 4

                                                                                      well, this line is wrong

                                                                                       

                                                                                         rts.element.attr("id5","idnew");

                                                                                       

                                                                                      you cant say id5 you should say id, and id is defined type in html element and you cant have id5, so correct way is :

                                                                                       

                                                                                         rts.element.attr("id","idnew");

                                                                                       

                                                                                      after this

                                                                                       

                                                                                      you can hide it with this line:

                                                                                       

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

                                                                                       

                                                                                      you should use what ever you said for new id, and you used idnew

                                                                                       

                                                                                      hope this can help you

                                                                                       

                                                                                      Zaxist

                                                                                      1 2 Previous Next