Code Styling Project

It’s not a bug, it’s always a feature.
  • Deutsch
  • English
  • rss
  • Home
  • Blog
  • Imprint
  • Development
  • Manuals
  • Bugfixing

jQuery 1.3.2 causes problems at IE 8

codestyling | 20. June 2009 | 21:08

I have noticed after a lot reports from different users, that something went wrong while using jQuery 1.3.2 and Microsoft Internet Explorer 8 in normal v8 mode (not compatible mode). The effect of this bug is very annoying, all your handler using methods to show and hide portions of you webpage won’t do anything or if they are interacting, than they are not doing what you want.
Again i did a deep investigation what is the reason for and also checked, if this is known currently. I found it and will show a workaround here.

First of all to describe the type of issue more precisely i will illustrate the HTML code and also the related jQuery code that will be connected to show/hide some portion of the markup.

HTML Markup

HTML
1
2
3
4
5
6
7
8
9
10
<a id="rowtoggler" href="#rowtoggler">Toggle rows</a>
<table>
  <tr><td>First row (always visible)</td></tr>
  <tr class="rowtoggler" style="display:none">
    <td>Second row (hidden initially, can be toggled)</td>
  </tr>
  <tr class="rowtoggler" style="display:none">
    <td>Third row (hidden initially, can be toggled)</td>
  </tr>
</table>
timing: 0.009s

jQuery Code

Javascript
1
2
3
4
5
6
jQuery(document).ready( function($) {
  $('#rowtoggler').click(function() {
     $('.'+$(this).attr('id')).toggle();
     return false;
  });
});
timing: 0.004s

What happens if you click the anchor normally? The table rows will be shown or hidden based on their current status. But at IE8 this doesn’t happen, simply nothing happens.
But what is reason therefore, because the same markup and code works well in IE8 if the page will be shown in compatibility mode which simulates IE7.

I found at the jQuery Trac the following IE8 related bug entry: $().toggle() does not work with <tr> in IE 8 and did my own investigation based on that report.

Results of Investigation

I started to check what happens if i test the element itself using alert($(elem).is(’:visible’)) and also alert($(elem).is(’:hidden’)). I was shocked about the alert, that all rows with inline style set to display:none will be reported as visible! It seems, that also the pure toggle() method makes this test and that’s why nothing happens. Following results are the outcome:

  1. method .is(’:visible’) doesn’t work as expected
  2. method .is(’:hidden’) doesn’t work as expected
  3. method .toggle() doesn’t work as expected (may be the result of above named method failure)

Now based on this bad behavoir of IE 8 a suitable workaround has to be taken instead, that ensures the prior proper working browser and also make IE 8 working as expected.

jQuery Workaround for all Browser

The workaround keeps the correct function for all prior unaffected browser but also ensures the proper working of IE8 in relation to the toggle() function. I have not yet created workaround for is(’:visible’) or is(’:hidden’) but i think, this could be easly done according to the show solution.

PHP
1
2
3
4
5
6
7
8
jQuery(document).ready( function($) {
  $('#rowtoggler').click(function() {
     $('.'+$(this).attr('id')).each(function(i, elem) {
	$(elem).toggle($(elem).css('display') == 'none');
     });
     return false;
  });
});
timing: 0.037s

I hope, that this will be fixed as soon as possible. But i’m also afraid, that projects like WordPress won’t update as fast as possible their bundled jQuery scripts. So the only way to get arround this issue(s) is to write more code as needed to get the same results.

Categories
English, jQuery at WordPress
Comments rss
Comments rss

« “Page Columnist” - Posts and Pages at Column Layout Codestyling Localization supports now BuddyPress and bbPress »

18 responses    Leave a comment

Sroddy

Sroddy

23.06.2009 | 05:35

Hi, just my two cents, I used this solution to collapse rows

Javascript
1
2
3
4
5
$('#subcribed_matches tbody tr.date_group').click(function() {
	$(this).siblings().toggle();
	$(this).children('th').toggleClass("expand_group");
	return false;
});
timing: 0.003s

To get around the Explorer 8 bug i’ve created a “hidden” class in my css with just:

CSS
1
2
3
.hidden {
display:none; 
}
timing: 0.010s

and then used these lines of code instead of the previous ones:

Javascript
1
2
3
4
5
$('#subcribed_matches tbody tr.date_group').click(function() {
   $(this).siblings().toggleClass("hidden");
   $(this).children('th').toggleClass("expand_group");
   return false;
});
timing: 0.004s

hope this helps

reply »

Josh

Josh

01.09.2009 | 22:31

Using toggleClass with a CSS style of “display:none” also worked for me, instead of using toggle().

reply »

Dan Berlyoung

Dan Berlyoung

14.10.2009 | 16:38

Thanks for the post, it gave me the information I needed. I was using an inline bit of JS to toggle a row in a table like this:

Javascript
1
onclick="$('foo').toggle();"
timing: 0.003s

I then changed it to this based on your code and it worked.

Javascript
1
onclick="$('foo').toggle($('foo').css('display')=='none')"
timing: 0.002s

Thanks again.

reply »

Tess

Tess

26.01.2011 | 17:44

thank you very much Dan. Your solution worked for me.

reply »

stevo

stevo

14.12.2009 | 14:51

I know this isn’t really a fix, but to get round IE8 and jquery issue i’ve had to force IE7 rendering by including the meta tag:
[meta http-equiv="X-UA-Compatible" content="IE=EmulateIE7" /]
(obviously with gt/lt brackets).

well done M$, roll on IE9….

reply »

vinoth

vinoth

01.12.2010 | 18:14

damn cool its working for me…thanks stevo did a good job…

reply »

Jquery

Jquery

27.04.2012 | 12:22

You are right

reply »

Hobnob

Hobnob

12.02.2010 | 13:04

Hi,

Just really wanted to say thanks for the great post. You’ve saved me hours of debugging and hair ripping :)

reply »

Abraxas

Abraxas

23.10.2010 | 01:14

How many millions of developer hour is MS wasting every year. It’s hard to explain to your clients: It’s MS CAUSING the problem.
This article should be titled: IE 8 causes problems using jQuery 1.3.2

I’m convinced by now, MS is doing this on purpose.

reply »

jay

jay

10.11.2010 | 01:44

No they are not doing on purpose. They are just very stupid. Or better said very well paid stupids.

reply »

Rajeev Sharma

Rajeev Sharma

19.05.2011 | 06:21
Javascript
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
jQuery(document).ready(function( $ ){
		//borrowed from jQuery easing plugin
		//http://gsgd.co.uk/sandbox/jquery.easing.php
		$.easing.backout = function(x, t, b, c, d){
			var s=1.70158;
			return c*((t=t/d-1)*t*((s+1)*t + s) + 1) + b;
		};
 
 
 
		$('#screen').scrollShow({
			view:'#view',
			content:'#images',
			easing:'backout',
			wrappers:'link,crop',
			navigators:'a[id]',
			navigationMode:'sr',
			circular:true,
			start:0
		});
	 });
timing: 0.006s

hi this is the code and not proper work in IE browser. Please help me. Images are displayed in proper sequence in mozila but not in IE. Please reply me ASAP.

reply »

codestyling

codestyling

10.06.2011 | 14:24

Sorry, this is too less info. If I could spend time on it, it would require a full running example not only pieces of it.

reply »

André

André

31.05.2011 | 23:13

Thanks for the advice man!!!
You saved me from a headache!!! \o/

reply »

Satanarchist

Satanarchist

21.07.2011 | 06:50

AAAAAaaaaaaa
Ive been coding my new webpage and its ok in non sucky browsers (aka IE) and even in IE9, but in IE8 and previous versions ir crashes completely
Jquery fails completely to load, when I debug it with IE9’s tools, in the line where jquery starts it says something like:

SCRIPT5007: El valor de la propiedad ‘$’ es nulo o no está definido, no es un objeto de función
publikuns.com.mx, Línea 25 Carácter 1

Translated: SCRIPT5007: The value of the propoerty ‘$’ is null or isn’t defined, it’s not a function object publikuns.com.mx, Line 25 Character 1

So, WTF??? Any suggestions? I could not use that useful ‘hack’ stevo mentioned, cuz my site is designed with the display:table… properties and IE7 does not support them

Im using some plugins for my site, such as Coda Slider, so I tried and removed them one by one, then all of them, and the problem was still in the same line, which is the folowing snippet:

$(function() {
$(”#inicio”).addClass(”selected”);
});

Im working with the latest jquery version (1.6.2) but I also tried with 1.5.1 I think… I cannot guess what the problem is… does anyone have suggestions??

reply »

Satanarchist

Satanarchist

21.07.2011 | 06:58

WOOOOOOOOOOOOHOOOOOOOOOOO
I solved the goddamn problem!!!
I hope someone finds it useful:

In your tag
instead of using type=”application/javascript”
change it to type=”text/javascript”

and VOILA!

reply »

Farhan

Farhan

22.12.2011 | 13:10

i have a same problem.
how can i solve this.
i have click to next button then after slide is working fast. but slide working is normal before click
i use this function .scrollable and this .autoscroll

reply »

Tad

Tad

13.03.2012 | 21:29

Thanks for this. It solved my problem and only took seconds to implement.

reply »

Vladimir

Vladimir

09.06.2012 | 02:03

It’s almost exactly 3 years since this was originally posted and most of the world moved on from both jQuery 1.3.2 and IE8. But not entirely! There are still loads of legacy code left and this has been extremely helpful for me today. Thanks a bunch for taking time to document this 3 years ago! :D

reply »

You can use these tags : <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Navigation

  • Common
  • jQuery at WordPress
  • WordPress (US)

Search

Newer Posts ...

  • IDN Sites, WordPress Admin and JSON problems
  • Plugin WP System Health is now translatable and polished
  • WPTouch iPhone Theme and the crippled translation
  • Codestyling Localization and PoEdit are compatible now
  • Codestyling Localization supports now BuddyPress and bbPress

Older Posts ...

  • “Page Columnist” - Posts and Pages at Column Layout
  • WordPress 2.8 changes the metabox model for admin pages
  • How to use Wordpress Metaboxes at own plugins
  • PHP function setlocale() … and numbers can be damaged
  • WordPress Localization - Features and future Development
rss Comments rss valid xhtml 1.0 design by jide powered by Wordpress get firefox