Resize div height from rollover event in Flash

[somnamblst]

I am asking this in javascript and not actionscript because I think the js portion more crucial. I have a viewable area in a SWFcalled box_mc on frame1 that is 300x100 until a rollOver event when it appears to become 300x274 because it has advanced to frame2

I want my actionscript to instruct a div that is 300x100pixels with overflow hidden to expand to a div that is 300x274 in response to the rollOver event. On rollOut I want my div to snap back to the original height.

I think I may have seen what I need on http://www.adobe.com/products/photoshop/family/

which has a script called expando

function setSWFDimensions(objID, width, height) {
        //alert(objID+' '+width+' '+height);
        if (objID && width && height) {
            var fObj = document.getElementById(objID);
            var fEmb = document.getElementById(objID+'-embed');
            if (fObj && fObj.style) {
                fObj.setAttribute('width', width);
                fObj.setAttribute('height', height);
                fObj.style.width = width+'px';
                fObj.style.height = height+'px';
            }
            if (fEmb != null) {
                fEmb.width = width;
                fEmb.height = height;
                if (fEmb.style) {
                    fEmb.style.width = width+'px';
                    fEmb.style.height = height+'px';
                }
            }
        }
    }
 

This is my AS for the rollover rolloff events

box_mc.onPress = function():Void
{
 getURL("javascript:pageTracker._trackPageview('/flash/click/');");
 getURL("http://www.yahoo.com","_blank");
};
 
 
box_mc.onRollOver = function():Void
{
 getURL("javascript:pageTracker._trackPageview('/flash/rollover/');");
 
    box_mc.gotoAndPlay(2); 
};
 
box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
};
 
 
 

[acoder]

Have you tried calling the JavaScript function onrollover?

[somnamblst]

I have mostly been looking at the example on mustardlab.com/developer/flash/objectresize/ and the resize_flash.js files and FLA example. So based on what you said I think my AS should be:

box_mc.onRelease = function():Void
{
 getURL("http://www.yahoo.com","_blank");
};
box_mc.onRollOver = function():Void
{
box_mc.gotoAndPlay(2); 
getURL("javascript:setFlashHeight('flashid', 274)");
};
box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
getURL("javascript:setFlashHeight('flashid', 100)");
};

According to Mustardlab's flash resize demo I need this on my page to check whether the users browser supports the getElementById function:

<div id="flashid" style="width:100%; height:100%;">
    <script type="text/javascript">
      e = canResizeFlash();
      document.write('<object data="flashResize_300x100.swf" width="100%" height="100%" type="application/x-shockwave-flash">');
      document.write('  <param name="movie" value="flashResize_300x100.swf" />');
      document.write('  <param name="FlashVars" value="allowResize='+e+'" />');
      document.write('  Flash Movie With Resizing Content');
      document.write('</object>');
    </script>
    <noscript>Javascript must be enabled to view Flash movie</noscript>
  </div>

But I also want my resizing div to hide the overflow of the bottom 174 pixels when box_mc is on frame1, because otherwise won't my 300x274 pixel SWF push my div down? It will be z-indexed and wmode=transpare nt and there is HTML content under the bottom 174 pixels that users need to be able to click on that the flash box_mc is preventing clicks on HREF links in FF & Safari but not IE7.

Here is my demo link with a link to my FLA & flash_resize.js

http://xsotek.com/demo6/resize2.html

[somnamblst]

I did it! Somehow. Wish I could say I understand what I did, but I just kept trying different things. If you rollover the HREF links in FF you get a cursor now and if you rollover in IE you see the "Press spacebar or enter to activate this control" halo is 100px.

demo

<script type="text/javascript" src="http://xsotek.com/demo6/flash_resize.js"></script>
<script type="text/javascript">
function setFlashHeight(divid, newH) {
document.getElementById(divid).style.height = newH+"px";
}
</script>
 
<div id="flashid" style="overflow:hidden; height:100px; width:300px; position:absolute; z-index:100; background: Aqua;">
<script type="text/javascript" language="JavaScript">
e = canResizeFlash();
document.write('<object data="flashResize4_300x100.swf" width="300" height="274" type="application/x-shockwave-flash">');
document.write('<param name="movie" value="flashResize4_300x100.swf" />');
document.write('<param name="FlashVars" value="allowResize='+e+'" />');
document.write('Flash Movie With Resizing Content');
document.write('<param name="wmode" value="transparent" />');
document.write('</object>');
        </script>
        <noscript>Javascript must be enabled to view Flash movie</noscript>
    </div>
 

And my AS is

box_mc.onRelease = function():Void
{
 getURL("http://www.yahoo.com","_blank");
};
box_mc.onRollOver = function():Void
{
box_mc.gotoAndPlay(2); 
getURL("javascript:setFlashHeight('flashid', 274)");
};
box_mc.onRollOut = function():Void
{
box_mc.gotoAndStop(1);
getURL("javascript:setFlashHeight('flashid', 100)");
};
 

[acoder]

That seems to be the way it should be done. There are ways to get rid of that message in IE. Perhaps you can ask in the Flash forum for that. Anyway, well done!