Skip navigation
veritasinchains
veritasinchains
Currently Being Moderated

I can't get the code from Edge to render properly in my browser.

Jul 9, 2012 11:13 AM

Tags: #html #dreamweaver #edge #html5 #js #html_5 #adobe_edge #css3 #css5 #css_style #adobe_edge_animation

I have tried placing the code after the </title> and inside an iframe. The iframe forces the animation into the right location but the click function is rendered useless as it leads back to the main site and only opens inside the iframe itself. Placing it after the </title> works to an extent however, the browser renders the site and the animation from two different points of reference the site in the center and the animation in the top left so you get the animation but off to the left of the page proper. Here is a link to the test site if anyone wants to see what I mean.

 

Thanks in advanced for any help provided,

 

Veritasinchains

1077 Views   6 Replies   Latest reply: veritasinchains, Jul 15, 2012 6:55 PM
 
Replies
  • dhosford
    Currently Being Moderated
    1. dhosford,
    Jul 9, 2012 11:21 AM   in reply to veritasinchains
    Report

    Hi there,

     

      Could you provide a link to your source files so I can get a closer look?

     

    Thanks,

    -Devon

     
    |
    Mark as:
  • veritasinchains
    Currently Being Moderated
    2. veritasinchains,
    Jul 9, 2012 2:51 PM   in reply to dhosford
    Report

    http://www.geekatrandom.com/AnimatedLogo.html

    http://www.geekatrandom.com/AnimatedLogo_edge.js

    http://www.geekatrandom.com/AnimatedLogo_edgeActions.js

    http://www.geekatrandom.com/AnimatedLogo_edgePreload.js

     

    Probably the most annoying part is that it looks great in dreamweaver but I guess that is because DW live view is rendering it at exact size so the top left corner of the animation and the site are both aligned at 0,0.

     
    |
    Mark as:
  • veritasinchains
    Currently Being Moderated
    3. veritasinchains,
    Jul 13, 2012 6:15 AM   in reply to veritasinchains
    Report

    So does anyone have any advice on how to fix this. Do I need to convert my site to HTML 5?

     
    |
    Mark as:
  • dhosford
    Currently Being Moderated
    4. dhosford,
    Jul 13, 2012 9:11 AM   in reply to veritasinchains
    Report

    I'm still having a little trouble understanding exactly what the problem is. What do you want the page/animation to do? When I click the logo from the test site you sent it opens the homepage without the animation. You said that when you click it it reopens the page inside the iFrame? I am having trouble recreating that scenario if that's the case.

     
    |
    Mark as:
  • veritasinchains
    Currently Being Moderated
    5. veritasinchains,
    Jul 14, 2012 6:56 PM   in reply to dhosford
    Report

    Sorry I tried a couple of things I found on other sites I don't have it in an iframe now but when implemented the animated logo will replace the stationary logo throughout the site. Currently the logo is also the button that takes you back to the index page and that is what the animated logo is set up to do. The issue should be obvious as I have determined that it isn't isolated to my computer I tried it on my system at work in two different browsers to the same effect. The animation and the site are rendered from two different starting points the site is rendered from the center of the browser windows and the logo is rendered from the top left corner of the browser window resulting in the logo being partially or completely out of place.logorenderissue1.png

     
    |
    Mark as:
  • veritasinchains
    Currently Being Moderated
    6. veritasinchains,
    Jul 15, 2012 6:55 PM   in reply to veritasinchains
    Report

    Got it! Found out how to make it work I just had to name the composition inside of edge and cram another div inside of the sidebar div tag. Then paste the <!--Adobe Edge Runtime--> contents after the title.

    And now it renders perfectly. Now I am going to focus on updating the layout I am experimenting with HTML5 for the whole site and also with the fluid grid system.

     

    <div id="stage" class="AnimatedLogo"></div><img src="/pictures/standin.png" alt="Logo" width="170" height="170" longdesc="Site Logo">

     

    P.S. The standin.png is because I was to lazy to look up a way to have DW leave that space open for the animation.

     
    |
    Mark as:
Actions

More Like This

  • Retrieving data ...

Bookmarked By (0)

Answers + Points = Status

  • 10 points awarded for Correct Answers
  • 5 points awarded for Helpful Answers
  • 10,000+ points
  • 1,001-10,000 points
  • 501-1,000 points
  • 5-500 points