Naming the class with JQuery

Note: This lesson requires pictures of your classmates. If you are a fast moving student, you may have arrived at this lesson before all of your classmates have uploaded their pictures. If so, skip this lesson for now and return to it later.

This exercise draws on JQuery, a very powerful and popular JavaScript library, to construct an interactive web experience that links your classmates' names with their pictures. You will be asked to paste or type in a few lines of code that probably won't make a lot of sense at this point. No worries. One of the goals of this lesson is to give you a taste of jquery to whet your appetite for later in the semester when we will learn a lot about coding. For now, just follow the instructions and enjoy the ride! 

1. Enough Talk. For this exercise you need a pictures of all of your classmates. You should be able to find a link to a webpage that has pictures of everyone in your class at mynmi.net/4110. You can access these pictures by right-clicking on each one and saving it. Be aware, however, that all of those pictures are named me.jpg and you will have to rename each one appropriately.  So, create a folder named images inside of your mysite folder, right-click on each of your classmates and and save each of their pictures into the mysite/images folder. As you name the images, follow best practices by avoiding  spaces in the names. If a student is named John Brown, for example, save his picture as john.jpg, john_brown.jpg, or use what is known as 'camel case' (where the second word is capitalized) and save it as johnBrown.jpg.    

2. Open the classmates.html document that you created in the previous (hyperlinks) lesson with Brackets. 

3. As we mentioned, this exercise requires JQuery. Enable it by adding the following code:

<script src="http://code.jquery.com/jquery-latest.js"></script> 

just before the </head> tag, to connect your document to the latest online version of the jquery library.

4. Insert all of the images into your web page, just after the body tag. To insert an image that is in a folder, you have to include the name of the folder as part of the path. As this screen capture shows, classmates.html, the file that you are working with, sits next to the images folder that contains all of the pictures of your classmates:

Screenshot showing relationship of classmates.html to images folder

Therefore, the code for inserting an image named john.jpg that is inside of your images folder would be

 <img src="images/john.jpg">

In this case your task is to insert a series of images just after the body tag as shown here:

<body> 
 <img src="images/john.jpg"> 
 <img src="images/mary.jpg"> 
 <img src="images/bill.jpg">  
 </body>

The best strategy is to insert one image, make sure that everything works by previewing classmates.html in your browser, and then copy, paste, and modify your code to bring in all of the additional images.   

5. Once all of the images are in place, you may notice a problem. The pictures more than fill up the entire page. Fortunately, there is a magic jquery solution for that problem. Just after the script that calls the jquery library, paste this line of code:

<script>$(function() {  $('img' ).css("width", 15 +'%');$('img' ).css("height", 15 +'%'); }); </script>

When you preview this document in the browser,  all images in this document should shrink to 15% of the browser window's width. By the way, you can shrink or expand the images simply by changing 15 to a smaller or larger number.

6. Right below the script that you just pasted in, add this one:

<script> function whois(person){$('#thename').html(person);} </script>

This script creates a function named 'whois' that will display each student's name in a div tag titled 'thename.'  You will learn a LOT about div tags later on, but just follow instructions for now. 

7. Now, insert the div tag titled thename just before the closing </body> tag:

<div id='thename'>   </div>

8. Call the whois function.  Calling the function is easy. For a student named John, you simply find his picture and add code to it that calls the function whenever a user moves his or her mouse over the picture. In the case of john,

<img src="images/john.jpg">  

would become

<img src="images/john.jpg" onmouseover="whois('John')" >

Call the function for one of your classmate's images and test it in your browser. Did it work? If so, repeat these steps for all of your classmates. 

9. Even if everything is working properly, aren't you disappointed that those names appear in such a small font size? To fix that problem, simply add a bit of 'inline css' to the div tag (thename) that displays the names:

<div id='thename' style="font-size:40px">   </div> 

10. FINALLY... Mouseover works great with 'mice' but what if your user is using a tablet or smartphone? To accommodate mouseless users, add the following 'mousedown' function immediately after the semicolon that ends the mouseover function:

onmouseover="whois('John')" ; onmousedown="whois('John')" ;   

Don't forget those semicolons! 

One last point. If you do not see all of your classmate's names as you mouse over their pictures it may be that the div tag that displays their names is not visible because it is at the top of the page and you have scrolled past it. Try resizing your browser window to resolve this problem or (more drastically) experiment with altering the script that shrinks pictures to 15% of the browser window to a smaller percentage.

Print Friendly, PDF & Email