Learning does not always have to be serious. Chances are, you played the Mr. Potato Head game at some point in your childhood. It’s time to return…..
1. Download potato.zip from free.mynmi.net and unzip it into your mysite folder.
2. Open realhead.html with your browser and you should see lots of graphics: the outline of a head, eyes, a couple of moustaches, etc.
3. Now look at the code with Brackets. You should be able to see that, in addition to the usual call to jquery, this document also calls the jquery-ui library. Jquery-ui offers up a whole new basket of animation-related goodies such as accordion containers, progress bars, date picker, and- the one that we are using in this exercise, “draggability”. By the way, there is a lot of information about the capabilities of jquery-ui at http://en.wikipedia.org/wiki/JQuery_UI. There are also lots of examples with sample code at jqueryui.com.
4. Preview realhead.html in your browser and try to move an image? What? It didn’t move? Let’s fix that by adding in this line of code just before the </head> tag:
<script> $(function() { $('img' ).draggable(); }); </script>
Save realhead and test again. This time all images should be draggable. So go ahead, build a face.
5. Once you have sated yourself with face building let’s take a look at what’s going on under the hood. The line of code you pasted is what is known as an anonymous function; ie. you don’t actually have to call the function because it automatically attaches itself to whichever element(s) in your document that you tell it to. In this case you are using the command $(‘img’ ).draggable() to apply the function to every img tag (image tag) in your document. As a result, EVERY image that you add to your page automatically becomes draggable. The hard work is performed by jquery-ui of course, but we don’t have to worry about that. Someone else did that work for us already.
6. When you dragged features around to build a face, chances are that you encountered a couple of problems. Some of the facial features may not be accessible or they may be obscured. For example, you may try to click on and move a moustache but, instead, find yourself moving the head around; or an ear that you like may disappear behind the head. This problem occurs because elements on a web page that are moveable, by necessity become part of a hierarchy as you “stack” them. In other words, one of the elements has to be “on top” or “below” the other. This hierarchy is defined by a CSS value known as z-index and you can offer your users the opportunity to control it. Here’s how.
7. The first step is to set a numeric variable that you will use to control z-index value. So add this line: var zindie=1; (don’t forget the semicolon) just after the <script> tag and before the function begins. Once you are done, your script should look something like:
<script> var zindie=1;
$(function() { $('img' ).draggable(); }); </script>
8. The next steps are to control the variable dynamically and to tie it’s value to the z-index value. To do that, add this function
$('img').mousedown(function(){zindie+=1;
$(this).css("z-index", zindie);})
The screen capture just below shows how things should look when you finish.
In human-speak this function is telling the browser that
(a) if a user presses the mouse down on an image (as in $(‘img’).mousedown ) to
(b) increase the value of zindie by one and
(c) using the command $(this).css(“z-index”, zindie) ,set the z-index value of “this”, which in this case is the image that the user is mousing down on, to whatever zindie is.
9. Test the page again and things should be better. Every time you mouse down on an image it should have a z-index value that is higher than any other image and therefore rise to the top. But we still haven’t totally resolved all of the problems. Images can still become trapped behind other images which means that the user has to drag things around in order to be able to access that ear that ended up underneath the moustache. To create a truly world class Mr. Potato Head game, add this code:
$('img').dblclick(function(){zindie=1; $(this).css("z-index", zindie); })
Once you are done, the entire script should look a LOT like the screen capture below.
10. Now test again. This time when a picture becomes pesky and covers up something that you want just double-click it. This script works a lot like the last one except that, instead of raising the z-index value, a double click resets the value of the image all the way down to 1, which moves it to the bottom of the hierarchy. In fact, you will notice that you can “disappear” things simply by double-clicking them by “hiding” them below another facial feature.
11. Still want to play? Draw or download some facial features of your own and replace the ones on the page with yours. Make sure and give a transparent background to anything that you download or create.