P2 Theme – Comment Threads broken on IE8

[kuprosa]

Clicking “Toggle Comments” or “Toggle Comment Thread” does not seem to work properly on IE8/WinXP: the comment threads are never revealed. It works fine on Firefox.

I confirmed this via https://p2demo.wordpress.com/ as well as my own installation, and on two different machines. Using WP 2.8.6 and P2 1.1.3.

[asdf]

I just started trying to figure this out myself, it seems to work in anything but IE8.

It looks like wp_footer is adding this:

jQuery(document).ready( function() {

			jQuery("#togglecomments").click( function(){
				jQuery('.discussion').toggle();
				jQuery('.commentlist').toggle();
				return false;
			});
		});

If that’s it, it seems to be a bug with .toggle in IE8. The solution could probably be: If the style is display none .show else .hide.

I haven’t even found where the code is coming from yet, but I’ll post the solution if I figure it out. If anyone else knows the answer, it would be appreciated.

[kuprosa]

I wonder if it has something to do with multiple div’s with the same ID. Posts with comments don’t properly validate, because of a repetition of i.e. <li id=”prologue-85″ … and

(that is, two tags both with id “prologue-85”)

[asdf]

I don’t think that’s causing it, but who knows with IE. It uses the classes .discussion and .commentlist.

I think it’s this issue that was solved here. .toggle ie8.

The file that would need altered is at /themes/p2/inc/js.php all the way at the bottom. For example change .toggle to .hide or .show, which makes me think it’s the issue above.

[kuprosa]

Dunno – I couldn’t quite figure out what was going on with those id’s, but I thought it might have something to do with it because, after noticing that those were the only two things causing my site not to validate, I tried changing them…and changing either one or the other caused the comments to behave in FF like they were in IE (on a side note, it would be nice to get that fixed too, since everything but that seems to validate properly :))

[donnie1979]

Does anyone have a solution for this problem? I see “jbrndt” is talking about altering a js.php file but I really don’t understand what needs to be changed. If anyone have a solution please be kind and post it and please include exactly what needs to be changed.
Thank you very much!

[tokey666]

I am going to have to revive this one. It has been a hot topic lately anyway.

The thing is, I do not believe it is the “Toggle”. To me, what jbrnt is talking about is the “Toggle Thread Comments” link that appears on the top right. I don’t believe that executes when a user posts a reply.

But I could be wrong!

Lets start somewhere though.
Does anybody know what actually EXECUTES when a user posts a reply?

Cuz maybe we can change it to this? https://stackoverflow.com/questions/975153/jquery-toggle-not-working-with-trs-in-ie

[justin01]

The following code applies for when your comments are hidden by default.

If it is not your case, you’ll have to simply add/remove some “jQuery('.commentlist').show();” and “jQuery('.discussion').show();“. So please keep that in mind, I didn’t test it for when your comment appears by default. You’ll just have to test and change the code.

To make the “Toggle comments” link work in IE8, take this following code (in p2/inc/js.php):

jQuery("#togglecomments").click( function(){
   jQuery('.discussion').toggle();
   jQuery('.commentlist').toggle();
   return false;
});

…and change it to…

jQuery("#togglecomments").click( function(){
var elem = jQuery('.commentlist:first');
if(elem.css('display') == 'none'){
	jQuery('.commentlist').show();
}else{
	jQuery('.commentlist').hide();
}
return false;
});

That’s it for now. I learned JQuery as I was doing this, so it may not be perfect. But on my site, this made the comments toggle on both Firefox and IE8.

[justin01]

The following code applies for when your comments are hidden by default.

And as for making the “Toggle comments” link for each entry work in IE8, go into p2/js/p2.js, line 538 (the $(".show_comments").click function), and change the whole function for:

$(".show_comments").click(function(){
    var id = $(this).attr('id');
    var threadentry = jQuery('#' + id + ' ul.commentlist');
    if(threadentry.css('display') == 'none'){
        $(threadentry).show();
    }else{
        $(threadentry).hide();
    }
    return false;
});