Swf size in percentage
thulstrup - March 5, 2008 - 19:07
| Project: | SWFAddress |
| Version: | 6.x-1.x-dev |
| Component: | Code |
| Category: | support request |
| Priority: | normal |
| Assigned: | Unassigned |
| Status: | by design |
Jump to:
Description
Thanks for a great module!
It would be nice if the size of the swf could be set in percentage as well as pixels.
#1
The new 1.1 (long story) release of the SWFAddress module supports percentage heights and widths in addition to the upgrades to the latest versions of SWFAddress and SWFObject!
Enjoy.
#2
Thank you Steven!
#3
Automatically closed -- issue fixed for two weeks with no activity.
#4
using v1.2 and have set the size as a percentage (100% for both) but the div tag is no longer being replaced - works fine as a pixel size.
In the code the js and div are as below:
<script type="text/javascript">swfobject.embedSWF('flash/j4.swf', 'swf-replace', '100%', '100%', '9.0.0', false, {}, {bgcolor: '#000000'}, {id: 'swfembed'}); </script>
<!-- various page.tpl.php stuff -->
<div id="swf-replace"></div>
Thanks in advance - fantastic module by the way
#5
Hello,
I am experiencing the same issue as alistairmcclymont... the swf replacement does not work when a percentage is specified for width and height of the swf.
The module does in fact replace the div, but it seems to draw the swf with a width and height of 0 pixels when a percentage value is specified.
When the width and height are dynamically changed to pixel values in the DOM the swf displays properly.
I suppose it is possible that some other issue with our drupal configuration is at fault, but I don't know what that might be.
#6
These issues are resolved by applying CSS that insures all container elements have the desired height and width, such as:
<style type="text/css" media="screen">
html, body, body.sidebars { width:100%; height:100%; margin:0; padding:0;}
</style>
See http://code.google.com/p/swfobject/wiki/faq question #1
Also, it is important to note that several parameters necessary for a full screen flash layout, which is the most likely use case for percentage values for SWF width and height, are not yet supported by this module.
Scale, window mode, salign, and allowfullscreen are configurable in the SWFtools embedding settings (/admin/settings/swftools/embed) but are not actually passed to the sprintf call that builds the swfaddress constructor for JS.
I worked around this hackishly by hardcoding these values into swfaddress.module:
/**
* Theme function to control the HTML output for the SWFObject call.
*/
function theme_swfaddress_swfobject($swf_address, $flash_tag_id, $flash_width, $flash_height, $flash_version,
$flash_background, $flash_replace_id) {
$swfaddress_js = <<<SWFOBJECT
$(document).ready(function(){
swfobject.embedSWF("%s%s", "%s", "%s", "%s", "%s", false, {}, {bgcolor: "#%s", wmode: "window", scale:"noscale", allowFullScreen:"false", salign:"lt"}, {id: "%s"});
});
SWFOBJECT;
return sprintf($swfaddress_js, base_path(), $swf_address, $flash_replace_id, $flash_width, $flash_height,
$flash_version, $flash_background, $flash_tag_id);
}
It might be good to finish this implementation or remove the form elements from the swftools config page to avoid people barking up the wrong tree.
That said, thanks for this module :)
#7
The solution to making the flash 100% is making sure that every single parent div of the div you're replacing with the flash content is set to height: 100%. The problem with that is that you've got 2 versions of the site, a flash version for those with it installed (and javascript running) and an html version for everyone else and probably the admin user and any other backend or user stuff. But swfobject provides a method for adding CSS if the conditions are met for the correct flash version. I've put the code below at the top of my page.tpl.php at the bottom of the header:
http://code.google.com/p/swfobject/wiki/api
swfobject.createCSS(selStr, declStr)
Exposes SWFObject's internal cross-browser method to create a dynamic stylesheet (for media type screen only). It's most important feature is that it can be called before the DOM of a page is loaded. Based on a solution by Bobby van der Sluis [ http://www.bobbyvandersluis.com/articles/dynamic_css/index.html ]:
* selStr is a String value that represents a CSS selector
* declStr is a String value that represents a CSS declaration
<?php
//this is the code i've used with the zen theme to get hide everything i don't want with the flash version - make everything else 100% high and hide the scrollbar (overflow:hidden)
<script type="text/javascript">
<!--//--><![CDATA[//><!--
if (swfobject.hasFlashPlayerVersion("6.0.0")) {
// Overwrite regular CSS used for alternative content to enable Full Browser Flash
swfobject.createCSS("html", "height:100%;");
swfobject.createCSS("body", "margin:0; padding:0; overflow:hidden; height:100%;");
swfobject.createCSS("#page", "height:100%;");
swfobject.createCSS("#page-inner", "height:100%;");
swfobject.createCSS("#main", "height:100%;");
swfobject.createCSS("#main-inner", "height:100%;");
swfobject.createCSS("#content", "height:100%;");
swfobject.createCSS("#content-inner", "height:100%;");
swfobject.createCSS("#content-area", "height:100%;");
swfobject.createCSS("#skip-to-nav", "display:none;");
swfobject.createCSS("#header", "display:none;");
swfobject.createCSS("#content-header", "display:none;");
swfobject.createCSS("#header", "display:none;");
swfobject.createCSS("#first-time", "display:none;");
swfobject.createCSS("#navbar", "display:none;");
swfobject.createCSS("#sidebar-left", "display:none;");
swfobject.createCSS("#sidebar-right", "display:none;");
swfobject.createCSS("#footer", "display:none;");
}
//--><!]]>
</script>
?>
Sample page: [ http://www.bobbyvandersluis.com/swfobject/testsuite_2_1/test_api_createc... ]
#8
As noted in the above comments, this is a CSS problem, not a problem with the module. See previous comments for suggestions on how to set your CSS to work for full-window Flash sites.
#9
(When #343045: Allow all SWFObject 2.1 params to be passed is added, SWFAddress should be configurable enough to let you send the extra parameters you might want.)