开发者

Align swf to bottom of div, even if div is smaller than swf?

开发者 https://www.devze.com 2023-02-05 18:45 出处:网络
I had the idea to contain a swf of 270px in height inside a div that is 29px in height at the start. This div is going to be absolute positioned along the bottom of the page and the swf file in it\'s

I had the idea to contain a swf of 270px in height inside a div that is 29px in height at the start. This div is going to be absolute positioned along the bottom of the page and the swf file in it's normal state will only take up 29px in height. It isn't until the user hovers over some pieces of the swf that it will take up a height of 270px. I was going to incorporate some java script to change the height of the div for when that happens. However the problem I am running into is that the swf file won't align to the bottom of the div. It always seems to align to the top despite the fact that I am putting in <param name="salign" value="lb" />, aka align left bottom. Is it not possible to fit a swf into a smaller div and have that swf align to the bottom vs being pushed down from the top?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
    <head>
        <title>egnewsTicker</title>
        <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
        <style type="text/css" media="screen">
        html, body { height:100%; background-color: #ffffff;}
        body { margin:0; padding:0; overflow:hidden; }
        #flashContent { width:100%; height:29px; vertical-align:bottom; display:inline-block;}
        </style>
    </head>
    <body>
        <div id="flashContent">
            <object classid="clsid:d27cdb6e-ae6d-11cf-96b8-444553540000" width="100%" height="100%" id="egnewsTicker" align="bottom" vertical-align="bottom">
                <param name="movie" value="egnewsTicker.swf" />
                <param name="quality" value="high" />
                <param name="bgcolor" value="#ffffff" />
                <param name="play" value="true" />
                <param name="loop" value="true" />
                <param name="wmode" value="transparent" />
                <param name="scale" value="noscale" />
                <param name="menu" value="false" />
                <param name="devicefont" value="false" />
                <param name="salign" value="lb" />
                <param name="allowScriptAccess" value="sameDomain" />
                <!--[if !IE]>-->
                <object type="application/x-shockwave-flash" data="egnewsTicker.swf" width="100%" he开发者_JS百科ight="100%">
                    <param name="movie" value="egnewsTicker.swf" />
                    <param name="quality" value="high" />
                    <param name="bgcolor" value="#ffffff" />
                    <param name="play" value="true" />
                    <param name="loop" value="true" />
                    <param name="wmode" value="transparent" />
                    <param name="scale" value="noscale" />
                    <param name="menu" value="false" />
                    <param name="devicefont" value="false" />
                    <param name="salign" value="lb" />
                    <param name="allowScriptAccess" value="sameDomain" />
                <!--<![endif]-->
                    <a href="http://www.adobe.com/go/getflash">
                        <img src="http://www.adobe.com/images/shared/download_buttons/get_flash_player.gif" alt="Get Adobe Flash player" />
                    </a>
                <!--[if !IE]>-->
                </object>
                <!--<![endif]-->
            </object>
        </div>
    </body>
</html>


A quick and dirty way to fix this would be to wrap the swf in a second div like so:

<div id="hoverDiv" style="position: relative;  overflow: hidden;">
<div id="wrapperDiv" style="position: absolute; bottom: 0px;">
<!-- SWF here -->
</div>
</div>

Then you can manipulate the height of "hoverDiv" with javascript. The SWF should sit at the top of "wrapperDiv" which will sit at the bottom of "hoverDiv" and any overflow from the wrapperDiv should be hidden.


Try this in your css:

vertical-align:bottom;

If that doesn't work, add this after the previous code:

display:inline-block;


<div id="wrapperDiv" style="text-align:bottom;border:1px solid black;display:inline-block">
<!-- text goes here -->
</div>
0

精彩评论

暂无评论...
验证码 换一张
取 消