8 Replies Latest reply on May 28, 2014 8:52 AM by heathrowe

    generateChildSymbol horizontally?

    Fea

      Hello, Everybody.

      is there a way to generate child symbols horizontally, and not vertically?

      Creating symbols generates them one below the other, is there a way to generate them side by side????

       

       

      Regards.

       

      Fea.

        • 1. Re: generateChildSymbol horizontally?
          heathrowe Most Valuable Participant

          Yes you should be able to force position to relative and float to right via css() method.

           

          Please show us you example and how you have your current project with symbols showing.

           

          D

          1 person found this helpful
          • 2. Re: generateChildSymbol horizontally?
            Fea Level 1

            Hello, man

             

            It is based on the json file we discussed before.

            It generates a 100% width scrollable gallery, based on the call of the json items.

            elements are directly generated on the stage, whose overflow is visible.

            The question is how to develop it, in the same way on an horizontal line (for a stand-alone image gallery generated on json).

            At all i'd also like to know how to integrate that with a cart and check-out function, in order to make it complete.

             

             

             

            The code.

             

             

            sym.createChildSymbol("banner", "stage");

            sym.createChildSymbol("header", "stage");

            sym.createChildSymbol("cart", "stage");

            $.getJSON("data.json").success(

                      function(data){

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

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

              s.$("title").html(item.title);

                                s.$("description").html(item.description);

                                s.$("price").html(item.price);

                                  s.$("immagine").css({"background-image":"url('"+item.img+"')"}).css({"background-size": "cover", "background-position": "center"});

            s.play(index * -300);

             

             

                                });

            sym.createChildSymbol("footer", "stage");

            });

             

             

             

            regards.

             

            F.

            • 3. Re: generateChildSymbol horizontally?
              heathrowe Most Valuable Participant

              Can I see this in operation.

               

              Since you are setting the img to cover, at 100%, how do you anticipate to position other elements.

               

              Darrell

              • 4. Re: generateChildSymbol horizontally?
                Fea Level 1

                sample.jpg

                 

                The question did not refer to the 100% slider, infact.

                At all, the question was how to make them float, considering a width that's gonna allow them to float?

                I'm a noob.

                 

                Thanks for your answers, by the way.

                • 5. Re: generateChildSymbol horizontally?
                  heathrowe Most Valuable Participant

                  try something like this..

                   

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

                    "float" : "left",

                    "margin-right" : "2px",

                    "margin-left" : "2px"

                    });

                   

                  ..immediately after your s.$("immagine").css......... line.

                   

                  Darrell

                  • 6. Re: generateChildSymbol horizontally?
                    Fea Level 1

                    Starting from your suggestion:

                     

                    var mySymbolObject = sym.createChildSymbol("child", "stage").getSymbolElement("property").css({"position":"relative",

                      "float" : "left",

                      "margin-bottom" : "2px",

                      "margin-right" : "2px",

                      "margin-left" : "2px"

                      });

                     

                     

                    This is the way it worked on a new stage, tested on the stage's click function, not related to the json file, but it would work the same.

                     

                    Worked fine. On a 100%/100% stage, it generates a cool gallery, whose divs' per line depends on the body's width, it auto-organize it, similar to the masonry js.

                     

                    If you animate the child element, you have to put the sym.play(); within the symbol's stage in order to make it work.

                     

                     

                    Now, the question about the cart function stays open ;^)

                    • 7. Re: generateChildSymbol horizontally?
                      Fea Level 1

                      $.getJSON("data.json").success(

                                function(data){

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

                                          var s = sym.createChildSymbol("child", "stage");

                                          s.getSymbolElement("property").css({"position":"relative",

                        "float" : "left",

                        "margin-bottom" : "2px",

                        "margin-right" : "2px",

                        "margin-left" : "2px"

                        });

                         s.$("title").html(item.title);

                       

                       

                      s.play(index * -300);

                       

                       

                                          });

                      });

                       

                       

                      For the working gallery pointing to json.

                       

                       

                      • 8. Re: generateChildSymbol horizontally?
                        heathrowe Most Valuable Participant

                        please post a zip of the updated project files. Its hard to know what you are referring to with snippets.

                         

                        Darrell