CSS-Tricks

jQuery

Lazy Loading Gravatars in WordPress

# By Chris Coyier

Most WordPress themes show user Gravatars in the comment threads. It's a way of showing an image with the user, as associated by the email address used. It's a nice touch, and almost an expected design pattern these days.

Every one of those gravatars is an individual HTTP request though, like any other image. A comment thread with 50 comments means 50 HTTP requests, and they aren't always particularly tiny files. Yeesh.

Let's lazy load them.

(more…)

Need to do Dependency-Free Ajax?

# By Chris Coyier

One of the big reasons to use jQuery, for a long time, was how easy it made Ajax. It has a super clean, flexible, and cross-browser compatible API for all the Ajax methods. jQuery is still mega popular, but it's becoming more and more common to ditch it, especially as older browser share drops and new browsers have a lot of powerful stuff we used to learn on jQuery for. Even just querySelectorAll is often cited as a reason to lose the jQuery dependency.

How's Ajax doing?

(more…)

The Narrative Browser Using Articulate.js

# By Adam Coti

Many sites with lots of written content employ specially crafted print style sheets. That way, a user can print out the relevant content without wasting paper on navigation, ads, or anything else not germane.

Articulate.js, a jQuery plugin, is what I consider the narrative equivalent. With as little as one line of code, it enables developers to create links that allow users to click, sit back, and listen to the browser read aloud the important content of a web page. In some ways, it can turn a thoughtful essay or article into a mini podcast. And because it uses built-in JavaScript functionality, no browser extensions or other system software is needed.

(more…)

Is jQuery Still Relevant?

# By Chris Coyier

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 slow unless you can do everything at one time; and jQuery was not designed for large change groups.

Todd Motto: Final thing from me: let’s not aim to dissuade jQuery developers from using it – it’s amazing, extremely mature and powerful, and its place in “modern web” has shifted, that’s all. In 5 years we’ll all be doing it wrong again.

TJ VanToll: To me, jQuery remains the gold standard for a library with an elegant API design and comprehensive documentation. Although I may not use it in every app nowadays, I still find it the easiest way to interact with the DOM and add powerful widgets to my apps.

And coincidentally, in Nicholas C. Zakas's newsletter:

I ran into a former coworker shortly after leaving Yahoo as he was preparing to join a new company as a tech lead. During our conversation, he mentioned that his top priority would be to switch them over to YUI. The company was using jQuery, and he said he really didn't want to use it. I gently suggested that, perhaps, this wasn't really a battle he wanted to wage. He could certainly evaluate the overall architecture to see what improvements would be made, but going into a company and trying to get everyone to switch to your favorite library or framework is rarely a formula for success.

When I joined Box, I ran into a similar situation except that people seemed to assume that I would try to eliminate jQuery from the front-end. Time after time I was asked, "are you going to get rid of jQuery?" My response was always the same: "No, jQuery isn't going anywhere. However, I want to make sure its position in the architecture is well-defined."

Pledging allegiance to a particular technology or approach is fine so long as you don't become dogmatic about it.

Collision Detection

# By Chris Coyier

I posted about jQuery UI's position feature years ago, but I was just thinking of how useful the collision detection part of that feature is. In a nutshell: you can position an element where you want them to go, but if it calculates that where you're putting it would be offscreen or otherwise hidden, it will adjust the positioning to fix it.

(more…)

Done Resizing Event

# By Chris Coyier

If you're used to something like jQuery UI resizeable, you get events you can bind to during the resizing, but also at the end of resizing.

No such event exists in native JavaScript.

You can fake it by setting a timeout to run the code you want to run when resizing stops. Then clear that timeout every time a resize event fires. That way the timeout will only finish if that timeout actually finishes.

var resizeTimer;

$(window).on('resize', function(e) {

  clearTimeout(resizeTimer);
  resizeTimer = setTimeout(function() {

    // Run code here, resizing has "stopped"
            
  }, 250);

});

Similar to debouncing.

Multiple Simultaneous Ajax Requests (with one callback) in jQuery

# By Chris Coyier

Let's say there is a feature on your website that only gets used 5% of the time. That feature requires some HTML, CSS, and JavaScript to work. So you decide that instead of having that HTML, CSS, and JavaScript on the page directly, you're going to Ajax that stuff in when the feature is about to be used.

We'll need to make three Ajax requests. Since we don't want to show anything to the user until the feature is ready to go (plus they all kinda rely on each other to work right) we need to wait for all three of them to be complete before proceeding.

What's the best way to do that?

(more…)

Draggable Elements That Push Others Out Of Way

# By Chris Coyier

Aside from a few esoteric tricks involving stuff like the resize handle on textareas, draggable elements is JavaScript territory on the web. E.g. click on element, hold down mouse button, drag mouse cursor, element drags with the mouse, release mouse button to release element. Or the touch equivalents. Fortunately this is well-tread territory. Time tested tools like jQuery UI offer Draggable (and other similar methods) to make this easy.

But recently in trying to achieve a certain effect (see title of this article) I couldn't quite get jQuery UI to do it how I wanted. But I got it done and here's how.

(more…)

Namespaced Events in jQuery

# By Chris Coyier

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 do you remove just one of them? Namespacing can help.

(more…)

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