I have an SWF object that I have embedded on an html page. I simply want to center the object on the screen. I've tried a hundred different things (setting the align attributes on the object to center, wrapping the object in a div and centering that...) but the object always appears flush with the left side of the screen. I'm sure its a very simple line of code somewhere that will make this work, please enlighten me as to what that is...
This application was built using Adobe Flex, an open source framework
for building rich Internet applications that get delivered via the
Flash Player or to desktops via Adobe AIR.
Learn more about Flex at http://flex.org
// --><head>
<title></title>
<meta name="google" value="notranslate" />
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<style type="text/css" media="screen">
html, body { height:100%; }
body { margin:0; padding:0; overflow:auto; text-align:center; background- position:center;
background-color: #000000;}
object:focus { outline:none; }
#flashContent { display:; }
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens with two hyphens -->
<!-- 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">
// For version detection, set to min. required Flash Player version, or 0 (or 0.0.0), for no version detection.
var swfVersionStr = "10.2.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
params.quality = "high";
params.bgcolor = "#000000";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
var attributes = {};
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "middle";
swfobject.embedSWF(
"Main.swf", "flashContent",
"100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:center;");
</script>
</head>
<body>
<div id="flashContent" align="center">
<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>
<div align="center">
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%" align="middle" id="Main">
<param name="movie" value="Main.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<!--[if !IE]>-->
<object data="Main.swf" type="application/x-shockwave-flash" width="100%" height="100%" align="middle">
<param name="quality" value="high" />
<param name="bgcolor" value="#000000" />
<param name="allowScriptAccess" value="sameDomain" />
<param name="allowFullScreen" value="true" />
<param name="wmode" value="opaque" />
<!--<![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>
</div>
</noscript>
</body>
</html>
PS this is my issue when I try to edit the html file generated with the SWF. When I try to create a new HTML file and embed the swf in it, I can center the file, but I can't get it the object to scale to fit the vertical dimensions of the screen (the objects at the bottom of the page are below view, whereas on the automatically-generated html file, the swf auto-zooms to fit the screen, but I can't center it..) A solution to either of these problems would be greatly appreciated
Here is an example in jsFidle
It's very simple, you use absolute position and just specify 50% from top and left and then put top and left negative margin half of the container.
Here is the css:
.container{
width: 400px;
height: 400px;
position: absolute;
top: 50%;
left: 50%;
margin-left: -200px;
margin-top: -200px;
background-color: blue;
}
Remember, for this to work you need either fixed size or javascript updating margins on window resize event!
Here is an HTML markup:
<div class="container">
<iframe width="400" height="400" src="http://www.youtube.com/embed/Awlp8B5os0k" frameborder="0" allowfullscreen></iframe>
</div>
Related
I have a FlashBuilder project for which I want to set the displayed size (in browser) only via the html file. I don't want to hardcode the size of the swf in the flash code.
Also I need to provide several parameters with flash vars.
My html is a modified version of the standard html code generated by FlashBuilder. I try to set the size of the swf in JavaScript and using a container div. So I have the following html code to display the swf:
<html>
<head>
<title></title>
<style type="text/css" media="screen">
html, body {
height:100%;
}
body {
margin:0;
padding:0;
overflow:auto;
text-align:center;
background-color: #ffffff;
}
object:focus {
outline:none;
}
#flashContent {
display:none;
}
</style>
<!-- Enable Browser History by replacing useBrowserHistory tokens
with two hyphens -->
<!-- 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 = "11.1.0";
// To use express install, set to playerProductInstall.swf, otherwise the empty string.
var xiSwfUrlStr = "playerProductInstall.swf";
var flashvars = {};
var params = {};
var attributes = {};
flashvars.json = "some json file.json";
flashvars.width = "900";
flashvars.height = "480";
params.quality = "high";
params.bgcolor = "#ffffff";
params.allowscriptaccess = "sameDomain";
params.allowfullscreen = "true";
params.wmode = "direct";
attributes.id = "Main";
attributes.name = "Main";
attributes.align = "left";
swfobject.embedSWF("Main.swf", "flashContent", "100%", "100%",
swfVersionStr, xiSwfUrlStr,
flashvars, params, attributes);
// JavaScript enabled so display the flashContent div in case it is not replaced with a swf object.
swfobject.createCSS("#flashContent", "display:block;text-align:left");
</script>
</head>
<body>
<div style="display:block;text-align:left;width:900px; height:480px; position:absolute; top:50px; left:100px">
<div id="flashContent">
<p>To view this page ensure that Adobe Flash Player version 11.1.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>
</div>
</body>
</html>
And the following in my flash main method:
public function Main(){
swfWidth = LoaderInfo(root.loaderInfo).parameters.width;
swfHeight = LoaderInfo(root.loaderInfo).parameters.height;
swfFrameRate = LoaderInfo(root.loaderInfo).parameters.framerate;
json = LoaderInfo(root.loaderInfo).parameters.json;
loadJsonFile(json);
stage.frameRate = swfFrameRate;
stage.scaleMode = StageScaleMode.NO_SCALE;
view = new View3D();
view.width = swfWidth;
view.height = swfHeight;
camera = view.camera;
cameraController = new HoverController(camera, null, 150, 10, 10);
this.addChild(view);
}
However, when I open this in browser the displayed size does not match the size given in the hmtl (with the above code it results in about 700x430 px).
What am I doing wrong?
Finally, I managed to fix it.
The problem was the Main.html and index.template.html created by Flashbuilder (and wich is not easy to revise, as it is very complex and more detailed than actually needed.
I created a new .html file with the help of this generator:
http://www.bobbyvandersluis.com/swfobject/generator/index.html
.. and now the stage is set as provided by the flashVars.
This is how my Main looks like now:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<title></title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("Main", "11.0.0", "expressInstall.swf");
</script>
</head>
<body>
<div>
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="850" height="480" id="Main">
<param name="movie" value="Main.swf" />
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFile.json&width=850&height=480&framerate=60" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="Main.swf" width="850" height="480">
<param name="quality" value="best" />
<param name="scale" value="noscale" />
<param name="salign" value="tl" />
<param name="wmode" value="direct" />
<param name="bgcolor" value="#cccccc" />
<param name="allowfullscreen" value="true" />
<param name="allowscriptaccess" value="always" />
<param name="allownetworking" value="all" />
<param name="flashvars" value="json=../somejsonFilejson&width=850&height=480&framerate=60" />
<!--<![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>
</div>
</body>
</html>
my website does not work on firefox (firefox 4 or 7), nothing appears, even not the alternative content
and with IE9, the problem is the content is compacted at the top of the page... (but it works on IE6 !)
and the html is :
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<link rel="stylesheet" type="text/css" media="all" href="style.css" />
<script type="text/javascript" src="jquery-1.5.1.min.js"></script>
<script type="text/javascript" src="jq.js"></script>
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
swfobject.registerObject("myId", "9.0.115", "expressInstall.swf");
</script>
</head>
<body>
<div id="flash">
<object id="myId" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
<param name="movie" value="ombre.swf" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="ombre.swf" width="100%" height="100%">
<!--<![endif]-->
<p>alternative content</p>
<!--[if !IE]>-->
</object>
<!--<![endif]-->
</object>
</div>
</body>
</head>
</html>
and the css :
body {
width:100%; height:100%; margin:0; background:white; overflow:hidden;
}
it seems to be a problem with the "height" set to 100% but what else can i put? the website works on chrome, safari, ie6...
thanks
Since you are using swfObject why are you not using it to do your actual embedding
You will find the following code example to be much more browser compliant.
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript">
function loaded() {
var flashvars={}, params={}, attributes={}, tmp, version, width, height, container, flashObj;
flashvars.UserId = "23061";
params.menu = "true";
params.quality = "high";
params.bgcolor = "#869ca7";
params.allowscriptaccess = "always";
params.allownetworking = "all";
attributes.id = "myId";
attributes.name = "myId";
attributes.align = "middle";
attributes.allowscriptaccess = "always";
attributes.allownetworking = "all";
tmp = "expressInstall.swf";
version = "9.0.115";
width = "100%";
height = "100%";
container = "replaceMe";
flashObj = "myId.swf";
swfobject.embedSWF(flashObj, container, width, height, version, tmp, flashvars, params, attributes);
}
</script>
<body onLoad="loaded()" >
<div id="replaceMe">Loading content.</div>
</body>
[EDIT]
Try this out
<style>
html, body{
width:100%;
height:100%;
margin:0;
background:white;
overflow:hidden;
}
</style>
I had this same problem recently, I had set the height and width to 100% and firefox would not display IE9 would squish the swf to the top of the page height:100px or something. I fixed it with JavaScript, actually jQuery (simply because it was available):
Essentially FF doesn't like % values when you size things, and IE9 has a different problem. If you added static values you wouldn't have a problem. But we don't want static values do we?
Anyways, I solved my issue by telling the JavaScript to write the Flash tag for me and insert static values based on the screen size.
<script type="text/javascript">
document.write('<object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="' + $(window).width() + '" height="' + Math.round(($(window).width()*11)/24) + '" id="YourMovieID" align="middle">
<param name="movie" value="YourMovie.swf"/>
<param name="wmode" value="opaque" />
<param name="scale" value="exactfit" />
<!--[if !IE]>-->
<object type="application/x-shockwave-flash" data="YourMovie.swf" width="' + $(window).width() + '" height="' + Math.round(($(window).width()*11)/24) + '" >
<param name="movie" value="YourMovie.swf"/>
<param name="wmode" value="opaque" />
<param name="scale" value="exactfit" />
<!--<![endif]-->
<!--[if !IE]>--></object>
<!--<![endif]-->
</object>')
</script>
I used $(window).width() to get the width of the screen and then Math.round(($(window).width()*11)/24) because the proportions of my movie were 24X11.
Again this was my jQ solution because it was available, you could use screen.width to get it. You might have to condense everything to one line though I just spaced it so you could see what's going on.
I have a swf file and a html page which shows the swf file. I want to prohibit right click on swf file. I do not mean removing right click menu, I just want to prohibit the right click action. Then if you right click nothing will be happened.
Here is the html code:
<html>
<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#swf-holder').bind("contextmenu", function(e) {
return false;
});
});
</script>
<title>Help Me</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<style type="text/css">html {overflow: hidden;}</style>
<style type="text/css">body { background-color: #07090e }#swf-holder { margin-top: 0px; width: 715px; position: center; top: 0px; left: 0%; margin-left: 0px; }</style>
</head>
<body>
<div id="swf-holder"><object id="content" classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="715" height="580"><param name="movie" value="Main.swf" /><param name=quality value=best /><param name=bgcolor value=#07090e /><param name=allowScriptAccess value=always /><param name="wmode" value="opaque" /><object id="gecko" type="application/x-shockwave-flash" data="Main.swf" width="715" height="580" bgcolor=#4A4A4A wmode="opaque" quality="best"><img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" border="0" alt="Get Adobe Flash player" /></object></object></div>
</body>
</html>
Any trick or idea for doing this?
Try putting this under the HEAD of your HTML page
<script language="text/javascript">
var message="Function Disabled!";
function clickIE4() {
if (event.button==2) {
alert(message); return false;
}
}
function clickNS4(e) {
if (document.layers||document.getElementById&&!document.all) {
if (e.which==2||e.which==3){
alert(message); return false;
}
}
}
if (document.layers) {
document.captureEvents(Event.MOUSEDOWN);
document.onmousedown=clickNS4;
}
else if (document.all&&!document.getElementById) {
document.onmousedown=clickIE4;
}
document.oncontextmenu=new Function("alert(message);return false")
</script>
(Edited code just for formatting reasons)
SOURCE: Hypergurl
There are some other methods on that page which may help you, but this seems like the easiest to implement.
Also, just so you are aware, if visitors to your site really want to get your content, there isn't any way to stop them from getting it other than not displaying it, using the right tools in the right browser, I (and you) can get an image off a site easily.
Method: Prohibit right-click menu in an ID and it's children
This small code will stop the user from right-clicking in the given ID (Can be easily changed to suit any object). Just make sure you have a set width and height of the containing ID.
To Implement:
Copy this code directly into your HEAD.
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('#swf-holder').bind("contextmenu", function(e) {
return false;
});
});
</script>
Then in your Body, find the element you want to protect (SWF Div) and add the attribute id="swf-holder"
Hope this works for you, took me a little reading to find it.
I made a JSFiddle for it too, link is here
To avoid the right click on flash SWF file make sure you include the settings shown in BOLD
I just tested it correclty on IE9
<object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://fpdownload.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=8,0,0,0" width="540" height="140">
<param name="movie" value="flashmovie.swf" />
<param name="quality" value="high" />
<param name="allowScriptAccess" value="always" />
<param name="wmode" value="transparent" / >
<param name="menu" value="false" />
<embed src="flashmovie.swf"
quality="high"
type="application/x-shockwave-flash"
WMODE="transparent"
menu="false"
width="540"
height="140"
pluginspage="http://www.macromedia.com/go/getflashplayer"
allowScriptAccess="always" />
</object>
Taken from
http://www.aleosoft.com/flashtutorial_disablerightclick.htm
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"><img src="../appassets/images/logo/logoHor_130_30.png" alt="APumpkinPatch HOME" width="130" height="30" hspace="10" vspace="3" border="0"/>
</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">
<img src="../appassets/images/apps.png" hspace="5" vspace="5" alt="random chat app apumpkinpatch" width="228" height="40" border="0" /><img src="../appassets/images/chromeapp.png" alt="chrome app random video chat apumpkinpatch" width="115" height="40" vspace="5" border="0" /><br /><br />
©2011 Space Bar | TOS & Privacy Policy | FAQ & Help | Important online safety tips | Discussion Boards<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;
}
I believe you need to remove "float:left" from #flashcontent in the CSS as float will make it go on a separate index. I'm also not sure why you have display none and min-height/width on there. If anything, you need to add that to #mainContainer.
I have a simple HTML file which embeds a Flash file. On the page styling I have a #flashContent with width:100% and height:100%; the Flash object itself has width="100%" and height=100% and is inside a div with id="flashContent". The idea is to make the Flash object (which is a game) to fill the whole browser window even as it resizes.
This works with no problems on IE and Firefox, but there is a small problem on Chrome. About 90% of the time when the page first loads all that is shown is black (the page's background color). The game only appears if the user resizes the window; from then on out it works correctly.
I'd like to ask if there is anything I am doing wrong or if there is an workaround to ensure the Flash game appears correctly on the Chrome browser.
http://reisio.com/examples/fullflash/
<!doctype html>
<html>
<head>
<title></title>
<style>
* {
margin: 0;
padding: 0;
width: 100%;
height: 100%;
overflow: hidden;
}
</style>
</head>
<body>
<div>
<object
data="Flash.swf"
type="application/x-shockwave-flash"
width="400"
height="300">
<param
name="movie"
value="Flash.swf">
</object>
</div>
</body>
</html>
Try using exact (or very big) length for the height, not percents. I had similar problem and I solved it by indicating exact height instead of 100%
but I also use AC_FL_RunContent(...), and in my case the actual height generation was happening there, and there is actually where I had to set the height and for some reason it wasn't setting it to 100% in Chrome. Other browsers work fine though. Below is the code:
<script>
AC_FL_RunContent(
"src", "flash/ConstructionKit03",
"width", "100%",
"height", "740",
"align", "middle",
"id", "ConstructionKit03",
"quality", "high",
"bgcolor", "#869ca7",
"name", "ConstructionKit03",
"flashvars",'historyUrl=history.htm%3F&lang=<%=userLanguage%>&initialUrl=<%=workflow_url%><%=(!edit.equals("") ? "&initialState=editable" : "" )%>&lconid=' + lc_id + '',
"allowScriptAccess","sameDomain",
"type", "application/x-shockwave-flash",
"pluginspage", "http://www.adobe.com/go/getflashplayer"
</script>
<object id="ConstructionKit03" width="100%" height="740"
codebase="http://fpdownload.macromedia.com/get/flashplayer/current/swflash.cab">
<param name="movie" value="ConstructionKit03.swf" />
<param name="quality" value="high" />
<param name="bgcolor" value="#869ca7" />
<param name="allowScriptAccess" value="sameDomain" />
<embed src="flash/ConstructionKit03.swf" quality="high" bgcolor="#869ca7"
width="100%" height="740" name="ConstructionKit03" align="middle"
play="true"
loop="false"
quality="high"
allowScriptAccess="sameDomain"
type="application/x-shockwave-flash"
pluginspage="http://www.adobe.com/go/getflashplayer">
</embed>
</object>