Easy-to-follow video tutorials help you learn software, creative, and business skills.Become a member

Adding jQuery navigation

From: CSS: Styling Forms

Video: Adding jQuery navigation

In this movie I'm going to show you how you build some interactivity into a form with three fieldsets. Each fieldset is in a different tab, when we get started we'll have a form that looks like this. Right now the tabs don't show or hide any of the other information and the buttons don't take you to the next fieldset. When we're done you'll be able to use the tabs at the top of the screen as well as the navigation buttons at the bottom of each fieldset. In future movies I'll show you how to add validation elements and how to style them.

Adding jQuery navigation

In this movie I'm going to show you how you build some interactivity into a form with three fieldsets. Each fieldset is in a different tab, when we get started we'll have a form that looks like this. Right now the tabs don't show or hide any of the other information and the buttons don't take you to the next fieldset. When we're done you'll be able to use the tabs at the top of the screen as well as the navigation buttons at the bottom of each fieldset. In future movies I'll show you how to add validation elements and how to style them.

So let's open up our exercise files, open up our Starting Points and find the starting point for this video. I'm going to drag a copy of the Working Folder on to our desktop, holding down the Option key to make a copy, and I'm going to drag a copy of the Working Folder on to Espresso to open it up as a project. I'm also going to drag the codesnippets.txt file into the workspace and I'm going drag the index.html document also into the workspace.

We'll go to the codesnippets and drag down to our section for this video. We're going to need to add a link to our scripts, so I'm going to copy these two links right here to script files. I'm going to go to the index file and in the head section of the document paste the links to our two scripts that we're going to need. We're going to use a library called jQuery that you'll need to download from the jquery.com web site, and we want to make sure that we choose the production version that's already been minimized so that it's as small as possible and hit the download jQuery link.

You may have to save this as a separate document. So I'm going to put it on my desktop and make sure that we choose Page Source and we're going to add .js extension, save it to the desktop, go back into our file and I'm going to need to copy this file into our Project Files. To copy things into a project file folder in Espresso you can simply just drag into this Project Files section. You can also drag it into the folder on your desktop, either way will work.

I'll put it right here, it adds it right there, and you could see this if I open up this Working Folder it's already added right there. Since I have a link to an additional myscript.js file, I'm going to need to add a new file. So I'm going to click right here and select New File, and I want to call it myscript.js. And now we have the links to these two files and we have a copy of each of these two files in our index page. So jQuery is a JavaScript library that allows you to use versions of JavaScript that have been optimized for different browsers and take care of some discrepancies between browsers in the way JavaScript is implemented.

First thing we have to do when we work with jQuery is define a function called the document ready function that executes after the page has been loaded. So I'm going to do that by going to the codesnippets, and I'm going to grab this first piece of code right here and this has the code for the document ready function. Functions that we want to execute after our page loads will be inserted inside this function, so I'm going to copy that and go into myscript.js file and paste our document ready function.

So I want to go back into codesnippets and the first thing I'm going to do is make sure that we execute some code, so that when somebody clicks on the navigation list items, we make all the tabs inactive which will hide them, and then we will make the tab that we clicked on active. We do this by using a series of selectors and then adding methods or functions onto the selectors. So jQuery is really cool in that, it allows you to specify selectors much like you would do with CSS. So here we're asking jQuery to find any item with the nav class that is also a list item, and then we're asking to see if that navigation link has an attribute and setting that idea of that attribute to nothing.

When we set the idea of the attribute to nothing, if any of the IDs were active tabs before, then it will make them nothing, so this essentially makes all tabs inactive and it clears in it. Let me go ahead and move this window over here, I'm going to click on my index file, open up the Preview. If it says that the document has been renamed just because I named it before, so I'm going to hit Save, I'm going to go back to codesnippets. I want to grab this piece of code here. Now although Espresso has an excellent live view, one of the things that it will not update automatically is any scripts that you type in.

Whenever you're typing scripts in this movie make sure you save this script before you try to preview the document, and you'll need to come over here and actually refresh the page unlike most of the time when you're just updating CSS or HTML files. So I'm going to save this and if I come over here, just remember that most of the time you'll have to remember to refresh your HTML to make sure that this operates properly. So this particular piece of jQuery takes care of making sure that these tabs switch and activate whichever page we're going to be on depending on which item we click.

So they do that by first looking for using the selector, so it's going to look for navigations that have list items in them. And if we look at the HTML, when we define the navigation we define it with a class of navigation, and each tab is defined as a different list item. So it's going to look for all these and it's going to clear out any IDs that currently exist. Right now there is only one id that exists which is this activetab. So the first piece of that code is going to get rid of any IDs that currently exist.

So if I take this one out, I'll save it, refresh over here. When I click, you will see that it will essentially clear out any tabs that are active right now. And then the second piece of code changes the attribute of the item that we clicked on. Since we're checking anytime somebody clicks on a list item, it knows with this variable that this is the item that we clicked on and we can set the attribute of id to be activetab, so what that does is make sure that the item gets highlighted once you refresh it.

Then when we click on these different elements it will highlight them. It doesn't switch any of these fieldsets around but at least it's visually showing you the different tabs. So we'll need to take care of that next. So I'm going to go back into codesnippets and grab the next piece of code. And that piece of code handles -- when somebody clicks on the navigation links it's going to hide all the tabs, make the one that we want active, and then in addition that it's going to hide all of the fieldsets in this part, and then we're going to show the one that we want down here. So let me just copy this part, and go into myscript.js and replace this section of the code with a new version of the code, and I'll save it, come over here, refresh.

Now when I clicked on these tabs it's going to just hide all of them. So whenever I click one of them, it's going to switch the tab to be active and have the proper style, and it's going to hide all these other things. That's good, move up to the next piece of code. Remember that to hide the Step 2 and Step 3 parts of our form, we had styled them with the class hidden and what this is doing is taking all the fieldsets and giving them the class of hidden, so it hides all of them.

So in the next piece of code we're going to add a little more code right here, so we'll replace this entire piece of code here. So we've added just a couple of other lines of code. What this is doing is, we are looking to see what the title of the item that we clicked on is and we're going to store that object into a variable called whichitem. So what that will do is if you take a look at the index.html you'll see that each one of these list items has a title and that title happens to match the title of our legends.

This one says Login Info, this one says Other Info, if you go down here into this fieldset you'll see that there is a title called Other Info, and if we go down here to Comments you'll see that there is another title here called Comment. So on purpose I make sure that those things matched. And I'm going to go back into my JavaScript and show you that it's going to find out which one of those items we clicked on, and then it's going to look for a fieldset with the title of what we just checked for, the matching title. And then it's going to take that fieldset and change the class of that fieldset to nothing.

So that means that it will not be hidden, because the ones with hidden input fields are the ones that are hiding. So I'm going to save that, come over here, refresh, and now when I click you'll see that it allows you to navigate to the different fieldsets. Back into our codesnippets.txt, now we need to code the previous and next buttons. So we'll grab a little piece of code for the previous button, we'll do that one first, the next button is pretty much the same piece of code. So, back into myscript.js, be very careful about this; we need to make sure that this is all still within the document ready function.

So here is the function for handling clicking on the navigation links, we don't want to get rid of this one right here. I'm going to add a few extra spaces down there and add the next piece of code right here. If you remember what we did with each one of these list items, is create an id of activetab to highlight which one of these elements was the current element. The next and previous buttons can't understand which fieldset is active, but by keeping track of which of these tabs is active, we can know which number fieldset is also active.

So that's what this part of the code does. We look at the entire document for anything with an id of activetab. That will be one of these tabs right here, whichever one happens to be active. In the next line we find out the index of that item, so we want to find out which number tab is active. So we could do that by taking a look at which index of the list item is this item that we have selected up here. When we switch to another fieldset, we want to update the tabs by making them all inactive and then updating the tab that belongs to fieldset that we want.

So this piece of code right now, if we save it and we refresh, when we go to another tab -- I'm going to hit the previous button now to go to the previous tab -- it's really only going to update the tabs right now, because all we have done is found out which one of the tabs was active, which and when we first reloaded this it was tab 2, and we store that into this variable. And then we just clear all the tabs like we did before. And then we have a selector here that allows you to check which nav item is equal to the current one that we have clicked on, minus 1, so it's going to find the nav item before the current nav item, and it's going to change the id of that nav item to activetab, activating the tab so that it shows up as the current tab.

We haven't done anything with the fieldsets yet, we're going to do that next. So back into codesnippets, this is the same code as before. We're just adding a couple of lines to care of the fieldset. So let me grab that code, I'm going to copy here, go back into myscript.js. Again, make sure you're not deleting this last piece of code, because it goes with the document ready function. And we're going to actually select all of this and replace that code that has the next two lines. This is pretty much like the code that we did before to hide all the fieldsets.

It just sets the attribute of all the fieldsets to hidden, and then we do something like what we did with the list items, we're finding out which fieldset is the current fieldset minus 1, which will be the previous fieldset, and then we're adding a class of nothing. When we add the class of nothing to the fieldsets, the nav fieldset would actually show up, because over here we've set all the fieldset to be of class hidden. When they are not hidden, they are showing. So I'm going to save that, come over here and refresh, and I'm going to click on Step 2 and I'm going to click on the previous button and it's going to navigate the tabs properly and it's also going to show this fieldset that is the first fieldset.

So that's pretty much all you have to do for the previous button. The next button is going to be pretty much identical, but obviously we're not going to go the previous item using minus 1, we're going to the next item using plus 1. So back into the codesnippets, and we'll grab the next piece of code into our scripts.js, and paste our code for the next button. This will be pretty identical to the previous button. The only difference is going to be that here we're going to add 1 to the whichOne item, so that it increments to the next element.

So we'll save that, come over here, refresh, we can hit this next button now and it will clear all the tabs, activate the current tab and then set the fieldset to the proper fieldset. We can hit the next button and go to the third element and we can hit the previous button, previous button, we can hit the tabs to navigate and we have built an animation to navigate between our fieldset in different ways.

Show transcript

This video is part of

Image for CSS: Styling Forms
CSS: Styling Forms

31 video lessons · 12985 viewers

Ray Villalobos
Author

 

Start learning today

Get unlimited access to all courses for just $25/month.

Become a member
Sometimes @lynda teaches me how to use a program and sometimes Lynda.com changes my life forever. @JosefShutter
@lynda lynda.com is an absolute life saver when it comes to learning todays software. Definitely recommend it! #higherlearning @Michael_Caraway
@lynda The best thing online! Your database of courses is great! To the mark and very helpful. Thanks! @ru22more
Got to create something yesterday I never thought I could do. #thanks @lynda @Ngventurella
I really do love @lynda as a learning platform. Never stop learning and developing, it’s probably our greatest gift as a species! @soundslikedavid
@lynda just subscribed to lynda.com all I can say its brilliant join now trust me @ButchSamurai
@lynda is an awesome resource. The membership is priceless if you take advantage of it. @diabetic_techie
One of the best decision I made this year. Buy a 1yr subscription to @lynda @cybercaptive
guys lynda.com (@lynda) is the best. So far I’ve learned Java, principles of OO programming, and now learning about MS project @lucasmitchell
Signed back up to @lynda dot com. I’ve missed it!! Proper geeking out right now! #timetolearn #geek @JayGodbold
Share a link to this course

What are exercise files?

Exercise files are the same files the author uses in the course. Save time by downloading the author's files instead of setting up your own files, and learn by following along with the instructor.

Can I take this course without the exercise files?

Yes! If you decide you would like the exercise files later, you can upgrade to a premium account any time.

Become a member Download sample files See plans and pricing

Please wait... please wait ...
Upgrade to get access to exercise files.

Exercise files video

How to use exercise files.

Learn by watching, listening, and doing, Exercise files are the same files the author uses in the course, so you can download them and follow along Premium memberships include access to all exercise files in the library.


Exercise files

Exercise files video

How to use exercise files.

For additional information on downloading and using exercise files, watch our instructional video or read the instructions in the FAQ.

This course includes free exercise files, so you can practice while you watch the course. To access all the exercise files in our library, become a Premium Member.

Join now "Already a member? Log in

Are you sure you want to mark all the videos in this course as unwatched?

This will not affect your course history, your reports, or your certificates of completion for this course.


Mark all as unwatched Cancel

Congratulations

You have completed CSS: Styling Forms.

Return to your organization's learning portal to continue training, or close this page.


OK
Become a member to add this course to a playlist

Join today and get unlimited access to the entire library of video courses—and create as many playlists as you like.

Get started

Already a member?

Become a member to like this course.

Join today and get unlimited access to the entire library of video courses.

Get started

Already a member?

Exercise files

Learn by watching, listening, and doing! Exercise files are the same files the author uses in the course, so you can download them and follow along. Exercise files are available with all Premium memberships. Learn more

Get started

Already a Premium member?

Exercise files video

How to use exercise files.

Ask a question

Thanks for contacting us.
You’ll hear from our Customer Service team within 24 hours.

Please enter the text shown below:

The classic layout automatically defaults to the latest Flash Player.

To choose a different player, hold the cursor over your name at the top right of any lynda.com page and choose Site preferencesfrom the dropdown menu.

Continue to classic layout Stay on new layout
Exercise files

Access exercise files from a button right under the course name.

Mark videos as unwatched

Remove icons showing you already watched videos if you want to start over.

Control your viewing experience

Make the video wide, narrow, full-screen, or pop the player out of the page into its own window.

Interactive transcripts

Click on text in the transcript to jump to that spot in the video. As the video plays, the relevant spot in the transcript will be highlighted.

Are you sure you want to delete this note?

No

Your file was successfully uploaded.

Thanks for signing up.

We’ll send you a confirmation email shortly.


Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

Keep up with news, tips, and latest courses with emails from lynda.com.

Sign up and receive emails about lynda.com and our online training library:

Here’s our privacy policy with more details about how we handle your information.

   
submit Lightbox submit clicked
Terms and conditions of use

We've updated our terms and conditions (now called terms of service).Go
Review and accept our updated terms of service.