Week 10: Adding Interactivity
We'll introduce JavaScript and jQuery in order to add interactivity to our story designs. We will learn the basics of hiding, revealings and modify our content dynamically. And we'll discuss how this can enhance our story experience.
News Package Critique
- Group 1: Alicia V, Justin W.
- Group 2: Leah W, Melissa B.
jQuery Cheat Sheet
To make jQuery availabile in your document
- Add jQuery script tag to your document, typically right before the closing <body> tag.
<script src="http://code.jquery.com/jquery-latest.js"></script>
- Add a script tag and insert the jQuery “ready” function.
<script>
jQuery(document).ready(function($){
//code goes here
});
</script>
Parts of a jQuery statement
Anatomy of a function
Example of click in action
When using click or hover, always place the action code within the curly brackets. To make the code more readable, separate the brackets on new lines, and use indentation.
Make an element disappear when clicked - The following command will make an HTML element with id=“closeDiv” disappear when a button is clicked.
$("#button").on("click", function(){
$("#closeDiv").hide();
});
A list of common jQuery methods
$("#mybox").hide(); //make an element disappear instantly
$("#mybox").show(); //make an element appear instantly
$("#mybox").fadeOut(400); //make an element fade out
$("#mybox").fadeIn(400); //fade in an element that is already invisible
$("#mybox").fadeTo(400, 0.8); //fade to specific level of transparency
$("#mybox").fadeToggle(400); //will fade in or out
$("#mybox").slideDown(400); //slide an element down to display
$("#mybox").slideUp(400); //slide an element up to display
$("#mybox").slideToggle(400); //slide depending on current state
$("#mybox").css("color", "black"); //change the css of an element
$("#mybox").html('<h1>hi</h1>'); //change the HTML of an element (use single quotes)
$("#mybox").attr("src", "pic.jpg"); //add an attribute to an element
$("#mybox").text("hello"); //add text to an element
$("#mybox").on("click", function(){
//do something on click
});
$("#mybox").on("dblclick", function(){
//do something when double-clicked
});
/* Other mouse events that can be used with "on" method include:
click
dblclick
contextmenu (right-button mouse click)
mouseout
mousemove
mouseover
mouseup
mousedown
*/