Start your free trial now, and begin learning software, business and creative skills—anytime, anywhere—with video instruction from recognized industry experts.

Start Your Free Trial Now
Watching:

Adding jQuery navigation


From:

CSS: Styling Forms

with Ray Villalobos

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.
please wait ...
Watch the Online Video Course CSS: Styling Forms
4h 1m Beginner Jan 20, 2012

Viewers: in countries Watching now:

This course covers CSS best practices and techniques for styling and structuring forms. Author Ray Villalobos explains how forms work, best practices for structuring HTML, new additions to forms in HTML5, and how to style individual elements. The course discusses how to use CSS to style traditional and custom elements and reviews browser discrepancies, custom elements, and custom fonts and how to style for different types of user feedback. Advanced CSS layouts and design patterns and issues specific to styling for handhelds are also covered.

Topics include:
  • Creating forms with the
    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
Subject:
Web
Software:
CSS
Author:
Ray Villalobos

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.

There are currently no FAQs about CSS: Styling Forms.

 
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

* Estimated file size

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

Upgrade to View Courses Offline

login

With our new Desktop App, Annual Premium Members can download courses for Internet-free viewing.

Upgrade Now

After upgrading, download Desktop App Here.

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 ?

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:

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.

Learn more, save more. Upgrade today!

Get our Annual Premium Membership at our best savings yet.

Upgrade to our Annual Premium Membership today and get even more value from your lynda.com subscription:

“In a way, I feel like you are rooting for me. Like you are really invested in my experience, and want me to get as much out of these courses as possible this is the best place to start on your journey to learning new material.”— Nadine H.

Start your FREE 10-day trial

Begin learning software, business, and creative skills—anytime,
anywhere—with video instruction from recognized industry experts.
lynda.com provides
Unlimited access to over 4,000 courses—more than 100,000 video tutorials
Expert-led instruction
On-the-go learning. Watch from your computer, tablet, or mobile device. Switch back and forth as you choose.
Start Your FREE Trial Now
 

A trusted source for knowledge.

 

We provide training to more than 4 million people, and our members tell us that lynda.com helps them stay ahead of software updates, pick up brand-new skills, switch careers, land promotions, and explore new hobbies. What can we help you do?

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.