NOTE: You should have already read or listened to the "Basic jQuery" lecture before doing this demo and be familiar with the basics of jQuery.

Ok so we are revisiting the faculty page that features responsive/adaptive design. We can jQuery interactivity to this page that will still work in most browsers and will work in the different layouts.

<script src='http://iyawebdev.com/jqm.js'></script>
<script>
$(document).ready(function(){
		// code
});
</script>

Ok first off, we will create a class call "highlight" in the stylesheet that we can use. Add to the bottom of the stylesheet:

.highlight {
	background-color: yellow;	
}

Now we will add a on a "hover" to the "facname" class that adds the "highlight" class to itself:

	$(".facname").on("hover",function(){
		$(this).addClass("highlight");
	});

How about we also add that class to the title just below it as well? Let's try updating that block to:

	$(".facname").on("hover",function(){
		$(this).addClass("highlight");
		$(".factitle").addClass("highlight");
	});

Hmm, but that adds it to ALL title classes. We can use the next() connector to target the element just after the facname, which is the factitle for that person:

	$(".facname").on("hover",function(){
		$(this).addClass("highlight");
		$(this).next().addClass("highlight");
	});

Great. Now we will on a mouseout to undo that class change:

	$(".facname").on("mouseout",function(){
		$(this).removeClass("highlight");
		$(this).next().removeClass("highlight");
	});

It would be nice if hovering over the photo of the person also added those highlights. So set up ons on the headshots that add and remove the highlight classes from the name and title:

	$(".headshot").on("hover",function(){
		$(this).next().addClass("highlight");
		$(this).next().next().addClass("highlight");
	});
	$(".headshot").on("mouseout",function(){
		$(this).next().removeClass("highlight");
		$(this).next().next().removeClass("highlight");
	});

Ok, now let's move to another part of the page. The sidebar on the left (in most layouts) has little pictures of all of the people. We will first hide all of those photos, and then set up toggles on their names ("sname" class) to reveal and hide them. Notice that the pictures come BEFORE the names, so we will use the prev() command to target the object before our triggers (the images before the names):

	$(".sheadshot").hide();
	$(".sname").on("click", function(){
		$(this).prev().toggle();
	});

And finally, we will set up an effect with the larger faculty photos. First we will hide them all:

	$(".facphoto").hide();

Then we will on hover triggers to the "intro" classes (the paragraph of text just before the large photos) to fade them in:

	$(".intro").on("hover",function(){
		$(this).next().next().fadeIn();
	});

Hmm... the effect is not working. If you ever want to test if the underlying trigger (hover) is working, try adding a line inside the trigger of alert('test)'; like below:

	$(".intro").on("hover",function(){
		$(this).next().fadeIn();
		alert('test');
	});

Ok the alert comes up in testing, so we know the hover is working. So let's look more closely at the html code. Is the img tag for the large photo the next html "element" on the page? No. There is actually a break in between the intro paragraph and the img. So how about we update our code to TWO next commands (next and then next again):

	$(".intro").on("hover",function(){
		$(this).next().next().fadeIn();
		alert('test');
	});

And there we go, as you scan through the peope and hover over intro their larger photo fades in!

To see this the final version of this page you can go to faculty_jquery_final.html.