Resize flash via JS

**malcolmnew** · Jul 10 '07, 08:09 PM

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.innerwid th does not work with IE so you have to supply alternate code.
Here is my operating function:
[CODE=javascript]function resetwidth(){
var flash = document.getEle mentById("movie ");
browserName = navigator.appNa me;
if (browserName == 'Netscape'){
var winwidth = window.innerWid th;}
else{
var winwidth = document.body.c lientWidth;}
if (winwidth > 800){
flash.setAttrib ute("width","80 0");
flash.setAttrib ute("height","1 92");
}else{
flash.setAttrib ute("width","61 0");
flash.setAttrib ute("height","1 47");
}
}[/CODE]
Hope this is of interest

**acoder** · Jul 11 '07, 12:07 PM

Originally posted by malcolmnew

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.innerwid th does not work with IE so you have to supply alternate code.
Here is my operating function:
[CODE=javascript]function resetwidth(){
var flash = document.getEle mentById("movie ");
browserName = navigator.appNa me;
if (browserName == 'Netscape'){
var winwidth = window.innerWid th;}
else{
var winwidth = document.body.c lientWidth;}
if (winwidth > 800){
flash.setAttrib ute("width","80 0");
flash.setAttrib ute("height","1 92");
}else{
flash.setAttrib ute("width","61 0");
flash.setAttrib ute("height","1 47");
}
}[/CODE]
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.

**angelicdevil** · Apr 22 '09, 12:45 AM

this i did but its not working

the html file is as follows :-

Code:

<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;
}

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="d:/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="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">
</EMBED>
</OBJECT>
<div class="footer">RG</div>
</body>
</html>

and the function javascript is as

Code:

function resetWidth(x) {
    var flash = document.getElementById(x);
    //document.write("hey!");
 
    // get browser width
    var win_width = window.innerWidth;
 
    if (win_width <= 800) {
        flash.setAttribute("width", "800");
        flash.setAttribute("height", "600");
        //window.width = 812;
    } else {
        flash.setAttribute("width", "1024");
        flash.setAttribute("height", "768");
    }
}

still its not resizing plz help

**acoder** · Apr 22 '09, 09:37 AM

Set the units as well, i.e.

Code:

flash.setAttribute("width", "800px");

**gopan** · Apr 22 '09, 12:36 PM

Check this in your code...

Code:

  // get browser width
  var win_width = window.innerWidth;

the window.innerWid th is Netscape/Mozilla compatible (Read/Write) and not supported by IE

so you need to use

Code:

// check for the browser type
if(ie)
 var win_width = body.clientWidth;
else
  var win_width = window.innerWidth;

the body.clientWidt h is IE compatible (Read only) and not supported by Netscape/Mozilla < v7

**acoder** · Apr 23 '09, 11:32 AM

That would be document.body.c lientWidth. Instead of browser detection, just check that innerWidth is supported:

Code:

if (window.innerWidth) {
...
} else if (document.body.clientWidth) {
 ...
}

**angelicdevil** · Apr 24 '09, 05:56 AM

still not working

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

resize.zip (1.6 KB, 416 views)

**acoder** · Apr 24 '09, 10:15 AM

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.

**angelicdevil** · Apr 25 '09, 04:26 AM

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">

</style>

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

</head>
<body onresize="reset Width('flashme' )";>
<script language="javas cript">
function resetWidth(x) {
var flash = document.getEle mentById(x);
if (window.innerWi dth <=1024 and window.innerWid th => 800 ) {

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

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

}
}
</script>



<OBJECT classid="clsid: D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macrom edia.com/pub/shockwave/cabs/flash/SWFlash.cab#ver sion=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="allowRes ize=true">
<EMBED src="resize.swf " id="flashme" menu="false" quality="high" salign="LT" bgcolor="#99999 9" width="100%" HEIGHT="100%" NAME="stage" ALIGN="top" TYPE="applicati on/x-shockwave-flash" PLUGINSPAGE="ht tp://www.macromedia. com/go/getflashplayer" >
</EMBED>
</OBJECT>
<div class="footer"> </div>
</body>
</html>

**gopan** · Apr 25 '09, 06:20 AM

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...

Code:

<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">
<!--
 body { margin: 0 0 0 0; }
 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="width.js">
	// I dunno why you used this external script???
</script>

<script language="javascript">
function resetWidth(x) {
	var flash = document.getElementById(x);
	var winWidth = document.body.clientWidth?document.body.clientWidth:window.innerWidth;

	if (winWidth <=1024 and winWidth => 800 ) {
		flash.setAttribute("width", "1000px");
		flash.setAttribute("height", "768px");
	} else{
		flash.setAttribute("width", "800px");
		flash.setAttribute("height", "600px");
	}
}
</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="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>

Hope this help ya!!

**angelicdevil** · Apr 25 '09, 06:39 AM

still not working

nope still not working

**angelicdevil** · Apr 25 '09, 06:41 AM

its not adding a black rectangle below the swf file

**angelicdevil** · Apr 25 '09, 06:46 AM

its not resizingthe swf to fit the screen

**acoder** · Apr 25 '09, 10:19 AM

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).

Resize flash via JS

Resize flash via JS

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment

Comment