jQuery – Which button is pressed?

OK, this is the same concept, as the one posted here, in the AS3 series. jQuery is a great tool, so I am trying to work on it, applying ideas from AS3 to jQuery; “porting codes”, if you like (better:porting concepts). The fact is that everything in jQuery seems (and is) ridiculously easier. It is not only the power of the jQuery framework, but also the DOM model that actually takes over a lot of the operations and calculations that need to be done “by hand” in other environments – such as AS3. For people that have struggled hopelessly with JavaScript for many years, jQuery is really an invaluable tool. So, a series of articles written in jQuery is starting, with this one.

As I already said, the problem is the same with the previous post:

Problem

You need to show to the user which button is pressed – but also, if the user presses another button of your buttons-group to “unpress” the previous one.

Here’s what we are trying to do (click on the buttons):

Button 1
Button 2
Button 3
Button 4
Button 5
Button 6

Analysis

Yeah, I know what you’d say, to use a variable to store the id (or any characteristic attribute) of the pressed button, then refer to the value of that variable to trigger a “reset” process. Well, not for me: if I can avoid a variable, I do it. It is just a habit developed through years of struggling with tons of variables- I got sick of it! So, here’s a simple interaction design I came up with, after all those years:

  1. The pressed button resets every other button that belongs in its buttons-set.
  2. The pressed button marks itself as “pressed”.

Simple and effective. And even simpler to implement in jQuery. So, here’s my solution…

Before we start coding…

Create a stylesheet for the divs (or any kind of DOM element you prefer) that will function as buttons. The css I use is this:

.myButton {
	width:120px;
	background-color:#CCCCCC;
	color:#000;
	font-family: Verdana, Geneva, sans-serif;
	font-size:12px;
	padding: 2px 2px 3px 5px;
	margin-bottom:1px;
	cursor:pointer;
}

.myButton:hover {
	background-color:#FC0;
	color:#000;
}

Next, wrap a number of divs into a div, that is:

<div class="buttonsContainer">
<div class="myButton">Button 1</div>
<div class="myButton">Button 2</div>
<div class="myButton">Button 3</div>
<div class="myButton">Button 4</div>
<div class="myButton">Button 5</div>
<div class="myButton">Button 6</div>
</div>

On to coding

OK, were ready to call jQuery to do it’s magic:

$(
function () {
//select all the divs within the div with
//and assign them an event listener for click
$(".buttonsContainer > div").bind("click", doClick);
//the click event handler
function doClick() {
//reset the style added before for every div that is in our set
//and actulally overrides our original css class
$(".buttonsContainer > div").removeAttr("style");
//change the css style for the DOM element that
//triggered the event
$(this).css({'background-color':'#003399', 'color':'#fff'});
}        
}
);    
</script>

And, that’s all there is to it! Insanely easy huh?

18 responses to “jQuery – Which button is pressed?

  1. Great post!!!jQuery also provides capabilities for developers to create plug-ins on top of the JavaScript library. This enables developers to create abstractions for low-level interaction and animation, advanced effects and high-level, theme-able widgets.like JavaScript Tutorial

    • Thanks for your comment. I am veeeeery new in jQuery and still exploring the possibilities, in fact I am applying techniques I have developed in other environments and I am really surprised from the easinesses that jQuery offers.

  2. Hey very nice blog!! Guy .. Beautiful .. Superb .. I will bookmark your site and take the feeds also?I’m satisfied to find a lot of useful information right here in the post, we’d like work out more techniques on this regard, thanks for sharing. . . . . .

  3. certainly like your web-site however you need to test the spelling on several of your posts. A number of them are rife with spelling problems and I in finding it very bothersome to tell the reality however I?ll surely come back again.

    • Trying to do my best with the english language. Nevertheless, it is not my mother language, so I guess some errors will slip in. Thanks for your comment.

  4. Pingback: jQuery Accordion (play that tune m8!) | 0×109

  5. Pingback: URL

  6. Good read, I just passed this onto a colleague who was performing slightly research on that. And he just bought me lunch since I identified it for him smile So let me rephrase that: Thank you for lunch! 920653

  7. I frankly knew about most of this, but in spite of this, I still considered it turned out helpful. Good task!

  8. Valuable info. Lucky me I discovered your site by accident, and I’m stunned why this coincidence did not came about in advance! I bookmarked it.

  9. I just want to tell you that I am new to blogging and certainly loved this web site. Very likely I’m want to bookmark your site . You absolutely have excellent articles and reviews. Regards for revealing your webpage.

  10. sort of enjoyed this article 😛 not all of it – there are a number of points which i found a lttle bit off however overall it was a pleasant read, many thanks for the post! 🙂 Sincerely.

  11. Howdy! Cool piece of writing! I have been a frequent visitor (a lot more like addict :P) on your website but yet I had a is sue. I am only not likely sure whether it is the right site to ask, but you have no spam comments. I get comments each day. Can you help me? Thanks!

Leave a Reply

Your email address will not be published. Required fields are marked *