Watch and download Lynda Create An Interactive Animated Timeline With jQuery

Learn to create an engaging, interactive, and animated timeline with jQuery. In this course, Chris Converse shows you how to create a sliding timeline, with date markers and associated content. Tell your story, or that of your organization, with a graphically rich, interactive timeline.

Download and Watch

• Introduction

1. Welcome
2. Using exercise files
3. For those using Dreamweaver

•  Creating the Web Graphics and HTML Content

1. Saving web graphics from Photoshop
2. Linking CSS and JavaScript files to your HTML file
3. Creating the main HTML containers
4. Adding content to the HTML

• Adding CSS Styles for Layout and Positioning

1. Styling the main timeline container and heading
2. Creating a gradient background for the panel container
3. Styles for the sliders
4. Styles for the panel content

• Finalizing Layout and Animating Panels with jQuery

1. Adjusting the layout with jQuery
2. Generating the navigation based on the HTML
3. Positioning and styling the navigation
4. Activating the navigation to animate the panels
5. Animating the background

• Making the Design Responsive

1. Adding CSS styles for the panel images
2. Creating a CSS media query for small screens
3. Hiding elements on small screens

• Adding an Autostart and Screen Size Detection

1. Setting the timeline to autostart on a panel
2. Detecting the screen size for a responsive layout
3. Optimizing CSS for IE 7 and 8

• Conclusion

1. Where to go from here

• Exercises Files