My website is responsive. The blog section uses a subdomain pointing to Tumblr, but the cross-domain version of Respond.js isn't working. I'm doing this:
<script src="http://www.stevechab.com/scripts/respond.min.js"></script>
<link href="http://www.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="http://www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<script src="http://www.stevechab.com/scripts/respond.proxy.js"></script>
I assume the problem is that respond.proxy.gif and respond.proxy.js aren't on blog.stevechab.com ... but doesn't that defeat the purpose of having a cross-domain version of Respond.js? Is my assumption right, or am I missing something? Is there a work around for this?
Note: I tried http://www.tumblr.com/themes/upload_static_file ... no dice.
To quote the respond.js
readme:
Respond.js works by requesting a pristine copy of your CSS via AJAX, so if you host your stylesheets on a CDN (or a subdomain), you'll need to upload a proxy page to enable cross-domain communication.
– my emphasis. The cross-domain version is meant to enable you to process stylesheets loaded from another domain than the one respond.js
is working on. In the case of Tumblr, however, you have a third domain added to the mix: static.tumblr.com
, where your proxy script and gif have landed. That cannot, and will not, work.
@Steve Chab,
There are two reasons respond.js & respond.proxy.js were not working for you.
You had the respond-proxy.html file in the origin domain, whereas the file should have been served from your sub-domain (blog.stevechab.com) or any other external domain.
There seems to be a bug with respond.js / respond.proxy.js when linking to a css file with a relative url. To fix it, use an absolute url. Your main site uses a relative url for the css stylesheet, and your blog an absolute url.
- Note: Bug is caused by respond.proxy.js ajax/xml functions
Please find below, the re-vised working markup to get respond.js & respond.proxy.js working on your website.
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="http://www.stevechab.com/styles/styles.css">
<!--[if (lt IE 9) & (!IEMobile 7)]>
<link href="//blog.stevechab.com/scripts/respond-proxy.html" id="respond-proxy" rel="respond-proxy">
<link href="//www.stevechab.com/scripts/respond.proxy.gif" id="respond-redirect" rel="respond-redirect">
<![endif]-->
</head>
<body>
<!-- Your content goes here. -->
<!--[if (lt IE 9) & (!IEMobile 7)]>
<script src="//www.stevechab.com/scripts/respond.min.js"></script>
<script src="//www.stevechab.com/scripts/respond.proxy.js"></script>
<![endif]-->
</body>
</html>
- Respond.js on GitHub
- http://github.com/scottjehl/Respond
- Respond.js Plugin for Wordpress
- http://wordpress.org/plugins/respondjs/
- Respond.js used by Twitter Bootstrap
- http://getbootstrap.com/getting-started/