jQuery Mastery and Plugins

Manipulate web interfaces with ease, build your own plugin, and more...

Created byTom Rutka

Last updated 7/2016

English

What you'll learn

Make a Website Interactive
Learn jQuery animations
Manipulate the web Document Object Model
Learn about the Protoype model
Publish Your Own Plugin
Interactive Menus using Keyboard shortcuts
AJAX methods for getting data

Course content

9 sections • 23 lectures • 3h 45m total length

Your Tools for Development6:34
You will need software to develop jQuery scripts and web browsers with plug-ins for debugging.

Sublime Text is a new popular code editor http://sublimetext.com

Google Chrome http://google.com/chrome http://google.com/chrome includes debugging tools by default or you can use Firefox and download Firebug for some different features. http://mozilla.org/firefox
jQuery Script Placement & Anatomy6:40
Learn where you should place your jQuery code and how to link external scripts.

Then find out the anatomy of a jQuery call.

Creating HTML elements with append()4:10
FIrst download the source code for this section. It is the file named flaredemo (file)

I provided HTML and CSS to for this project, so open the index1.html file to begin.

We will use jQuery to create HTML elements. You can also use the included cheat sheet for quick reference.
Setting CSS Styles and Chaining Functions9:04
Learn how to apply CSS styles using the css() method and chain them together.
Getting Element Positions and Width10:34
Find out how to get an element's position and width. Then see alternative methods to get the measurements in relation to the document body with regard for margins.
Adding an Event Listener and Animate Functions7:39
Here you will bind a function to the mouse click of an HTML button. This is known as an event listener because the web element (button) listens to a specific event (mouse click) to fire a function (animate).
Generating Unique IDs and Removing Elements5:12
When an HTML element has an ID attribute it should be unique so we will use a counter to do that.

Also since an HTML element is generated on-the-fly, we will remove it from the DOM once the animation is finished.
Additional Animation Parameters and Nesting7:00
Take advantage of animate() function's optional parameters to change the speed of your animation and nesting the function to further animations.

Edit Theme Functions File to Add the Script11:24
1. Upload your script to your theme directory /wp-content/themes/your-theme/js/
2. Open the functions.php file in your theme directory /wp-content/themes/your-theme/functions.php
3. Create custom function: function adding_scripts() { }; where you will include lines 3-4
3. Register the script file: wp_register_script('your-script-name', 'script-file-url', 'jquery');
4. Output the script to : wp_enqueue_script('your-jquery-name');

5. Execute: add_action('wp_enqueue_scripts', 'adding_scripts');

Documentation:
http://codex.wordpress.org/Function_Reference/wp_register_script
http://codex.wordpress.org/Function_Reference/wp_enqueue_script

Overview of functionality, HTML and CSS7:41
Generating Elements and Mouse Detection for Displaying the Menu14:37
Change View Functions - Resizing Elements with Animation12:34
Advanced Event Listener Binding with Targeting and Switch Cases13:50
Here's the official and most comprehensive reference for keyboard event properties. W3C Website

Another reference for the Keyboard event is available on Mozilla Website
Keyup and Keydown Event Listeners for Keyboard Shortcuts13:21

Using Prototyping and Extend to Make the Plugin (Expired)18:17
Learn how to take the function from the previous lesson (section 3) and adapt it to be a plugin. Although, knowing the previous lesson is recommended, it is not required to create a plugin.
Two important things you will learn in this lesson is:

Prototype

Extend

Start with the file plugin.html
Preparing the Files Needed for Publishing (Expired)6:42
Using GitHub for Registration (Expired)13:59
Ensure you've completed the previous lecture to prepare the files.

You'll need GitHub software on your computer and be registered on the website github.com

Requirements

Computer
HTML, CSS

Description

Over 4 hours of succinct video tutorials + source code!

Want to make a website interactive but don't know where to start? Maybe javascript intimidates you... With jQuery you can jumpstart your user interaction skills easily.

For designers or developers who want to manipulate the web - this is for you!

Learn the basics of jQuery, get the proper resources, and start making projects. User Interaction and Experience is more popular than ever and designers are high in demand!

jQuery is the most popular framework because of it's flexibility and cross-browser compatibility. Forget about writing extra code for every specific browser, jQuery does it for you. What used to require 30 lines of code in javascript can be done in 3.

What else... Why should you take this course?

Well you might have already seen introductions and felt overwhelmed with the amount of functions, selectors, filters, etc... I agree, there's a lot, but honestly you're not going to need to know all of them. 80%% of the time you're going to use selectors by id and class name, then attach event listeners to them.

Would you rather waste time finding every selector available or start manipulating HTML and CSS in a way that makes sense. This is what this course provides.

Current Projects include:

Input tag validation
Expanding Collapsing Elements
Optical Flare Animation
Including custom jQuery files into WordPress
Publishing your own jQuery Plugin
Mouse detection and Key Press Listeners
Changing View for Responsive Design
Asynchronous Page Loading with AJAX

(If you have questions or concerns, send me a message :)

Who this course is for:

Anybody that wants to make their website interactive
Designers
Developers

jQuery Mastery and Plugins

What you'll learn

Explore related topics

Course content

Setting Up2 lectures • 13min

jQuery Basics2 lectures • 16min

Creating and Animating an Optical Flare6 lectures • 44min

Integrating a Custom Script into WordPress1 lecture • 11min

AJAX - Asynchronous Javascript XML1 lecture • 14min

Advanced Utilities2 lectures • 26min

Change View Menu with Mouse or Keyboard5 lectures • 1hr 2min

Course Summary1 lecture • 4min

Authoring Your Own Plugin and Publishing It (Expired)3 lectures • 39min

Requirements

Description

Who this course is for: