Month loading GIFs broken in IE9?

Found a bug?
Let me know so I can sort it out

Re: Month loading GIFs broken in IE9?

Postby kuczora » Thu Jun 23, 2011 9:58 pm

In that case I would be more than happy to do some testing for you if it would be of help.

PS looks like there are definite issues between mootools-1.2.4 and IE9 so I'm going to plough ahead and try to get this working with 1.3.2

Yes that's definite - to support IE9 requires 1.2.5 or later
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby kuczora » Fri Jun 24, 2011 9:28 pm

OK - it looks like you can get away with replacing the mootools-1.2.4-core file with the 1.2.5 equivalent.

Is working for me so far...

(Although the month loading graphics still don't appear)
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby kuczora » Sat Jun 25, 2011 5:40 pm

The problem, as ever, is Internet Explorer and the way it renders web pages.

Firefox (and I assume Safari etc) render a page progressively while it is downloading - IE displays a big fat zero until the whole page has downloaded then, bang, displays it all at once.

This gives some real usability problems using the calendar with IE. Here's an example - clicking on the Next Month button:

In Firefox:
No instant reaction, but after a second the calendars all go blank and then the first shows the loading GIF for a second or two, followed by the calendar. Then the same for the second month, and then again for the third at which point the page is up to date.

In Internet Explorer:
Nothing at all appears to happen for 10 - 15 seconds (depending on connection speed etc) and then the new updated page appears in a flash. Most people will have re-clicked the button 3 or 4 times by then!

I've managed to patch together a work-round using some JavaScript to change the innerHTML of the calendar div in an onClick event if the browser is IE. That changes the calendars to loading GIFs on the "old" page, to give instant user feedback before the "new" page loads. So now when I click the button I get:

In Internet Explorer:
All calendars immediately change to the loading GIF and these animate for a few seconds. Then they all stop animating and nothing happens for a few more seconds, upon which the new page instantly appears.

IE really is the proverbial crock of [expletive deleted] !
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby kuczora » Sat Jun 25, 2011 9:07 pm

Found a rather more elegant solution.

In mootools-cal-public.js function load_calendar(el,month,year) set "async" to true if the browser is IE and it will behave much better.

Example of my changes:

// load calendar for month and year
function load_calendar(el,month,year){
var sync_mode=false;
if (BrowserDetect.browser=='Explorer') { sync_mode=true; }
var req = new Request({
async: sync_mode, // freeze browser (if not IE) whilst getting data - this way the elements are ready to be "clicked"
.
.
.
.


BrowserDetect code is as follows:

var BrowserDetect = {
init: function () {
this.browser = this.searchString(this.dataBrowser) || "An unknown browser";
this.version = this.searchVersion(navigator.userAgent)
|| this.searchVersion(navigator.appVersion)
|| "an unknown version";
this.OS = this.searchString(this.dataOS) || "an unknown OS";
},
searchString: function (data) {
for (var i=0;i<data.length;i++) {
var dataString = data[i].string;
var dataProp = data[i].prop;
this.versionSearchString = data[i].versionSearch || data[i].identity;
if (dataString) {
if (dataString.indexOf(data[i].subString) != -1)
return data[i].identity;
}
else if (dataProp)
return data[i].identity;
}
},
searchVersion: function (dataString) {
var index = dataString.indexOf(this.versionSearchString);
if (index == -1) return;
return parseFloat(dataString.substring(index+this.versionSearchString.length+1));
},
dataBrowser: [
{
string: navigator.userAgent,
subString: "Chrome",
identity: "Chrome"
},
{ string: navigator.userAgent,
subString: "OmniWeb",
versionSearch: "OmniWeb/",
identity: "OmniWeb"
},
{
string: navigator.vendor,
subString: "Apple",
identity: "Safari",
versionSearch: "Version"
},
{
prop: window.opera,
identity: "Opera"
},
{
string: navigator.vendor,
subString: "iCab",
identity: "iCab"
},
{
string: navigator.vendor,
subString: "KDE",
identity: "Konqueror"
},
{
string: navigator.userAgent,
subString: "Firefox",
identity: "Firefox"
},
{
string: navigator.vendor,
subString: "Camino",
identity: "Camino"
},
{ // for newer Netscapes (6+)
string: navigator.userAgent,
subString: "Netscape",
identity: "Netscape"
},
{
string: navigator.userAgent,
subString: "MSIE",
identity: "Explorer",
versionSearch: "MSIE"
},
{
string: navigator.userAgent,
subString: "Gecko",
identity: "Mozilla",
versionSearch: "rv"
},
{ // for older Netscapes (4-)
string: navigator.userAgent,
subString: "Mozilla",
identity: "Netscape",
versionSearch: "Mozilla"
}
],
dataOS : [
{
string: navigator.platform,
subString: "Win",
identity: "Windows"
},
{
string: navigator.platform,
subString: "Mac",
identity: "Mac"
},
{
string: navigator.userAgent,
subString: "iPhone",
identity: "iPhone/iPod"
},
{
string: navigator.platform,
subString: "Linux",
identity: "Linux"
}
]

};
BrowserDetect.init();
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby chris » Sat Jun 25, 2011 9:43 pm

n mootools-cal-public.js function load_calendar(el,month,year) set "async" to true if the browser is IE and it will behave much better.


The problem with doing that is that if you then click on the nav buttons before all the months have finished loading it can break very easily.

I am wondering whether I should modify it to simply load all the months in one go....
I am also considering modifying it to use json as opposed to returning the html elements directly but can't decide if there would be any benefit in doing this.

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

Re: Month loading GIFs broken in IE9?

Postby kuczora » Mon Jun 27, 2011 3:24 pm

Are we talking about the next and previous month buttons?

Using the select to choose another room reloads the whole page, so that shouldn't be a problem.

I'll take a look at using JS to disable the next/previous buttons while the page elements are reloading.

Like the idea of using JSON instead of XML - does that mean AJAJ rather than AJAX? :D
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby kuczora » Wed Jun 29, 2011 5:43 pm

Well that's been an educational couple of days!

There are all sorts of work-rounds on the Internet which are meant to force IE to redraw the screen at a given moment - trouble is, none of them seem to work. :(

This morning I admitted to myself that the bottom line is the advice given by one of the first posts I looked at - to do a proper job, you need to make your code work asynchronously.

I've been working on the "public" calendar code, so the prime issue for now has been to stop the prev/next buttons from working while the calendars are loading. I've now got that working by taking the following steps in file 'mootools-cal-public.js':

1. Define a global variable called cal_count or somesuch.
2. Define a simple function to hide the cal_prev and cal_next divs and set cal_count to zero, and another to show the divs.
3. Call the 'hide' function in the onClick event that you attach to the prev/next buttons.
4. Set load_calendar() to work asynchronously.
5. Move the call to activate_dates() out of the onclick event, instead call it from within the onSuccess event handler of load_calendar() once the new HTML has been loaded.
6. Modify activate_dates() so that it increments the global cal_count and if it's greater than or equal to your global variable months_to_show then it calls the function that shows the hidden divs.

In other words, we count how many calendars have been drawn and after the last one we re-enable things. It seems to be working nicely with the public calendar, so now I'll apply the same changes to the admin version of the code.
Last edited by kuczora on Wed Jun 29, 2011 9:30 pm, edited 1 time in total.
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby kuczora » Wed Jun 29, 2011 9:26 pm

OK that's working for the admin calendar as well.
kuczora
 
Posts: 24
Joined: Thu Jun 23, 2011 1:52 pm

Re: Month loading GIFs broken in IE9?

Postby JRC » Mon Jul 11, 2011 7:25 am

I have recently had clients who were concerned that certain java content on their websites was not working. In each case, their PC had automatically upgraded to IE9. Microsoft has an advisory about this, and the fix is to upgrade your Java engine to the latest version. It seems that IE9 is not compatible with older java's.
JRC
 
Posts: 6
Joined: Thu Jul 07, 2011 8:08 pm

Re: Month loading GIFs broken in IE9?

Postby chris » Sun Jul 17, 2011 10:49 am

phew... I have finally managed to get a working version of IE9.
As far as I can tell the calendar works correctly on this version (I was concerned that it broke completely).
The only problem that I have found is that, as kuczora pointed out, the "loading" image is not shown.

I have not yet tested admin, I will do that later on this afternoon (it is Sunday and time to go to the beach ;) )

Thanks,

Chris
User avatar
chris
Site Admin
 
Posts: 1088
Joined: Mon Dec 17, 2007 7:42 pm
Location: Málaga, Spain

PreviousNext

Return to Bugs

Who is online

Users browsing this forum: No registered users and 1 guest

cron