OK, this is a wierd one for y'all, and I hope someone can help. I'm stumped.
I was trying to install the Thickbox plugin for WordPress, and it wasn't working at all. Or, more correctly, it was working in IE but not in FireFox. Rather than opening the lightbox-style windows it was supposed to, the links just redirected the browser to the content like a standard link. After satisfying myself that I'd uploaded all the content and nothing had been corrupted, I decided to follow standard WordPress troubleshooting and deactivate plugins until the Thickbox one worked.
It didn't take long; when I deactivated my weather plugin, the Thickboxes started working, but because there was a call to an unavailable function in the sidebar, the page just stopped loading after a point and I was left sans-sidebar and sans-footer. No problem, just remove the reference, right? Wrong. Once I removed the reference to the weather function, the page drew itself and the Thickboxes didn't work again.
This continued for some time with various plugins until it dawned on me that there might be something in the footer, not the plugins, that was causing the problem with Thickbox. Sure enough, the only code in the footer that wasn't standard WordPress was the Performancing Metrics code.
So here's the deal: I don't want to lose the Performancing code, but I cannot fathom what about it would prevent the Thickboxes from working in FireFox. Can someone tell me how to get around this problem?
Blog:
http://www.dragonflyeye.net/blog
I'm going to try the
I'm going to try the Thickbox plugin on my WordPress blog and I'll see if I can duplicate this.
JavaScript error
Ok, so I enabled the plugin on my blog (blog.davereid.net) and changed the image under the "PMetrics 0.4 and Football" post to be thickbox-enabled. When the Metrics code was present and enabled, the thickbox did work in IE but not in Firefox. When it was not present or disabled, the thickbox script did work properly in both browsers.
When I took a look at the JavaScript Console, I noticed this error when I clicked on the thickbox-enabled image:
Error: event has no properties
Source File: http://davereid.net/blog/wp-content/plugins/thickbox/jquery.js
Line: 723
I'm also guessing that this is being caused by something in basicstats.js with tracking links and the onclick functions:
function z_init() {
...
if (document.links) {
var x;
var link;
var links = document.links;
for (x = 0; x < links.length; x++) {
link = links[x];
// save old onclick, if any
if (link.onclick) {
link.oldonclick = link.onclick;
}
link.onclick = z_linkonclick;
}
}
...
}
function z_linkonclick () {
var link = this;
// check for old handler
if (link.oldonclick) {
// check if function
if (typeof (link.oldonclick) == 'function') {
// execute function, if false cancel (undefined is treated as true by the browser)
if (link.oldonclick () == false) {
return false;
}
}
}
z_tracklink (link.href, false);
return true;
//don't do this because it breaks open in a new window or tab
//hopefully firefox will eventually be fixed to load my img.src before it navigates to a new page
//follow this link in 100ms so that image source is processed
//window.setTimeout('document.location="' + link.href + '"', 100);
//return false;
}
jquery.js:
function fixEvent(event) {if (event) {
event.preventDefault = fixEvent.preventDefault;
event.stopPropagation = fixEvent.stopPropagation;
}
return event;
};
Holy crap! JQuery is a
Holy crap! JQuery is a [insert something here] to try and debug...
Something to note, the thickbox script works if you click the thickbox image once (it loads the image directly, not in thickbox), and click the back button, then try clicking the image again. The thickbox works now. There's just some weird stuff going on...
Foiled by alert()
Additionally, if I add one JavaScript alert(...) to the $.ready function in JQuery, it works. Arg. I sent a detailed e-mail to the JQuery and Thickbox creators to see if they can help me figure out what's going on.
Solution
Replace the following code in wp-content/plugins/thickbox/thickbox.js:
//add thickbox to href elements that have a class of .thickbox$(document).ready(function(){//when the document is loaded
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
});
with this:
addEvent( window, "load", TB_init );
function TB_init() {
$("a.thickbox").click(function(){
var t = this.title || this.innerHTML || this.href;
TB_show(t,this.href);
this.blur();
return false;
});
}
The $(document).ready is not performing as expected. This isn't the only time this has come up with JQuery.
Great work Dave!
Great work Dave!
Dude, You Rock!
This is a big, big fix!!! (For me, anyway.) I can't believe you got that done so quickly.
Thanks very much for the edit!
JQuery and other scripts
There seems to be a conflict with JQuery's .ready function when there's another kind of script (usually JavaScript) tag inside the body tag. There's no problem when the other script(s) are in the header. I posted the result to the JQuery and Thickbox developers and the JQuery discussion list. After I had posted someone else had a similar problem.
Update - JQuery not at fault
In the metrics script (basicstats.js), the z_linkonclick function needs to accept an event parameter that can be passed to the link.oldonclick function. This is why the Thickbox plugin wasn't working. I reverted the Thickbox plugin "fix" and made this change to a local copy of the Metrics script on my laptop and it worked perfectly in Firefox and IE. Note the two starred lines:
** function z_linkonclick (e) { **var link = this;
// check for old handler
if (link.oldonclick) {
// check if function
if (typeof (link.oldonclick) == 'function') {
// execute function, if false cancel (undefined is treated as true by the browser)
** if (link.oldonclick (e) == false) { **
return false;
}
}
}
z_tracklink (link.href, false);
return true;
//don't do this because it breaks open in a new window or tab
//hopefully firefox will eventually be fixed to load my img.src before it navigates to a new page
//follow this link in 100ms so that image source is processed
//window.setTimeout('document.location="' + link.href + '"', 100);
//return false;
}
In the same fashion, the z_comment_postonclick function needs to be modified as well.
Post new comment