Hello!
I am new to Edge Animate, and somewhat new to HTML/CSS/JavaScript. I am using a trial version of Edge Animate to see if my company would benefit from its use. I also downloaded the trial of Dreamweaver CC, since I am currently on Dreamweaver CS6.
I got my animation to function perfectly in Edge, but I am experiencing issues when adding it to my web page. I added the OAM file per Adobe's instructions into my layout. My issues are as follows:
- Nothing loads on Chrome. I changed my background for the insertion point to a different color, and that is all that displays. No poster image, no whitespace, nothing. It's like it doesn't exist.
- On IE10, that div area is filled with the "Internet Explorer could not load" page.
- On Firefox, the animation loads and plays, but none of my click events or hover elements register.
I didn't see anything in the import instructions that said anything about adding information into the <head> element. Was I supposed to add something there?
(also, this is my first time posting, so if i'm not adding the code correctly, I apologize)
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Cool New Thaaang</title><!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Lobster' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Marvel' rel='stylesheet' type='text/css'><!-- Scripts -->
<script src="_script/jquery-2.1.1.min.js"></script>
<script src="_script/actions.js" type="text/javascript"></script>
<!-- Styles --><style>
body {
background: #073f3e; /* Old browsers */
background: -moz-linear-gradient(top, rgba(94,123,117,1) 51%, rgba(7,63,62,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(51%,rgba(94,123,117,1)), color-stop(100%,rgba(7,63,62,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(94,123,117,1) 51%,rgba(7,63,62,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#5e7b75', endColorstr='#073f3e',GradientType=0 ); /* IE6-9 */
font-family: Marvel, Tahoma, Geneva, sans-serif;
font-size: 1em;
color: #232C23;
}
#ribbon{
margin: 0 auto;
background-color: #fff;
height: 50px;
position: relative;
width: 500px;
text-align: center;
line-height: 50px;
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}
#ribbon:before, #ribbon:after{
content: ' ';
height: 0;
position: absolute;
width: 0;
top: 5px;
border: 25px solid #E5E5E5;
z-index: -5;
}#ribbon:before {
left: -42px;
border-left-color: transparent;
}
#ribbon:after {
left: 492px;
border-right-color: transparent;
}#mainBody{
margin: 0 auto;
width: 850px;
background-color: #F8F8F8;
background: -moz-linear-gradient(top, rgba(248,248,248,1) 74%, rgba(248,248,248,1) 74%, rgba(239,239,239,1) 100%); /* FF3.6+ */
background: -webkit-gradient(linear, left top, left bottom, color-stop(74%,rgba(248,248,248,1)), color-stop(74%,rgba(248,248,248,1)), color-stop(100%,rgba(239,239,239,1))); /* Chrome,Safari4+ */
background: -webkit-linear-gradient(top, rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* Chrome10+,Safari5.1+ */
background: -o-linear-gradient(top, rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* Opera 11.10+ */
background: -ms-linear-gradient(top, rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* IE10+ */
background: linear-gradient(to bottom, rgba(248,248,248,1) 74%,rgba(248,248,248,1) 74%,rgba(239,239,239,1) 100%); /* W3C */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f8f8f8', endColorstr='#efefef',GradientType=0 ); /* IE6-9 */
position: relative;
margin-top: 10px;
border: 4px solid #83A084;
z-index: -1;
box-shadow: 1px 1px 2px rgba(0,0,0,.3);
}#mainContent{
}
article{
padding: 20px 50px 25px;
float: left;
width: 400px;
}
aside{
width: 300px;
margin: 50px 25px 25px;
float: right;
background: #f4f4f4;
height: 600px;
background-image:url(_images/Poster2.png);
background-repeat:no-repeat;
}
footer{
clear:both;
}h1 {
font-family: Lobster, Tahoma, Geneva, sans-serif;
color: #333;
}h2, h3, h4, h5{
padding-top: 0.7em;
line-height: 0.5em;
color: #333;
}
p{
font-weight: 500;
}
hr {
color:#83A084;
}button{
background-color: #83a084;
border: 3px solid #5e7875;
display: inline-block;
padding: 10px;
border-radius: 5px;
font-family: Lobster, Tahoma, Geneva, sans-serif;
color: #f8f8f8;
text-shadow: 1px 1px 2px rgba(0,0,0,.3);
/* [disabled]position: relative; */
cursor: pointer;
}.teddyFred{
display: none;
padding: 20px 150px 30px;
}
</style>
</head><body>
<div id="ribbon"> <h1>Welcome to a fresh new site! </h2></div>
<div id="mainBody">
<div id="mainContent">
<article>
<h2>Main Section Header!<hr color="#83A084" noshade></h2><p>Descriptive Text!</p>
<h3>Subheader</h3>
<p>More Descriptive Text</p><h3>Subheader</h3>
<p>Even more descriptive text.</p>
</p>
<div class="teddybear">
<button class="teddybutton">Show that Teddy Bear!</button>
<div class="teddyFred"><img src="_images/TeddyBearFred.png" height="300"></div>
</div>
<div><br /> Text Area
</div><h2>Second Section header! <hr color="#83A084" noshade></h2>
<p>Look at all this extra space! But what can we do with it?</p><p>For now, let's add some filler text.</p>
<p>Lorem Ipsum. Proin gravida nibh vel velit auctor aliquet. Aenean sollicitudin, lorem quis bibendum auctor, nisi elit consequat ipsum, nec sagittis sem nibh id elit. Duis sed odio sit amet nibh vulputate cursus a sit amet mauris. Morbi accumsan ipsum velit. Nam nec tellus a odio tincidunt auctor a ornare odio. Sed non mauris vitae erat consequat auctor eu in elit. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Mauris in erat justo. Nullam ac urna eu felis dapibus condimentum sit amet a augue. Sed non neque elit. Sed ut imperdiet nisi. Proin condimentum fermentum nunc. Etiam pharetra, erat sed fermentum feugiat, velit mauris egestas quam, ut aliquam massa nisl quis neque. Suspendisse in orci enim.</p></article>
<aside id="adspace"><div id="Stage" class="EDGE-11111111">
<object id="EdgeID" type="text/html" width="320" height="620" data-dw-widget="Edge" data="../../../../../../X:/edgeanimate_assets/myOtherAnimateProject/Assets/myOtherAnimate Project.html">
</object></div>
</aside>
<footer> That's all, folks!</footer></div>
</div>
</body>
</html>