Category Archives: JavaScript

Client-side scripting in general, including AJAX and the Document Object Model, will be noted here.

New England GiveCamp 2013 This Weekend

I’ll be attending New England GiveCamp 2013 this weekend.

GiveCamp is a way for technical people and designers to donate their time to worthy nonprofits. Organized by Jim O’Neil and Kelley Muir and hosted at Microsoft’s New England Research and Development center on the Massachusetts Institute of Technology campus, New England GiveCamp is in its fourth year.

This year I’ll again be working with The Esplanade Association. Last year, I was the leader of the team that revamped their website. It’s a real pleasure to work with them again.

Over the weekend, we’ll be working on an interactive map, probably built on the Google Maps API, of the Esplanade’s many amenities and features. The fellows assigned to this task are already full of ideas and getting to work, so once again, I’ve been very fortunate to have highly motivated, very capable team members assigned to our task.

It’s probably going to be another hectic, exciting weekend. Can’t wait!

All links in this post on delicious:

Changing An Image Based On A Checkbox Check Via jQuery / JavaScript

This question came via email earlier today:

Your Article: An Image-Based ‘Checkbox’

Awesome article and very informative. I was trying to get it to work for what I am trying to accomplish but I am having a hell of a time getting it to work I was hoping you can help me.

I have a selection form based on Check Boxes:

item 1 (box)
item 2 (box)
item 3 (box)
item 4 (box)

I have images that correspond to the check boxes, item1.png, item2.png, item3.png, item4.png that are located elsewhere on the page. I just need the image to change based on whether the check box is checked or not. It doesn’t matter if it is faded or an entirely new image, so long as the user notices which box they checked. My problem is there are a lot of little images so in your example you had the two set variables, on or off. How do I introduce multiple images???

I have early tests and the problems are that the default unchecked images do not show up until after the check box is checked…all of them and two whenever I try to add multiple images and or check boxes it breaks somewhere, perhaps the array or I am approaching this at the wrong end. I need your help.

To rephrase the question:

  • We have four checkboxes inside a form.
  • On the same page, we have four images. Each image is related to one of those checkboxes. That is, Checkbox 1 is related to Photo 1, Checkbox 2 is related to Image 2, etc.
  • When we click a checkbox, we want to change its associated image somehow, to indicate the checkbox’s state. (In this case, I am going to use a faded image if its related checkbox is unchecked, and a full-opacity image if its related checkbox is checked).

Easily enough accomplished.

For this exercise, I will use four pictures of Miss USA 2012 contestants, and ask users to pick which are their favorites. If a contestant is selected, her picture will be at full opacity; if the contestant is not selected, her image will be at reduced opacity (i.e., faded).
Continue reading

How To Increment A Counter In MySQL Based On A Radio Button Click

Asked recently on Formspring:

how to increment count in database on clicking radio button

There are a few ways to go about this. I’ll demonstrate two: a traditional, PHP / MySQL only, postback approach, and a jQuery version that uses AJAX to asynchronously record and update the counts.

Just to be clear: In order to complete this solution, we have to use both JavaScript and a server-side scripting language. We use JavaScript to intercept the user clicking the radio button, but process the fact that the button was clicked on the server.

Also, for the purpose of this tutorial, I’ll assume that the radio button involved is part of a group. That is, we have several radio buttons, all with the same name, but different values, e.g.:

<form id="myform" name="myform" method="post">
	<p>Select a color:</p>
	<label id="l_red"><input type="radio" id="r_red" name="color_name" value="red" />Red</label> (<label id="c_red">0</label>) | 
	<label id="l_green"><input type="radio" id="r_green" name="color_name" value="green" />Green</label> (<label id="c_green">0</label>) | 
	<label id="l_blue"><input type="radio" id="r_blue" name="color_name" value="blue" />Blue</label> (<label id="c_blue">0</label>) | 
	<label id="l_black"><input type="radio" id="r_black" name="color_name" value="black" />Black</label> (<label id="c_black">0</label>)

Continue reading

Preloading Images With JavaScript

Anne Hathaway

Anne Hathaway photo by Brian Smith

In my recent travels through old blog posts, I’ve noticed a number of occasions where I’ve discussed how to preload images.

Almost all those examples are stupid or just plain wrong. For that, you have my apologies, and I aim to rectify those mistakes with this post.

First, why would we want to preload an image? Simply put, we intend to show it later on our Web page — either as a result of a mouseover, or a click, or some other sort of Document Object Model (DOM) event.

For example, maybe we want to mouseover a series of thumbnails, and show a larger version of that image in the same place.

Rather than making the end user wait for a new image to load as a result of doing something on a Web page, it makes sense to load the image we intend to show in advance, so it will display almost instantaneously as a result of an event.

I’ll first show why two of my previous methods for preloading images are wrong or dumb, then describe two correct ways to preload images: via basic JavaScript and via jQuery.

The lovely Anne Hathaway will be our model.
Continue reading