Get a free trial // Grow your CSS skills // Land your dream job

Advanced Articles

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.


There's a whole bunch of content on CSS-Tricks.

Search for Stuff   •   Browse the Archives

Get the Newsletter ... or get the RSS feed