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

    Best way to publish Edge files into html page?




      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 {



                          #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


          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:



            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>



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

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


            <!--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>


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

                                #Stage {

                      height: 400px;

                      width: 940px;

                      margin-left: auto;

                      margin-right: auto;

                      border-radius: 7px;

                      margin-top: 20px;



            <!--Adobe Edge Runtime End-->




            <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>