Join Chris Converse for an in-depth discussion in this video Creating the main HTML containers, part of Creating an Interactive Animated Timeline with jQuery.
Now, we're going to make the main HTML containers for our Timeline.…So, in our index.html file inside of the body tag.…Let's come down here and select the timeline goes here, HTML comment.…Let's delete that. Next, let's come in here and add a div tag.…Let's set a class equal to timeline. And then let's end the div.…Now, inside of the timeline div, let's come in here and add another div.…This one is going to have a class of panel_container.…And then end that div. And let's get our cursor inside of the…panel container div, and we're going to add three more items inside of here.…
The first two are going to be divs. The first one is going to have a class of background_slider.…End that DIV. Next, a second div with a class of panel_slider.…And then next, we're going to create an HTML5 element called nav, and then we'll…end the nav element as well. So, now with these in place, I'm going to…go up here and just format these a little bit.…I'll tab these in. And now with our main containers in place,…next, we can start adding in some of the content.…
- Preparing the artwork
- Setting up the project files
- Creating the HTML containers
- Adding content into the HTML containers
- Styling the timeline with CSS
- Adding jQuery to your project
- Adjusting the layout with jQuery
- Adding navigation elements
- Animating the content based on navigation
- Adding autostart and screen size detection features
Skill Level Advanced
1. Creating the Web Graphics and HTML Content
Adding content to the HTML3m 15s
2. Adding CSS Styles for Layout and Positioning
3. Finalizing Layout and Animating Panels with jQuery
Animating the background4m 24s
4. Making the Design Responsive
5. Adding an Autostart and Screen Size Detection
- Mark as unwatched
- Mark all as unwatched
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.Cancel
Take notes with your new membership!
Type in the entry box, then click Enter to save your note.
1:30Press on any video thumbnail to jump immediately to the timecode shown.
Notes are saved with you account but can also be exported as plain text, MS Word, PDF, Google Doc, or Evernote.