Episode 13: Animating Color

Posted On: 11 Nov 2014

Animating Color

If you want to easily create animations in jQuery, you can use the animate() method to animate any numerical CSS property - font-size, width, padding, margin, left, top, etc. However, even though colors in CSS are technically numerical, the jQuery animate() method won't animate colors. The jQuery team released the jQuery Color plugin which adds support for color animation, but with CSS3 and the transition property, we don't even need the plugin to create color animations. We can use jQuery in combination with CSS for animating color without using the Color plugin. We get started by creating a simple grayscale style for a <div>. Then we add a hover style to the <div> to show how we can use CSS to change the color scheme of our <div> on hover using just CSS. It's okay, but it's just a sudden color change. So we take a look at how we can use the CSS transition property to create an animation for that color change. All we have to do is add the transition property to the grayscale styling for our <div>. We specify which property or properties we want to add an animated transition to, then we say how long the animation should take to complete. You can get even more specific about your transition, so check out this article for more information on what you can do. CSS alone works great as long as we only want the animation to happen when we're hovering, but if we want to animate the color change on click, we have to step into using a bit of jQuery. We can use a CSS class in combination with a click event handling function to animate the color change when we click. All we have to do is use jQuery's addClass method to add the class. And if we want to toggle the class on and off, we can just use jQuery's toggleClass method instead. We take a look at how we can use different color schemes for each individual <div> so that each changes to a different color when clicked. CSS3 makes some pretty amazing things possible without even using JavaScript, but when we can use CSS3 in combination with JavaScript, we have the power to do some pretty awesome stuff with just a teeny bit of code.

Episode 12: No Conflict Mode

Posted On: 28 Oct 2014

No Conflict Mode

As you've probably noticed in our code examples, jQuery uses the $ to select elements that we want to work with. The only problem is, jQuery isn't the only JavaScript library that thought the $ made a handy shortcut. If you want to use more than one JavaScript library on your pages, you can tell jQuery that you don't want it to use the $ any more so that the other library can have it. You do that by putting jQuery into no conflict mode. jQuery's no conflict mode gets used by WordPress - if you load jQuery up with either a theme or a plugin, jQuery's in no conflict mode to make sure that it won't clash with any other JavaScript libraries loaded on the page. Putting jQuery into no conflict mode is easy enough, you just call the noConflict() method like this; jQuery.noConflict(); Now that jQuery no longer uses the $, you have a few options for how you'll go about taking advantage of the jQuery library's awesomeness without using the $. First, of course, you can just use the full name, jQuery. So a selector might look like this: var listItems = jQuery('ul li'); That works fine, but it's extra typing. If you're just adding a couple of lines of JavaScript, you probably won't mind, but if you're writing a lot, it might make a lot of extra work. You can also use a special kind of function, called a self-invoking function (big programmer words!), to contain the $. It's a little confusing if you try to explain it, so let's just look at some code: (function($) { var listItems = $('ul li'); })(jQuery); Basically, for any code you write inside that function, the $ is equal to jQuery, but for any code outside that function, the $ is not equal to jQuery. If you were using two JavaScript libraries and had put jQuery into no conflict mode, you could write all of your jQuery code inside that function and all of your other JavaScript outside that function, and everything would work as expected. Finally, you can also give jQuery a different nickname. That looks like this: var $j = jQuery.noConflict(); var listItems = $j('ul li'); You can make that shorthand any legal variable name. And it's fine if the variable name contains a $, as long as there's at least one other character there too. You can choose a short 1 or 2-character name, and save yourself a lot of typing. Using jQuery in no conflict mode is a great way to make sure you don't accidentally clash with other JavaScript libraries that might get loaded on the page. It's an especially handy technique when you're working with something like WordPress, where a site owner might install a theme or plugins that use different JavaScript libraries. See you next week for more jQuery learning!

Episode 11: The jQuery Object Explained

Posted On: 21 Oct 2014

The jQuery Object Explained

While the jQuery library can sometimes feel like magic, the man behind the curtains in the jQuery library is the jQuery object. It's this object that gives the jQuery library its power. But to understand the jQuery object, first we have to understand a couple of important concepts. The DOM is the Document Object Model. It's a representation of an HTML document. What we normally think of as HTML elements become document objects when we're dealing with JavaScript. A complete document is a collection of document objects. And when we're talking about programming, what is an object? An object is a thing - it's anything. Any thing. Take a dog, for example. That's an object. Objects have properties that describe them. For example, a dog can be short or tall, can be black or white or brown, can have curly hair or straight hair, can have pointy ears or floppy ones, can be a Great Dane or a Chihuahua or a Dachshund, and on and on. All of these are properties of the object - they describe what the dog is like. Dogs can also do things - they can run, walk, bark, jump, eat, sleep, swim, fetch, roll over, play dead, pant, and on and on. These are methods of the object. They're things that the dog can do. Methods are like verbs - they describe what objects can do. Properties are like adjectives - they describe the object. DOM objects have properties and methods, too. Different DOM objects have different properties and methods, so code we write to deal with one type of DOM object won't necessarily work for another. In addition, there are differences between different browsers - some of the properties and methods of DOM objects differ depending upon which browser and which version of the browser you're using. That all adds up to a tough life for developers who are just trying to get their code working. That's where jQuery comes in so handy. You see, when you select items on the page using jQuery's $ selector, you're not actually getting a collection of DOM objects. You're getting back one jQuery object. It's handy to think of a jQuery object like a box. That jQuery object might be empty if no elements on the page matched the selector. That's what we discussed last week when we checked to see if the jQuery object was empty. A jQuery object can also contain one or more DOM objects. Now that they're in their handy box, we can easily deal with them. The jQuery object has a standard set of properties and methods that work no matter what browser we might be using and that work most of the time, no matter what type of DOM object we might be using. By boxing up all the DOM objects into a standard box, jQuery helps to smooth out differences from object to object and from browser to browser. In addition, jQuery also provides lots of handy methods for performing the sorts of tasks JavaScript developers need to do all the time - changing the values of form elements, updating the text or CSS classes of elements, changing CSS properties, hiding elements, showing them again, animating them, etc. The jQuery object is what makes the jQuery library seem so magical - I hope you now better understand the jQuery object and a bit more about how the jQuery library works. Happy coding!

Episode 10: If an Element Exists

Posted On: 14 Oct 2014

How to tell if an element exists

When you're working with jQuery, sometimes you need to figure out if an element that you're trying to select actually exists on the page. You'd think this would be simple and straightforward, but there's actually a little trick to it that I'll share with you in this video. We get started with a list of animals - one of them has a class of highlighted and elsewhere on the page, we want to create a little callout to put the highlighted animal in the spotlight. We get started by adding a new element to the page using skills that we learned in Episode 3. Then we just add a few quick styles to the new element in CSS just so that we can see it on the page. Next, we learn how to use jQuery text() method, both to add text to our new element and to fetch the text from another element. This works great as long as there's an element on the page with the class of highlighted, but if it doesn't exist, the page looks odd. We want to set up some different text if the highlighted class is missing from the page. We talk just a bit about JavaScript and how to test if things are true. Many values in JavaScript aren't actually strictly true or false, but rather truthy or falsey - in a sort of gray area. If a variable is empty and I test it, it returns falsey. Which means that if we test the variable where we used our selector, it should return falsey since it's empty, right? Well, not with jQuery. Because if a variable holds a jQuery selector, that variable is never actually empty because it holds a jQuery object. The jQuery object might be empty, but the variable doesn't know that. It just knows it's got a jQuery object so it returns a truthy value. Huh? Think of a jQuery object like a box. A box isn't nothing - it's definitely something. If you're holding a box, then you've definitely got something in your hands. Now, that box might be empty or it might have a kitten or a pie in it. Either way, you've got something in your hands. That's how a jQuery object works. The jQuery object is something, even when it's empty. So to test if an element that we're trying to select is actually on the page, we have to test if the jQuery object is empty or not, not the variable where we used our selector. We can test that by using the length property of the jQuery object to see if there's anything in the box. If the length is greater than 0, then the box contains something. Otherwise, the box is empty.

Episode 9: Animated Tabs

Posted On: 7 Oct 2014

Animated Tabs

In Episode 4, we learned how to create simple tabs without using a jQuery plugin. In today's episode, we'll make those tabs even spiffier by adding a cool animated transition when switching tabs. We'll get started with the code we created in Episode 4, which you can download from GitHub. The HTML will remain exactly the same. In the CSS, we just have to make one small change - by moving styling from the individual <div>s with a class of .tab and instead applying those styles to the <div> that wraps the collection of tab content <divs>s. The rest of the changes happen in our JavaScript. And even most of that stays the same. We just remove the single line of code that handled the hiding and showing of the different sections of tab content, then write a new couple lines of code to add the animation. We're actually combining three animations. When we click a new tab, first we fade out whatever content happens to be visible at the time. Next, we animate the height of the container to match the height of the new tab content section. Finally, we fade in the content of the new tab container. Combined, these three animations provide a smooth transition between the content of the different tabs. It's a little extra something something that helps our websites feel more polished and professional. Thanks to jQuery adding this kind of extra bit of polish is simple and straightforward. In this video, we take our first look at jQuery's animate() method, and we also use a callback function for the first time. We'll dig more into animation and callbacks in future episodes, so stay tuned!

Episode 8: Parents and Children

Posted On: 30 Sep 2014

Parents and Children

While the title of this week's video might sound like some sort of family therapy session, we're actually going to be digging into a few of our methods for traversing the DOM - moving up the DOM with parent() or parents() and then moving down the DOM with children() or find(). There's a lot of confusion and misunderstanding around these methods, so this week's episode helps to clear that up. We start out with a document with lots of nested divs, each with a different background color just to make them easy to see. First up, we take a look at parent() and parents(). The parent() method selects only one element - the direct parent element of the element we started from. The parents() method, on the other hand, will select all parent elements, including the <body> and the <html> elements. But, with either the parent() or parents() methods, we're able to add a selector and refine the selection that gets made. With the parent() method, that would select the parent element only in the event that it matches the selector. With the parents() method, you can filter out the elements that get selected - rather than selecting every single parent element all the way up to the <html> element, we can say exactly which elements should get selected. Now that we understand parent() and parents(), let's take a look at the differences between children() and find(). First up, the find() method requires a selector. If we need to select all the children elements nested inside the element we started from, then we can pass the universal selector (*) to the find() method, like this: find('*') The children() method, on the other hand gets just the direct children. That throws a lot of people off, since it seems backwards. If we have parent() and parents(), shouldn't we also have child() and children()? But working our way up the DOM isn't the same as working our way down. When we're searching through ancestors, each element can have only one direct parent element. When we're searching through descendants, each element could have 0, 1, or many direct children, plus additional descendants nested inside those children. Just like with parents(), we can also pass a selector to children() to select only those direct children that match the selector rather than all of the direct children. After working with our many nested divs page, we'll take a look at a more real-world example - we have a block of content inside a div, with one paragraph that happens to be wrapped in a blockquote. Using our children() and find() methods, we see the difference between them quite clearly. Using the children() method, the paragraph inside the blockquote isn't selected. But when we switch over to the find() method, we're able to select that paragraph along with the others. That's a pretty good look into parent(), parents(), find(), and children(). Have fun experimenting with those methods to make sure you really understand the differences and next week we'll take a look at adding animation to Simple Tabs example to make those tabs extra special.

Episode 7: Built-in jQuery Animations

Posted On: 23 Sep 2014

Built-in jQuery Animations

We have a short and sweet podcast today reviewing the animations that come built into jQuery. Of course, jQuery will allow you to create your own custom animations, and we'll cover just how to do that in a future episode. But today, we're just going to take a look at the animations that are included out-of-the-box. We'll set up a few definition lists to display our different animations, which include:

• show(), hide(), and toggle()
• slideUp(), slideDown(), and slideToggle()
• fadeIn(), fadeOut(), and fadeToggle()
• fadeTo()

After creating our simple HTML file, we add just a few super simple styles to our CSS page that will make the animations easier to see. Then we step into looking at what each of the animation methods does. First up, show() and hide() just toggle the display of the item to make it disappear from and appear on the page. There's also the handy toggle() method that alternates between hiding and showing the target element. Next, we take a look at the sliding animations, which we made good use of in our Accordion episode last week. We learn how to use slideUp() and slideDown(), and then, of course, slideToggle() to alternate between showing and hiding the target element. Finally, we'll play with fading animations. We take a look at fadeIn(), fadeOut() and fadeToggle(). Then, we take a look at one bonus fading animation - fadeTo() - that's included with jQuery that allows us to fade an item to a specified opacity at whatever speed we choose. You'll find lots of uses for these default animations that are included with jQuery. Have fun experimenting and learning more about them!

Episode 6: jQuery Accordion

Posted On: 16 Sep 2014

jQuery Accordion

In this video, we'll walk through creating a simple content accordion. All of the sample content for the demo comes from Wikipedia. Since we'll be using a lot of special characters, we have to pay special attention to our charset meta tag to make sure all those special characters show up as expected rather than looking look a bunch of gobbledygook. There are lots of different bits of HTML markup that can be used to create the HTML markup for an accordion, but I like to use a definition list (<dl>). I use the <dt> tags for the accordion titles and the <dd> tags for the accordion content areas. The <dd> tag can contain any other tags so the content can be quite complex, including headings, paragraphs, lists, images, videos, etc. In this case, I'm making use of the new HTML <figure> and <figcaption> elements for presenting the photos and captions for each city. For the image captions, I'm using the captions provided by Wikipedia to ensure that the photographers are correctly credited for the use of their images. Once we've got all of our content on the page, we'll style that up with a bit of CSS to make it look like an accordion. After removing some of the browser's default styles, we add a background color and some rounded corners to the titles and a border around the content areas. Now we can see the page the way our site visitors who don't have JavaScript enabled will see. The page looks nice, and these site visitors will never know they're missing out on anything at all. With the HTML and CSS out of the way, we can jump into the JavaScript. First up, we hide all of the <dd> tags to fold them out of the way. Then, we add a click handler to the <dt> tags that moves to the next <dd> tag and shows it when the <dt> is clicked. That's a bit of progress, but we have to add a bit more finesse to get it working like an accordion, like closing any other open panels when we click to open a new one. We make use some of the DOM traversal methods we used last time - next() and siblings(). We also make use of some of jQuery's built-in animations - slideUp(), slideDown(), and slideToggle() - which we'll be covering in detail in next week's video. Now that the basic accordion is working, we'll apply some snazzy CSS and JavaScript techniques to write some special additional styles for the accordion to make it extra special and polished. We take a look at the famous body-class switching trick to write separate CSS styles depending on whether or not JavaScript is enabled. Using the body class, we write some extra CSS to make the <dt>'s look and work a little more like buttons, and we add a class to the <dt> when they're open so that the open panel can be styled a bit differently from the panels that are closed. [box]Pro Tip: Rather than adding color changes, sizes, borders and other CSS changes in your JavaScript, put style changes in your CSS file instead, and then just use JavaScript to add and remove CSS class names to control changes in style. [/box] We'll wrap up by making a few little optimizations - we toggle the '+' and '-' characters to show if the panel is opened or closed, and style the <dd> content areas to match the orange color of the open titles. And we learn how to use a CSS3 transition to animate a background color change. Creating a simple accordion is pretty simple - most of the work is in the CSS, and we use just a few lines of JavaScript to make it all work.

Episode 5: Traversing the DOM

Posted On: 9 Sep 2014

Traversing the DOM

"Traversing the DOM" sounds kind of scary, but it's just developer-speak for moving from one place in an HTML document to another. In this video, we'll take a look at some of the methods jQuery provides for easily moving around. Here, we'll get started with a bunch of nested unordered lists so that we can learn how to move around from one list item to another. We'll use jQuery's addClass() method to add classes to the starting point and ending point(s) so that we can see how we're moving around the document. We'll take a look at using the following methods:

• next()
• nextAll()
• prev()
• prevAll()
• parent()
• parents()
• children()
• find()
• siblings()

In addition to those traversal methods, we'll also look at how to use:

• addClass()
• first()

Learning how to move around an HTML document is a powerful tool to have in your toolbox. Once you've arrived at your endpoint, you can call any of jQuery's methods to hide, show, animate, change CSS class names, replace content, etc. You'll find that these methods are so universally helpful, that we'll put them to work in nearly every tutorial we do. As an example of how to put these methods to work, take a look at last week's video on creating simple tabs without using a jQuery plugin.

Episode 4: jQuery tabs without a plugin

Posted On: 2 Sep 2014

jQuery Tabs without a plugin!

There are piles of jQuery tabs plugins out there, but creating tabs is not very complicated at all. In this video, I'll step you through creating simple tabs with just a few lines of code. We'll create a page featuring the six noble gases with a bit of information about each one. We'll pull a bit of information from Wikipedia for each gas. We get started by setting up our HTML - first we create the content for each tab section, giving each section of content a unique ID so that we can easily reference it later. Note that we use semantic names for those ID's related to the information contained inside rather than just numbering the sections - that means it's super easy for us to re-arrange the order of our content as needed without having to worry about re-naming. Then we create the tabs themselves - which is as simple as an unordered list with anchor links to the sections of content we created. We style that up with just a few lines of CSS to make the list of links look like tabs and to add a background color and border to each section of content. We'll cover a quick trick for improving the usability of your tabs which will also help you with all sorts of navigation, buttons, and more. Once we've got all of that out the way, we'll jump into JavaScript. First, we hide all the content sections. Then, we write the magical code that will make the tabs work as expected. While we're doing that, we learn about hashes and do a quick lesson on how to move around an HTML document. We also learn about how we can interrupt the browser and prevent its default behavior when we need to. Next, we take a look at how to highlight the currently selected tab by adding and removing a CSS class. Finally, we add just a bit of code to show the first content section when the page is first loaded. Before we wrap up, we'll quickly cover caching selectors to help your code run a bit faster. Little improvements make a big difference once you start writing more complex JavaScript, so it's a good idea to learn optimization early! Make it a habit to watch out for any time you're using the same jQuery selector more than once in your code.