Use jQuery selectors to locate and select elements on the page. jQuery selectors operate much like CSS3 seletors. Start out simple by selecting elements by tag, DOM id, or class name. Then get more advanced and select form elements based on their current state, and complex n-th child selectors. Additional notes: As a result of Drupal 7 using jQuery in no conflict mode, the jQuery object is not automatically assigned to the global $ symbol. The easiest way to get around this in Firebug or Webkit Inspector is to just use jQuery('element'); or do $ = jQuery; and then use the $ as per usual. If you take a look at the JS files in Drupal 7 you'll see that they almost all use an anonymous closure in order to assign the $ variable. Something like the following. (function ($) { // Add your code here and use $ as per usual. })(jQuery);

First look at basic fundamentals of jQuery's syntax and usage. Learn about using the $ function, jQuery selectors for finding elements on the page, creating new DOM elements, and browser detection. In addition to selecting elements on the page we'll introduce the basics of jQuery effects and events. Note: In D7 developers are encouraged to add a jQuery wrapper around JavaScript. (function ($) { // Original JavaScript code. })(jQuery); When using Firebug console you need to use jQuery instead of $. >>> jQuery('.title') Drupal 7 uses jQuery in no-conflict mode meaning you need to wrap your code in an anonymous function and pass the jQuery object into the function. This is a pretty common practice now days and is actually a better way to write jQuery in general rather than always assuming that jQuery is the $ symbol. But, it means in the console you need to use either jQuery('selector) or $ = jQuery;

NOTE: Support of Dreditor has been nominal for a while. It's still the preferred tool for enhancing Drupal's issue queue, but keeping track of what the "official" version is can be tricky. For now, we recommend https://dreditor.github.io/. There's also been work happening to incorporate many of Dreditor's features right into Drupal.org itself. See https://www.drupal.org/project/drupalorg/issues/1673278

Dreditor is a great community tool that assists with things like patch reviews, and generally interacting with the Drupal.org issue queue. Dreditor is not a Drupal module, but is a plugin script you use in your browser. In this lesson, Joe walks through how to get Dreditor installed (on Chrome and Firefox), and then shows you how to use it to make your work in the issue queues more efficient.

Additional resources

Dreditor project
Written Dreditor tutorial for this video

In this video Joe Shindelar goes over some important information about giving hugs. He walks through the various facets of hugs, giving some demonstrations throughout on:

• Defining a hug
• Types of hugs
• Cautions
• Technique

As Joe admonishes in the video, don't forget to practice your hugging after watching the video. Practice makes perfect!

jQuery makes using Javascript easy. A description of the basic jQuery library, and a brief history of why jQuery exists and how it can be used to simplify development of Javascript for your site.

In this lesson we take a look at an extremely useful tool for communicating with the Drupal community (and many other Open Source communities as well). We will find out what IRC is, why you would want to use it, how to get connected, and some basic guidelines and tips for talking with people on IRC. We'll also explain what the IRC bot, Druplicon, is and how you can use it.

Additional resources

• Drupal.org IRC documentation
• Druplicon.info
• Freenode.net information
• Freenode Webchat
• Pidgin IM app

Use the jQuery plugin system to extend the set of methods available in jQuery beyond those provided by the core jQuery library. See where to find jQuery plugins, and examine a number of the available plugins and when to use them and what to use them for. See how to make use of plugins in your custom jQuery code. Finally, learn how to write your own plugins to extend the basic jQuery functionality.

A brief summary of the material covered in the Introduction to jQuery video series

If you're reading this message, you use Open Source software. The last fifteen years has seen the meteoric rise of tools like Linux, Apache, Firefox, WordPress, Drupal and more; simplyusing Open Source is old hat. When it comes to building your company's web strategy around open source tools, though, the decisions can be fuzzier. The best-known arguments for Open Source are often ideological rather than pragmatic, and fail to account for the different needs of different projects and businesses.

In this Do it with Drupal session, Jeff Eaton will explain the no-nonsense pros and cons of Open Source, covering the big wins as well as the tradeoffs and common pain points. Whether your business is testing the Open Source water, betting the farm on community-maintained software, or open-sourcing its own creations, you'll learn how to avoid common pitfalls and set yourself up for success.

In this lesson we show how everyone can help with the Drupal.org documentation. We take a quick look at some of the links and information that is available to everyone with a Drupal.org account, and then we dive in to make our first edit to an existing page. We run into Drupal.org's spam protection, so we also walk through getting ourselves on the no spam list for the site. After we complete our edit, we then see how to add our own new handbook page, by creating documentation for a contributed module, which doesn't have a page yet. We finish up by creating an issue in the module's issue queue, to get a link to our new page added to the module's project page. You'll see us use the Drupal.org issue queue in this video. For more detailed information about that, see our Getting Started in the Issue Queue video.

In this lesson, we take a tour of the *.drupal.org websites, as there is a lot more than just the main Drupal.org site. After our tour, we'll walk through getting an account, and see how that gives us access to all of the Drupal.org web properties. We'll play with our Dashboard, and join a group on groups.drupal.org, to become more active in the community — the best way to learn and get help. You'll see us use the Drupal.org issue queue in this video. For more detailed information about that, see our Getting Started in the Issue Queue video.

Overview the Firebug extension for Firefox and how it can be used to aid in the development of Javascript. Real time development and debugging of Javascript.

Learn about using jQuery to apply animation and effects to DOM elements. Show and hide things on the page using the fade, slide, and hide/show methods. Chain multiple effects together to create animations. And use the jQuery .animate() function to preform more complex animations.

Learn how to respond to the actions that a user performs on a page using jQuery events. Attach event handlers to DOM elements and respond to mouse events like click and hover, and keyboard events such as someone pressing or releasing a key. Finally learn about responding to special events that only occur on form elements. This chapter gives a description of each of the available jQuery events and how or when they are triggered. Check out http://quirksmode.org/js/keys.html for more information on compatibility for assigning keyboard events across multiple browsers.

Add a jQuery Javascript file to Drupal following best practice methods for including javascript files on the page. Learn about how your custom jQuery scripts are loaded on to the page, and when they get executed. Introduces jQuery's no-conflict mode and provides some best practice examples for writing your own jQuery files within the context of Drupal as a whole.

Note: To avoid hiding all blocks on your page, target your blocks more specifically. For example, #sidebar .block .content Also, inspect your markup for the existence of a class of title on the h3, which may or may not be applied in your theme. The new example below does not include the title class.

(function($){
  $(document).ready(function(){
    
    $('#sidebar .block .content').hide();
    $('#sidebar .block h3').css('cursor', 'pointer').click(function(){
      $(this).parent().children('.content').slideToggle();
    });

  });
})(jQuery);

Use jQuery to manipulate DOM elements including adding and removing classes to an HTML element, changing the content of an element, wrap a set of elements with a new element, adding new elements to the page using prepend and append methods and the related prependTo and appendTo methods. Use jQuery to manipulate properties height, width, and position of any DOM element. Finally learn how to use jQuery to completely remove selected DOM elements from the page.

Traverse the DOM tree using jQuery to find the children, parents, and other nearby elements of any selected element on the page. Learn how to select an element up the page and reliably locate it's siblings by traversing up the DOM to a parent element and then back down using find. Use additional jQuery methods to filter a list of DOM elements down using find to apply an additional selector to the list, not to filter out elements that do not match a set of criteria and more.