Join Chris Converse for an in-depth discussion in this video Hiding elements on small screens, part of Creating an Interactive Animated Timeline with jQuery.
Now, we're going to put in the final rules for our small screen devices.…So, inside of our media query, the target screen is under 500 pixels.…After the rule, the targets (UNKNOWN). Let's come in here and add some additional rules.…Next, we're going to target the navigation.…So, .timeline nav on small screen devices, we're going to set display to none.…Since direction going to use their finger to swipe through to see all the panels.…Next, we'll target the background slider. So, .timeline background_slider.…
And we're going to set the display of this to none as well.…Since we're now assigning the background small, in the main timeline container for…small screens. Next, we'll target the first panel and…then the panel content. So, first, let's do timeline .panel and…then :first-child. This pseudo class will pick out the very…first panel, and we're going to set padding-top of 40 pixels.…We want to have enough room for our internet label set in the h1 tag only on…the first panel. Next, we're going to target timeline .panel_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 Intermediate
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.