Lightbox Component and IE 6 & 7 Compatibility

[Jonathan Hung]

Hello everyone,

We've continued our investigation into IE compatibility with the Lightbox
component focusing on some of the problem areas we experienced earlier:

1. DIV focus doesn't work on IE
2. JSUnit 2.2a may not be compatible with Dojo


#1 Div Focus:

IE 6 & 7 follows the DOM 1.0 and 2.0 spec in that it will not focus any
element that is not a form element (checkbox, radio button etc.) or an
anchor. With this in mind, we changed the Lightbox Javascript to put focus
on the anchor inside the first thumbnail by using tabindex. This required
dynamically changing the tabindex each time the user moved around the
Lightbox so that onblur returning to the Lightbox would maintain what was
last selected.

However dynamically changing the tabindex via Javascript would create
unexpected tabbing orders if the user first focuses on another component on
the UI. Also Firefox created some strange behaviour by not styling
components properly after we modified tab index.

All of this experimentation stems from the fact that IE does not allow
focusing of DIVs (as per DOM spec). In a quick experiment, we tried the
MochiKit Javascript Toolkit and it appears that MochiKit's event handling
captures DIV focus event, even if the Browser does not. So it's a
possibility that we can use MochiKit instead.

We will continue investigating Dojo's event handling to see if it is capable
of capturing DIV focus events in a browser independent manner.

!! None of this code has been committed to SVN since it was all experimental
and the tests did not pass.



#2 JSUnit 2.2a may not be compatible with Dojo

JSUnit 2.2a now works with Dojo in IE. This is no longer an issue.


Feel free to post questions/comments to this thread!

- Jonathan.


On 13/06/07, Jonathan Hung <jonathan.hung at utoronto.ca> wrote:
>
> During some recent testing, we have discovered that the Lightbox component
> is not completely functional in Internet Explorer. From a User Experience
> perspective the component is buggy in IE, though in certain circumstances it
> can work the way we expect,
>
> The following are the issues we've encountered in the past week:
>
> 1. DIV focus
> Currently in Firefox 2+, when you tab to the Lightbox component the first
> thumbnail would become selected to indicate that the user can perform
> actions on the thumbnails. However in IE 6 & 7 focusing on that DIV is
> inconsistent and therefore causing the resulting arrow and CTRL key actions
> to not work.
>
> If you're interested in more detail and how to get the component to work
> in IE before we get a fix in place, please let me know. This is a UX problem
> in IE and we are currently investigating solutions.
>
> 2. JSUnit tests do not run in IE 6 & 7 if Javascript test code is located
> in a seperate file.
> Currently the Lightbox unit test is separated into two files:
> LightboxTests.html and LightboxTests.js. With all the test Javascript code
> in the LightboxTests.js file, JSUnit will not execute the tests in
> Internet Explorer 6 & 7.
>
> One way to overcome this is to copy the contents of LightboxTests.js into
> LightboxTests.html. There may be another solution, but more research is
> required. Ideally we would like to have our test Javascripts residing in a
> separate file for maintainability and separation of function.
>
> 3. JSUnit 2.2a may be incompatible with Dojo
> During our testing, we discovered that JSUnit 2.2 Alpha (latest
> downloadable release) is not compatible with IE 7. Attempting to run the
> tests will yield "dijit is undefined" or "fluid is undefined" errors. JSUnit
> 2.1 (the last stable release) appears to work as expected with IE7. A
> solution would be to use version JSUnit 2.1 instead of JSUnit 2.2 for our
> testing.
>
> 4. Lightbox component will only work for IE 7 if served from Tomcat
> IE 7's security features prevent our component from being loaded directly
> from the hard drive. Therefore the component needs to be deployed into
> Tomcat and served up. The obvious disadvantage to this is that IE 7 testing
> will require users to have Tomcat installed. Luckily if you are testing just
> the component, you don't need to have any Sakai running which can speed
> things up considerably.
>
>
> With this in mind, if you are planning on demoing the component, try to
> use Firefox 2.0+ if possible. If using IE 6 or 7 is absolutely critical,
> please let me know and I'll walk you through the process to get it working.
>
> We are currently doing research and testing various solutions. Getting
> Lightbox working in IE is very important (goes without saying) so we hope to
> get the most critical issues resolved soon.
>
> Questions? Comments? Need more detail? Let us know!
>
> Take care,
>
> - Jonathan.
>
> --
> Jonathan Hung / jonathan.hung at utoronto.ca
> University of Toronto - ATRC
> Tel: (416) 946-8312




-- 
Jonathan Hung / jonathan.hung at utoronto.ca
University of Toronto - ATRC
Tel: (416) 946-8312
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <https://lists.idrc.ocad.ca/pipermail/fluid-work/attachments/20070620/8686f024/attachment.htm>