embed with widh relative to height

  • chopficaro
  • Novice
  • Novice
  • chopficaro
  • Posts: 30

Post 3+ Months Ago

ive been able to embed my swf as an html object with its height and width relative to the window size, which was step one. now, i want to preserve the aspect ratio, so that the height is always relative to the width. i know this isnt a javascript or html forum but i figured someone here must have wanted to try this at some point. heres what i tried that didnt work:

Code: [ Select ]
window.onresize = function()
  1. window.onresize = function()
  2. {
  3. document.getelementById("containerA").style.width=document.getelementById("containerA").style.height/20+'px';
  4. }

Code: [ Select ]
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
<html xmlns="" lang="en" xml:lang="en">
  <title>SWFObject - step 1</title>
  <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
    <style type="text/css" media="screen">
    html, body, #containerA { width:100%; height:100%; }
    body { margin:0; padding:0; overflow:hidden;}

    <style type="text/javascript" src="resize.js"></style>

  <div id="containerA">
   <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
    <param name="movie" value="yankeeScreenMenu.swf" />
    <!--[if !IE]>-->
    <object type="application/x-shockwave-flash" data="yankeeScreenMenu.swf" width="100%" height="100%">
    <param name="quality" value="autohigh" />
    <param name="menu" value="false" />
     <p>Alternative content</p>
    <!--[if !IE]>-->
  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "">
  2. <html xmlns="" lang="en" xml:lang="en">
  3.  <head>
  4.   <title>SWFObject - step 1</title>
  5.   <meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
  6.     <style type="text/css" media="screen">
  7.     html, body, #containerA { width:100%; height:100%; }
  8.     body { margin:0; padding:0; overflow:hidden;}
  9.     </style>
  10.     <style type="text/javascript" src="resize.js"></style>
  11.  </head>
  12.  <body>
  13.   <div id="containerA">
  14.    <object classid="clsid:D27CDB6E-AE6D-11cf-96B8-444553540000" width="100%" height="100%">
  15.     <param name="movie" value="yankeeScreenMenu.swf" />
  16.     <!--[if !IE]>-->
  17.     <object type="application/x-shockwave-flash" data="yankeeScreenMenu.swf" width="100%" height="100%">
  18.     <param name="quality" value="autohigh" />
  19.     <param name="menu" value="false" />
  20.     <!--<![endif]-->
  21.      <p>Alternative content</p>
  22.     <!--[if !IE]>-->
  23.     </object>
  24.     <!--<![endif]-->
  25.    </object>
  26.   </div>
  27.  </body>
  28. </html>
  • graphixboy
  • Control + Z
  • Mastermind
  • User avatar
  • Posts: 1825
  • Loc: In the Great White North

Post 3+ Months Ago

You need to do this inside of the swf using actionscript so we need to know what version of flash/as your using. You also need a plan for what to do with the extra space inside your swf (should it all scale, or just the background and not the content, etc?)

I wrote a tutorial a while back that touches on this functionality by using flash as a background. Most of the techniques should apply to what your doing as well provided your using Actionscript 2.
  • chopficaro
  • Novice
  • Novice
  • chopficaro
  • Posts: 30

Post 3+ Months Ago

what i want cant be done inside the action script. i want the height of the embedded flash to be 100%, i have already done that. i want the width of the embedded flash to be a specific fraction of the height in pixels. my object is a skinny menu bar with a small width compared to the height. so, when user resizes the window to about the same size as the menu bar, he should see only the menu bar and no other html. when he widens the window, he should see more of the other html.
  • chopficaro
  • Novice
  • Novice
  • chopficaro
  • Posts: 30

Post 3+ Months Ago

i found a solution

Post Information

  • Total Posts in this topic: 4 posts
  • Users browsing this forum: No registered users and 3 guests
  • You cannot post new topics in this forum
  • You cannot reply to topics in this forum
  • You cannot edit your posts in this forum
  • You cannot delete your posts in this forum
  • You cannot post attachments in this forum

© 1998-2017. Ozzu® is a registered trademark of Unmelted, LLC.