ajax content not loading on ie7 and 8

Question

it is working on all browsers but ie7 and ie8. The content dosn't seem to load into the site when we press a menu item while it does work on all major browsers, not sure if it is due to the supersised plugin (?)

I can't get my head around it and I'm kinda stack!

p.s. If it can help anyhow: I am loading the content once supersized animation has finished, you can find this at the end of supersized.shutter.min.js

Any takers please? Thanks!

Answer 1

The problem being with IE parsing the document was causing this issue. Since I am using wordpress i manage to get around the issue by calling the header and the footer with ajax.

<?php if (!is_ajax_request()) get_header(); ?>
  -----
 <?php if (!is_ajax_request()) get_footer(); ?>

in my function.php i have:

 function is_ajax_request() {
  return (!empty($_SERVER['HTTP_X_REQUESTED_WITH']) &&            strtolower($_SERVER['HTTP_X_REQUESTED_WITH']) == 'xmlhttprequest');
 }

Done :)

Answer 2

The error in my firebug is with this line:

jQuery(".content").lionbars();

maybe enclose it in:

jQuery(document).ready(function(){
  jQuery(".content").lionbars();
}):

Answer 3

$(".content").each(function(){
     this.lionbars();
 });

This would do the trick. refer jquery.min.js above the block where this script is called.

Answer 4

Just had a similar problem myself. Is the html that gets returned by the ajax call valid html? If it is not then IE8 and IE7 will not display it (would be nice if they gave an error message but they dont).

One way to confirm whether this is the issue is if you can simplify the ajax content to be something like:

<p> hello world</p>

If this then starts showing up in IE7/8 then you need to fix the html that your ajax load returns.