Jump to content
GreenSock

Metapod

Issue with Published Site

Recommended Posts

Hi
 
I am new to Greensock, so please be gentle.
 
I have built a new Adobe Edge Animate site. It works and display fine for me when I run it form my pc through the file url.
 
However, when I then copy it onto our webserver, the display changes.
 
Functionally it still works as expected. I have attached 2 screenshots showing the difference. As it is in Edge Animate, I don't quite know how to do the codepen.
 
I am figuring it has something to do with this section of code

TweenLite.set($container, {height: gridRows * gridHeight + 10, width: gridColumns * gridWidth + 1});

TweenLite.set(".box", {width:gridWidth * .9, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"});

TweenLite.set(".boxBack", {width:gridWidth * .9, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"});

TweenLite.set(".boxText", {width:gridWidth * .8, height:gridHeight * .9, lineHeight:gridHeight * .8 + "px"});

$(".boxText").css("font-size","18px");

$(".boxText").css("left","5px");

$(".boxText").css("top","1px");

$(".AnswerText").css("font-size","18px");

TweenLite.set(".Answer", {width:gridWidth * 1.5, height:gridHeight * 1, lineHeight:gridHeight + "px"});

TweenLite.set(".AnswerText", {width:gridWidth * 1.3, height:gridHeight * 1, lineHeight:gridHeight + "px"});
 
 
I am also loading from the cdn via yepnope

yepnope(
{
nope:[
// loads the external script for dragging and dropping
'http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/plugins/CSSPlugin.min.js,http://cdnjs.cloudflare.com/ajax/libs/gsap/1.11.8/utils/Draggable.min.js,http://cdnjs.cloudflare.com/ajax/libs/gsap/1.12.1/TweenMax.min.js'
],
complete: init
});


Any Ideas ??

 

*****************

So that's odd. It seems like if I refresh the page, the issue goes away, but ctrl+F5 the page and it comes back. The issue occurs with both Chrome and IE as indicated.

 

Confusing

post-20587-0-60452300-1404810612_thumb.png

post-20587-0-27051700-1404810837_thumb.png

Edited by Metapod
Link to comment
Share on other sites

It's pretty tough to troubleshoot blind, but here are a couple of shots in the dark:

  1. Make sure you set things in the correct order, like from the inside out. For example, if you change the container's width based on its contents' width, and then increase the font-size of that inner content, it'd naturally throw things off. You should change the font-size and THEN run your width-based logic. 
  2. Make sure you're waiting to fire that code until the page has fully loaded so that the browser has had a chance to render things properly and calculate widths/heights, etc. 
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
  • Recently Browsing   0 members

    • No registered users viewing this page.
×