7 Replies Latest reply on Dec 17, 2014 7:42 AM by Charles Joyner

    How to create drop down div

    Charles Joyner Level 1

      Hello all,

       

      I have no idea how to describe what I am asking besides the term "drop down div".  Though I am not sure if that is the correct term. 

       

      I have been tasked to create a quiz similar to the one linked below. 

      Bioenergy Quiz

       

      The two elements of this quiz that have me stumped are below.  Any help you can provide will be greatly appreciated.  Thank you. 

      1) How to set up the drop down div functionality?
           So when the "Start Quiz" button is clicked, the content for the Question 1 is added to the bottom of the content for the Bioenergy Quiz title.

       

      2) How is the focus changed to the new content?

           How is the functionality set up to go down to the bottom of the page to show the new content?

        • 1. Re: How to create drop down div
          joel_pau Level 5

          Hi Charles,

           

          Here is a case. A drop down list can be created using the select tag.

          You can open a new file and copy and paste this code.

           

          1) creationComplete panel:

          var optionTags = "<option>Title</option><option value='case1'>first Case</option><option value=case2>second Case</option><option value='case3'>third Case</option>";

           

          sym.$( "<select id='options' title='Please one choice'>"+optionTags+"</select>" ).appendTo( "#Stage" );

           

          sym.$("#options").css({ "cursor":"pointer", "position":"absolute", "top":"20px", "left":"20px","width":"100px"});

           

          2) compositionReady panel:

          var userChoice = function(){

           

            switch( sym.$("#options").val() ){

           

            case "case1":

            //add code here

            console.log("case1 selected");

            break;

           

            case "case2":

            //add code here

            console.log("case2 selected");

            break;

           

            case "case3":

            //add code here

            console.log("case3 selected");

            break;

           

            default:

            //add code here

           

            } // switch

          } // userChoice  function

           

          sym.$("#options").change( userChoice );

           

          It returns using Safari 8:

          selectTagcapture.jpg

          Note: jQuery is required.

          • 2. Re: How to create drop down div
            Charles Joyner Level 1

            Thanks for your response Joel.  I am very new at creating drop down divs in Adobe Edge Animate.  Could you explain what is going on in the code you posted?  I copied and pasted what you posted into the places you said to post it and tested it in IE, Firefox and Chrome and was unable to see anything.  Can you help me figure out where I went wrong?  Thank you.

            • 3. Re: How to create drop down div
              joel_pau Level 5

              I assume that you are using Edge 5.0 (Edge Animate CC 2014.1).

               

              "Note: jQuery is required.": what does it mean?

              See the picture below.

              libraryPanel.jpg

              You have to add the jQuery file to the script panel. Therefore, it will be loaded.

               

              Here is a demo file (Edge 5.0) with 2 examples: dropdown demo to download.

              • 4. Re: How to create drop down div
                Charles Joyner Level 1

                Ok.  I see what you mean now.  This is not quite what I am looking to create.  If you click the link in my original post, I mean to create the scrolling effect demonstrated on that page.

                 

                On the Title page, when the "Start Quiz" button is clicked, another section is added to the page and the user is taken to the new section with the ability to scroll up to the Title section.  Could you provide any insight in how to create this?  Thank you for all the help you have provided so far.

                 

                By the way, I am indeed using Edge Animate CC 2014.1

                • 5. Re: How to create drop down div
                  joel_pau Level 5

                  So, correct words are "parallax scroll" or "parallax scrolling". Not drop down.

                  You will find an exemple here: parallax edge animate.

                  This website provides you a link to download a demo file.

                  Bye.

                  • 6. Re: How to create drop down div
                    Charles Joyner Level 1

                    No, what I am trying to create is not parallax either.  Parallax is pretty much animation activated by scrolling.

                     

                    What I am looking for more so involves hiding div (probably setting the hidden divs to display:none) and making them visible through a click event.  Then making the browser travel to the div revealed by the click event using anchor tags.  I dont know if this makes sense and its more of a theory at this point.  I will have to try it out.  Thanks again Joel.