Help! Script working in Chrome but not FF or IE!

JavaScript
1

Hi Guys,
I have been trying to integrate Big Cartel into a wordpress site using their external API but I’ve got some issues getting the script working in a wordpress page. It seems to be working how I want it in Chrome and Safari but not in FF and IE? The coding for the page is below… Any ideas why this wouldn’t work in those browsers?

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
	
	<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1" />
	<meta http-equiv="Content-Language" content="en-us" />
	
	<link rel="stylesheet" href="http://www.denimgeek.com/wp-content/themes/atlantica/" type="text/css" media="screen" />


<link rel="EditURI" type="application/rsd+xml" title="RSD" href="http://www.denimgeek.com/xmlrpc.php?rsd" />
<link rel="wlwmanifest" type="application/wlwmanifest+xml" href="http://www.denimgeek.com/wp-includes/wlwmanifest.xml" /> 
<link rel='index' title='Denim Geek' href='http://www.denimgeek.com' />

<meta http-equiv="content-type" content="text/html; charset=UTF-8" />


<link rel="stylesheet" type="text/css" href="http://www.denimgeek.com/wp-content/themes/atlantica/style.css" />	
<link rel="shortcut icon" href="http://www.denimgeek.com/wp-content/themes/atlantica/library/img/page/favicon.gif" type="image/gif" />
<link rel="stylesheet" href="http://www.denimgeek.com/wp-content/themes/atlantica/library/styles/scaler/1024.css" type="text/css" media="screen" />

<link rel="stylesheet" href="http://www.denimgeek.com/wp-content/themes/atlantica/library/styles/custom/classic.css" type="text/css" media="screen" />

<link rel="alternate" type="application/rss+xml" href="http://www.denimgeek.com/feed" title="Denim Geek Posts RSS feed" />

<link rel="alternate" type="application/rss+xml" href="http://www.denimgeek.com/comments/feed" title="Denim Geek Comments RSS feed" />

<link rel="pingback" href="http://www.denimgeek.com/xmlrpc.php" />

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8">    var subdomain = 'beeteeth';    $(function() {      function findImage(url, size) {            if(!size) return url;            var ext = url.match(/\\.(\\w{2,4}$)/)[1];            var dir = url.substr(0, url.lastIndexOf('/') + 1);            switch(size.toLowerCase()) {                case 'large':                    return dir + '300.' + ext;                case 'medium':                    return dir + '175.' + ext;                case 'thumb':                    return dir + '75.' + ext;                default:                    return url;            }      }      $.getJSON('http://api.bigcartel.com/' + subdomain + '/products.js?callback=?', function(products) {        $.each(products, function(i, product) {          console.log(product);          $('#products').append('<li><img src="' + findImage(product.images[0].url, 'large') + '" /><br/><a href="http://' + subdomain + '.bigcartel.com' + product.url + '">' + product.name + '</a></li>');        });      });    });  </script>

</head>  <body>  <ol id="products"></ol></body></html>
2

I simplified the head section and took most things out but I’m still getting the same. Firefox developer keeps saying ‘console not defined’ and it doesn’t work in IE8 but does after I refresh for debug?! It’s driving me crazy!

3

Simplified code… Any ideas? :confused:

<html>
<head>


<link rel="stylesheet" type="text/css" href="http://www.denimgeek.com/wp-content/themes/atlantica/style.css" />	

<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js" type="text/javascript"></script><script type="text/javascript" charset="utf-8">    var subdomain = 'beeteeth';    $(function() {      function findImage(url, size) {            if(!size) return url;            var ext = url.match(/\\.(\\w{2,4}$)/)[1];            var dir = url.substr(0, url.lastIndexOf('/') + 1);            switch(size.toLowerCase()) {                case 'large':                    return dir + '300.' + ext;                case 'medium':                    return dir + '175.' + ext;                case 'thumb':                    return dir + '75.' + ext;                default:                    return url;            }      }      $.getJSON('http://api.bigcartel.com/' + subdomain + '/products.js?callback=?', function(products) {        $.each(products, function(i, product) {          console.log(product);          $('#products').append('<li><img src="' + findImage(product.images[0].url, 'large') + '" /><br/><a href="http://' + subdomain + '.bigcartel.com' + product.url + '">' + product.name + '</a></li>');        });      });    });  </script>

</head>  <body>  <ol id="products"></ol></body></html>