Join Ray Villalobos for an in-depth discussion in this video Adding jQuery navigation, part of CSS: Styling Forms.
- View Offline
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.
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.
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.
- Creating forms with the <form> element
- Adding labels and basic usability features
- Navigating elements between browsers
- Styling the background
- Creating input and button fields
- Working with select fields
- Floating and positioning grouped elements
- Using HTML5 input types
- Resizing elements and adjusting the view for mobile devices
- Adding jQuery navigation
- Designing validation feedback