Today we are discussing customizing jQuery plugins. I'm not going to give a detailed explanation of what we did in class, because it would really only be helpful to people who are customizing the exact same plugins, in the exact same way. Also I'm lazy. Instead I will describe the general steps you should go through when customizing a plugin:

1. Don't use a plugin
   Hopefully this is the only step you need. Whenever possible, you should always make your animations and interactions. By making a jQuery system from scratch, you will know exactly how to customize and expand upon it. Be honest and practical with what your design truly needs. Remember you can always start simple, and add more to it later, as you have time. That being said, if you see something, that is exactly what you want to do anyway, and will not require much of a diversion from the demo, then proceed to the next steps.
2. Do a LITTLE research
   The internet has been around for a long time. jQuery hasn't been around quite as long, but it's no spring chicken. Many ambitious developers have been creating jQuery plugins for a few years now. Make sure you seek out a few options before choosing one to try out. Also, keep the other ones as backup in case the one you choose doesn't work out.
3. Read the plugin website's documentation
   To really use a plugin for all it's worth, you need to read as much as you can about it before preceding. You will never truly understand it until you actually start editing the code. However, the best way to save time in the long run, is to do a little reading before you proceed.
4. Replicate a demo on your server
   Most plugin sites will have place where you can download a demo or example of the plugin in action. Very often this will be a zip of all the files necessary to run the demo. You could run this demo on your computer, but it is best, just to be sure, to upload all the necessary files for a demo to your server.
5. Test
   After you upload it to your own server, test to make sure the plugin works exactly as it did on the plugin website. If it is not working, double check that all the files you downloaded are in the same place, respectively, on your server. You especially need to test all the aspects of the plugin that matter to you. For example, the lightbox plugin allows you to have a title with the photos, a back and next button, and allows you to use the mousewheel to switch photos. Some of these features may not matter to you, but make sure to test the ones that do.
6. Trim the files
   Remove any files you don't need to run the features of the plugin that matter to you. Every plugin will have at least one *.js file, even if it is an absolute link to the *.js file hosted on the plugin's website. Some plugins may require additional *.js files, *.css files, and even additional image files for icons. Determine which files are not needed by deleting them one-by-one and fully testing the plugin after you delete each file.
7. Trim the code
   Some of the files you obtained from the plugin website are not meant to be edited. However, if you received an HTML file from the plugin website, or copied some code directly from the website, there may be a some code you do not need to run the features of the plugin that matter to you. The website may give you several demos of the same plugin. Try to determine what HTML and Javascript is not necessary for your specific demo, and remove it. Trimming the files and code make the plugin more portable so that it can fit into your unique portfolio.
8. Utilize help and support
   By figuring out issues for yourself, you will understand the plugin even more intimately, but to save time you need seek out help. There may be fellow students who are using the same or a similar plugin that may have some advice. The plugin website may have a forum to communicate with peers or the contact information of the original developer. A google search for the plugin's name and a few general terms describing your issue may result in other peer-driven forums. As always, feel free to email me with any questions you may have.

Plugins can be a be a powerful tool, just as jQuery, just as Javascript, just as CSS and HTML. As with any of these tools you need to determine how to use them most effectively to achieve your goals. The end user will not care what tools you used to create the end product. So you must first formulate a vision of the end result, then be open and honest to the most efficient way to get there.

Today we discuss using Javascript for animation. So far, we have only used Javascript as a tool of interactivity. We have discussed how to Javascript to show or hide content, when we click a button. We have also discussed how to use CSS or Javascript to change the display properties of an object, for feedback when we rollover a button. Today we are going to talk about how to use Javascript to show a gradual transition to a specified display state. We don't want something to just appear in the blink of an eye; we want it to slowly fade in. We don't want an image to just appear at a higher spot on the page; we want to raise it. Well it takes a village to raise an image, and by "village", I mean jQuery.

jQuery setup

jQuery is a library that is written in Javascript and enables you to write Javascript with less code. It is important to remember that you are still writing Javascript; jQuery is simply like slang to the Javascript language.

To include the jQuery library you download the *.js file at jquery.com and save it on your server. Then include the external *.js file in the <head> of your HTML with the <script> tag. The value of the src attribute in the script tag should match the filename and location of the jQuery library file you downloaded.

<script type="text/javascript" src="jquery-1.7.min.js"></script>

To start writing jQuery you begin with the <script> tag, typically in the <head> of the HTML document. Then we encapsulate most of our code within the following which simply just makes sure that all the HTML content is loaded before it begins running the Javascript inside of it.

<script>
	$(document).ready(function() {
	
		// all Javascript code goes in here
	
	});
</script>

At this point it is usually a good idea to put an alert("hello world") in here to assure that everything is running correctly. If the alert does not appear when you save and run the HTML in a browser, check the filename and location of the jQuery library, and check the exact script to encapsulate all the Javascript code is correct.

jQuery event basics

To replicate the same interactivity we created in our Javascript lesson we start by creating the necessary HTML and CSS. In our HTML, we need to make sure the element tags we use for both buttons and content have recognizable ids or classes. In our CSS, if we are trying to make something appear, we have to first set it up to be invisible with display: none.

Now in traditional Javascript we register the mouse click event as an attribute onclick in the HTML tag itself. The value of that attribute is a function that we create in the <script> tag. Using jQuery we don't have to add anything to our HTML at all. Once the HTML tag is given an id, all the work of the event is done in the <script>.

We register an event for a particular HTML tag first by using the dollar sign $ with an open parenthesis and an open quotation. Then we write the CSS for referencing that HTML element "tagname#idname", and close the quotation and parenthesis. After the parenthesis we write our event name, and setup a function in the same way we would have in traditional Javascript, only without the function name, within parenthesis.

 
<script>
	$(document).ready(function() {

		$("div#button").click(function(){
				// function code goes here
		});

	});
</script>

The above syntax structure will also work with the mouseover() event function for rolling over an element, and the mouseout() function for rolling off an element.

<script>
	$(document).ready(function() {

		$("div#button").mouseover(function(){
			// function code goes here
		});
		$("div#button").mouseout(function(){
			// function code goes here
		});

	});
</script>

This method can also work for a toggle() function. The toggle() function is used when you want a different animation to happen the second time you click on the same button. Within the parenthesis of the toggle() function you have two function(){ .. } sets separated by a comma.

<script>
	$(document).ready(function() {

		$("div#button").toggle(function(){
			// animation for the first click goes here
		},
		function(){
			// animation for the second click goes here
		});

	});
</script>

jQuery effect basics

Now in traditional Javascript, that function we create uses the following to reference our content we are changing and how we change the element to be visible.

document.getElementById('content').style.display = "block";

Using jQuery, we start by referencing the HTML element similar to what we did above using CSS syntax. Then we can use the show() function immediately after to display the element.

<script>
	$(document).ready(function() {

		$("div#button").click(function(){
			$("div#content").show();			
		});

	});
</script>

This will make it appear immediately. To make it gradually appear, you can use the text "slow" or "fast" within the parenthesis of show.

$("div#content").show("slow");

You can also use a numerical value to represent the number of milliseconds it should take to show the element. The following would take 1.5 seconds to show.

$("div#content").show(1500);

To hide content which is already displayed, first make sure that it is not hidden through CSS, then use either text ("slow" or "fast") or a numerical value within a hide() function.

$("div#content").hide(1500);

You will notice, if you have a border set around the content div, that the show and hide affect the width and height of the element as well as the opacity. If you only want to affect the opacity you can use the effect functions fadeIn() and fadeOut() in the same way.

$("div#content").fadeIn("slow");
$("div#content").fadeOut(2000);

If you only want to affect the height of the element you can use the effect functions slideIn() and slideOut().

$("div#content").slideIn(500);
$("div#content").slideOut("fast");

jQuery custom CSS

These out-of-the-box effect functions are simple to use if it is the only CSS you want to affect. If you want to adjust a custom CSS property, you can use the css() function in jQuery. The css() function is played off the content you want to affect.

$("div#content).css( )

If you want to adjust only one property, you need two parameters inside the parenthesis. The first is the property within quotes and the second is the value within quotes. The two parameters are separated by a comma. Here is how you would change the text color of the button element if you mouse-over the button element.

<script>
	$(document).ready(function(){
		$("div#button").mouseover(function(){
			$("div#button").css("color", "#ffffff");
		});
	});
</script>

If you want to adjust more than one property then you can use a left and right brace inside the parentheses of the css() function, then separate each property-value set with a comma, and separate each property from the value with a colon. Here is how you would change the text color, background color, and font weight of the button element if you mouse-over it.

<script>
	$(document).ready(function(){
		$("div#button").mouseover(function(){
			$("div#button").css({
				'font-weight': 'bold',
				'background-color' : '#cc9999',
				'color' : '#ffffff'
			});
		});
	});
</script>

Typically with any mouseover() function you would have a mouseout() that would reverse the action of the mouseover() function. The reverse would usually set the element back to it's original properties setup in the CSS.

<script>
	$(document).ready(function(){
		$("div#button").mouseover(function(){
			$("div#button").css({
				'font-weight': 'bold',
				'background-color' : '#cc9999',
				'color' : '#ffffff'
			});
		});
		$("div#button").mouseout(function(){
			$("div#button").css({
				'font-weight': 'normal',
				'background-color' : '#cccccc',
				'color' : '#000000'
			});
		});
	});
</script>

jQuery custom animations

The above method can be used to set a new CSS property of any element immediately. If you want to have a gradual transition that doesn't fit into any of the above out-of-the-box effects above, you need to use the animate() function. The animate() function requires two parameters separated by a comma. The first parameter is the CSS you want the element to animate to. It takes the same format as the multiple-property CSS above. It is encapsulated in a left and right brace { }, each property-value pairing is separated by a comma, and each property is separated from it's value with a colon. The second parameter in the animate() function is the number of milliseconds the animation should take.

<script>
	$(document).ready(function(){
		$("div#button").click(function(){
			$("div#content").animate({
				'margin-left' : '200px',
				'margin-top' : '50px',
				'width' : '0px',
				'height' : '0px',
				'opacity' : '0'
			}, 1500);
		});
	});
</script>

The above animation is activated when the user clicks on the button element. It fades the content element's opacity, shrinks the width and height down to nothing, and all the while moves the position diagonally down and to the right.

jQuery is an amazing addition to our web design toolkit. Now we are not just giving a script to our actors, but we give them life through special effects. Remember you are the director. Whether you want Slimer to slowly change his opacity into the scene, or the DeLorean to margin-left towards the clock tower in 88 milliseconds, or (to be more current) have your Twilight characters lie awkwardly in a field and cry. It is your responsibility to use the tools at your disposal to create the most successful narrative.