Want to protect your cyber security and still get fast solutions? Ask a secure question today.Go Premium

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 704
  • Last Modified:

Using Javascript to resize an html object (flash movie) based on window size ratio


Hi All,

I have a flash movie/website that is 1024x768px in size, centered within an html page horizontally and vertically. I want the flash movie to shrink proportionally to the size of the window when the window is less than the movie's full size (1024x768), but stay at 1024x768 if the window is larger than the movie.  I wrote this code to do the job, and it works perfectly in Safari but not in anything else on either platform (tried Netscape & Firefox for mac, Netscape, IE and Firefox for PC). Is there anything I should know regarding compatibility issues with resize events and handlers for each browser/platform?  How can I make this work across browser platforms...?

<script language="JavaScript">

      function scaleflash(){
            if( window.innerWidth < 1024 || window.innerHeight < 768 ){  // if the window is smaller than the movie's ideal size:
                  if( Math.floor(window.innerWidth * 0.75) <= window.innerHeight ){
                        //scale flash movie based on window width:
                        document.intro.height = Math.floor(window.innerWidth * 0.75);
                        document.intro.width  = window.innerWidth;
      
                  }else{
                        //scale flash movie based on window height:
                        document.intro.height  = window.innerHeight;
                        document.intro.width = Math.floor(window.innerHeight * 1.3333);
                  }
            }else{
                  document.intro.width   = 1024;
                  document.intro.height  = 768;
            }

      }
      window.onload = scaleflash;
</script>
0
sydneyshan
Asked:
sydneyshan
  • 6
  • 3
1 Solution
 
ClickCentricCommented:
I'm not sure, but I don't think your code is valid dhtml...  I do know that I've done similar things to what you're attempting, but I think I used document.getElementById('intro').style.height where you use document.intro.height.  The 'style' part I believe is the key.
0
 
sydneyshanAuthor Commented:
I've just tried the above.  No luck unfortunately...

I've added an alert() to the function to test when it is called. It is called correctly on all browsers except IE for Win (v6.0). IE6 must have a different way for calling onload and onresize events... any ideas?

Still not sure how I should be manipulating the object's height/width on browsers other than Safari...

Thanks,
-Shan
0
 
ClickCentricCommented:
The following example (used a <div> since I don't have a flash object to play with) should be cross-browser compatible:


<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">

     function scaleflash(){
       if (window.innerWidth) { winW = window.innerWidth -16; } else { winW=document.body.offsetWidth - 20; }
       if (window.innerHeight) { winH = window.innerHeight - 16; } else { winH=document.body.offsetWidth - 20; }
      
          if( winW < 1024 || winH < 768 ){  // if the window is smaller than the movie's ideal size:
               if( Math.floor(winW * 0.75) <= winH ){
                    //scale flash movie based on window width:
                    document.getElementById('intro').style.height = Math.floor(winW * 0.75) + "px";
                    document.getElementById('intro').style.width  = winW + "px";
     
               }else{
                    //scale flash movie based on window height:
                    document.getElementById('intro').style.height  = winH + "px";
                    document.getElementById('intro').style.width = Math.floor(winH * 1.3333) + "px";
               }
          }else{
               document.getElementById('intro').style.width   = "1024 px";
               document.getElementById('intro').style.height  = "768 px";
          }

     }
//     window.onload = scaleflash;
//       window.onresize = scaleflash;
</script>
</head>

<body onload="scaleflash();" onresize="scaleflash();">
<div id="intro" style="width: 1024px; height: 1025px; background-color: #006600;"></div>


</body>
</html>
0
Granular recovery for Microsoft Exchange

With Veeam Explorer for Microsoft Exchange you can choose the Exchange Servers and restore points you’re interested in, and Veeam Explorer will present the contents of those mailbox stores for browsing, searching and exporting.

 
sydneyshanAuthor Commented:
Thanks ClickCentric,

I think we're getting closer... The suggested solution has made it work in IE6 for PC (and Safari for Mac), but still no luck in Netscape and Firefox on either platform.

Small typo in third line of your code (offsetWidth should be offsetHeight).

Any ideas regarding browser compatibility?

Thanks so far!
-Shan
0
 
ClickCentricCommented:
I tested it with the div in IE6 and Firefox and Opera on Windows and Konqueror on Linux which is a rough equivalent of Safari and it worked in all of them.  Try placing the flash object inside of the <div> and setting it's height and width to 100%.  That should make it scale along with the <div>.  If you can provide me a link to the flash swf file, I can check it more closely.
0
 
ClickCentricCommented:
New example using a flash call that I found on a website.  This method really should work:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">

     function scaleflash(){
       if (window.innerWidth) { winW = window.innerWidth -16; } else { winW=document.body.offsetWidth - 20; }
       if (window.innerHeight) { winH = window.innerHeight - 16; } else { winH=document.body.offsetHeight- 20; }
      
          if( winW < 1024 || winH < 768 ){  // if the window is smaller than the movie's ideal size:
               if( Math.floor(winW * 0.75) <= winH ){
                    //scale flash movie based on window width:
                    document.getElementById('intro').style.height = Math.floor(winW * 0.75) + "px";
                    document.getElementById('intro').style.width  = winW + "px";
     
               }else{
                    //scale flash movie based on window height:
                    document.getElementById('intro').style.height  = winH + "px";
                    document.getElementById('intro').style.width = Math.floor(winH * 1.3333) + "px";
               }
          }else{
               document.getElementById('intro').style.width   = "1024 px";
               document.getElementById('intro').style.height  = "768 px";
          }

     }
//     window.onload = scaleflash;
//       window.onresize = scaleflash;
</script>
</head>

<body onload="scaleflash();" onresize="scaleflash();">
<div id="intro" style="width: 1024px; height: 1025px; background-color: #006600;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" id="resizable" ALIGN="">
                         <PARAM NAME="movie" VALUE="flash.swf">
                         <PARAM NAME="salign" VALUE="LT">
                        <PARAM NAME="quality" VALUE="high">
                        <PARAM NAME="scale" VALUE="noscale">
                        <PARAM NAME="bgcolor" VALUE="#FFFFFF">
                        <EMBED src="flash.swf" quality="high" scale="noscale" bgcolor="#FFFFFF"  WIDTH="100%" HEIGHT="100%" NAME="resizable" SALIGN="LT" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
                        </OBJECT>
</div>
</body>
</html>
0
 
ClickCentricCommented:
Oops..wasn't paying attention to the flash code I was pasting in.  You don't want the scale=noscale stuff for what you're trying to do.  Try this one..tested again in IE, Firefox and Konqueror:

<!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">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<title>Untitled Document</title>
<script language="JavaScript">

     function scaleflash(){
       if (window.innerWidth) { winW = window.innerWidth -16; } else { winW=document.body.offsetWidth - 20; }
       if (window.innerHeight) { winH = window.innerHeight - 16; } else { winH=document.body.offsetHeight- 20; }
      
          if( winW < 1024 || winH < 768 ){  // if the window is smaller than the movie's ideal size:
               if( Math.floor(winW * 0.75) <= winH ){
                    //scale flash movie based on window width:
                    document.getElementById('intro').style.height = Math.floor(winW * 0.75) + "px";
                    document.getElementById('intro').style.width  = winW + "px";
     
               }else{
                    //scale flash movie based on window height:
                    document.getElementById('intro').style.height  = winH + "px";
                    document.getElementById('intro').style.width = Math.floor(winH * 1.3333) + "px";
               }
          }else{
               document.getElementById('intro').style.width   = "1024 px";
               document.getElementById('intro').style.height  = "768 px";
          }

     }
//     window.onload = scaleflash;
//       window.onresize = scaleflash;
</script>
</head>

<body onload="scaleflash();" onresize="scaleflash();">
<div id="intro" style="width: 1024px; height: 1025px; background-color: #006600;">
<OBJECT classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" codebase="http://download.macromedia.com/pub/shockwave/cabs/flash/swflash.cab#version=6,0,0,0" WIDTH="100%" HEIGHT="100%" ALIGN="">
                         <PARAM NAME="movie" VALUE="flash.swf">
                         <PARAM NAME="salign" VALUE="LT">
                        <PARAM NAME="quality" VALUE="high">
                        <PARAM NAME="bgcolor" VALUE="#FFFFFF">
                        <EMBED src="flash.swf" quality="high"  bgcolor="#FFFFFF"  WIDTH="100%" HEIGHT="100%" SALIGN="LT" TYPE="application/x-shockwave-flash" PLUGINSPAGE="http://www.macromedia.com/go/getflashplayer"></EMBED>
  </OBJECT>
</div>
</body>
</html>
0
 
sydneyshanAuthor Commented:
Excellent - this works a treat.

So the steps were:
Encase the OBJECT/EMBED tags within a DIV tag
Set the OBJECT/EMBED tags to 100% width/height
Set the DIV tag to 1024x768 px in size using STYLE attribute
play with the javascript code. :)

Thanks again! Hats off!

See the final product at http://weathertex.enigmaclient.net.au/
0
 
ClickCentricCommented:
No problem, glad it worked. And just in case you or anyone who reads this is wondering, the -16 and -20 when setting the height/width is related to avoiding getting under the browser scroll bars.    The values can be played with if you want to leave more of a buffer.
0

Featured Post

[Webinar] Database Backup and Recovery

Does your company store data on premises, off site, in the cloud, or a combination of these? If you answered “yes”, you need a data backup recovery plan that fits each and every platform. Watch now as as Percona teaches us how to build agile data backup recovery plan.

  • 6
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now