2 Replies Latest reply on Oct 5, 2012 6:33 AM by tmacka_88

    Best way to publish Edge files into html page?

    tmacka_88

      Ok,

       

      So im looking for the best way to add my edge files into my html page.

       

      I want to make it easy to integrate edge with dreamweaver html files, e.g if I change anything in my edge project and publish it I dont need to transfer the html over to my page again.

       

      I thought the best way to do this was put all the edge files into there own folder within my sites_files folder and then use iframe. However when I did this, I can not figure out how to use CSS to style the iframe.

       

      this is what I have tried    

       

       


      <iframe id="test" src="mackbyte1_files/animation/power-out-setup/power-out-preview.html" frameborder="0" height="400px" width="940px" scrolling="no" >Your browser does not support this animation. Get a real browses made for the 21st century! We recommend Chrome or Firefox...</iframe>

       

      I have tried using a ID for the iframe which didnt work.

       

      Without the iframe my animation is centred in the screen from the CSS with edge html e.g

       

      .edgeLoad-power-out-preview {

                visibility:hidden;

      }

                          #Stage {

                height: 400px;

                width: 940px;

                margin-left: auto;

                margin-right: auto;

                border-radius: 7px;

                background-color: #CCC;

      }

       

      I have given up and just manully copy/paste the html into the page I want it in. this works fine however, as stated if i make changes to my animation i have to amend the html which is a little annyoying.

       

      Is there a fix?

       

      Thanks in advanced

        • 1. Re: Best way to publish Edge files into html page?
          joel_pau Level 5

          Hi,

          Can you copy and paste your html code from "mackbyte1_files/animation/power-out-setup/power-out-preview.html" ?

          • 2. Re: Best way to publish Edge files into html page?
            tmacka_88 Level 1

            joel_pau wrote:

             

            Hi,

            Can you copy and paste your html code from "mackbyte1_files/animation/power-out-setup/power-out-preview.html" ?

            hey mate,

            this is it

             

             

            <!DOCTYPE html>

            <html>

            <head>

                      <meta http-equiv="Content-Type" content="text/html; charset=utf-8">

                      <meta http-equiv="X-UA-Compatible" content="IE=Edge,chrome=IE8"/>

                      <title>p-o-preview</title>

            <!--Adobe Edge Runtime-->

                <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/chrome-frame/1/CFInstall.min.js"></script>

                <script type="text/javascript" charset="utf-8" src="power-out-setup_edgePreload.js"></script>

                <style>

                    .edgeLoad-power-out-preview { visibility:hidden; }

                                #Stage {

                      height: 400px;

                      width: 940px;

                      margin-left: auto;

                      margin-right: auto;

                      border-radius: 7px;

                      margin-top: 20px;

            }

                </style>

            <!--Adobe Edge Runtime End-->

             

             

            </head>

            <body style="margin:0;padding:0;">

                      <div id="Stage" class="power-out-preview">

             

                    <div id="Stage_pw-point" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb-hub-pluged2" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb-hub-unpluged2" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb-for-hub" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb-hub-pluged-unlit" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb-cable" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_imac" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_usb_icon-power-out" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_Lightning" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_imac-off" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_shutdown-page" class="edgeLoad-power-out-preview"></div>

                    <div id="Stage_shutdown-page-30" style="display:none;"></div>

                    <div id="Stage_imac-black-off" style="display:none;"></div>

                    <div id="Stage_RoundRect" style="display:none;"></div>

                    <div id="Stage_play-btn" style="display:none;"></div>

                </div>

               

            </body>

            </html>