Roll over a link, watch the image above change. That’s what we build in this screencast, only we don’t use any JavaScript to do it. The trick is some simple z-index switching on hover and a bit of absolute positioning.

View Screencast

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.

HTML

This could literally work on any element, but text inputs make the most sense. Perhaps this could be used on a time-tracking form where you need to need to enter the number of hours/minutes spent on something. Or perhaps an order form for entering how many of something to order.

In our demo we’ll just have a label input pair like you’d find in just about any <form>:

<div>
    <label for="how-many">How Many? </label>
    <input type="text" id="how-many" class="wheelable" value="1" name="how-many" />
</div>

jQuery

If you want to check out the non-plugin version of this, just download the files below. We’ll cover using the plugin here, for brevity. You’ll need to include jQuery, the plugin, and your own JavaScript file:

<script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js'></script>
<script type="text/javascript" src="js/jquery.mousewheel.min.js"></script>
<script type="text/javascript" src="js/increment.js"></script>

When the DOM is ready, we’ll bind the new “mousewheel” event to the input. When that input fires, if it’s an “up” mousewheel scroll, we’ll increment the value upwards one, if “down”, it will be decremented by one (unless it’s already zero).

The appending of the image on the first line is so that non JavaScript users won’t see the graphic which indicates mousewheel scrollability.

$(function() {

    $("div").append('<img src="images/mousewheelupdown.png" alt="Scroll up or down with mousewheel" />');

    $("#how-many").bind("mousewheel", function(event, delta) {
        if (delta > 0) {
            this.value = parseInt(this.value) + 1;
        } else {
            if (parseInt(this.value) > 0) {
                this.value = parseInt(this.value) - 1;
            }
        }
        return false;
     });

});

What about non-numeric inputs?

You’ll have to deal with that as needed. Now that you have the “mousewheel” event that the plugin provides, the function you write when that event fires could be anything. In the demo I have a text input which cycles through a list of different kinds of whales…

$("#whale").bind("mousewheel", function(event, delta) {
    if (this.value == "Blue") {
        this.value = "Sperm";
    }
    else if (this.value == "Sperm") {
        this.value = "Orca";
    }
    else if (this.value == "Orca") {
        this.value = "Humpback";
    }
    else if (this.value == "Humpback") {
        this.value = "Blue";
    }
    return false;
 });

Killer whales are getting all the press lately, time for some Humpback love.

Degradation

This is pure progressive enhancement. Without JavaScript the inputs are still inputs which behave just as any other input would.

Enjoy

View Demo   Download Files

You might wonder when it comes to competitive keywords does Google prefer ranking big domains This question can be answered by taking a close detailed look at the relationship between keyword difficulty and the size of the domain. The result of this study is important because it will lead us to a deeper understanding of the behavior of Google s ranking algorithm when it comes to ranking competitive keywords in relation to both small and large domains ….

GoGrid Cloud Center Connect Cloud and Dedicated Servers on Your Private Data Center

By James ScottHow To Find All The Angel Investors And Venture Capital Financing You’ll Ever Need! The once definitive line that would separate hard money and private/angel financing has merged into a hybrid of sorts in the past few years. As the economy has taken a dive and structured private lending firms have felt the crunch we are finding many of these lending solutions closing its doors and