Hw #9

Assignment #9: jQuery Introduction

In this assignment you will use some jQuery selectors to make some HTML elements respond to user actions (events).

Copy and save this code as something like jqueryStuff.html:

<!doctype html>
<html>
<head>
  <meta charset="UTF-8">
  <title>jQuery Intro Assignment</title>
  <style type="text/css">
    body { font-family: Arial,sans-serif; background-color: #ffd; }
    #mainDiv { width: 800px; margin: 0 auto; position: relative; }
    button { margin: 0 0 10px 0; }
  </style>
</head>

<body>
  <div id="mainDiv">
    <h3>jQuery Intro Assignment</h3>
    <div id="mainMenu">
      <div id="buttonStuff">
        <button id="hide">Hide</button>
        <button id="show">Show</button>
      </div>
      <div id="funStuff">
        Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec vitae ligula urna. Mauris fringilla 
        felis eu leo gravida ullamcorper. Integer lacinia commodo accumsan. Ut velit mi, luctus condimentum 
        tincidunt quis, suscipit non lectus. Nunc enim sapien, facilisis sed sodales dignissim, ullamcorper 
        quis nisl. Suspendisse sit amet justo ut sapien pellentesque.
      </div>
    </div>
  </div>
</body>
</html>

First, include a jQuery Library source (include) file in your page. You can get the jQuery Library file from this page. Either...
1. Download the compressed, production jQuery library. This "download" is probably (depending on your browser) a highlight, copy, paste into your text editor, and save process. Save this library file in your assignment folder or a sub-folder. You can rename it if you wish, but the renaming is optional. In any case, make sure you note what name the file is saved as.
2. Copy one of the URLs from the "Using jQuery with a CDN" section of the same download site.
Put a <script>...</script> tag in the <head> section of your HTML page, which includes the jQuery library that you downloaded and saved, or copied the CDN URL for, in the previous step, as its src attribute value.
Put another <script>...</script> tag in the <head> section of your page, and put into it some jQuery code which does these tasks (and see the HINTS below):
- Wait until the document is ready to do anything else in the jQuery code.
- Slide the div "funStuff" up and out of sight when the "Hide" button is clicked. (See the HINTS below.)
- Slide the div "funStuff" down and visible when the "Show" button is clicked. (See the HINTS below.)
Add a hypertext link to the index.html file that is in your class folder. Make this hypertext link display the html page that you made for this assignment.
Validate your page using the W3C HTML Validator. (The Validator will automatically detect whether you have an XHTML or an HTML5 document.)
Upload your files to your class folder. You will need to use an FTP program to upload the files. You will find some general FTP instructions on a page called "FTP Instructions".
Test your page to make sure it has no errors in it. (You should turn on the display of script errors in your browser!) Here are some instructions on how to turn on JavaScript error messages.
HINTS:
1. Use $(document).ready to make sure the page has loaded before you do anything else.
2. Use the jQuery click event handler to do the needed actions. Do not use the standard HTML onclick event attribute/handler.
3. The task "Slide the div 'funStuff' up and out of sight" can be accomplished with the jQuery slideUp() method. The optional argument to slideUp() is the number of milliseconds that you want the process to take.
4. The task "Slide the div 'funStuff' down and visible" can be accomplished with the jQuery slideDown() method. The optional argument to slideDown() is the number of milliseconds that you want the process to take.

Richland College Multimedia Learning Center

Assignment #9: jQuery Introduction