embedded object resizing javascript causing disappearing bug when HTML changed.

Some background in this forum discussion:

http://moodle.org/mod/forum/discuss.php?d=166458

We ran into this bug because we built a theme using the new HTML5 <header> and <footer> tags instead of div#page-header and div#page-footer. There is some javascript code that requires these id's to be present in the page.

Someone in that thread pointed to "moodle/lib/javascript-static.js on line 326 & 327" as the code causing this and offered a workaround by changing the code to match whatever format you have.

I'm suggesting trimming it down and replacing most of it's current functionality with some CSS.

So what the current code does for width is find the width of the "maincontent" then subtract 35 pixels. If this is less than 500px it ups it to 500px and then it sets that width.

Equivalent CSS would be to set the width to 100% and then add 17px of padding to the div.resourcecontent that surrounds it and then adding a min-width: of 500px.

This will also resize the width in the same way the current javascript does but will be smoother and less stuttery. On certain machines you can see the PDF appear at the wrong size, disappear and then reapper at the correct size if the javascript is running slow for any reason.

For the height the current code finds the height of your browser window, then subtracts the pixel height of your header and your footer. This seems designed for the case when you have a large monitor and you wish to see the header and the footer first, and then fit the resource into whatever is left over. On small netbooks I'd think it might be the other way round, particularly since it's entirely possible that your footer (or header) is giant but intended to be offscreen when you're looking at the PDF. Luckily in this case the code sets a minimum height of 400px, which I think might get used more than expected.

This is also the point were it breaks if you don't have a #page-header and #page-footer. The code first sets the height and width to 0px so if something goes wrong later the PDF isn't shown. When it looks for #page-header/footer and doesn't find it I think it just passes null on instead of a number and so the minimum height of 400px isn't set, therefore it remains as 0px and is therefore invisible.

The code's correct behavior is not really possible in CSS, but as I say, I'm not sure that it's ideal anyway. I'd suggest taking the height and width tags out of the HTML, putting the min-height: 600px in the CSS and then either a) living with that on bigger screens, b) using a stripped down version of the current javascript to set only the height to screen - 2 or 300 (minimum 600px) (and not bothering to set it to 0px before doing the calculation).

PS looking at it now after figuring out this code, it's possible that the "#maincontent" only exists in order to allow this width to be calculated. If that's the case it can just be removed.