473,387 Members | 1,548 Online
Bytes | Software Development & Data Engineering Community
Post Job

Home Posts Topics Members FAQ

home > topics > javascript > questions > resize flash via js

Join Bytes to post your question to a community of 473,387 software developers and data experts.

Resize flash via JS

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
18 21547
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
16,027 Expert Mod 8TB
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
angelicdevil
116 100+
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
16,027 Expert Mod 8TB
Set the units as well, i.e.
Expand|Select|Wrap|Line Numbers
  1. flash.setAttribute("width", "800px");
Apr 22 '09 #5
gopan
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
16,027 Expert Mod 8TB
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
angelicdevil
116 100+
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, 352 views)
Apr 24 '09 #8
acoder
16,027 Expert Mod 8TB
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
angelicdevil
116 100+
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
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
angelicdevil
116 100+
nope still not working
Apr 25 '09 #12
angelicdevil
116 100+
its not adding a black rectangle below the swf file
Apr 25 '09 #13
angelicdevil
116 100+
its not resizingthe swf to fit the screen
Apr 25 '09 #14
acoder
16,027 Expert Mod 8TB
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
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
angelicdevil
116 100+
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
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
16,027 Expert Mod 8TB
If you're still struggling with this, try using swfobject.
Apr 28 '09 #19

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

Similar topics

1
Playing Flash Animations in .NET
by: Huw Lloyd | last post by:
I am developing a windows application and want to display a flash animation in a splash screen. I have the .fla file but i dont know how to load it into the shockwave flash object that I have on...
.NET Framework
42
FLASH and W3C
by: Manu | last post by:
How can i do with a flash object for obtain the w3c label ? the "embed" is not accepted ! <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> <html> <head> <title>test</title>...
HTML / CSS
5
fla resize help please!
by: luke morris | last post by:
Hello, I have created a fla. movie at 750 x 750 px. I now need this same movie at 300 x 300 px to load on the web. I cannot figure out how to resize a complete fla movie or swf file. I see that...
Flash / Actionscript
2
Test this for me please! Header + Flash + Footer
by: Paul Neave | last post by:
Hello all. Please try this link for me and let me know what you see: http://www.neave.com/temp/stretch_test.html You should see a green header filling the top of the page, a red footer at...
HTML / CSS
3
How to Convert PowerPoint to Flash Manually
by: WPeterson | last post by:
Converting PowerPoint to Flash would absolutely be a good choice to distribute your bulky PowerPoint presentations. You can do the whole PowerPoint to Flash conversion manually or with...
Flash / Actionscript
0
remove FLASH object in IE
by: dolittle | last post by:
Hi, I'm embedding a last.fm flash widget. I want to be able to remove it from the page using javascript. I've tried to delete the html element that contains the code but it keeps playing in...
Flash / Actionscript
1
Resize browser moves divs
by: Starance | last post by:
Well... I'm not sure if this can be fixed, I've tried many ways. But here goes; When you resize your browser window it seems to move my video & photo divs. I want them kept in line with the...
HTML / CSS
7
Is there any javascript function available to auto resize swf
by: Anz | last post by:
Can any one know the javascript function to auto resize the swf when resizing its pop up window. I need to auto resize the swf when i resize my popup window in which the swf is displayed. Is...
Javascript
0
Open Source Code for Embeddable Flash Image Editor
by: djminus1 | last post by:
I have a need for an embeddable flash box for a website that I am developing. The client is having a coffee cup design contest. They would like to have a flash box that does the following. 1) ...
Flash / Actionscript
0
Easy Steps to Fix "Canon Printer Won't Connect to WiFi Network"
by: taylorcarr | last post by:
A Canon printer is a smart device known for being advanced, efficient, and reliable. It is designed for home, office, and hybrid workspace use and can also be used for a variety of purposes. However,...
General
0
How to turn on java script in a villaon keypad mobile phone
by: Charles Arthur | last post by:
How do i turn on java script on a villaon, callus and itel keypad mobile phone
Java
0
Basic Javascript concepts
by: aa123db | last post by:
Variable and constants Use var or let for variables and const fror constants. Var foo ='bar'; Let foo ='bar';const baz ='bar'; Functions function $name$ ($parameters$) { } ...
Javascript
0
Merging data from multiple Excel files
by: ryjfgjl | last post by:
In our work, we often receive Excel tables with data in the same format. If we want to analyze these data, it can be difficult to analyze them because the data is spread across multiple Excel files...
Data Management
0
Migrating Website to Cloud - Emmanuel Katto
by: emmanuelkatto | last post by:
Hi All, I am Emmanuel katto from Uganda. I want to ask what challenges you've faced while migrating a website to cloud. Please let me know. Thanks! Emmanuel
General
1
Is that possible of reading the .csv file in column wise and the column have different lengths ?
by: Sonnysonu | last post by:
This is the data of csv file 1 2 3 1 2 3 1 2 3 1 2 3 2 3 2 3 3 the lengths should be different i have to store the data by column-wise with in the specific length. suppose the i have to...
C / C++
0
How to build RAID in BIOS?
by: Hystou | last post by:
There are some requirements for setting up RAID: 1. The motherboard and BIOS support RAID configuration. 2. The motherboard has 2 or more available SATA protocol SSD/HDD slots (including MSATA, M.2...
Computer Hardware
0
Changing the language in Windows 10
by: Hystou | last post by:
Most computers default to English, but sometimes we require a different language, especially when relocating. Forgot to request a specific language before your computer shipped? No problem! You can...
Windows Server
0
jinu1996
Maximizing Business Potential: The Nexus of Website Design and Digital Marketing
by: jinu1996 | last post by:
In today's digital age, having a compelling online presence is paramount for businesses aiming to thrive in a competitive landscape. At the heart of this digital strategy lies an intricately woven...
Online Marketing

By using Bytes.com and it's services, you agree to our Privacy Policy and Terms of Use.

To disable or enable advertisements and analytics tracking please visit the manage ads & tracking page.

BYTES.COM © 2024
About Bytes
Terms Of Use
Privacy Policy
Sitemap
Advertise on Bytes:
Post a Job
Sponsored Posts
Platinum & Gold Sponsors
Hire Now!