8 Replies Latest reply: Jul 11, 2012 8:48 AM by designish RSS

    Trouble with HTML5 Content

    SummumBonum000 Community Member

      I finally was able to get my edge content to work in muse, but after inserting the content only half of the annimation is showing up, it also is messing up the header of my page. The cavas size of my annimation is the same as the space that I need it to be on my website.

      **Im trying to insert the html5 content in the presentation section of my site.

       

      I used typekit font in Edge and I can see the font working working, but now the stock typekit fonts that I used in Muse is no longer showing up.

       

      What am I doing wrong? Thank you in advance for all the help, and I cant wait to contribute more to these forums in the future.

       

       

      ***While writing this post, I tried to look at my site in Chrome and I can now see my full animation. I was using windows explorer earlier, but I still have the problem with the header and typekit fonts used in muse.

        • 1. Re: Trouble with HTML5 Content
          SummumBonum000 Community Member

          My website is www.modernmediadesigns.com

          Also I meant to say that I was trying to enter the html5 content in the presentation widget on my home page.

          • 2. Re: Trouble with HTML5 Content
            SummumBonum000 Community Member

            I ended up changing the font used in the header to the same font I used in annimation. That seemed to fix the problem of the header and text. I am not exacly sure why the other fonts didnt work.

            • 3. Re: Trouble with HTML5 Content
              Abhishek Maurya Adobe Employee

              Hi,

               

              I see that you have used an Iframe with height set to 100% to include your edge content. That is not rendering in FireFox properly. Check the screen shot,

               

              http://project02.businesscatalyst.com/jing/2012-06-19_2305.png

               

              So, setting it up around 330px should do the trick. As per the HTML5 specifications, height cannot be specified in percentages, http://www.w3schools.com/html5/tag_iframe.asp

               

              As far as the typekit fonts are concerned make sure you follow the documentation at typekit.com to get that working, because apparently some css is conflicting with that too. Again, that is something with which I will not be able to assist since that is custom coding.

               

              Regards,

              Abhishek Maurya

               

              Message was edited by: Abhishek Maurya

              • 4. Re: Trouble with HTML5 Content
                SummumBonum000 Community Member

                Thank you for the reply. Please point me in the right direction for what I

                should be researching as far as changing the code. Can I create different

                code for different browsers?

                 

                Are other people having this problem? Should I not an Iframe?

                • 5. Re: Trouble with HTML5 Content
                  Vikas.Sharma Adobe Employee

                  I think you are following the steps provided in this document: http://www.adobekb.com/inserting_edge_content.html

                   

                  In the step where you need to place the iframe code using the "Insert HTML" feature of Adobe Muse, you have to make slight change.

                   

                  The code provided there is this: <iframe src="Project-Header-r1v1.html" width="100%" height="100%" frameborder="0" scrolling="no"></iframe>

                   

                  You have to replace the width and height values with the width and height of your Edge animation in pixels and not percent. {you can choose to omit the px part and just type in the numbers}

                   

                  So your code in the Insert HTML window would look like below:

                   

                  <iframe src="Project-Header-r1v1.html" width="919px" height="327px" frameborder="0" scrolling="no"></iframe>

                  OR

                  <iframe src="Project-Header-r1v1.html" width="919" height="327" frameborder="0" scrolling="no"></iframe>

                   

                  Try that. Let me know if that is confusing.

                   

                  Cheers,

                  Vikas

                  • 6. Re: Trouble with HTML5 Content
                    designish Community Member

                    Thank you Sharma, adding pixel measurements fixed a problem I've been trouble-shooting for hours. Is it possible to go into the "http://www.adobekb.com/inserting_edge_content.html" document and correct/update it so others won't have the same problem?

                     

                    There were some other things in that document that I had trouble understanding.

                     

                    For example, in the second paragraph (including bullets) I didn't know what Content structure or Support files meant, since those names don't match anything in the folder Edge created when I saved my Edge piece.

                     

                    Also, in the fifth paragraph (beginning "Use Dreamweaver...") it said to put the entire folder with Edge-created files/sub-folders onto the remote. I got a "Page not found" message when I included the folder with contents in it. When I uploaded only the contents of the folder it worked.

                     

                    Lastly, the paragraph under Figure 2 might be rewritten. In the second sentence it says "a slightly different file name". People's Edge files are likely to be completely different, not just slightly, since they'll be naming their own projects. It's confusing to say slightly. Also, in that same sentence it says "hilighted in bold". Nothing looks bold to me, so you couldn't tell where the file name was supposed to go. In the 4th sentence it talks about "source code". I'm a designer, so I don't know what that means. Is it necessary to say that or could that be explained?

                    • 7. Re: Trouble with HTML5 Content
                      Abhishek Maurya Adobe Employee

                      Hi designish,

                       

                      This is known to us and we will be updating the document asap.

                       

                      Regards,

                      Abhishek Maurya

                      • 8. Re: Trouble with HTML5 Content
                        designish Community Member

                        Thank you Abhishek,

                        Edge and Muse are complete game changers and I will forever be in debt to you and your teams! I look forward to clearer (clearer to me, that is) instructions. I can't wait for seamless integration of Edge and Muse content that I'm sure you are all working on.

                        Kindest Thanks,

                        John