13 Replies Latest reply on Dec 24, 2012 10:09 AM by Aiesyaah

    Switch statements in Adobe Edge

    Aiesyaah Level 1

      Hi, does anyone knows if this switch statement will work? I'm working on it in Adobe Edge. I tried writing the codes in normal switch statement structure. But I don't know why it still wouldn't work. These is just an excerpt of my work. Thank you.

       

       

       

      $('.myclass a').click(function()

      {

          var cases = ["case1", "case2"];

          var self = $(this);

          for(var i =0, ii = cases.length;i<ii;i++)

          {

              var casesName = cases[i];

              if(self.hasCase(casesName))

              {

                  switch(casesName)

                  {

                      case 'case1':

                      alert("Just like the sky!");

                     //display the corresponding animation

                      case 'case1' = sym.$(".Stage_position1__1Black_Eagle_id");

                      break;

                     

                      case 'case2':

                      alert("rainbow!");

                      case 'case2' = sym.$(".Stage_position2__5Black_Snake_id"); 

                      break; 

       

       

       

       

              }

          }      

      };

        • 1. Re: Switch statements in Adobe Edge
          joel_pau Level 5

          Hi,

           

          Well, please try to understand these files: ==> attachments

          and try to adapt code to your issue.

          You can send me your file using a private message or here.

          Both lines aren't correct:

          • case 'case1' = sym.$(".Stage_position1__1Black_Eagle_id");
          • case 'case2' = sym.$(".Stage_position2__5Black_Snake_id");
          1 person found this helpful
          • 2. Re: Switch statements in Adobe Edge
            Aiesyaah Level 1

            Hi joel_pau,

             

            I noticed

              faqRenderer.$("question").html("Question #"+i+":");

                      faqRenderer.$("solution").css("background-color", "white").html("Answer #"+i+".");

             

            in faqSymbolsEA1.an codes. But where is it on the stage or folder? Quite curious on that since I can't find it there. I like the "easeOut Bounce" effect though. Cool stuff!

             

            Anyway, I'm doing a drag and drop animation and it has to work on both PC and tablet. I was working on the switch statement before this, then I decided to just do an if/else statement. It kinda works right now, I'm trying to apply it to other parts, and  am still working on it.
            Then, I'll have to work on other parts of the project. Like how to ensure that only 1 element is able to drop into the droppable area. That means, the other elements have to "bounced back" to the original position if it's being dropped onto another element.
            And then, I'll have to do some "calculations" to determine how correct or wrong the draggables are dropped into the droppable areas, before displaying the "correct" or "wrong" feedback animation. Maybe you can give me some tips on how to improve on the codes because I'm not that strong in JavaScript.

             

            Thank you!

             

             

            Attached here is the link to my file if you can take a look. https://www.box.com/s/jpv9ekyq0m6g5qryrc0q

            • 3. Re: Switch statements in Adobe Edge
              Aiesyaah Level 1

              Hi joel_pau,

               

              I can drag and drop any of the elements(draggables) into any of the droppable areas. i used the if/else statement.

               

              Right now, I have to ensure that there's only 1 draggable element on a droppable area at any one time. I found this link. http://jsfiddle.net/7EbKS/
              But i'm not so sure on how to apply to my codes. Can you give me some tips on it?

               

              Thank you

              • 4. Re: Switch statements in Adobe Edge
                joel_pau Level 5

                "But where is it on the stage or folder? Quite curious on that since I can't find it there."

                 

                You will find it selecting faqRenderer (Library panel).

                library.jpg

                Then: right click and you choose "Edit".

                You will see:

                libraryElements.jpg

                I drag and drop faqContainer on stage (step #1).

                Then faqRenderer is added (or created) using code (step #2).

                1 person found this helpful
                • 5. Re: Switch statements in Adobe Edge
                  joel_pau Level 5

                  ok, i look at your code using jsfiddle page as a model.

                  • 6. Re: Switch statements in Adobe Edge
                    Aiesyaah Level 1

                    Hi joel_pau,

                     

                    Thanks for sharing this information. I really appreciate it.

                    • 7. Re: Switch statements in Adobe Edge
                      Aiesyaah Level 1

                      Hi joel_pau,

                       

                      I have solved that part of the animation that allows only 1 draggable element in a droppable area at any one time. Am applying it to all the draggable elements now. However, I'm having some kind of problem right now.

                       

                      Once "REVERT PART 1" in the codes are commented out, i can drag the elements around. but now, i can only drop one element in the whole droppable areas. The rest of the elements will be revert back to it's original position.

                      "REVERT PART 1" was commented out because it was giving errors (unexpected identifier).

                       

                      After that, I will be researching and working on how to "calculate" and display the "correct" and "wrong" feedback after all the draggables have been placed in the droppable areas.

                       

                      So all the birds, all the snakes and all the insect have to be placed together in the same row for the animation to display a "correct" feedback animation (feedback_symbol) at the end of the dragging. And if the user placed it wrongly, it will display a "wrong" feedback animation (feedback_symbol).


                      I have also placed a reset button on the stage but I don't know why it won't appear eventhough I have tried changing it's position on the "Elements" column.

                       

                      This is my file so far, link: https://www.box.com/s/5a0dsq29upy2wtatxmyb I hope you can share some tips with me. Thank you so much

                      • 8. Re: Switch statements in Adobe Edge
                        joel_pau Level 5

                        You have some troubles because you code is too much complicated.

                        Yesterday, i began to simplify.

                        I'll go on today.

                        • 9. Re: Switch statements in Adobe Edge
                          joel_pau Level 5

                          Here is an optimized version: less code and objects.

                          ==> attachment

                           

                          I replaced 2 tags ==> Elements panel: see images (<img>) and labels (<p>).

                          So, i can browse your images (9) and labels (9).

                          Therefore, i can delete:

                          • 9 mouseover events,
                          • 9 mouseout events,
                          • 9 labels (group div),
                          • 330 code lines (378-48=330).

                          Ouf!

                          Now, i look at your revert issue.

                          1 person found this helpful
                          • 10. Re: Switch statements in Adobe Edge
                            joel_pau Level 5

                            Here is jsfiddle page using Edge Animate.

                            I created 5 droppable boxes (yellow boxes) and 5 draggables boxes (grey boxes).

                            dropPic1.jpgdropPic2.jpg

                            Yellow boxes have "droppable" class and grey boxes have "draggable" class.

                            I opened compositionReady panel to write this code:

                            // Source: http://jsfiddle.net/7EbKS/

                            yepnope(

                                        {

                                         nope:[

                                             'js/jquery-ui-1.9.2.custom.min.js',

                                             'js/jquery.ui.touch-punch.min.js',

                                             'css/jquery-ui-1.9.2.custom.min.css'

                                          ],

                                         complete: init

                                        }

                                     );

                             

                                     function init() {

                             

                                        foo();

                             

                                         $('.draggable').draggable({

                                             revert: "invalid",

                                             stop: function() { $(this).draggable('option', 'revert', 'invalid'); }

                                         });

                             

                                         function foo() {

                                             $('.droppable').droppable({

                                                 greedy: true,

                                                 accept: ".draggable",

                                                 // tolerance: "fit",

                                                 drop: function(ev, ui) {

                                                    //ui.draggable.appendTo($(this)).removeAttr('style');

                                                  }

                                             });

                                         }

                             

                                         $('.draggable').droppable({

                                             greedy: true,

                                             tolerance: 'touch',

                                             drop: function(event, ui) {

                                                 ui.draggable.draggable('option', 'revert', true);

                                                 $(this).append('<br><span>Box completed</span>');

                                             }

                                         });

                            }

                             

                            Revert works fine. It returns:

                            dropPic3.jpg

                            I can't upload files. My hoster is buggy.

                            • 11. Re: Switch statements in Adobe Edge
                              joel_pau Level 5

                              Here is latest version. I can't upload files.

                              File: indexNew.an (see: attachment post #9).

                              Panel compositionReady:

                              var labels = $('p'), animals = $('img');

                              labels.hide().css({"background-color": "white", "border": "1px solid black", "border-radius": "10px"});

                              animals.each(function(i){

                                      $(this).hover(

                                          function(){ $(labels[i]).show() },

                                          function(){ $(labels[i]).hide() });

                              });

                              var thisSnap = new Array(), thisSnapMode = new Array();

                              thisSnap = [".target5",".target4",".target3",".target6",".target2",".target7",".target9",".target1",".target8"];

                              ThisSnapMode = ["centre","centre","centre","corner","centre","corner", "corner","centre","corner"];

                               

                              yepnope(

                                  {

                                  nope:[

                                      'js/jquery-ui-1.9.2.custom.min.js',

                                      'js/jquery.ui.touch-punch.min.js',

                                      'css/jquery-ui-1.9.2.custom.min.css'

                                   ],

                                  complete: init

                                  }

                              );

                               

                              function init() {

                                 var stage = sym.$("Stage");

                                  animals.each(function(i){      

                                      $(this).draggable({

                                          disabled: false,

                                          containment: stage,

                                          snap: thisSnap[i],

                                          snapMode: thisSnapMode[i],

                                          revert: "invalid",

                                          stop: function() { $(this).draggable('option', 'revert', 'invalid') }

                                      });

                                      $(this).droppable({

                                      greedy: true,

                                      tolerance: 'touch',

                                      drop: function(event, ui) {

                                              ui.draggable.draggable('option', 'revert', true);//alert('Box completed');

                                              }

                                    });

                                  });//each

                               

                                  for (var j=1 ; j<10 ; j++) {

                                      sym.$("position"+j).droppable({

                                              greedy: true,

                                              accept: ".allcases",   

                                              drop: function(event, ui) {$(this).css("border", "1px solid red")}

                                      });

                                  };//for

                              }//init


                              • 12. Re: Switch statements in Adobe Edge
                                joel_pau Level 5

                                Now, i can again upload files.

                                ===> attached file (index2.an).

                                 

                                ===> demo file (jsfiddle.net page)

                                 

                                Note: The link will expire on December 30, 2012.


                                • 13. Re: Switch statements in Adobe Edge
                                  Aiesyaah Level 1

                                  Hi joel_pau,

                                   

                                  Sorry for the later reply. Was away for awhile. By the way, I'm looking through all the posts and files. Thank you so much for your help. I really appreciate it alot. Have a wonderful week ahead