Collapsed Topics - Text doesn't hide IE8

Collapsed Topics - Text doesn't hide IE8

by Benn Cass -
Number of replies: 8

I am having problems with the Collapsible topics course format for IE8 on Moodle 2.

Starting off a course has all topics hidden but when I open a topic then close it the text just moves to the side and doesnt hide..... only happens on IE8.

Any ideas?

Average of ratings: -
In reply to Benn Cass

Re: Collapsed Topics - Text doesn't hide IE8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Benn,

This is a known issue with IE8- (I've realised is not in the readme.txt file).

The reason is complex and all to do with the way IE works (or rather does not ;) ).  I seem to spend more time trying to make the code work in IE than I do making it in the first place with other browsers.

The solution is to upgrade to IE9 or use a 'proper' browser like Chrome, Firefox, Opera, Safari etc.  If IE died, I'd attend its funeral just to make sure it was really dead.

I'm sorry there is not a true fix.  If I find one, I'll update the code.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Collapsed Topics - Text doesn't hide IE8

by ben reynolds -

>  If IE died, I'd attend its funeral just to make sure it was really dead.

I'd be there to drive a stake through its heart.

In reply to Gareth J Barnard

Re: Collapsed Topics - Text doesn't hide IE8

by Mark Ward -

Just wanted to say this works fine for me in IE8 - the problem is with IE8 Compatibility Mode (aka IE7) which is enabled by default for all sites on your local domain.

One quick fix on a per-user basis is to disable this default by going to the "tools" menu, selecting "compatibility View Settings" and then ensuring that "Display intranet sites in Compatibility View" is Disabled.

If you are in a more corporate environment and you need a domain wide fix you can ask your network admin to look at changing this setting through group policy in active directory.

UPDATE - Even better solution found here. Try adding the following to the <head> of your document, it should force IE8 to ignore the compatibility mode setting:

<meta http-equiv="X-UA-Compatible" content="IE=8" >

Attachment compat.jpg
In reply to Mark Ward

Re: Collapsed Topics - Text doesn't hide IE8

by Mark Ward -

Also, if you want IE6 and IE7 support you can simply add an extra couple of lines to the javascript (lib.js) where the "display: none" style is toggled (look around line 80 up to 100), in particular look for the two "target.style.display= XXXXX" lines which actually do the magic. To help IE out you can add and remove your own custom class to the topic:

target.className += " collapsed_topic"//add the class name

target.className = target.className.replace(/\b collapsed_topic\b/,'') //remove the class name

Once this is done I can use CSS to target all of the children within these topics and hide them when needed:

/* -- hide the children for IE7 and older -- */
.collapsed_topic *{
    display: none;
}

This isn't as elegant as the original version, but if you have to support IE6 and IE7 it will do the trick without breaking anything.

Average of ratings: Useful (1)
In reply to Mark Ward

Re: Collapsed Topics - Text doesn't hide IE8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Mark,

That is absolutely brilliant!!!

I was so intrigued, I tried it out and it works like a dream, thank you.

So, please find attached replacement files for the Moodle 2 version to test.  I have included a YUI Compressed version of 'lib.js' -> 'lib_min.js' to save altering the top of 'format.php' to use the human readable form.  To install, make sure you have a backup copy, then replace with the files.  If you have a custom css file, then instead of replacing collapsed_topics.css, copy the 'collapsed_topic' class definition at the bottom and add it to your own.

There is also 'lib.js' for reference using a new browser version technique I found on the web.

If all is good, I will put into the full version and credit you in the Readme :D.

Cheers,

Gareth

Developer of Collapsed Topics.

In reply to Benn Cass

Re: Collapsed Topics - Text doesn't hide IE8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Benn,

Additionally, I've just looked at this to confirm what is actually happening as it has been a while.  In IE9 with compatibility mode on the issue manifests itself because the JavaScript manipulates the 'display' css attrribute of the table row that contains the text.

On refresh it appears to work correctly on the logical basis that if an node's parent is not displayed then neather is the node.  However in IE8- there appears to be code missing in the browser that changes the 'display' attribute of all child nodes of a given node when its display attribute changes by means of JavaScript manipulating the Document Object Model.

I hope this makes sense and demonstrates why I cannot fix the problem in my code unless I went through all child nodes and did IE's job for it when the attribute changed.  This is quite a bit of time to test (not to implement!) and could lead to issues if not water tight.  Plus I suspect my solution would be much slower than the native code of the browser if it existed in IE8.

Cheers,

Gareth

In reply to Gareth J Barnard

Re: Collapsed Topics - Text doesn't hide IE8

by Benn Cass -

All clear to me. I too use Chrome but our institution uses IE8.....

Never mind, let me know if a fix is found.

In reply to Benn Cass

Re: Collapsed Topics - Text doesn't hide IE8

by Gareth J Barnard -
Picture of Core developers Picture of Particularly helpful Moodlers Picture of Plugin developers

Dear Benn,

I tend to make announcements on this forum about releases and fixes.  I'll have a look at the issue in October I hope as I have to finish my MSc at the moment.

In the mean time, please see if your institution will upgrade to IE9.  I'm sorry I could not be more helpful but it is a constant battle with IE to make things work often leading to a catch-22 situation where there is no solution because of the logical contradictions in its operation.  If you Google about web development and IE then you find so much out there about the issues people have had coping with its 'quirks'.

Cheers,

Gareth