BTW: the method used here is working in Firefox
I'm working on a script that switches the width of a Flash movie between 100% and 812 pixels depending on the innerwidth of the browser window.
The point is when a flash movie is embedded for fullscreen usage (100%) it acts somewhat like a background, and won't cause scrollbars if the window is scaled to a smaller size than the 'actual' content in the flash. This means that the flash get's clipped and the user can't see some of the site.
My first solution was to place a 'spacer' div below the flash to 'hold the scrollbars. I set the div to 802 pixels wide (the same size as my movie content) this kept the scroll bars, but interestingly, when the width of the movie is 100% it doesn't expand to the width of the scrollable space, rather is set to the actual width of the window (seems obvious now).
Because i'm using a background repeat (and i like to figure things out) setting a fixed width for the flash and centering it in a div is not an option. :p Though maybe if I got tricky and centered a background repeat + offset the centering to align with the flash movie....
OK, so cut to the chase.
Here is my JS code (working in Firefox, with no javacript errors in the console):
Expand|Select|Wrap|Line Numbers
- function resetWidth(x) {
- var flash = document.getElementById(x);
- //document.write("hey!");
- // get browser width
- var win_width = window.innerWidth;
- if (win_width < 812) {
- flash.setAttribute("width", "812");
- //window.width = 812;
- } else {
- flash.setAttribute("width", "100%");
- }
- }
I like short code! that was simpler than my explanation :)
My HTML:
[HTML]<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>test_bed_1</title>
<style type="text/css">
<!--
body {
margin-left: 0px;
margin-top: 0px;
margin-right: 0px;
margin-bottom: 0px;
background: #241A0D url(../graphics/pattern.gif);
}
p {
}
table {
vertical-align: bottom;
}
.footer {
margin-left: auto;
margin-right: auto;
display: block;
height: 20px;
width: 802px;
background: #241A0D;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px;
color: #493825;
text-align: right;
}
-->
</style>
<script type="text/javascript" src="../scripts/width.js"></script>
</head>
<body onresize="resetWidth('flashme');">
<!--url's used in the movie-->
<!--text used in the movie-->
<!-- saved from url=(0013)about:internet -->
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/SWFlash.cab#version=7,0,0,0"
id="stage" ALIGN="top">
<PARAM NAME=menu VALUE=false>
<PARAM NAME=quality VALUE=high>
<PARAM NAME=salign VALUE=LT>
<PARAM NAME=bgcolor VALUE=#999999>
<PARAM NAME=FlashVars value="allowResize=true">
<EMBED src="RG_build_1.swf" id="flashme" menu="false" quality="high" salign="LT" bgcolor="#999999" width="100%" HEIGHT="780px" NAME="stage" ALIGN="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<div class="footer">RG</div>
</body>
</html>[/HTML]
*Notice that for now I'm calling the 'resetWidth' function 'onresize' and I'm targeting the embeded tag via the ID 'flashme' :D
*I put my styles in the head so you can see those too.
*Totally excited to see if someone has a great solution for this or recommendation of a better / alternate methods. My goal is simplicity.