Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

JavaScript

Posted by Raphael Bolius
Raphael Bolius
493 Points

jQuery - Basics

Hi! I am rather new to jquery and I have to work on a wordpress-based website with a jQuery confict. Does anybody know a tutorial where that kind of problems (jQuery conflicts, jQuery and wordpress, how to locate problems using the console...) are explained?

The problem in detail: The old website (wordpress, the theme was written in XHTML) was non-responsive.

Therefore I wanted to code a childtheme with some responsive design. It worked quite well, only the smartphone-menu was problematic. I used a plugin to save some time. After installing, it did not work at all. After installing a jquery-Update-Plugin it worked.

Today I transfered the website from the development-area to the server. Now the plugin does not work anymore. No version of jQuery can be used in order to make it work. :(

So I need to learn more about jQuery problems, the console, jQuery and wordpress and how to resolve jQuery-conflicts. Which tutorials do you suggest? Any idea?

Thank you for ideas! Raphael

Rafael silva
Rafael silva
23,877 Points

hey friend I have a suggestion for you follow along all this library and you get a lot of code in jQ http://api.jquery.com/

4 Answers

Eric Butler
Eric Butler
33,512 Points

Raphael, Glad to hear your issue fixed itself! I know it's especially hard when you're just beginning to learn a new language.

As for jQuery, here are a couple free online courses I took in addition to the ones here on Treehouse:

  • Try jQuery (CodeSchool): http://try.jquery.com/ - They do a good job of introducing jQuery and how to write it, plus give you real code-writing challenges to reinforce what they teach you.

  • jQuery (Codecademy): https://www.codecademy.com/learn/jquery - More code-writing practice. No videos here, though, just text-based challenges.

As for the console (and the Developer Tools in general), this may be helpful?:

  • Discover DevTools - http://discover-devtools.codeschool.com/ - You can either jump straight to chapter 3 about the console, or start at the beginning to get comfortable with the Chrome Developer Tools and work your way up. Note, the higher chapters about network performance and memory profiles are likely too complex (they were for me), so don't worry. Also this course was created a while ago, so some things in the tools area in your version of Chrome may not look exactly the same as the one in the video -- close enough though.

I hope these resources help a little. Really the best advice I can give you is to just keep doing a bunch of different kinds of these "beginner" courses and tutorials, because the simple act of doing it over and over will help you understand better than any single, "perfect" starter course can. Best of luck to you!

Eric Butler
Eric Butler
33,512 Points
Eric Butler
Eric Butler
33,512 Points

Your situation sounds like it could be either really simple, or totally problematic; there's no way to know unless someone experienced got in and looked at everything. Here's one thing that might help: jQuery uses the dollar-sign ($) as an alias for its full name (jQuery), but sometimes (though not often) other JavaScript libraries try to use that same alias, too. So the most-basic way to prevent conflicts with jQuery is to put all your jQuery code inside a function that (simplified to an extreme) shields it from conflicting with any other use of the dollar sign elsewhere in the code. Here's how you'd write that:

jQuery(document).ready(function($){
  // you can now put all your jQuery code in here and use the dollar sign,
  // knowing it won't conflict with any dollar signs used in other JavaScript on your site.
});

Best of luck to you!

Raphael Bolius
Raphael Bolius
493 Points
Raphael Bolius
Raphael Bolius
493 Points

Hi Eric, thank you for that answer. But that I already did. By the way: my initial problem is already resolved. But I do not exactly know how. ;) I tried and tried and tried and suddenly it worked.

I think my basic problem is, that I do not know where to start learning jQuery. The process was the same, when I started to learn CSS: Everything seemed to be VERY difficult. ;)

One of the most simple things that could help me, is learning how to use the console. But I did not find any tutorials concentrating on that topic. Maybe someone knows a tutorial that might be useful for me?

Thank you! Raphael

Raphael Bolius
Raphael Bolius
493 Points
Raphael Bolius
Raphael Bolius
493 Points

Hi Eric, thank you for the links, that looks good!