Our Guide To

jQuery

CSS-Tricks has loads of content on jQuery. Aside from our complete course on learning jQuery from scratch, we have all kinds of articles, tutorials, and demos for all skill levels.

Grid Accordion with jQuery

Accordions are a UI pattern where you click on a title (in a vertical stack of titles) and a panel of content reveals itself below. Typically, all other open panels close when the new one opens. They are a clever and engaging mechanism for packing a lot of information in a small space. Basic accordion […]

Simple jQuery Dropdowns

There are lots of dropdown menus already out there. I’m not really trying to reinvent the wheel here, but I wanted to try to do something slightly different by making them as dead simple as possible. Very stripped down code and minimal styling, yet still have all the functionality typically needed. Here are the features: […]

Circulate

I had the occasion come up recently where I needed to animate something in a circle. It never occurred to me until then that there wasn’t an obvious solution to this already with jQuery. So I figured out a way, and made a plugin out of it. This unicorn can fly friggin backwards with this […]

Namespaced Events in jQuery

It’s really easy to add an event listener in jQuery. It’s equally easy to remove an event listener. You might want to remove a listener because you don’t care to perform any actions on that event anymore, to reduce memory usage, or both. But let’s say you’ve attached several listeners to the same event. How […]

Include jQuery in WordPress Theme

The following is the best way to go about it. Add the following to the theme’s functions.php file: if (!is_admin()) add_action(“wp_enqueue_scripts”, “my_jquery_enqueue”, 11); function my_jquery_enqueue() { wp_deregister_script(‘jquery’); wp_register_script(‘jquery’, “http” . ($_SERVER[‘SERVER_PORT’] == 443 ? “s” : “”) . “://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js”, false, null); wp_enqueue_script(‘jquery’); } Replace the URL with the location of what version of jQuery you […]

#76: A Tour of jQuery on a Live Site

I’m busy, you’re busy, we’re all busy trying to meet deadlines and get things done in this crazy web world. I love learning new technologies when I can, but I’m the first to admit that I reach for tools that I already know well because I can be instantly productive that way. jQuery is one […]

#13: Intro To Events

Handling events is another one of those big reasons to use jQuery. There are some cross browser differences in how to do, which jQuery normalizes into one simple API, while enforcing some best practices. There is essentially one method you need to know: .on() – it works like this: $(“button”).on(“click”, function() { // do something […]

#05: All About DOM Ready

We’ve talked a good bit about selectors. A jQuery selector like $(“h1”) will select all <h1></h1> elements on the page. But what about… when it doesn’t? Here’s an example of when that selector would fail:

AnythingSlider jQuery Plugin

Just what the world needs, another jQuery slider. YAWN. I know, check this one out though, it’s got lots of cool features. Here on CSS-Tricks, I’ve created a number of different sliders. Three, in fact. A “featured content” slider, a “start/stop slider”, and “moving boxes”. Each of them had some cool interesting feature that I […]

AnythingZoomer jQuery Plugin

You have a small area. You mouse over it. An area pops up giving you a zoomed in closer look. This is a jQuery plugin that does it. I’m not going to tell you what you should use it for or elaborate use-case scenarios. Your own creativity can help you there. It’s flexible in many […]

Fallback for CDN hosted jQuery

Several big companies offer copies of jQuery hosted on their CDN’s (Content Delivery Network). Most notoriously Google, but also Microsoft and jQuery themselves. A lot of people swear by this since it saves bandwidth, downloads faster, and perhaps even stays cached jumping between different sites that use the same script. There is always that twinge […]

Simple jQuery Accordion

jQuery Make sure either to run on DOM ready or at the bottom of the page. (function($) { var allPanels = $(‘.accordion > dd’).hide(); $(‘.accordion > dt > a’).click(function() { allPanels.slideUp(); $(this).parent().next().slideDown(); return false; }); })(jQuery); HTML <dl class=”accordion”> <dt><a href=””>Panel 1</a></dt> <dd>Pellentesque fermentum dolor. Aliquam quam lectus, facilisis auctor, ultrices ut, elementum vulputate, nunc.</dd> […]

Simple Auto-Playing Slideshow

HTML Wrapper with div’s as the “slides”, which can contain any content. <div id=”slideshow”> <div> <img src=”//farm6.static.flickr.com/5224/5658667829_2bb7d42a9c_m.jpg”> </div> <div> <img src=”//farm6.static.flickr.com/5230/5638093881_a791e4f819_m.jpg”> </div> <div> Pretty cool eh? This slide is proof the content can be anything. </div> </div> CSS Slides need to be absolutely positioned within the wrapper. This has a tiny bit of extra pizazz: […]

The Use of jQuery in Tutorials

A question came up in a semi-recent ShopTalk episode about the use of jQuery in tutorials. Lately I’ve begun to realize how muddled the line between jQuery and JavaScript has become when learning about the language. It’s hard to find a solid tutorial that doesn’t include jQuery instead of JavaScript. What’s your opinion on the […]

Load jQuery Only If Not Present

Say you were going to do an include on a whole bunch of pages, and inside of that include you wanted to do some jQuery specific stuff. That page may or may not already have jQuery loaded. If it already does, you don’t want to load it again, but if not, you do. This works […]

Is jQuery Still Relevant?

It took a minute, but I believe we have arrived at Baby Bear on the jQuery conversation. Some choice quotes from the ensemble cast blog post: Nathanael Anderson: The biggest negative for jQuery in this day and age is that browsers are a lot more standard in coverage and directly messing with the DOM is […]

Garage Door Style Menu

Originally published on July 21, 2008 as only a jQuery technique. Now updated to include CSS3 and a combo technique which is mo’ betta. A garage door style menu is where an image (the “door”) slides up to reveal something behind it. We’ll do this in two ways, with CSS3, and with jQuery. Then we’ll […]

icon-anchoricon-closeicon-emailicon-linkicon-logo-staricon-menuicon-nav-guideicon-searchicon-staricon-tag