Hi All,
This is a bit of a follow on question for those who are adding scalable height/width edge compositions to web pages using the awesome piece of code created by Sarah (http://sarahjustine.com/) and other forum contributors... (attached code below).
My question is: How do I add a second Edge Animate composition to the same page using this method? So it's using "Stage" already... i'm guessing it's a matter of changing it to "Stage_02" etc in the following code? I've tried changing the relevant code but so far I have been unsuccessful in getting it to recognise a second stage.
Any help would be appreciated, many thanks in advance for your time.
Jeff
Index.html
<!--Adobe Edge Runtime-->
<script type="text/javascript" charset="utf-8" src="clouds_edgePreload.js"></script>
<style>
.edgeLoad-EDGE-78729757 { visibility:hidden; }
</style>
<!--Adobe Edge Runtime End-->
<div class="stagewrap">
<div id="Stage" class="EDGE-78729757">
</div><!-- Close Edge Animate Stage -->
</div><!-- Close stagewrap -->
Adobe Edge Stage Script
var stageHeight = sym.$('Stage').height(); // Set a variable for the height of the stage
sym.$("#Stage").css({ // Set the transform origin so we always scale to the top left corner of the stage
"transform-origin":"0 0",
"-ms-transform-origin":"0 0",
"-webkit-transform-origin":"0 0",
"-moz-transform-origin":"0 0",
"-o-transform-origin":"0 0"
});
function scaleStage() {
var stage = sym.$('Stage'); // Set a reusable variable to reference the stage
var parent = sym.$('Stage').parent(); // Set a reusable variable to reference the parent container of the stage
var parentWidth = stage.parent().width(); // Get the parent of the stage width
var stageWidth = stage.width(); // Get the stage width
var desiredWidth = Math.round(parentWidth * 1); // Set the new width of the stage as it scales
var rescale = (desiredWidth / stageWidth); // Set a variable to calculate the new width of the stage as it scales
// Rescale the stage!
stage.css('transform', 'scale(' + rescale + ')');
stage.css( '-o-transform', 'scale(' + rescale + ')');
stage.css('-ms-transform', 'scale(' + rescale + ')');
stage.css('-webkit-transform', 'scale(' + rescale + ')');
stage.css('-moz-transform', 'scale(' + rescale + ')');
stage.css('-o-transform', 'scale(' + rescale + ')');
parent.height(stageHeight * rescale); // Reset the height of the parent container so the objects below it will reflow as the height adjusts
}
// Make it happen when the browser resizes
$(window).on('resize', function(){
scaleStage();
});
// Make it happen when the page first loads
$(document).ready(function(){
scaleStage();
});