8 Replies Latest reply on Mar 19, 2017 8:57 AM by PaulXI

    importing html div ,inserting html

    Henry Code Level 1

      I have a Edge project I would like to add a simple html to, which consist of many simple text divs. 

      Is this possible?

       

      I also have the block of div codes if I can just insert that instead .

       

      I opened the html file in edge it shows as many separate divs. I can select but cannot copy to another edge project where I want it .

      can I convert it to symbol, or can a html file be turned to a symbol?

      can i group div them?

      can i add it by editing the .js file and creating and ID?

       

      So i instead opened the edge html in DW CC where I can copy the code and paste the div's over. it previews right. except the location and it covers all frames on the timeline

      (I only need it in one part of the site).

      So then i tried Muse as a html insert but i lost a lot of edge attributes. fail!

       

      I'm trying to avoid rebuilding all the text divs in edge.

      Question is:

      what is the best way to import, or reuse html in edge ? or what Adobe combo might work. sorry for multiple Q's.

        • 1. Re: importing html div ,inserting html
          resdesign Adobe Community Professional & MVP

          Hey,

          I am not sure what you exactly want to do but you can add html to elements like this

           

          sym.$('text').html('whatever text and html tags you want to add here'),

           

          Example of html tags:

          sym.$("description").html ("<P style='text-align: center;font-size: 30px; color: #ff7400;text-shadow: 2px 2px 2px #000;'>WORLD HISTORY</P><P style='text-align:center; font-size: 30px'>Ancient Civilizations</p><P style='text-align: center;font-size: 30px; color: #ff7400;text-shadow: 2px 2px 2px #000;'>CHINA");

          You can use any html tags.

           

          You can also use css to format elements.

          sym.$('elemet').css('background-color', 'red');

           

          You can group div like this:

           

          In the element panel on the right, select the divs you want to group, right-click and chose group div elements.

          group div.png

           

          You can use each to go through groups divs. For example for a set of buttons - In this sample, you go through an array and a function that updates content

           

          var buttons = sym.$("buttons").children();    

           

           

          $.each(buttons,function(i){console.log(i,$(this));

                    $(this).on("click", function(){ updateImg(i); });

                    $(this).on("mouseover", function(){ showName(i); });

          })

          2 people found this helpful
          • 2. Re: importing html div ,inserting html
            Marcus_Tardif

            I'm sure this is a fundamental subsequent question, but where in edge can you insert code like this? As an example, I have 10 divs within my stage. One of those divs should be an iframe with external content. I was hoping to insert <iframe> html somehow into that one div layer in Edge.

             

            The only place I've seen where you can add code like this html insert is to the stage.compositionReady. But I'm completely missing how compositionReady ties to my div layer that should contain that HTML. Any help would be much appreciated!

            • 3. Re: importing html div ,inserting html
              mobly Level 3

              you can see the full code from the window menu, code. command E

              • 4. Re: importing html div ,inserting html
                Marcus_Tardif Level 1

                Thanks mobly. I do see the full code there. I'm still not able to get my iframe to render. Are there any threads that show the basic steps for embedding iFrame's? I couldn't find any.

                 

                Currently, I have a stage with 10 simple <div>s. One of those <div> layers is named Under_Construction_Content.

                 

                In my compostionReady, I have:

                var container1 = sym.$('#Under_Construction_Content');

                var map1 = ' <iframe width="100%" height="100%" frameborder="0" scrolling="no" src="http://www.google.com"></iframe> '

                container1.html(map1);

                 

                I'm not getting that iframe to actually show up in that div layer, so I'm not completely sure what I'm missing. Any additional help would be appreciated.

                • 5. Re: importing html div ,inserting html
                  mobly Level 3

                  As its a map you want to insert, go here; http://edgedocks.com/tutorials  Simon shows you how to insert maps etc. Hope that works out for you.  Cheers Alistair

                  1 person found this helpful
                  • 6. Re: importing html div ,inserting html
                    Marcus_Tardif Level 1

                    Perfect! That's exactly what I was missing. Great video tutorials.

                    • 7. Re: importing html div ,inserting html
                      mobly Level 3

                      yes there are a lot of good video's online. If you haven't already done so, and you thought my answer was helpful, please check the yes/no response, thanks!

                      • 8. Re: importing html div ,inserting html
                        PaulXI Level 1

                        Hi, man! videolink is dead

                        What R U talking about?