code icon

CSCI 1720

Intermediate Web


jQuery I

  1. On your working drive, create a new folder inside your labs folder and name it jquery1
  1. Download your project template archive (if you don't already have it saved) and save it to your lab9-jquery folder. Unzip the files and folders in the archive to your jquery-1 folder

Again, there are several folders/files included here which you won't need for this particular project. You can delete them later or just ignore them

  1. Download the file, starterFiles.zip. The easiest way to do this, once you have downloaded the file, is (if you have 7-Zip installed on your machine) double-click the .zip file, which will open it with 7-Zip
screen shot
Fig. 1- 7-Zip archive
  1. With your working directory displayed alongside in File Explorer, drag and drop from 7-Zip to FE:
    • index.html & process.php to your project's root directory
    • Image files to the media directory
    • style.css to the css directory
    • We won't be using Sass this time
screen shot
Fig. 2- Getting your files where they need to be

When you're prompted to do so, overwrite the existing files

If you don't have 7-Zip installed (you can easily get and install it from ninite.com), you can extract the files to a separate, temporary folder and then copy/paste them into the appropriate folders in your project

  1. Pictured below is what your directory should look like. The assets that are struck through won't be needed for this project and can safely be deleted
screen shot
Fig. 3- Files/folders we won't need
screen shot
Fig. 4- Starting point
  1. This is our starting point for the lab. Open the project folder in Brackets
  1. Open index.html in Brackets
  1. Complete the document’s meta-elements and comments and Save
  1. The fundamental HTML element we're working with here is the <form> element
screen shot
Fig. 5- Form element opening tag

Remember, form elements have two required attributes:

method: defines how the form data will be submitted

action: defines which resource will receive the form's data, usually a script of some sort

  1. Now, the form itself
screen shot
Fig. 6- Form

While this looks all kinds of busy, take a few moments to familiarize yourself with it. This is the sort of thing that happens all the time in development: One person develops a piece of the puzzle (a form, maybe, or a software module, etc) and 'hands it off' to another. So the other person, that person being you in this scenario, has to first understand what the code does before using it

Anatomy of a Form

  1. With the above note in mind, let's examine this. Look at the first 'chunk,' labelled
    <!-- Accordion 1 -->
screen shot
Fig. 7- Form inputs and labels

Relatively speaking, this is a pretty simple form. It only has one type of input - text. Well, technically, it has four: text, label, submit, and reset. But we don't have any checkboxes, radio buttons, select lists, etc. This time.

Having broken the form down into its component elements, deciphering accordions 2 & 3 should be simple, since they are configured the same way. Other things to note: this particular form is structured as a list. It doesn't have to be. But we'll see later how this structure helps us add some pizazz with our jQuery

If we zoom out a little, we can see, again, that we have a form whose fields are arranged as a list. Three of the list items have class='title' included in their opening tags

The other twelve have class='fields' in theirs. The title list items will eventually be the parts of the accordion that expand/contract when the user clicks on them. Each 'fields' list item has four input fields.

Several of the input fields are marked with an asterisk, indicating that they have to be filled out before the form can be submitted. You may remember from CSCI 1210, that HTML 5 also includes a required attribute, but by using jQuery, we can make the form more responsive

screen shot
Fig. 8- Mapping the code to the output

The script element at the bottom invokes a script that is similar to the one we've been using this semester to add the validation links to the bottom right of the page when it loads. Download the script and save it to your js folder

Moving on

  1. View your file with Live Preview. Notice that you currently have a very mundane web form
  1. Open css/style.css
  1. Once again, complete the comment section and Save the file. Take a moment to examine the file and see if you can figure out how it will appear once it’s linked to the web page
  1. Return to the index.html page and add a link to the stylesheet in the document’s head element and Save the file
screen shot
Fig. 9- Linking to CSS
  1. Return to your browser and refresh the page (Live Preview has probably already done this for you) - Much nicer!
screen shot
Fig. 10- Styled form

Some of the styling included in the stylesheet includes
    • Removing the bullets
    • Styling the title list elements
    • Setting the document’s min- and max-width (adding a little responsiveness to the page)
    • Centering the content on the page
    • Changing the cursor pointer when the user hovers over the title elements

…but we’re still missing a lot of the functionality we want

... enter jQ

  1. Add a link to the jQuery library in the head element of index.html
screen shot
Fig. 11- Linking to jQuery

Note that we're linking to a local copy of the jQ library. Where did it come from? Well, it's included in the project_template.zip archive. I used to think linking to external CDN-hosted libraries was the better way (and it may in fact be better), but lately, I've been bundling all of the libraries I frequently use with my projects, which makes it easier to import them into the projects

  1. Open a new file in Brackets and save it as js/animation.js
  1. Add a comment block at the beginning
screen shot
Fig. 12- Documenting your code

Be sure to replace 'Your Name,' etc., with the appropriate information

When we're considering maintenance, I think that tracking revision dates - at least the most recent date - is important. If we're using a repository, a lot of that meta-information is automatically tracked. But it's important to record it either way. Try to get in the habit of recording this information as part of your workflow

For purposes of this lab, the two dates will probably end up identical

  1. Remember from lecture, we want to nest all of our jQuery functions inside
screen shot
Fig. 13- document.ready()

Remember why??

  1. Add the first line to your animation script:
screen shot
Fig. 14- Filtering fields

So, what does this do? It selects all of the list items whose class='fields', filters out the first four, and hides the remaining 8. So when the page loads, all the user sees is the first set of form fields

The remaining code will cause each title list item to expand when the user clicks on it and hide the title list item that is currently displayed:

This represents an important feature of JavaScript and jQuery: Chaining. Using dot notation, we can 'chain' methods together. In this example, the first part selects the elements; the second filters them; and the third hides (adds the 'hide' class to) all but the first four

  1. Add
screen shot
Fig. 15- Animating the form elements

There's a lot going on here. We’re selecting the unordered list and, when one of the title list items is clicked, it will slide down, revealing its form fields while simultaneously (sort of) sliding the other sets of fields up (one of the 'title' fields will already be up, so nothing happens with that one), hiding them. Remember jQ's motto "write less, code more"

explanation
parent/sibling

One thing I accidentally left off of the instructions that I discovered when doing the walkthrough: in index.html, add the following after the script element for jQuery

<script  src='js/animation.js'></script>

screenshot

The code you just wrote won't work if the file isn't linked to index.html. Remember, since it is using jQuery, it has to be included after the jQuery link

  1. Save your work and display the page in Live Preview. Take it for a spin - confirm that your code is working
  1. Now, there's one thing I don't love about what we've got so far. The arrows (chevrons) stay the same whether the panel is open or not. I'd like to add a little more for user feedback. First, in index.html, copy & paste <i class="fa fa-chevron-up fa-xxl chevron"></i> from Accordion 2 to the corresponding spot in Accordion 1. Change fa-chevron-up to fa-chevron-down

    Change fa-chevron-up in the other two to fa-plus
screen shot
Fig. 20- Modify HTML

So, I confess - I came up with this modification on the fly. I hope it works...

You may be wondering where all these fa- classes are coming from. They're all imported from Font Awesome via the link in the head element of the document you were provided

  1. Let's add a new function to animation.js
screen shot
Fig. 21- Add a function

So, I set this up to check the state of the icons each time one of the display changes we'll add the function that does that below

  1. Enter the following below the event handler:
screen shot
Fig. 22- checkArrows($(this))

The important thing to note here is that we're passing the object that was clicked ($(this)) to the function as a parameter. This lets us change the current row and both of the others

screen shot
Fig. 23- What's going on
screen shot
Fig. 24- Finished file
  1. Save all your work and test the file in a browser. When you click each plus-signed row, it should slide down while the current row slides up
screen shot
Fig. 25- Finished, for now

Testing / Wrap Up

  1. Now that your animation is working correctly, let's wrap this up
  1. Try filling out the form on your local machine and submitting it. Yeah - remember, PHP has to be run from a PHP enabled server. Otherwise, the browser just echoes the file back to you
screen shot
Fig. 18- Not quite there yet
  1. Log in to the server with FileZilla. In your labs folder, create a new folder named jquery-1
  1. Upload your project files and folders to the server directory
  1. In your browser, enter the URL for your lab

    (e.g., ramseyjw.csci1720.net/labs/jquery-1/index.html)

    and press Enter
  1. Now try to complete and submit the form
screen shot
Fig. 19- Form feedback

Ok -- I confess it isn't all that imaginative. But this is an example of a script (PHP) processing form input. We'll do more of this (that's a little less unimaginative) in the next few weeks

Now, you may be wondering where the script came from. Usually, scripts are stored in a separate folder (we'll see this soon). In this lab, the script file was included with your starter files (process.php). If you refer back to Fig. 5, you can verify that the path to process.php indicates that it's located in the same folder as index.html

This seems like a good point to wrap this up. We still have to implement our form validation, but I think that'll make a good homework assignment

  1. Copy the URL to the file to a new text document and save it as jquery-1.txt. Upload the file to the jquery-1 folder on D2L's Dropbox

Have a nice day 😊