IMS Content Package resource poblem with Microsoft IE, pages dont appear until clicking twice on the link in the navigation menu, reloading the page doesn't work.

To reproduce:
===========
1. Using Moodle 1.6.1 or 1.6.1+
2. Create a new IMS Content Package (using eXe IMS editor)
3. Add a Resource as IMS Content Package
4. Choose the resource to be shown in the same window (inline frame)
5. Leave the rest of the settings as they are (navigation menu is ON)
6. Try to see the resource with Microsoft Internet Explorer

Expected result:
============
The IMS content should show in the inline frame

Actual result
==========
The inline frame is blank and the content only shows when clicking on the link in the navigation menu on the left, reloading the page doesn't help.
Once the IMS Content on the iframe is in the Explorer cache it shows correctly, but clearing the cache results in the same problem.

Assigning this issue to me - Andy will investigate and copying to Eloy

Hi,

It seems IE has issues with resizing the iframe whilst the content in the iframe is still loading. Strange though, I've not noticed this behaviour before... One solution could be to get IE to resize the iframe from an onload event on the iframe itself. Here's a possible modification to the resizeiframe function in resize.js that does this

function resizeiframe (hasNav) {
var winWidth = 0, winHeight = 0;
var isIE = true; // assume we're working with IE
if( typeof( window.innerWidth ) == 'number' )

else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )

else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )

// IE doesn't seem to like resizing stuff if the iframe is not fully loaded - so we get it to wait a little...
// This is only done if the browser is IE and we're resizing the iframe for the first time - other browsers don't need to wait
if (isIE && !arguments.callee.doneInitialResize) {
var contentiframe = document.getElementById('ims-contentframe') || document.getElementById('ims-contentframe-no-nav');
// get the iframe to call resizeiframe again once the iframe content is loaded
contentiframe.onload = function()

;
arguments.callee.doneInitialResize = true; // set a property on the function to remember that we've done this
// don't try to resize the iframe yet
return;
}

// end of modifications...

Hi Andrew.

With your code IE works fine the first time you see the iframe, but if you want to see it again, it doesn't show until reloading the page.

Clearing the IE cache makes it work again and show the pages 1 time.

This is happenning in IE 6

Right now I can't check it on IE4

Hi Andrew (and the rest),

your patch seems to have sense (more or less) B-)

Anyway, the resizeiframe() function shouldn't be show until the 'ims-contentframe' or 'ims-contentframe-no-nav' frames are loaded (at least that was the use of the original waiting() js function.

In your patch, you do getElementById() again (exactly like done in the waiting() function, to attach the onload() event with the resizeiframe() function call that just is that precise moment is being executed because the waiting() has ended.

Uhm, I really don't understand why such addenda of the onload() event for IE is necessary/heps.

Please, don't misunderstand me. I'm pretty sure that the patch is correct, you are the JS King! Just trying to learn a bit more.

Also, I'm pretty sure that we reviewed the original code under IE and everything was working fine. Please, Jose, could you attach here some example IMS package?

TIA to everybody!

I'm attaching an example of IMS CP that is not working properly.

It has been written with a software called EXE (free software), version 0.17, that can be found in http://eduforge.org/projects/exe/

Thanks to all of you

Hi Josef,

thanks a lot by your example!

It's really curious because I've tried other packages and I don't get the problem at all. Then I've performed some checks to your package and it seems that it contains some links to "localhost" in their css styles calls.

Could it be possible that some sort of problem like this was the cause of IE doing such annoying things? Could you try it by fixing the package in order to have all its css links correct and try again?

Just one idea... I'll do some more tests this weekend.....

Ciao

Hi Eloy,

Please, can you tell me where are the "localhost" calls in the css styles?

Because I don't see them.

I uncompressed the cap1.zip file and did a 'grep localhost *' without any results.

Do you have a sample that works OK which can be shared with us?

Thank You.

Hi Jose,

you were ok. Such "localhost" occurrences happened when I tried to validate the css against W3C using Firefox. It shows some warnings but it must be validator-related and nothing to do with the css files themselves.

Then I've loaded some IMS packages (some of them are formerly SCORM packages) and I've detected the sam problem in two of them.

Curiously the IMS package specification, that is an IMS package itself, plus all the rest of packages we used in our tests (I cannot share them here because the were sent by their authors) work perfectly.

Although I'm going to test and patch the javascript with the solution provided by Andrew, I really think that those non-working packages must have something causing that erratic behaviour under IE. I would want to find what is it!

Hi Eloy/Jose,

I was able to recreate this problem using one of the NLN materials we have here, although some other NLN materials work fine. I've tried comparing working and non-working materials but so far I can't work out what the significant difference is...

About the changes I posted, Internet Explorer seems to (sometimes) have problems if the iframe is resized before (or maybe during) loading the content into the frame. The idea behind the patch was to try to prevent this from happening in IE, whilst at the same time not forcing other browsers to have to wait longer than is needed before doing the resizing. (I'm sure there are more elegant ways this could be done...)

I think the changes do have some issues with caching - and this may explain the problems Jose had while testing it? - if the document in the iframe is already cached the onload event handler is added to the iframe after the load event has happened! Here's a modification that works around this problem:

function resizeiframe (hasNav) {
var winWidth = 0, winHeight = 0;
var isIE = true; // assume we're working with IE
if( typeof( window.innerWidth ) == 'number' )

else if( document.documentElement && ( document.documentElement.clientWidth || document.documentElement.clientHeight ) )

else if( document.body && ( document.body.clientWidth || document.body.clientHeight ) )

// IE doesn't seem to like resizing stuff if the iframe is not fully loaded - so we get it to wait a little...
// This is only done if the browser is IE and we're resizing the iframe for the first time
if (isIE && !arguments.callee.doneInitialResize) {
var contentiframe = document.getElementById('ims-contentframe') || document.getElementById('ims-contentframe-no-nav');
// if the iframe content isn't loaded yet (content isn't cached)
if (contentiframe.readyState != 'complete') {
// get the iframe to call resizeiframe again once the content has loaded
contentiframe.onload = function()

;
// return don't try to resize the iframe yet
return;
}
// if the content was cached we can just carry on as normal
arguments.callee.doneInitialResize = true;
}

// end of modifications...

Hi Andrew,

thanks for your 2nd patch. I'll test it in some hours.

About why this is caused, I've been "googling" a bit, and I've found some information about problems if the document being displayed is XHTML, because it puts IE in some "mode" or something similar. Could that the reason for this erratic behaviour... ?

Hi,

I just checked some working and non-working NLN materials, they're all using HTML 4.01 transitional with the doctype <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"> so IE should (I think) be using it's quirks mode rendering for all of them.

What may or may not be relevant is that the materials that work all seem to have the javascript written inline, the ones that don't are using external js files - does the same thing apply to the files you've got?

Uhm,

the new patch seems to increase the number of pages being displayed ok under IE, but the behaviour continues being erratic. Some times the same page is viewed and some times no. Also, while maximising the page, some times the page iframe contents appear/disappear randomly.

Also, I've take a look to the packages and once of my not-working-examples is 100% free of javascript (both internal and external). I've attached it here (is one SCORM module but should work perfectly under IMS CP. The erratic page is the first one in the package (the rest seem to be displayed properly at least in my 5-6 reloads). It's one really simple page and sometimes works and sometimes no.

Another direction of test:s Could we try to force some cache headers to see if the behaviour changes?

Really annoying....

I have encountered the same problem, I used the topic format in my Moodle 1.5 course. Under each topic, I added one or two IMS content package resources. When I tried to view the content packages, Firefox worked OK. But IE popped an alert window each time I clicked on a page in the side menu but after I clicked on "yes" to allow the unsecured content, it would give me a blank page. The strangest thing was, if I clicked on the same page in the side menu again, the alert window would pop again, but this time no matter I clicked on "yes" or "no", the page would load. I have added my moodle site to the trusted site in IE and set the security level to low. I have tried at work and at home. I have clear-up the catch, the cookies and the history. I have tried to load the LMS CP in same window and new window. Same thing.

Please see my posting in Using Moodle with some screeshots. Will try to add a sample package – would need the permission from my colleagues first.
http://moodle.org/mod/forum/discuss.php?d=53487

Thank you!

Hi,

Sorry it's taken so long to look at this again. It seems to be some kind of redraw issue in IE? I've been testing a load of materials this morning and noticed something with the materials that don't display. In these cases I'm sure IE is loading the content - it just isn't drawing it to the screen - because the audio starts even though the iframe appears blank. Also the instant you resize the browser window manually (but not it seems if you resize it with JavaScript) the content appears.

Does this happen for other materials people have tried? If so maybe we can solve this by forcing IE to redraw the iframe somehow (the "somehow" is the part I'm not sure about yet )

Has anyone checked any of these problems in IE 7?

Hi Andrew,

it really seems to be a redraw problem. Contents are there but they get invisible without apparent reason. I tried a lot of things but no luck with my limited js skills.

Also, I've observed one serious problem when you keep the mouse down continuously in IE and resize the window continuously. After some seconds, IE begins to launch tons of requests to the web server. Really bad news. This behaviour isn't reproducible with other browsers (FF, Safari).

Perhaps we should forbid IE automatic resizing of the iframe and, alternatively, resize only on load or provide one button to do that. I know it isn't perfect but...

Anyway, if you can imagine a better solution, of course, anything will be really welcome!

About IE7, I haven't tested it at all (my poor laptop is 99% full since I've installed MSSQL on it)

Hi Eloy,

I've noticed that some materials don't display even if the iframe resizing is disabled (again the sound plays, but nothing is visible) I found something that seems to fix this on my machine - but it feels so hacky it probably shouldn't be used - though the fact this helps does I think go someway to highlighting how insane this bug is

1) Hide the iframe with CSS
2) Resize when the load event is triggered
3) Wait 5 seconds
4) Unhide the iframe

Like I said. Ugly 5 seconds appears to be the magic number that makes things work on my computer - obviously this could vary for other people. It's also painfully slow.

Maybe a "Fit available space" button would be the best option. I'll give that a try to see if it helps with any of these problems. I'll let you know how I get on

Hi!

Here's some quick and dirty code that adds a resize button (if this helps the problems in IE - I can tidy things up a bit and make sure it's nice in other browsers too) I think this is an improvment for my test materials. The ones that don't display even in the non-resized iframe seem to all appear when the resize to fit button is pressed. Which is a start I guess... How does this work for you?

// some basic functions for adding event handlers - maybe should use YUI here since it's already included in moodle? though it's possibly
// a little bit too heavyweight for our needs here
function addEvent(obj, ev, fn) {
if (obj.addEventListener)

else if (obj.attachEvent)

}

function removeEvent(obj, ev, fn) {
if (obj.removeEventListener)

else if (obj.detachEvent)

}

function makeButton(parent) {
var btn = document.createElement('a');
btn.setAttribute('href', 'javascript:;'); // make sure the link as an href attribute so it can be selected by keyboard in mozilla
btn.appendChild(document.createTextNode('Resize to fit available space'));
with (btn.style)

addEvent(btn, 'click', function(e)

);
parent.appendChild(btn);
}

// if the user creates clicks the button before the material is loaded IE may not display it correctly
// so instead of the quick waiting function/interval we'll use the slow old onload event handler
/*function waiting() {
var cf = document.getElementById('ims-contentframe');
var cfnv = document.getElementById('ims-contentframe-no-nav');

if (cf || cfnv)

return false;
}

var ourInterval = setInterval(waiting, 100);*/

addEvent(window, 'load', function() {
var cf = document.getElementById('ims-contentframe');
var cfnv = document.getElementById('ims-contentframe-no-nav');

if (cf || cfnv)

});

Hi Andrew,

while it seems to make things slightly better, I continue getting blank iframes randomly (both before and after pressing the "resize to fit" button.

Curiously, if I resize the window 1-2 pixels and press the resize again, it works.

For all my examples I'm using the "cap1.zip" example attached above.

This is really annoying, ins't it?

Wow, wow, wow!!!

I was searching about "internet explorer blank iframe" when I've found this message: http://archivist.incutio.com/viewlist/css-discuss/72157

So, then, I decided to take a look to CSS styles. But we weren't using the "relative" at all. But then, I started to play with CSS a bit and right now, everything seems to be working in my IE (and the rest) !!!

The change is pretty simple. Just edit "/theme/standard/styles_layout.css" and, from these two styles:

#ims-contentframe
#ims-contentframe-no-nav

remove this line:

overflow:auto;

Reload your pages and feedback if it works! Wow, wow, wow!!

Yes!

It's looking good here :-D

Would it be possible that such CSS is the cause of all our headaches? Crazy !

One more thing, Andy

I've observed that, if I keep pressed the mouse, resizing continuously the page, it generates hundreds of requests to the server, slowing down if after some minutes.

Would it be possible to add to the resize code some minimum interval between refreshes, or to avoid refreshing if there are pending requests or launching the resize only when the mouse button is depressed or something similar in order to avoid that saturation?

I'm going to change styles on 1.6, 17 and HEAD right now to solve the original problem. B-)

Marking this as resolved for 1.6.4 and 1.7.

Hi,

It appears (at least in the cap1 example) that IE keeps fetching the stylesheets for the page displayed in the Iframe. It seems to only do this for the stylesheets, it doesn't try to reload linked javascript files or images. However I don't know how we can stop it doing this? How possible do you think it would be to process they material as it is depolyed in order to remove the links to the stylesheets and copy the content from them into the HTML file? (probably a headache, especially if the stylesheets were in a different folder - since then you'd need to fix any paths to images in the CSS)

Much simpler, we could slow down the rate at which the iframe is resized. For example this should prevent the iframe being resized more than once every half second

window.onresize = function() {
if (!resizeInterval) {
var resizeInterval = setInterval(function()

, 500);
}
};

What do you think?