Good tip with problem with small size with Fire Fox browser

Wicked!

Worked Thanks guys!

It is still not working right in Firefox. Is that what you are referring.

Chuck

OK guys, thanks for your help… sorted.

  • [li]changed the doctype to
    `[/li]

    [li]changed settings to
    var widthOfWdl = “100%”;
    var heightOfWdl = “750”;[/li]

I had set the absolute height in the div tag but that hadn’t helped. The heightofwdl was where I should have set it.

I found a fix that works with doc type xhtml and still be compatible with Firefox :smiley: :slight_smile:
no need to change or remove the doc type 8)

I used to have to have a wdl page that had a diff. doc type and I did not even load my nav menu on the page because it would interfere.
I now can load it in my carterlake style template xhtml site and it will resize properly when I select a wide or narrow style with my style switcher feature. It even obeys the narrow centered style staying in the centered page div. I tested it in Firefox 2.0 and IE6

The beauty of this is I can resize my browser window in Firefox or IE and WDL resizes just like I want…

Here is my wdl page:
http://www.carmosaic.com/weather/live.php

Here is how I did it and it works with WDL or MML. 8)
I modified a version of swfforcesize.js and named it wdl-mml-forcesize.js
http://blog.pixelbreaker.com/flash/swfforcesize/

download wdl-mml-forcesize.js
http://www.carmosaic.com/weather/wdl-mml-forcesize.js

You need to load the javascript libraries and set any div in the chain of divs that lead to your wdl div to 100% height or Firefox will not resize it (it will always appear about 200px high)

Put this in the of the html of the WDL or MML page


<!-- mchallis begin added for WDL or MML-->
<script type="text/javascript" src="swfobject.js"></script>
<script type="text/javascript" src="wdl-mml-forcesize.js"></script>
<style type="text/css" media="screen">
  html, body, #page, #main-copy, #flashcontent {
    height:100%;
  }
</style>
<!-- mchallis end added for WDL or MML -->

Let me explain a bit more …
Include CSS to set the height of the html element, the body element and the entire chain of block level HTML elements that your SWF will be nested in to height:100%, because Firefox (or: any Gecko based browser) in standards compliant mode (or: using a valid DOCTYPE) interprets percentages in a very strict way (to be precise: the percentage of the height of its parent container, which has to be set explicitly):

my page has

then then
then
then finally

Here are the settings of the wdl object inside the html:


<div id="main-copy">

    <h3>Weather Display Live</h3>

 <!--
Note: If you add or remove any html content in this portion of this page,
you will need to adjust the settings for the swf below:
var BelowDivPadding, and var PageHeightPadding will have to be set to a higher number(add)
or lower number(remove),
otherwise your swf will overflow the bounds of where it is supposed to be positioned.
-->

<p>
<b>What is Weather Display Live?</b>

Weather Display Live is an add-on Flash movie for Weather Display which allows you to view live
weather data over the web from your weatherstation in nearly real time.
This Weather Display weather station data is updated every 5 minutes.
</p>

<p>
Find out more about Weather Display Live (WDL) ...
<a href="http://www.weather-display.com/wdlive.php" title="Add WDL to your website," target="_blank">Add WDL to your website</a>
</p>

<!--
Note: Do not add any html content below this portion of this page!
or your swf will overflow the bounds of where it is supposed to be positioned.
-->

<!-- http://www.weather-display.com-->
<!-- Weather Display Live for Weather Display, the Weather Software for Weather Stations -->

<div id="flashcontent">
<noscript>Javascript must be enabled to view the live content.</noscript>




You need to install v8, or greater, of Flash Player from
<a href="http://www.adobe.com">Adobe</a> to view this live content.
</div>

<script type="text/javascript">

// This version is custom tailored for the Weather Display/PHP/AJAX Website Template set WDL or MML page
// http://saratoga-weather.org/template/

// This is a custom version by Mike Challis
// http://www.carmosaic.com/weather/scripts.php

// This version is compatible with valid doc type xhtml while allowing dynamic resize
// the SWF while resizing the window in Firefox or IE

// The alternative to this method is to set the swf width and height to static settings
// Swf width and height can be set to 100% but then it will not work correctly in
// firefox when a xhtml doc type is used

// This version requires the files swfobject.js and wdl-mml-forcesize.js to be
// located in the same folder on your web server as this page
// also, the script and style html is REQUIRED to be inside the head  /head container on this page

//  This method assumes that the swf 'flashcontent' div is inside a 'main-copy' div that is inside a 'page' div
//  as is standard for the Weather Display/PHP/AJAX Website Template set wdl page or mml page
//  or it will not work! If you delete one of these divs, or add an extra div inside these divs it will break
//  the correct display of the swf!

// #######################
// # Begin settings
// #######################

// # # # # # #
// # Two mandatory settings:

   // # You must enter the correct URL to your WDL or MML xml settings
var pathToConfig = "http://www.carmosaic.com/weather/wdlconfig5.01.xml";
   // # you must set to your WDL or MML swf file name
   // # (note: this name will change every time you upgrade the version)
var swfFileName = "wdlv5_03.swf";



// # # # # # #
// # Optional settings:

   // set to minimum width size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MinWidth = "610";
   // set to minimum height size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MinHeight = "470";
   // set to maximum width size your swf can resize to,
   // usually leave this as is, SWFForceSize resizes it dynamically
var MaxWidth = 900;
   // Width to Height Ratio  Ie: 0.75 makes Width of 800 have Height of 600
var Ratio = 0.75;
   // If you want to add a little html content above WDL increase this pixel value,
   // otherwise the swf may overflow your footer (do not add quotes to the value!)
var BelowDivPadding = 350; // usually set to 100 or 200
  // If you want to add a little html content above WDL increase this pixel value,
   // otherwise the swf may overflow your footer (do not add quotes to the value!)
var PageHeightPadding = 450; // usually set to 300
   // Background color white is fine, unless you really want to chabge it
var backgroundColourOfSWF = "#ffffff"; // #ffffff is white


// #######################
// # End settings
// #######################

var so = new SWFObject(swfFileName+"?"+pathToConfig, swfFileName, MinWidth, MinHeight, "8", backgroundColourOfSWF);
so.addParam("quality", "high");
//so.addParam("wmode", "transparent"); // mchallis disabled for compatibility with multiple css style themes
so.addParam('salign', 'lt');           // align left top
if( so.write('flashcontent') ) {
    var forcesize = new SWFForceSize( so, MinWidth, MaxWidth, Ratio, BelowDivPadding, PageHeightPadding );
}
</script>

<!--
Note: Do not add any html content to this portion of this page!
-->

</div><!-- end main-copy --> 

If this get a little confusing just view the source of my wdl page.

Looks like FAQ material Mike… I’ll add this to the plugins page for others to share :slight_smile:

Thanks!

Best regards,
Ken

Ken do you want me to put together a sample WeatherDisplay PHP Ajax template WDL page?

Do you have your taxes done or are you looking for reasons to put that off? :smiley:

  • Jim

Sure Mike, that would be great. It can be cloned for the MML page too :slight_smile:

Send it along and I’ll add it to the distributions.

Thanks!

Best regards,
Ken

Ken don’t publish it yet, I am working on a MML template page and I see an ajustment to the javascipt I might make. I will reply when it is ready.

Jim, I started work on my taxes today LOL

Ken, I emailed you the wdl-mml-pages see readme.txt inside, look here for live examples

http://www.carmosaic.com/weather/mesomap.php
http://www.carmosaic.com/weather/live.php

This version is compatible with valid doc type xhtml while allowing dynamic resize
the SWF while resizing the window in Firefox or IE

The alternative to this method is to set the swf width and height to static settings.
Swf width and height can be set to 100% but then it will not work correctly in
Firefox when a xhtml doc type is used

Tested in IE6 and Firefox 2.0.0.12

Thanks Mike! I’m adding them to the distributions.

Best regards,
Ken

It works fine,but when i switch back to my view in IE (ie-tab,you know) my hole css-template is changed,and looks horrible,it goes even out of screen…Help on that anyone ? Is there a way to hide this from IE ,so that the thing works both on IE and FF ?

Whenever I need to troubleshoot a HTML problem I always start with the W3C Markup Validator

Hope that helps

good tip,kinda dumb of me…Found 39 errors so far…
THX

down to two faults now,but still the same(dwarf WDL),but maybe i am in the wrong post,i tried the carterlake templates,but i can’t get them to work,just getting letters or nothing at all ! :oops:

WDL on this page?

You can set width and height in pixels instead of percent

var widthOfWdl = “800”;
var heightOfWdl = “600”;

yes,that’s the page,it works when i pad out the two lines suggested here,but as i said ,the style sheet is messed up and it does not work anymore in IE,or is that not so with you guys ? i am gonna change my http://www.akker.be/dark_orange_bold.html template in thes settings…See what it looks like…
OK,this works for firefox,but now IE get’s crazy on me…After some thinking (and reading… :oops:) it seems to work for both party’s now,would you to give me a hoot if it looks the same at yours…? THX

Thanks for the script wdl-mml-forcesize.js now it works perfect. It took a while before I found the option “so.addParam(“wmode”, “transparent”);” so the fly-out-menu didn’t got hidden by the flash. :slight_smile:

try this as your header html 5

page looks fine to me in the latest version of firefox

this thread is 9 years old though that you have grave dug 8O