Join Chris Converse for an in-depth discussion in this video Setting the timeline to autostart on a panel, part of Creating an Interactive Animated Timeline with jQuery.
Now, we're going to add some width detection and also add an auto-start.…So the first thing we want to address is the fact that if the user changes the size…of the browser the timeline doesn't actually line up with the navigation items.…So to see this on our design if I come down here and click 1980 to 89 you'll see…that the panel lines up in the center. But if I come in here and change the size…of the browser. Then click on 1970 to 79, for example.…You'll see that this is actually offset. This is because we're only detecting the…window size one time. So to alleviate this problem, let's come…back to our job descript file. Let's scroll up to the top, and inside the…document ready, we define the timeline width.…
Let's come in here and copy this. We want to leave this here because on our…auto-start, we're going to use this value. But everytime the user clicks one of the…links, we want to make sure that we recheck this.…So with that copied, let's scroll down. Let's find our click events that we've…assigned to the anchor tags. After the current panel, let's hit a return.…
- 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.