A gorgeous way to create responsive charts and graphs that even includes some nice animations!
A look at using CSS3 and jQuery in combo to create some amazing drag and drop interactions
If you want to easily create animations in jQuery, you can use the
animate() method to animate any numerical CSS property –
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.
A handy and not-too-complicated tutorial for creating a really lovely responsive design for mega navigation menus
Create a small preview of a full page or just a part of it that supports navigation and flexible positioning. Super cool.
An interesting look at how designers approach writing code differently than developers do.
A look at what’s planned for the future of jQuery.
Improves upon CSS3’s background-size:cover by adding an image ‘safe area’ that will never be cropped and adding support for IE8.
No Conflict Mode
As you’ve probably noticed in our code examples, jQuery uses the
$ any more so that the other library can have it.
You do that by putting jQuery into no conflict mode.
Putting jQuery into no conflict mode is easy enough, you just call the
noConflict() method like this;
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');
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:
var listItems = $('ul li');
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
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.
See you next week for more jQuery learning!