AIM 2

Assignment 2: Blossoming

Due: Week 6 (3/5)

You will present a body of your own writing in a relatively minimal format (which can include hiding parts of this writing), and then use jQuery to permit the writing to progressively unfold and become aesthetically complicated as a user interacts with the text.

Use one of the following for your text:

• Your Journal Entry 1 writing

• Your Journal Entry 2 writing

• A new piece of your own writing pertaining to your Project 1 topic (at least a page of material)

Any visual materials must be your own! You cannot use anything downloaded from the web for this assignment.

jQuery plugins will not be used for this assignment! Let's see what you can do with your own lines of code.

First step: markup

Mark up your text content properly with HTML5 tags, avoiding the use of <div> tags. Also incorporate any additional textual/visual materials that will be saved for later as a surprise. Give this basic layout some CSS layout and typographical attention.

Second step: implementing jQuery

1. Create your <script> tags and use one of the following links:

• http://code.jquery.com/jquery.min.js

• http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js

2. Create another set of <script> tags to enclose the following:

$(document).ready(function() {

...your jQuery lines will go here...

});

3. Hide all of your surprises with this format: $(object).hide();

Ex:

$('footer').hide();

$('section h1').hide();

$('a.specialclass').hide();

4. Bind visible elements to events that can trigger jQuery functions

$('p.surprise').click(function() {

$(object).slideDown();

$(object).fadeIn();

$(object).toggle();

$(object).css();

$(object).addClass();

});

If you bind an event to an <a> element, use this format:

$('a.anothersurprise').click(function(event) {

event.preventDefault();

$(object).slideDown();

...etc..

});

You're not confined to click-events. You can also hover:

$('p.surprise').hover(function() {

...etc..

});

jQuery tutorials

http://w3schools.com/jquery/jquery_selectors.asp

http://w3schools.com/jquery/jquery_hide_show.asp

http://w3schools.com/jquery/jquery_fade.asp

http://w3schools.com/jquery/jquery_slide.asp

http://w3schools.com/jquery/jquery_css.asp

http://w3schools.com/jquery/jquery_css_classes.asp