Creating this simple AJAX Based WordPress theme and Ive created a custom lightbox for it. All is going well but the dreaded IE has now set into play.
For some reason the content isn’t loading in IE (only tested IE8).
First off, here’s the link to the theme thus far: http://themes.thefinishedbox.com/portfolio/ bare in mind it’s still in early stages so will look even worse in IE anyway.
Click the bottom right icon on the image hover.
The class .postExpand
contains the permalink to the post, while the ID #postEntry
is what I load via AJAX.
Here’s the jQuery for it, if you want a better look you can see the raw file here: http://themes.thefinishedbox.com/portfolio/wp-content/themes/portfolio/js/custom.js
$(function() {
$('.postExpand').click(function(e) {
e.preventDefault();
$.ajaxSetup ({
cache: false
});
var href = $(this).attr('href');
var loader = "<div id='loader'></div>";
var loadurl = href + ' #postEntry';
$('body').prepend('<div id="overlay" />');
$('#overlay').animate({opacity: 0.8}, 400);
$('body').prepend('<div id="lightBox" />');
$('#lightBox').html(loader).load(loadurl, function() {
$('#postContent').jScrollPane();
$(this).css({backgroundColor: '#fff'});
});
$('#closeBox > div').live('click', function() {
$('body #lightBox').remove();
$('body #overlay').animate({opacity: 0}, 400, function() {
$(this).remove();
});
});
$('body #overlay').mouseup(function() {
$('body #lightBox').remove();
$(this).animate({opacity: 0}, 400, function() {
$(this).remove();
});
});
});
});
I believe the problem lies with the var loadurl
as I can change that to 'http://themes.thefinishedbox.com/portfolio/'
and it will load.
Anyone have any ideas what the problem may be?
EDIT
This doesn’t work either:
var href = $(this).attr('href');
var loadurl = href;
Your loadurl statement has a space too many:
versus
Problem was the permalink structure, possibly a bug with WordPress 3.1 in IE.
It was display /category/ in IE when it shouldn’t. Since the theme doesn’t require categories I stripped the permalink structure to just /%POSTNAME%/ and it resolved the issue.