By using this site, you agree to our updated Privacy Policy and our Terms of Use. Manage your Cookies Settings.
437,605 Members | 2,147 Online
Bytes IT Community
+ Ask a Question
Need help? Post your question and get tips & solutions from a community of 437,605 IT Pros & Developers. It's quick & easy.

Resize flash via JS

P: 2
OK, today is my twofer special on js questions.
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
  1. function resetWidth(x) {
  2.     var flash = document.getElementById(x);
  3.     //document.write("hey!");
  4.  
  5.     // get browser width
  6.     var win_width = window.innerWidth;
  7.  
  8.     if (win_width < 812) {
  9.         flash.setAttribute("width", "812");
  10.         //window.width = 812;
  11.     } else {
  12.         flash.setAttribute("width", "100%");
  13.     }
  14. }

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.
Aug 30 '06 #1
Share this Question
Share on Google+
18 Replies


P: 1
Very helpful and it works in Netscape and Internet Explored with the important adaptations. You should also resize the height, the onResize should be supplemented by onLoad so you can target differing resolutions and window.innerwidth does not work with IE so you have to supply alternate code.
Here is my operating function:
Expand|Select|Wrap|Line Numbers
  1. function resetwidth(){
  2. var flash = document.getElementById("movie");
  3. browserName = navigator.appName;
  4. if (browserName == 'Netscape'){
  5. var winwidth = window.innerWidth;}
  6. else{
  7. var winwidth = document.body.clientWidth;}
  8. if (winwidth > 800){
  9.     flash.setAttribute("width","800");
  10.     flash.setAttribute("height","192");
  11. }else{
  12. flash.setAttribute("width","610");
  13. flash.setAttribute("height","147");
  14. }
  15. }
Hope this is of interest
Jul 10 '07 #2

acoder
Expert Mod 15k+
P: 16,027
Very helpful and it works in Netscape and Internet Explored with the important adaptations. You should also resize the height, the onResize should be supplemented by onLoad so you can target differing resolutions and window.innerwidth does not work with IE so you have to supply alternate code.
Here is my operating function:
Expand|Select|Wrap|Line Numbers
  1. function resetwidth(){
  2. var flash = document.getElementById("movie");
  3. browserName = navigator.appName;
  4. if (browserName == 'Netscape'){
  5. var winwidth = window.innerWidth;}
  6. else{
  7. var winwidth = document.body.clientWidth;}
  8. if (winwidth > 800){
  9.     flash.setAttribute("width","800");
  10.     flash.setAttribute("height","192");
  11. }else{
  12. flash.setAttribute("width","610");
  13. flash.setAttribute("height","147");
  14. }
  15. }
Hope this is of interest
Instead of using browser detection, try something that would work in any browser based on support of a property. See this page which shows the properties supported by a particular browser and their values.
Jul 11 '07 #3

100+
P: 116
the html file is as follows :-

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>test_bed_1</title>
  5.  
  6.  
  7.  
  8. <style type="text/css">
  9. <!--
  10. body {
  11. margin-left: 0px;
  12. margin-top: 0px;
  13. margin-right: 0px;
  14. margin-bottom: 0px;
  15. }
  16.  
  17. p {
  18.  
  19. }
  20.  
  21. table {
  22. vertical-align: bottom;
  23. }
  24.  
  25. .footer {
  26. margin-left: auto;
  27. margin-right: auto;
  28. display: block;
  29. height: 20px;
  30. width: 802px;
  31. background: #241A0D;
  32. font-family: Verdana, Arial, Helvetica, sans-serif;
  33. font-size: 10px;
  34. color: #493825;
  35. text-align: right;
  36.  
  37. }
  38.  
  39. -->
  40. </style>
  41.  
  42. <script type="text/javascript" src="d:/width.js"></script>
  43.  
  44. </head>
  45. <body onresize="resetWidth('flashme');">
  46.  
  47. <!--url's used in the movie-->
  48. <!--text used in the movie-->
  49. <!-- saved from url=(0013)about:internet -->
  50. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/SWFlash.cab#version=7,0,0,0"
  51. id="stage" ALIGN="top">
  52. <PARAM NAME=menu VALUE=false>
  53. <PARAM NAME=quality VALUE=high>
  54. <PARAM NAME=salign VALUE=LT>
  55. <PARAM NAME=bgcolor VALUE=#999999>
  56. <PARAM NAME=FlashVars value="allowResize=true">
  57. <EMBED src="lucky.swf" id="flashme" menu="false" quality="high" salign="LT" bgcolor="#999999" width="100%" HEIGHT="100%" NAME="stage" ALIGN="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
  58. </EMBED>
  59. </OBJECT>
  60. <div class="footer">RG</div>
  61. </body>
  62. </html>

and the function javascript is as

Expand|Select|Wrap|Line Numbers
  1. function resetWidth(x) {
  2.     var flash = document.getElementById(x);
  3.     //document.write("hey!");
  4.  
  5.     // get browser width
  6.     var win_width = window.innerWidth;
  7.  
  8.     if (win_width <= 800) {
  9.         flash.setAttribute("width", "800");
  10.         flash.setAttribute("height", "600");
  11.         //window.width = 812;
  12.     } else {
  13.         flash.setAttribute("width", "1024");
  14.         flash.setAttribute("height", "768");
  15.     }
  16. }
still its not resizing plz help
Apr 22 '09 #4

acoder
Expert Mod 15k+
P: 16,027
Set the units as well, i.e.
Expand|Select|Wrap|Line Numbers
  1. flash.setAttribute("width", "800px");
Apr 22 '09 #5

gopan
P: 41
Check this in your code...

Expand|Select|Wrap|Line Numbers
  1.   // get browser width
  2.   var win_width = window.innerWidth;
the window.innerWidth is Netscape/Mozilla compatible (Read/Write) and not supported by IE

so you need to use

Expand|Select|Wrap|Line Numbers
  1. // check for the browser type
  2. if(ie)
  3.  var win_width = body.clientWidth;
  4. else
  5.   var win_width = window.innerWidth;
  6.  
the body.clientWidth is IE compatible (Read only) and not supported by Netscape/Mozilla < v7
Apr 22 '09 #6

acoder
Expert Mod 15k+
P: 16,027
That would be document.body.clientWidth. Instead of browser detection, just check that innerWidth is supported:
Expand|Select|Wrap|Line Numbers
  1. if (window.innerWidth) {
  2. ...
  3. } else if (document.body.clientWidth) {
  4.  ...
  5. }
Apr 23 '09 #7

100+
P: 116
i did wat u suggested but tis not working infact now i m getting some nos displayed above the swf file...for clarity i m posting it as attachment please check...and changes u want to make to get it working feel free and then upload it so i can check and compare and see where i went wrong..

help appreciated very much thanx

angel
Attached Files
File Type: zip resize.zip (1.6 KB, 327 views)
Apr 24 '09 #8

acoder
Expert Mod 15k+
P: 16,027
Those are the line numbers from the code. Before you copy the code, remove the line numbers by clicking the Line Numbers link above the code block.

PS. if the code is that short, there's no need to attach it - just post the code. It's much quicker that way, thanks.
Apr 24 '09 #9

100+
P: 116
its still not resizing but yea as u said i did and the nos.a have gone now



<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>resize</title>



<style type="text/css">
<!--
10. body {
11. margin-left: 0px;
12. margin-top: 0px;
13. margin-right: 0px;
14. margin-bottom: 0px;
15. }
16.
17. p {
18.
19. }
20.
21. table {
22. vertical-align: bottom;
23. }
24.
25. .footer {
26. margin-left: auto;
27. margin-right: auto;
28. display: block;
29. height: 20px;
30. width: 802px;
31. background: #241A0D;
32. font-family: Verdana, Arial, Helvetica, sans-serif;
33. font-size: 10px;
34. color: #493825;
35. text-align: right;
36.
37. }
38.
39. -->
</style>

<script type="text/javascript" src="width.js"></script>

</head>
<body onresize="resetWidth('flashme')";>
<script language="javascript">
function resetWidth(x) {
var flash = document.getElementById(x);
if (window.innerWidth <=1024 and window.innerWidth => 800 ) {


flash.setAttribute("width", "1000px");
flash.setAttribute("height", "768px");

} else if (document.body.clientWidth) {
flash.setAttribute("width", "800px");
flash.setAttribute("height", "600px");

}
}
</script>
<!--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="resize.swf" id="flashme" menu="false" quality="high" salign="LT" bgcolor="#999999" width="100%" HEIGHT="100%" NAME="stage" ALIGN="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
</EMBED>
</OBJECT>
<div class="footer"></div>
</body>
</html>

Apr 25 '09 #10

gopan
P: 41
Check this ... I've made some modifications to your script. But when you copy this code first click on the "Line Numbers" to turn it off and click "Select" and copy the code...

Expand|Select|Wrap|Line Numbers
  1. <html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  2. <head>
  3. <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  4. <title>resize</title>
  5.  
  6. <style type="text/css">
  7. <!--
  8.  body { margin: 0 0 0 0; }
  9.  p { }
  10.  table {
  11.  vertical-align: bottom;
  12.  }
  13.  .footer {
  14.  margin-left: auto;
  15.  margin-right: auto;
  16.  display: block;
  17.  height: 20px;
  18.  width: 802px;
  19.  background: #241A0D;
  20.  font-family: Verdana, Arial, Helvetica, sans-serif;
  21.  font-size: 10px;
  22.  color: #493825;
  23.  text-align: right;
  24.  }
  25.  -->
  26. </style>
  27.  
  28. <script type="text/javascript" src="width.js">
  29.     // I dunno why you used this external script???
  30. </script>
  31.  
  32. <script language="javascript">
  33. function resetWidth(x) {
  34.     var flash = document.getElementById(x);
  35.     var winWidth = document.body.clientWidth?document.body.clientWidth:window.innerWidth;
  36.  
  37.     if (winWidth <=1024 and winWidth => 800 ) {
  38.         flash.setAttribute("width", "1000px");
  39.         flash.setAttribute("height", "768px");
  40.     } else{
  41.         flash.setAttribute("width", "800px");
  42.         flash.setAttribute("height", "600px");
  43.     }
  44. }
  45. </script>
  46.  
  47. </head>
  48. <body onresize="resetWidth('flashme')";>
  49. <!--url's used in the movie-->
  50. <!--text used in the movie-->
  51. <!-- saved from url=(0013)about:internet -->
  52. <OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/SWFlash.cab#version=7,0,0,0"
  53. id="stage" ALIGN="top">
  54. <PARAM NAME=menu VALUE=false>
  55. <PARAM NAME=quality VALUE=high>
  56. <PARAM NAME=salign VALUE=LT>
  57. <PARAM NAME=bgcolor VALUE=#999999>
  58. <PARAM NAME=FlashVars value="allowResize=true">
  59. <EMBED src="resize.swf" id="flashme" menu="false" quality="high" salign="LT" bgcolor="#999999" width="100%" HEIGHT="100%" NAME="stage" ALIGN="top" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer">
  60. </EMBED>
  61. </OBJECT>
  62. <div class="footer"></div>
  63. </body>
  64. </html>
  65.  
Hope this help ya!!
Apr 25 '09 #11

100+
P: 116
nope still not working
Apr 25 '09 #12

100+
P: 116
its not adding a black rectangle below the swf file
Apr 25 '09 #13

100+
P: 116
its not resizingthe swf to fit the screen
Apr 25 '09 #14

acoder
Expert Mod 15k+
P: 16,027
A few changes:
1. Remove lines 28-30.
2. Change the "and" on line 37 to "&&".
3. Remove the semi-colon on line 48 (the body tag).
Apr 25 '09 #15

gopan
P: 41
@angelicdevil
Hey..
You need a 100% / 100% flash on your page??

Then try the code in one of my work..

www.niecdoha.org
Apr 25 '09 #16

100+
P: 116
nooe its still not working ...it give a grey background behind flash swf file in place of streching the file. looks like image holder kind.

gopan i saw the code n tried to implement it but i m getting the msg ac run active content,js is missing.

so wat to do now
Apr 26 '09 #17

gopan
P: 41
hi Pal,
Check this line of code in niecdoha.org
Expand|Select|Wrap|Line Numbers
  1. <script src="resources/AC_RunActiveContent.js" language="javascript"></script>
  2.  
Visit adobe devnet. This may help you out.
Apr 26 '09 #18

acoder
Expert Mod 15k+
P: 16,027
If you're still struggling with this, try using swfobject.
Apr 28 '09 #19

Post your reply

Sign in to post your reply or Sign up for a free account.