Backstretch: Jquery errors with new version of Roots

1

I’ve used Backstretch successful with earlier versions of Roots. But with the most current version, I’m getting errors:

Uncaught ReferenceError: jQuery is not defined (jquery.backstretch.min.js)
Uncaught TypeError: Object [object Object] has no method 'backstretch'  (index)

Here’s what I’ve done in the past with Roots and Backstretch, but that is now not working. I would appreciate any insights:

  1. In /assets/js/vendor, I drop in jquery.backstretch.min.js

  2. In /lib/scripts.php, I add the following code to the very end of the file:

function load_backstretch_js() {
  wp_enqueue_script('backstretch', get_template_directory_uri() . '/assets/js/vendor/jquery.backstretch.min.js', false, null, false); 
}
add_action('wp_enqueue_scripts', 'load_backstretch_js');
  1. At the bottom of /templates/footer.php I enter the Backstretch script
<script type="text/javascript">
  $(".backstretch-img").backstretch("/assets/img/header-img.jpg", {centeredX: true}); 
</script>
2

I’ve been troubleshooting this for a few hours and decided to start over from scratch and add a new localhost, install wordpress and load up a working theme that I developed with Roots Classic and Backstretch. And strangely, I’m getting the same error. Also my Typekit call is throwing up a 403 Forbidden error. However when I load the localhost website that I developed that theme for, everything works a-ok–Typekit and Backstretch–no errors.

In between the development of the theme using Backstretch successfully and these new installs, I installed Grunt, Composer and Git according to the videos created by @ben and @swalkinshaw. Is it possible that something in the command line is interfering with the new installs?

3

With Grunt set up, and backstretch.js in your js folder, it’s actually being loaded into the main js file, so you shouldn’t need to load it via Wordpress anymore.

As it mentions in this section, Javascript files are automatically minified and concatenated: http://roots.io/roots-101/#theme-assets

Check to make sure there aren’t errors when you run grunt or grunt watch. Many times plugins you download like this don’t pass JSHint for one reason or another, so they should not be checked. If you are getting an error when running grunt, go into your grunt file, find the jshint section and you should see a line like ‘assets/js/vendor/*’, add after that line ‘!assets/js/vendor/backstretch.js’, the ! being to ignore that file. Then don’t enqueue the script with Wordpress.

4

I fixed the display of your code; click on edit if you want to see the correct markdown markup for next time.

The only things I would add to @kalenjohnson’s comment is that with plugins in general, it’s worth checking any issues that might help out; and also check that it has been updated to run with the latest jQuery (if not try jQuery migrate).

5

Thanks @Foxaii and @kalenjohnson for your responses.

Is there a way to uninstall Composer, Grunt, NPM and the rest? I’m getting 403 Forbidden errors for Typekit on every new virtual host install since setting up my super fancy Roots dev environment. And I’m not able to get to the bottom of the problem with Backstretch …

I’m concerned that something I did in the command line to get Composer, Git, Grunt, etc. set up is interfering with the localhost MAMP setup. And I don’t know enough about Command Line to troubleshoot it. :frowning:

I’m at the point where I’m ready to give up on the new super fancy dev environment and return to Roots Classic so that I can get some work done. I am loathe to do a clean install of my OS … is there another way?

Many thanks.

6

I’m having a really hard time thinking of any scenario where either Composer, Grunt, npm, or Git could cause 403 errors for an external URL request. That’s just your browser doing a normal request. Seems like the only thing that could 403 errors for a domain like typekit could be something to do with local DNS, hosts file, proxy/caches. None of which should be affected by the tools you listed.

Anyway if you want to uninstall things:

Node/npm: http://stackoverflow.com/questions/5650169/uninstall-node-js-using-linux-command-line
Grunt: npm -g rm grunt
Composer: which composer then just rm the path you get (might need sudo).
Git: depends how you installed it. Homebrew has brew uninstall (brew uninstall git)

7

Thanks @swalkinshaw … I’m totally stymied. I did a clean install of Mac OS 10.8.5 (no composer, grunt, npm or git) and I’m still getting the 403 errors for typekit and the backstretch / jquery errors. So your hunch was right on that account. I’ve checked file permissions and they are ok. I’ve tried firing up the dev sites from various Internet connections. Doesn’t matter.

I haven’t monkeyed with any of the WP core files. These are fresh installs of v3.6.0.

I contacted the developer of the tool I use to create the virtual hosts with MAMP. He says that the issue sounds like a theme problem. “The only thing VirtualHostX does is tell your web server to respond to custom domain names. It doesn’t do any “active” processing like Apache or PHP. Once you’ve configured it, it gets out of the way. So I’m not sure how VHX could be causing the problem you’re seeing.”

I’m hitting a wall here. What would you recommend? What could suddenly be interfering with new installs? Where do I look? Where are the hosts files and caches that you mentioned?

8

I’ve had 403 issues locally as well. I would make sure that you have correct permissions all the way up to the www folder, or whatever the root web folder is for you. Also, since it’s local, to troubleshoot, you could try giving full read/write/execute permissions to your web folder recursively so that you know it’s not a permissions issue. It sure sounds like a permissions issue with a 403 error.

Also check who the owner of the Wordpress and www folder is. If Apache does not have access to the folder, you’ll get a 403.

9

If you just go directly to the Typekit URL in your browser does it work? The real issue here is getting a 403 forbidden for an external domain.

Try some diagnostics like:

dig use.typekit.net
ping use.typekit.net
traceroute use.typekit.net

Paste the result of those.