Advanced Articles

Pointer Events & Disabling Current Page Links

It is a long-standing web design standard that the logo in the header area links to the homepage of the site. Another standard is that when displaying the navigation of a site, to highlight in some way the "current" page, if it is present in the navigation. I think those are great standards. The logo-link thing is so ubiquitous that your users will likely automatically try it if you've coded it that way or not. The current navigation thing is just good ol' horse-sense for grounding a users and making them feel good about their current location in a websites hierarchy.

But here is another good design standard: don't have links to the same page you are on, on that page.

The idea here is twofold:

  1. When you see a link, it looks like a link, it behaves like a link, that says "click this and be taken elsewhere." If the link takes you back to the same page you are on, that's kinda weird.
  2. It is a waste of server resources to reload a page for no reason.

How can you accomplish this without a bunch of development work and changing markup? CSS of course!


More than one way… (delegate edition)

There was a question in the forums about affecting non-hovered items. The effect they were after is that they had an unordered list of items and when they were rolled over, they would all dim (lower opacity) except the one hovered.

This can be done with CSS, using pseduo-selectors.

ul li:not(:hover) { opacity: 0.5; }

However we know that pseudo-selectors don't have very good cross-browser support. And for that matter, opacity doesn't either. jQuery is pretty good at mitigating cross-browser problems, so l thought I might give that a spin. In attempting it, I had a nice little learning journey.


Data URIs

Did you know that you don't have to link to an external image file when using an <img> element in HTML, or declaring a background-image in CSS? You can embed the image data directly into the document with data URIs. The end result can be a site with all the less HTTP Requests, but at what cost?

Increment Inputs with the Mousewheel

In the past we've covered adding +/- buttons to number-based inputs to help user interface (it's easier than typing in some circumstances). Reader Hitesh N Chavda emailed me with the idea of doing it with the scroll of the mouse wheel instead.

With the mouse cursor inside the input box, you can use the mouse scroll wheel to increment the number up and down.

Hitesh worked up a technique for doing it using jQuery, which works great. Then later he found a plugin which has already been built for dealing with mousewheel events, which is really nice and simplifies things. Just for fun the demo will leave both versions in it.


Build Your Own Social Home!

Many of us have many "homes" on the interwebs. Personally I use Twitter, Flickr, ScrnShots, and Facebook. These web services are cool enough to offer ways to interact with them and pull data out of them without even necessarily visiting the site itself. This is called an API (or Application Programming Interface).

View Demo   Download Files

Update November 2011 - ScrnShots is shutting down. I simplified this demo, brought jQuery up to date, and replaced ScrnShots with Dribbble. I also chucked it on GitHub if anyone wants to add more. The tutorial below still stands fine I think.
Update January 2013 - Updated to fix Twitter API.
Update July 2013 - The code below no longer works as-is with the Twitter API update to 1.1 as of 2013-06-11. The 1.1 API requires oAuth which requires a server side component. Here's a PHP way to interact with the new API. If I get some time I'll update this demo.
Update July 2014 - Here's a JavaScript way, albeit a bit hacky.

You can think of an API as a lot like an RSS feed. If you read CSS-Tricks through a feed reader like Google Reader, you know that you don't even need to visit the site to read my content, because that data is being served up another way. In the case of RSS, it's an XML file formatted in a very specific way. API's are often served up as XML, formatted however that particular application thinks it will be of most use to you. XML is cool, but much like HTML, it needs to be parsed before you can really do anything with it. Enter JSON.