How to have other divs with a flash liquid layout that fits to the page?
Posted
by
brybam
on Pro Webmasters
See other posts from Pro Webmasters
or by brybam
Published on 2011-06-29T06:16:11Z
Indexed on
2011/06/29
8:31 UTC
Read the original article
Hit count: 450
Basically the majority of my content is flash based. I designed it using Flash Builder (Flex) and Its in a liquid layout, (everything is in percents) and if im JUST embedding the flash content it scales to the page fine, and i have the flash content set to have a padding of 50 px.
I put a header div in fine with no problems, but I have 2 problems, the first being the footer div seems to cover up the buttom of the flash content in IE, but it looks just fine in chrome. How can I solve this? I'm using the stock embed code that Flex provides, I tried to edit the css style for the div which I think is #flashContent and give it a min width and min height but it didnt seem to work, actually anything I did to #flashContent didn't seem to do anything, maybe its not the div i need to be adding that attribute to...
And my other problem is I dont even know where to start when it comes to placing a div thats 280width by 600height colum to the right side of the flash content. If i could specify a size for the flash content, and the float it left, and float the colum right, and clear it with the container div id be just fine....But remember the flash content is set to 100% Scale (well techically 100%x80% because it looked better that way).
Does anyone know how I can start to deal with creating a more complex scaleable flash layouts that includes other divs? ALL WELL MAINTAINING IE SUPPORT? IE is ruining my life.
Here's the code I'm using:
(or if it will help you visualize what im trying to do here's the page where im working on setting this up http://apumpkinpatch.com/textmashnew/)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title>TextMixup</title>
<meta name="google" value="notranslate">
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link href="css.css" rel="stylesheet" type="text/css" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js"></script>
<script src="../appassets/scripts/jquery.titlealert.js"></script>
<script type="text/javascript">
var _gaq = _gaq || [];
_gaq.push(['_setAccount', 'UA-19768131-2']);
_gaq.push(['_trackPageview']);
(function() {
var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
})();
function tabNotification()
{ $.titleAlert('New Message!', {interval:200,requireBlur:true,stopOnFocus:true}); }
function joinNotification()
{ $.titleAlert('Joined Chat!', {interval:200,requireBlur:true,stopOnFocus:true}); }
</script>
<!-- BEGIN Browser History required section -->
<link rel="stylesheet" type="text/css" href="history/history.css" />
<script type="text/javascript" src="history/history.js"></script>
<!-- END Browser History required section -->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
var swfVersionStr = "10.2.0";
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "TextMixup";
attributes.name = "TextMixup";
attributes.align = "middle";
swfobject.embedSWF(
"TextMixup.swf", "flashContent",
"100%", "80%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
swfobject.createCSS("#flashContent", "display:block;text-align:left;");
</script>
</head>
<body>
<div id="homebar"><a href="http://apumpkinpatch.com"><img src="../appassets/images/logo/logoHor_130_30.png" alt="APumpkinPatch HOME" width="130" height="30" hspace="10" vspace="3" border="0"/></a>
</div>
<div id="topad">
<script type="text/javascript"><!--
google_ad_client = "pub-5824388356626461";
/* 728x90, textmash */
google_ad_slot = "1114351240";
google_ad_width = 728;
google_ad_height = 90;
//-->
</script>
<script type="text/javascript"
src="http://pagead2.googlesyndication.com/pagead/show_ads.js">
</script>
</div>
<div id="mainContainer">
<div id="flashContent">
<p>
To view this page ensure that Adobe Flash Player version
10.2.0 or greater is installed.
</p>
<script type="text/javascript">
var pageHost = ((document.location.protocol == "https:") ? "https://" : "http://");
document.write("<a href='http://www.adobe.com/go/getflashplayer'><img src='"
+ pageHost + "www.adobe.com/images/shared/download_buttons/get_flash_player.gif' alt='Get Adobe Flash player' /></a>" );
</script>
</div>
<noscript>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="80%" id="TextMixup">
<param name="movie" value="TextMixup.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="TextMixup.swf" width="100%" height="80%">
<param name="quality" value="high" />
<param name="bgcolor" value="#ffffff" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<!--<![endif]-->
<!--[if gte IE 6]>-->
<p>
Either scripts and active content are not permitted to run or Adobe Flash Player version
10.2.0 or greater is not installed.
</p>
<!--<![endif]-->
<a href="http://www.adobe.com/go/getflashplayer">
<img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash Player" />
</a>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</noscript>
<div id="convosPreview">This is a div I would want to appear as a colum to the right of the flash content that can scale</div>
<!---End mainContainer -->
</div>
<div id="footer">
<a href="../apps.html"><img src="../appassets/images/apps.png" hspace="5" vspace="5" alt="random chat app apumpkinpatch" width="228" height="40" border="0" /></a><a href="https://chrome.google.com/webstore/detail/hjmnobclpbhnjcpdnpdnkbgdkbfifbao?hl=en-US#"><img src="../appassets/images/chromeapp.png" alt="chrome app random video chat apumpkinpatch" width="115" height="40" vspace="5" border="0" /></a><br /><br />
<a href="http://spacebarup.com" target="_blank">©2011 Space Bar</a> | <a href="../tos.html">TOS & Privacy Policy</a> | <a href="../help.html">FAQ & Help</a> | <a href="../tips.html">Important online safety tips</a> | <a href="http://www.facebook.com/pages/APumpkinPatchcom/164279206963001?sk=app_2373072738" target="_blank">Discussion Boards</a><br />
<p>You must be at least 18 years of age to access this web site.<br />APumpkinPatch.com is not responsible for the actions of any visitors of this site.<br />APumpkinPatch.com does not endorse or claim ownership to any of the content that is broadcast through this site. </p><h2>A Pumpkin Patch is BRAND NEW and will be developed a lot over the next few months adding video chat games, chat rooms, and more! Check back often it's going to be a lot of fun!</h2>
</div>
</body>
</html>
myCSS:
html, body {
height:100%;
}
body {
text-align:center;
font-family: Helvetica, Arial, sans-serif;
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#homebar {
clear:both;
text-align: left;
width: 100%;
height: 40px;
background-color:#333333;
color:#CCC;
overflow:hidden;
box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
-moz-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
-webkit-box-shadow: 0px 0px 14px rgba(0, 0, 0, 0.65);
margin-bottom: 10px;
}
#mainContainer {
height:auto;
width:auto;
clear:both;
}
#flashContent {
display:none;
height:auto;
float:left;
min-height: 500px;
min-width: 340px;
}
/**this is the div i want to appear as a column net to the scaleable flash content **/
#convosPreview {
float:right;
width:280px;
height:600px;
}
© Pro Webmasters or respective owner
