#1
  1. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    14
    Rep Power
    0

    Position:absolute not working for Adobe Edge div's


    Hey guys,
    I'm not sure if you've heard about Adobe Edge before, it's basically Flash, but compiles HTML5 animations for modern browsers. A friend of mine created a story-board of animations that are designed to transition from one adobe edge page to another.

    I've figured out that all adobe edge animations are div's, with a preloading element in the header. I've also figured out how to get Adobe Edge animations to show/hide div's via jQuery on button press / end of animation / whatever. Thus half of the problem is solved. What we're trying to do is have two div's visible during an animation transition by placing the next animation directly behind the first, watch the transition animation, then remove the first div.


    My issue is a tiny one, I can't get the two div's to sit directly on top of each other (that is, the top one visually hiding the bottom one behind it), instead they stack one above the other, so that you scroll down and see the second.


    The style sheet is pretty straightforward, following all of the recommendations I could find online (parent is relative, div is absolute).
    Code:
    <style>
            .edgeLoad-preppybrunch { visibility:hidden; }
            .edgeLoad-preppydate { visibility:hidden; }
            .edgeLoad-guidequestion2 { visibility:hidden; }
            .edgeLoad-guidequestion3 { visibility:hidden; }
            .edgeLoad-hippiebrunch { visibility:hidden; }
            .edgeLoad-hippiedate { visibility:hidden; }
            .edgeLoad-middledate { visibility:hidden; }
            .edgeLoad-question1 { visibility:hidden; }
    		
    		/* Build a container for the animations */
    		.container {
    			width:1200px;
    			height:700px;
    			position:relative;
    			margin:0;
    		}
    
    		/* Set all animations to be hidden, and style them */
    		.preppydate, .preppybrunch, .guidequestion2, .guidequestion3, .hippiebrunch, .hippiedate, .middledate, .question1 {
    			display:none;
    			position:absolute;
    			top:0px;
    			left:0px;
    			height: 700px;
    			width:1200px;
    		}
    
    		/* Display the first animation, position it absolutely */
    		.question1 {
    			display:block;
    			position:absolute;
    			left:0px;
    			top:0px;
    			z-index: 1;
    			height: 700px;
    			width:1200px;
    		}
    
    		/* Display the second animation, position it absolutely */
    		.middledate {
    			display:block;
    			position:absolute;
    			left:0px;
    			top:0px;
    			z-index: 2;
    			height: 700px;
    			width:1200px;
    		}
    
        </style>
    There's also nothing to the body of the page, just the div's in the order I'd like them.

    Code:
    <body style="margin:0;padding:0;">
    <div class="container">
    	<div id="question1" class="question1"></div>
    	<div id="preppydate" class="preppydate"></div>
    	<div id="preppybrunch" class="preppybrunch"></div>
    	<div id="guidequestion2" class="guidequestion2"></div>
    	<div id="guidequestion3" class="guidequestion3"></div>
    	<div id="hippiebrunch" class="hippiebrunch"></div>
    	<div id="hippiedate" class="hippiedate"></div>
    	<div id="middledate" class="middledate"></div>
    </div>
    </body>
    Please halp!
  2. #2
  3. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    5
    I think this is a JavaScript/jQuery question. Since you're waiting an amount of time until you show the next one, I believe you may find the jQuery .delay() function worthwhile. Then, you can just use the .remove() function to get the previous animation out of the way.

    If possible, provide us a link to the page or an example of what you're trying to do.

    I know we would love to help more.
  4. #3
  5. No Profile Picture
    Registered User
    Devshed Newbie (0 - 499 posts)

    Join Date
    Nov 2003
    Posts
    14
    Rep Power
    0
    Hey guys,
    I figured it out. I just had to wrap the Adobe Edge DIV's in containers of their own. The Adobe Edge div redefines its own settings later, so you can't reliably add any preferences to it. I'll likely write a blog post on this whole ordeal.
  6. #4
  7. No Profile Picture
    Contributing User
    Devshed Newbie (0 - 499 posts)

    Join Date
    May 2009
    Location
    Atlanta, GA, USA (unfortunately)
    Posts
    59
    Rep Power
    5

    Wow, you're good


    Shoot! ...and I wanted to be the one to help get the solution.

    Way to go, and thanks for posting the solution.

IMN logo majestic logo threadwatch logo seochat tools logo