IntroductionWelcome| 00:00 |
(MUSIC).
Hi, I'm Chris Converse, and in this course
| | 00:05 |
we're going to create an interactive
animated timeline using HTML CSS and JavaScript.
| | 00:10 |
So, what we're going to do is set it up so
that when you click navigation items,
| | 00:13 |
we're going to take some timeline panels
and move them across the stage, centering
| | 00:16 |
them with the center of the browser.
We're also going to have a background
| | 00:20 |
graphic that's going to give us a nice
theme for our timeline, but it's going to
| | 00:24 |
animate at a different speed.
We're also going to set in some responsive
| | 00:27 |
design techniques.
So, as we change the size of the browser,
| | 00:30 |
re-click our navigation items, the content
will always readjust itself based on the
| | 00:34 |
size of the browser.
And if we move our browser down to be
| | 00:37 |
under 500 pixels, we'll change the design
completely, so that it's optimized for
| | 00:41 |
small screen devices.
So, on a small screen device, we can
| | 00:44 |
scroll through the different content.
We'll turn off the larger background
| | 00:47 |
graphic and the navigation items, and even
set the design up to be liquid under 500 pixels.
| | 00:53 |
So, based on the orientation, we still see
the content fitting to the screen.
| | 00:56 |
We'll also be adding in a few additional
features, such as the ability to start on
| | 01:00 |
any particular panel.
And we'll even add in a JavaScript and
| | 01:03 |
some CSS for IE 7 and 8, so, you can use
this timeline with those browsers as well.
| | 01:07 |
So, I hope this course sounds interesting
to you, and if so, let's get started.
| | 01:10 |
| | Collapse this transcript |
| Using the exercise files| 00:00 |
For this course, there are two sets of
exercise files.
| | 00:03 |
For those who are not premium subscribers,
there's a free set of files that includes
| | 00:06 |
folders 1, which includes the starter
files, and folder 3, which includes snippets.
| | 00:12 |
If you are premium subscriber to the
lynda.com online training library, you'll
| | 00:15 |
have access to folder 2, as well called
art templates.
| | 00:18 |
These are the source Photoshop files for
all of the artwork that we're going to
| | 00:21 |
create for this course.
Now, inside starter files, we have an HTML
| | 00:25 |
file and an includes directory, which has
a blank JavaScript and CSS file.
| | 00:30 |
We also have a blank CSS file for IE 7 and
8.
| | 00:33 |
And we're going to be using jQuery 1.8,
because this version still contains all of
| | 00:37 |
the backwards compatibility for IE 7 and
8.
| | 00:39 |
Later version of jQuery, including 1.9 and
2.0 start to deprecate some of the
| | 00:44 |
features of IE 7 and 8.
And under snippets, there's two files
| | 00:47 |
here, which just contains some HTML code
that we're going to use to copy and paste
| | 00:50 |
into our project.
So, we'll code some of the beginning
| | 00:53 |
content to get the structure in place, and
then we'll copy and paste the additional
| | 00:56 |
content so that we don't have to type all
of that.
| | 00:58 |
Now that we're familiar with the exercise
files.
| | 01:00 |
Next, we'll start building our project.
| | 01:01 |
| | Collapse this transcript |
| For those using Dreamweaver| 00:00 |
For those who are going to be building
this project in Dreamweaver and you have
| | 00:03 |
CSS and JavaScript files hooked into your
HTML.
| | 00:06 |
There's a few places where Dreamweaver
will indicate to you those files are
| | 00:09 |
linked in.
First is over on the right hand side,
| | 00:12 |
there's a CSS panel here.
This is part of the default layout.
| | 00:15 |
If you don't see the CSS panel, you can
come up to the Window menu and come down
| | 00:19 |
and turn on CSS.
And in Dreamweaver CS4 or later, there's a
| | 00:23 |
area at the top of the document on the
left called Related files.
| | 00:26 |
So here I can see the source code link and
I can see that I have a CSS file.
| | 00:31 |
A JavaScript file which is Jquery and a
myfile.js file hooked in here as well.
| | 00:36 |
So these buttons here indicate that these
are files that are hooked into my HTML.
| | 00:40 |
So if I come over here and click on CSS
for example, this will bring me into
| | 00:44 |
Dreamweaver's split screen view.
Showing me my design HTML on the right and
| | 00:49 |
the associated code in this CSS document
here on the left.
| | 00:52 |
If I come up here and click on myfile.js,
I can see the hooked in JavaScript file.
| | 00:58 |
And up here I can switch from Design view,
Split Screen view and just Code view.
| | 01:02 |
And Code view will show me whatever
document I have selected up here, whether
| | 01:06 |
it's my CSS, my JavaScript or my source
code of the HTML file.
| | 01:11 |
Now another nice thing about Dreamweaver
is as we're coding, the code tool that I'm
| | 01:15 |
going to be using is going to offer some
code completion.
| | 01:18 |
We have some of the same capabilities
inside of Dreamweaver as well.
| | 01:21 |
So for example, if I come over here inside
of the code window, hit return and start
| | 01:24 |
to type a div tag.
As I start typing, Dreamweaver will give
| | 01:28 |
me a dropdown menu.
I can hit return, select the div tag, hit
| | 01:32 |
a space, assign a class.
I'll start typing CL.
| | 01:35 |
I'll get my drop down menu and Dreamweaver
will sort of help me along while I'm
| | 01:39 |
typing in my HTML.
It'll do the same thing for JavaScript and
| | 01:43 |
CSS as well.
So let's come over here to CSS.
| | 01:45 |
Let's come down here create a new CSS
rule.
| | 01:47 |
So I'll type body.
I'll come in here and let's say we want to
| | 01:51 |
add color.
I'll start typing the word color, this
| | 01:53 |
will show up I can hit Return.
And in some cases, I get a very graphical
| | 01:57 |
representation of my code completion where
I can come in here for example and specify
| | 02:01 |
a color.
So I can assign new rules inside of the
| | 02:04 |
CSS files code area or inside of my CSS
panel.
| | 02:08 |
I can come over here and choose Create New
CSS rule.
| | 02:11 |
So regardless of your preference for how
you work inside of Dreamweaver.
| | 02:14 |
Everything that we're going to be doing
inside of this course can be replicated
| | 02:16 |
either through the Code window or through
Dreamweaver's interface.
| | 02:19 |
Whatever you're more comfortable with.
And with that, we're ready to continue on
| | 02:22 |
with our project.
| | 02:23 |
| | Collapse this transcript |
|
|
1. Creating the Web Graphics and HTML ContentSaving web graphics from Photoshop| 00:01 |
To begin our project, let's create a
folder on the desktop called my timeline.
| | 00:04 |
I'll open this up, I'm going to move this
over to the side here so you can see the
| | 00:08 |
progress as it's built.
Inside of the my timeline folder, let's
| | 00:12 |
create a new folder called images.
Next let's go to the exercise files, let's
| | 00:18 |
go into the starter files inside of folder
one.
| | 00:21 |
Select the index.html file and the
includes folder.
| | 00:25 |
And drag a copy of these into the
mytimeline folder as well.
| | 00:29 |
So as I mentioned before, inside of the
Includes folder, we have a timeline.js and
| | 00:32 |
a timeline.css and an index.html file out
on the root.
| | 00:36 |
Which all contain just the basic file
format itself.
| | 00:40 |
This way we're all starting from a valid
HTML file, CSS and JavaScript document.
| | 00:45 |
Next, let's come back to the exercise
files.
| | 00:47 |
Let's open up art templates, and let's
open up artwork.psd.
| | 00:52 |
Now, inside of Photoshop here, we come
under the Crop tool, click and hold.
| | 00:56 |
Let's come down to the Slicing tool.
You can see here that we have slices set
| | 01:00 |
up for all off this artwork.
To save this out, let's come over to the
| | 01:03 |
layers panel.
Let's turn off the FPL layer.
| | 01:06 |
We're going to save these out as 24 bit
PNGs, so we want the transparency in place.
| | 01:11 |
File menu, choose Save For Web.
From the Save For Web dialog box, if we
| | 01:16 |
select these slices you'll see that
they're all set to PNG 24.
| | 01:20 |
Let's come down and choose Save.
From this dialogue box under Slices, let's
| | 01:24 |
come down and choose All User Slices.
For the file destination, let's choose my timeline.
| | 01:31 |
Let's click on the images directory we
created and then hit Save.
| | 01:36 |
Now if we come back to the desktop, open
up the images directory.
| | 01:39 |
We'll see all different artwork that we
created slices out of inside of Photoshop
| | 01:43 |
are now individual PNG files.
Let's come back to Photoshop, let's close,
| | 01:49 |
we'll save our changes.
Back in the exercise files, let's open up PSD.
| | 01:53 |
Now the idea behind this background
graphic is on the left hand side, we have
| | 01:58 |
this blue or colder color.
On the right hand side we have a warmer color.
| | 02:04 |
We have a circuit artwork on the left hand
side and on the right hand side we have
| | 02:07 |
these icons.
On the left hand side we're using the
| | 02:10 |
circuitry and a colder color to represent
the more scientific or technical community
| | 02:14 |
that used the internet.
And on the right hand side we have these
| | 02:16 |
icons in a warmer color showing the more
cultural or human significance to the
| | 02:20 |
internet's had on people.
So that's the idea on the background graphic.
| | 02:23 |
To save this out, let's come up to the
File menu.
| | 02:25 |
Let's choose Save For Web.
We're going to save this out as a JPEG.
| | 02:28 |
Let's hit Save.
We're going to save this to the my
| | 02:33 |
timeline images directory.
Then hit Save.
| | 02:36 |
I'm going to close and save.
And then back in the exercise files, let's
| | 02:41 |
open up background small.
This is the background we're going to use
| | 02:44 |
for small screen devices.
Let's choose File > Save For Web, we'll
| | 02:48 |
also save this site as a JPEG.
We'll hit Save.
| | 02:54 |
And then close our Photoshop file.
So then back into my timeline directory,
| | 02:58 |
inside of images, we have our two
backgrounds.
| | 03:00 |
And all of the individual graphics we're
going to use in the panels of the timeline.
| | 03:03 |
So now with our artwork created, next
we're going to hook our JavaScript and CSS
| | 03:06 |
files into the HTML file.
| | 03:08 |
| | Collapse this transcript |
| Linking CSS and JavaScript files to your HTML file| 00:00 |
Next, we need to hook these CSS and
JavaScript files up into our index.html file.
| | 00:05 |
So, let's take the index.html file and
open it up in your chosen text editor.
| | 00:09 |
After that title tag, let's hit Return.
And let's start by typing beginning tag,
| | 00:15 |
type link, rel for relationship equals
style sheet, type equals text/css.
| | 00:20 |
Another attribute href equals
includes/timeline.css.
| | 00:20 |
Next, let's create a script tag.
Type equals text/javascript.
| | 00:38 |
Source attribute equals
includes/jquery-1.8.3.min.js.
| | 00:44 |
Then end the script tag.
Next, let's link in our custom JavaScript file.
| | 00:53 |
So, script type equals text/javascript.
Source equals includes/timeline.js, and
| | 00:57 |
then end that script tag.
Now, with those in place, we're going to
| | 01:01 |
add a comment, so, we can put some
conditional scripts in place for IE 7 and 8.
| | 01:07 |
So, we'll start with a standard HTML
comment, and inside here, we'll put the IE
| | 01:13 |
conditional statement.
If less than IE 9 inside of brackets.
| | 01:17 |
And then before the closing comment,
another set of square brackets and type endif.
| | 01:21 |
Now, with that in place, let's get our
cursor inside of this conditional statement.
| | 01:25 |
And first, we're going to make a link to
our IE 7 and 8 CSS file.
| | 01:30 |
So, link relationship equals stylesheet,
type equals text/css, and then href equals includes/timeline_ie_7_8.css.
| | 01:45 |
On the next line, we're going to put a
link into Google's HTML5 shiv.
| | 01:49 |
This way, IE7 and 8 will understand HTML5.
So, that's going to be script, source
equals Http://html5shiv.googlecode.com/svn/trunk/html5.js,
| | 01:57 |
and then end the script tag.
So, now with all of these hooks into our
| | 02:00 |
CSS and JavaScript files, we're ready to
start creating our HTML containers.
| | 02:14 |
| | Collapse this transcript |
| Creating the main HTML containers| 00:00 |
Now, we're going to make the main HTML
containers for our Timeline.
| | 00:03 |
So, in our index.html file inside of the
body tag.
| | 00:06 |
Let's come down here and select the
timeline goes here, HTML comment.
| | 00:10 |
Let's delete that.
Next, let's come in here and add a div tag.
| | 00:16 |
Let's set a class equal to timeline.
And then let's end the div.
| | 00:22 |
Now, inside of the timeline div, let's
come in here and add another div.
| | 00:28 |
This one is going to have a class of
panel_container.
| | 00:30 |
And then end that div.
And let's get our cursor inside of the
| | 00:35 |
panel container div, and we're going to
add three more items inside of here.
| | 00:39 |
The first two are going to be divs.
The first one is going to have a class of background_slider.
| | 00:44 |
End that DIV.
Next, a second div with a class of panel_slider.
| | 00:54 |
And then next, we're going to create an
HTML5 element called nav, and then we'll
| | 00:57 |
end the nav element as well.
So, now with these in place, I'm going to
| | 01:03 |
go up here and just format these a little
bit.
| | 01:05 |
I'll tab these in.
And now with our main containers in place,
| | 01:08 |
next, we can start adding in some of the
content.
| | 01:10 |
| | Collapse this transcript |
| Adding content to the HTML| 00:01 |
Now we're going to start adding some of
the content to our HTML.
| | 00:04 |
So inside of the index.html file.
Let's get the cursor after the panel
| | 00:08 |
container beginning dip tag.
Let's hit return.
| | 00:11 |
Let's start with an H1 tag.
Let's just type the internet.
| | 00:20 |
Next let's get the cursor in between the
beginning and ending div tags for
| | 00:22 |
background slider.
Let's hit a return to open that up.
| | 00:27 |
Inside here we're going to add an image
tag.
| | 00:29 |
So we're going to start with beginning tag
img class=background.
| | 00:36 |
Then the source attribute.
Set that equal to images/background.jpg.
| | 00:43 |
Another attribute for width.
Set that to 1500 and a height to 300.
| | 00:48 |
Then end the tag.
Now with our background image in place,
| | 00:53 |
let's get our cursor in between the
beginning and ending div tags for the
| | 00:56 |
class of panel slider.
Let's hit a few returns.
| | 01:00 |
And inside of here is where we're going to
put all of the individual panels for our timeline.
| | 01:03 |
So I'm going to start by putting an HTML
comment just called panel.
| | 01:09 |
Next line we'll add a div with a class of
panel.
| | 01:13 |
Then inside there, we'll add another div,
with a class of panel_content.
| | 01:16 |
We'll end the panel_content div, and then
end the panel div.
| | 01:22 |
Now with those divs in place, let's get
our cursor in between the beginning and
| | 01:29 |
ending div tag for the class of panel
content.
| | 01:33 |
And inside of here, the first tag we're
going to add is an H2 tag.
| | 01:37 |
Inside we'll type ARPANET .
Next we'll add an image.
| | 01:40 |
Class = arpanet.
Src = images/arpanet.png.
| | 01:44 |
And then set the alt text to arpanet, and
the image tag.
| | 01:53 |
Next we'll add a paragraph tag, and I'll
just add some placeholder text inside of here.
| | 01:59 |
End the paragraph tag.
Create another div with a class of label.
| | 02:03 |
Set the text inside to 1960-69.
And lastly, since we're going to be
| | 02:09 |
floating some of the images.
We want to set one more div with a class
| | 02:12 |
of clear both, so we can clear off the
floats for the individual panel.
| | 02:17 |
Now, with that content in place,
everything from this beginning HTML
| | 02:20 |
comment down to this ending div for panel
constitutes one timeline panel.
| | 02:25 |
I'm just going to format these into place.
Next, let's come back to the exercise
| | 02:30 |
files, let's come into Folder 3, Snippets.
And let's open up a-panelcontent.html.
| | 02:36 |
So inside of here, I have all of the
remaining timeline panels.
| | 02:44 |
Let's come in here, do a select all, let's
copy all of this content.
| | 02:49 |
Let's go back to our index.html file,
after the panel that we just created.
| | 02:53 |
Let's hit a Return.
Let's hit Paste.
| | 02:56 |
And we're going to paste all of these
panels in place.
| | 02:59 |
I'm going to come in here and just format
all of these so that these are all tabbed
| | 03:03 |
in under the panel's slider.
So now each div inside of the panels
| | 03:06 |
slider div with the class of panel will
become one of the panels for the timeline.
| | 03:11 |
So now that our content is in place, next
we can start working on the CSS to style
| | 03:14 |
this content.
| | 03:15 |
| | Collapse this transcript |
|
|
2. Adding CSS Styles for Layout and PositioningStyling the main timeline container and heading| 00:00 |
So, now that we have all of our content in
place, let's come back to our project folder.
| | 00:04 |
Let's open up the includes directory, and
let's open up timeline.css in our text editor.
| | 00:11 |
Now, we've already hooked this into our
HTML file.
| | 00:13 |
So, up here, let's come in and let's start
adding some rules.
| | 00:16 |
The first one is going to be the body tag.
So, we'll start with body, beginning bracket.
| | 00:21 |
Let's set a margin of zero, a padding of
zero.
| | 00:24 |
Let's set font size to 16 pixels, and then
we'll set the font family to Arial.
| | 00:30 |
Add a semicolon, then an ending bracket.
Next, we'll target the timeline class.
| | 00:37 |
Beginning bracket, let's set position to
relative.
| | 00:40 |
Margin, we're going to set top to 30,
right to 0, bottom to 20, and left at 0,
| | 00:46 |
end the rule.
Next, we're going to target the h1 tag
| | 00:49 |
inside of the timeline.
First property is going to be position, we
| | 00:53 |
will set that to absolute.
Set top to 10 pixels.
| | 00:57 |
Left is set to 0.
Text align, we're going to set to center.
| | 01:02 |
Width, we're going to set to 100%.
Margin, set to zero.
| | 01:07 |
Border bottom, we're going to set that to
1 pixel solid.
| | 01:10 |
And we're going to use RGBA, so, we can
use semi-transparent white.
| | 01:13 |
So, we're going to set the three
properties to 255, and then 0.2 for the alpha.
| | 01:19 |
Next, we'll set font size to 1.2ems, Z
index to 1, text transform to upper case,
| | 01:27 |
color to white, padding bottom of 10
pixels and letter spacing to 2 pixels.
| | 01:31 |
Now, with those in place, save your CSS.
Let's come out to our project folder and
| | 01:38 |
let's open index.html up in the browser.
So, we can see so far, we have all of our
| | 01:42 |
fonts set.
We can even see very lightly some of the
| | 01:45 |
graphics are in place here.
And at the top, we can see our positioned
| | 01:49 |
h1 tag with the role underneath.
So, now with this in place, we'll start
| | 01:53 |
styling the panel container next.
| | 01:54 |
| | Collapse this transcript |
| Creating a gradient background for the panel container| 00:00 |
Next, we're going to style the panel
container.
| | 00:02 |
Let's hit a few Returns.
We'll start with .timeline
| | 00:06 |
.panel_container, beginning bracket.
First property is going to be position set
| | 00:13 |
to relative.
Margin, we're going to set 10 on the top,
| | 00:17 |
0 on the right, 0 on the bottom, 0 on the
left.
| | 00:20 |
Width, we're going to set to 100%.
And height, we're going to set to 300 pixels.
| | 00:27 |
Now, inside the panel container, we're
going to have that background graphic, and
| | 00:30 |
our background graphic fades from a bluish
color to a reddish color.
| | 00:34 |
So, what we want to do in the background
is set a gradient.
| | 00:37 |
So, if somebody's browser can open up
wider than the actual graphic, we want to
| | 00:41 |
have a graphic fade to orange on the right
and to blue on the left.
| | 00:44 |
So, we're going to need to create a
gradient.
| | 00:47 |
Now, in the snippets, I did include all of
the CSS to create a gradient in all of the
| | 00:50 |
major browsers.
But if you want to create your own
| | 00:53 |
gradient, you can go to ColorZilla.com.
Now, in the home page, I'm going to come
| | 00:57 |
over and click on the Gradient Generator.
Inside of here, we have a very visual
| | 01:00 |
too,l inside of the browser to create
gradients.
| | 01:03 |
So, to show you how we created the
gradient here, we're going to command and
| | 01:06 |
remove the color stops in the default
sample here.
| | 01:10 |
Let's come over and select the first color
stop.
| | 01:13 |
Let's come down and click on the Color
Swatch.
| | 01:16 |
Over here in the hex area, I'm going to
add a color I got from Photoshop.
| | 01:19 |
So, this will be 26016A, that'll give me
that bluish purple color.
| | 01:26 |
Let's come up and click PK.
There's a second color stop, let's select that.
| | 01:33 |
Click on the Swatch.
Let's come in here and add the orange
| | 01:36 |
color, so that's D14001.
Click OK.
| | 01:42 |
And next, let's come in here and let's
grab the color stops and move these very
| | 01:45 |
close to the center.
So, I want the gradient to happen really
| | 01:48 |
quickly, and to be behind the background
JPEG.
| | 01:52 |
Over here in the preview, let's come over
and let's choose horizontal.
| | 01:55 |
And in the CSS window, we can see all of
the CSS that's being generated for all of
| | 01:59 |
the major browsers.
You can come down here and simply click Copy.
| | 02:03 |
Let's come back to our text editor, up to
the height of 300 pixels.
| | 02:10 |
Let's simply come in here and paste all of
these CSS properties.
| | 02:14 |
Now, as I mentioned before, back in the
exercise files inside of the snippets
| | 02:17 |
folder, I have a file called
b-cssgradient.css.
| | 02:22 |
We can see all of the same properties
here, but you can use the cut and paste as well.
| | 02:26 |
So, now back in our CSS, we have all of
our properties in place for the panel container.
| | 02:29 |
Next, we can start working on the
background slider.
| | 02:32 |
| | Collapse this transcript |
| Styles for the sliders| 00:00 |
Next we'll set some CSS properties for the
background slider and the panel slider.
| | 00:04 |
So in the CSS, let's scroll down.
After the timeline .panelcontainer.
| | 00:09 |
Let's come down here and add some new
rules.
| | 00:15 |
Let's start with .timeline
.background_slider { Let's set position to absolute.
| | 00:23 |
Let's set the width to inherit and the
height to inherit.
| | 00:30 |
Next, .timeline .background_slider img.
Let's set the position to absolute.
| | 00:40 |
Top to zero pixels and then left to zero
pixels and the rule.
| | 00:47 |
Next, let's target the panel slider so
.timeline .panel_slider.
| | 00:52 |
Let's set the width to 100% and then
.timeline .panel.
| | 00:58 |
We're going to set the width to 340
pixels.
| | 01:00 |
So with these in place, let's hit File >
Save.
| | 01:05 |
Let's come back to the operating system
and let's reload index.html up in a browser.
| | 01:08 |
So now we'll see that all of the panels
are now conforming to 340 pixels.
| | 01:14 |
The images are in place here as well.
And if we scroll down we can see these are
| | 01:19 |
all vertically stacked.
Next we'll work on CSS rules to style the
| | 01:23 |
content inside of the individual panels.
| | 01:25 |
| | Collapse this transcript |
| Styles for the panel content| 00:00 |
Next, we're going to set some CSS rules
for the panel content.
| | 00:03 |
So, at the bottom of our CSS file, let's
add a few more rules.
| | 00:08 |
Let's start with .timeline .panel_content,
beginning bracket.
| | 00:13 |
Let's set padding: 75 on the top, 10 on
the right, 0 on the bottom, 40 on the left.
| | 00:20 |
Then position to relative, end the rule.
Next, .timeline panel_content h2,
| | 00:27 |
beginning bracket.
Let's set the font size to 1em.
| | 00:32 |
Color, to white, so, three f's.
Then margin: 0 on the top, 0 on the right,
| | 00:38 |
8 pixels on the bottom, and 0 on the left.
Next, timeline .panel_content p.
| | 00:46 |
We'll set a margin: 0 on the top, 0 on the
right, 1em on the bottom, and 0 pixels on
| | 00:51 |
the left.
Position set to relative.
| | 00:54 |
Color, we're going to use rgba: 255, 255,
255; which is white.
| | 01:01 |
And then 0.55 for 55% alpha.
Next, we'll starlet timelines,
| | 01:07 |
panel_content .label.
Let's set position to absolute.
| | 01:12 |
Top to 12 pixels, right to 0 pixels, font
size 4 ems.
| | 01:19 |
Color, we're going to set this to white as
well with a 0.2 alpha.
| | 01:24 |
Text align to right.
Then font family, we're going to set that
| | 01:27 |
to Georgia, and then end the CSS rule.
Once that's in place, let's hit Save.
| | 01:33 |
Come back out to the operating system,
let's reload this in a browser.
| | 01:36 |
And now in the browser, we can see the
very first panel, which position over top
| | 01:41 |
of the background graphic showing all of
the styles we just created.
| | 01:45 |
And now with our styles in place, next,
we'll create some JavaScript to position
| | 01:49 |
all of these individual panels along the
horizontal line.
| | 01:51 |
| | Collapse this transcript |
|
|
3. Finalizing Layout and Animating Panels with jQueryAdjusting the layout with jQuery| 00:00 |
Now, to position all of our panels, the
first thing we need to do in the CSS file
| | 00:03 |
is find the timeline, space panel, CSS
rule.
| | 00:07 |
Let's come in here and set a position
value of absolutely.
| | 00:10 |
Let's hit Save.
Now, if we come back to the browser we can
| | 00:13 |
see we currently have all of our panels
stacked vertically.
| | 00:16 |
But now that we've set an absolute
position property, if we come in here and
| | 00:18 |
hit Reload we'll see all of the panels are
now stacked on top of each other.
| | 00:23 |
So now with these position properties in
place, next we'll calculate where to
| | 00:26 |
position each one of these in a horizontal
row and we're going to do that with javascript.
| | 00:30 |
So, let's come back to our Text Editor,
then let's come back to our project,
| | 00:34 |
inside the includes directory, let's open
up timeline.js up in our text editor.
| | 00:38 |
So hit a few Returns.
Now, the first thing we're going to do is
| | 00:44 |
set a series of variables.
So we're going to start with the first one
| | 00:48 |
var timelineWidth, let's set that equal to
0.
| | 00:54 |
Next, is going to be panelWidth, we're
going to set that equal to 0.
| | 01:02 |
Next, is firstRun, let's set that equal to
true.
| | 01:07 |
Then totalPanels, we'll set that equal to
0.
| | 01:12 |
And then lastly one called currentPanel,
and we'll set that equal to 0.
| | 01:18 |
Now, with these variables set up, let's
hit a few Returns and let's add our JQuery
| | 01:21 |
document ready.
Start with a $ parentheses, document
| | 01:26 |
outside the parentheses.ready, now outside
the parentheses and a semicolon, inside
| | 01:34 |
the parentheses for ready, type function,
outside the parentheses inside the bracket.
| | 01:42 |
Let's split that open.
So any instruction we put inside up here
| | 01:46 |
won't run until all of the HTML has been
loaded into the browser.
| | 01:50 |
Now, the first thing we want to do is
redefine this panel with variable.
| | 01:53 |
So, let's come up here and copy this.
Let's come down here.
| | 01:56 |
Let's paste.
Let's set panel width equal to, and let's
| | 02:00 |
search and find the width of the
individual panels.
| | 02:03 |
So $('.timeline .panel).
Outside the parenthesis.width, another set
| | 02:16 |
of parenthesis and a semi colon.
So, that JavaScript variable will be set
| | 02:20 |
based on the width properties inside of
the CSS.
| | 02:23 |
Outside of the document ready, let's hit a
few Returns and add a custom function.
| | 02:27 |
So start by typing function space adjust
layout.
| | 02:34 |
Parenthesis, brackets, let's split this
open.
| | 02:37 |
Now, inside of the adjust layout function,
the first thing we want to do is find
| | 02:41 |
every one of the panels and calculate
where it should be positioned across the timeline.
| | 02:46 |
So, we'll start with a $ parentheses,
string literal.timeline space .panel.
| | 02:55 |
Outside of the parentheses .each,
parentheses, semicolon, inside of the
| | 03:02 |
parentheses for each, type function,
another set of parentheses and brackets.
| | 03:08 |
Now, before we split this open, let's come
inside of the parentheses for function,
| | 03:11 |
type in index.
We want to have this script count for
| | 03:15 |
every one of the panel items it finds.
Next, let's split this open on the brackets.
| | 03:22 |
Let's come inside of the each statement
now.
| | 03:24 |
And what we're going to do now is
calculate the new variable for each panel
| | 03:27 |
that's found.
So var, space, newX, we're going to set
| | 03:32 |
that to equal to panelWidth.
And we're going to multiply that times the
| | 03:36 |
index, then a semicolon.
Next line, lets assign a CSS property to
| | 03:43 |
every one of the panels.
So $, parentheses, I'll type this.
| | 03:48 |
This refers to the panel that's found in
this each statement.
| | 03:53 |
Outside of the parentheses.
.css, another set of parentheses.
| | 03:57 |
Then inside string literal, we're going to
set the property of left, then a comma
| | 04:04 |
outside of the string literal, but still
inside of the parenthesis for CSS.
| | 04:07 |
We'll type newX plus two tick marks, and
add the letters px to make this a valid
| | 04:15 |
CSS property.
So, now with this in place we need to run
| | 04:18 |
the adjustment layout function.
So, lets come up here and copy the
| | 04:22 |
adjustment layout function name.
Copy this.
| | 04:25 |
Inside of the document ready, lets paste
that.
| | 04:29 |
Add in the parentheses and then a semi
colon.
| | 04:33 |
So once the page loads, all of these
variables are going to be declared, the
| | 04:36 |
document ready will run.
We'll reset the panelWidth variable, and
| | 04:40 |
then run the adjust layout function.
Let's save our work.
| | 04:43 |
Let's switch back over to our browser, and
then let's hit Reload.
| | 04:45 |
So now we'll see all of the panels will
line up horizontally.
| | 04:49 |
We have a horizontal scroll bar that we
can scroll over.
| | 04:51 |
We can see all of the panels are now lined
up.
| | 04:55 |
And now with that complete, we'll add a
few positioning properties, and then
| | 04:58 |
generate navigation based on the number of
timeline panels in HTML.
| | 05:02 |
| | Collapse this transcript |
| Generating the navigation based on the HTML| 00:00 |
Now, we need to make two CSS adjustments.
Let's come back to timeline.css.
| | 00:05 |
The first one is going to be inside of
.timeline .panel slider.
| | 00:09 |
After width 100, we're going to come in
here and set the position to absolute on
| | 00:13 |
this as well.
And then the other one is going to be the
| | 00:16 |
panel container.
So, let's scroll up here a little bit.
| | 00:19 |
Let's find panel container.
Let's come up here, and let's add overflow.
| | 00:25 |
We're going to set that to hidden, then
choose Save.
| | 00:30 |
Now, to generate the navigation, let's
come over to the timeline.js.
| | 00:35 |
Now, inside of the JavaScript, we want to
generate a navigation item for each
| | 00:38 |
timeline panel.
So, we're going to put this inside of the
| | 00:40 |
each statements, since we're already
calculating the position of the panels.
| | 00:45 |
So, let's hit a few Returns.
After we assign the CSS property to each
| | 00:48 |
individual panel, what we're going to do
next is declare another variable.
| | 00:52 |
So, var newLabel.
We're going to set this equal to $
| | 00:59 |
parenthesis this.
Then what we're going to do, is we're
| | 01:04 |
going to look for the actual HTML in the
individual div labels that we put in the HTML.
| | 01:08 |
So, we're going to type .find.
Inside of find, two tick marks for a
| | 01:14 |
string literal.
We're going to search for .label inside of
| | 01:19 |
the individual panel.
Then we're going to type .html, beginning
| | 01:23 |
and ending parenthesis then a semi-colon.
So, whatever the HTML is inside of that
| | 01:28 |
div element with a class of label, is now
going to be defined inside of this
| | 01:31 |
variable called newLabel.
Next line, now we want to inject an anchor
| | 01:36 |
link inside of the nav element.
So, $, parenthesis, tick marks for string
| | 01:43 |
literal, .timeline nav.
Outside the parenthesis .append,
| | 01:54 |
parenthesis, semi colon, inside string
literal.
| | 01:59 |
So, let's start by adding an anchor tag
href equals, two quotes.
| | 02:06 |
Let's put in a pound sign after the quotes
and the tag, outside of the stream
| | 02:12 |
literal, let's hit a plus.
Let's add in the variable, newLabel,
| | 02:18 |
another plus sign, another string literal.
And then let's end the anchor tag, then
| | 02:25 |
save our document.
So, for every panel that we find, not only
| | 02:28 |
are we going to position the panel along
the timeline, we're also going to add an
| | 02:31 |
anchor link to the navigation element to
correspond with each individual panel.
| | 02:36 |
Now, in the browser, we won't be able to
see these, because we're going to need to
| | 02:39 |
style the navigation.
And we'll work on that next so that the
| | 02:41 |
navigation appears above the timeline
panels.
| | 02:43 |
| | Collapse this transcript |
| Positioning and styling the navigation| 00:00 |
Now, to style the navigation that we've
just injected with JavaScript, let's come
| | 00:03 |
back to our timeline.css.
Let's scroll down to the bottom.
| | 00:09 |
Let's hit a few returns, and let's add
some CSS rules that will target the
| | 00:11 |
navigation anchor links.
So, let's start with dot timeline space nav.
| | 00:17 |
This is the parent container for all of
the anchor tags.
| | 00:19 |
Let's set position to absolute, lets set
bottom to zero.
| | 00:24 |
Lets set left to zero.
Lets set the text align to center, so all
| | 00:32 |
of the anchor links will center on the
page.
| | 00:35 |
And then for width, we'll set this to
inherent.
| | 00:37 |
Next rule, dot timeline, space nav, space
a.
| | 00:42 |
Let's set a color of white, so #fff.
Font size will be 0.9, 10% smaller than
| | 00:50 |
the base font defined in the body tag.
Display, we'll set this to inline-block.
| | 00:57 |
Next, we'll set a padding.
We'll set 5 on top and bottom, and 10 on
| | 01:02 |
left and right.
Next, we'll set the border color.
| | 01:09 |
Set this to white, so #fff.
Next is boarder style, we're going to set
| | 01:17 |
this to solid.
Then we're going to set border left width,
| | 01:24 |
set this to 5 pixels.
Next this border right width, we're going
| | 01:30 |
to set this to 5 pixels.
Next, we'll set border bottom width to 0 pixels.
| | 01:36 |
And then border top width, we'll set this
to 8 pixels.
| | 01:41 |
Then lets set text decoration to none.
Next, let's do timeline nav a:first-child.
| | 01:50 |
So, the very first anchor link.
Let's change the border left width to 8.
| | 01:56 |
That way the first border on the left
matches the in between borders, where the
| | 01:59 |
borders will touch.
Next is timeline nav a:last-child.
| | 02:07 |
We're going to set border-right-width to 8
pixels.
| | 02:11 |
Again, so that the width of the rightmost
item matches the ones in the center.
| | 02:16 |
Then we'll do timeline nav a.selected.
So when the navigation items are in their
| | 02:19 |
selected state, we're going to set the
background color.
| | 02:24 |
Then we're going to set that to 55% alpha
with the color of white.
| | 02:29 |
So RGBA 255 for each of the values, and
then 0.55.
| | 02:35 |
Now, with those in place save your file,
let's come back to the operating system,
| | 02:38 |
and let's reload this in a browser.
So, now we'll share our navigation items
| | 02:42 |
showing up here.
The nav element is the full width of the page.
| | 02:46 |
Each of the anchor links, has an inline
block style, and the two borders connected
| | 02:51 |
in the center here give us the illusion of
having a really thick border.
| | 02:54 |
And then we've adjusted the border for the
last child on the right and the first
| | 02:58 |
child on the left.
Now, that the navigation has been
| | 03:01 |
generated, next we'll activate the
navigation to animate the timeline panels.
| | 03:05 |
| | Collapse this transcript |
| Activating the navigation to animate the panels| 00:00 |
Now ,to activate the navigation so it can
animate the timeline panels let's come
| | 00:04 |
back to our JavaScript file in our Text
Editor.
| | 00:06 |
What we'll want to do next is inside of
the document ready, we'll want to add a
| | 00:11 |
line after a panelWidth.
We want to redefine two of the variables
| | 00:14 |
up here based on the HTML.
So the first one is going to be timelineWidth.
| | 00:20 |
We're going to set the sequel to.
And we're going to search for the .timeline.
| | 00:25 |
So .timeline inside of the string
literal.width.
| | 00:34 |
And then we're going to set totalPanels.
And we're going to set this equal to $.
| | 00:39 |
Parentheses, string literal, .timeline,
space .panel.length.
| | 00:51 |
That'll give us the total number of
panels.
| | 00:53 |
Next, we'll want to define the current
panel, and we're going to do that by
| | 00:57 |
picking out one of the navigation
elements.
| | 00:59 |
Now we can't pick out the navigation
elements to after they've been generated,
| | 01:02 |
which is down after these two lines here.
So, after the each statement inside of the
| | 01:07 |
adjust layout, let's come in here, and
let's set currentPanel.
| | 01:11 |
And we're going to set this equal to, and
what we're going to do is search for
| | 01:14 |
timeline space nav a colon last-child.
End the string roll.
| | 01:22 |
And then we're going to type .index.
So this is going to get the number of the
| | 01:26 |
last navigation item and set that as the
currentPanel.
| | 01:30 |
Now, with this in place, let's hit a few
Returns.
| | 01:33 |
Let's put another custom function.
We're going to call this Activate.
| | 01:37 |
Navigation, parenthesis, brackets, we'll
split this open.
| | 01:48 |
So under Activate Navigation, what we're
going to do is start with a $,
| | 01:51 |
parenthesis, string literal.
.timeline space nav space a.
| | 02:02 |
Outside the parentheses type on.
On the other side of the parentheses, semicolon.
| | 02:08 |
Inside of the parentheses for on, string
literal, on click.
| | 02:14 |
Outside of the string literal but still
inside of the parentheses, comma, type function.
| | 02:19 |
Another set of parentheses and brackets.
We'll split that open.
| | 02:26 |
So, inside of the function for click
event, we're going to set currentPanel.
| | 02:30 |
We're going to set that equal to $,
parentheses, this .index, so whenever we
| | 02:37 |
click on a navigation item we're resetting
the currentPanel.
| | 02:43 |
Next, we'll set the selected state.
So lets start with a $, parentheses,
| | 02:48 |
string literal.
.timeline nav a, outside of the
| | 02:53 |
parentheses, .removeClass, parentheses,
semicolon.
| | 02:58 |
Inside of the parentheses for removeClass,
let's put a string literal.
| | 03:11 |
Type in selected, on the next line
$,parentheses this .addClass, string
| | 03:24 |
literal, then type selected.
So when we click on a navigation item,
| | 03:28 |
we're going to remove, all of the selected
classes and the reassign the selected
| | 03:32 |
class to the item that was clicked on.
Next, we're going to declare another
| | 03:37 |
variable, we'll call this timelineOffset.
We're, going to set this equal to.
| | 03:44 |
The timelineWidth minus the panelWidth.
Then let's put that in parenthesis because
| | 03:55 |
we want to calculate that first.
And then we're going to take that number
| | 03:59 |
and we're going to multiply it by .5.
So, what we want to do is to take the
| | 04:04 |
timelinePanel being selected and move it
to the center of the screen.
| | 04:07 |
So, what we need to do is to take the
overall timelineWidth and then subtract
| | 04:11 |
the panelWidth, figure out how much room
we have left over, and then divide that evenly.
| | 04:16 |
So, in this example if we had a timeline
that was 900 pixels wide and we subtract
| | 04:20 |
340 we would get 560 pixels, then we would
divide that by two giving us 280.
| | 04:26 |
So this is going to give us the position
of the left property, so that the panels
| | 04:30 |
will show up in the middle of the browser.
So back in our JavaScript, let's hit
| | 04:33 |
another line.
Let's create a second variable.
| | 04:38 |
We'll call this newPosition.
We're going to set newPosition equal to currentPanel.
| | 04:45 |
We're going to multiply that times the
panelWidth.
| | 04:54 |
We want to calculate that first, so let's
put that inside a parenthesis.
| | 04:57 |
Then we're going to multiply that times
negative one, because we want to move
| | 05:02 |
toward the left in a negative x direction.
Next, let's put that into parentheses, and
| | 05:10 |
then we're going to add the timelineOffset
to that.
| | 05:14 |
So now we have the position that we need
to animate to based on the panelWidth and
| | 05:18 |
the timelineWidth.
Now, let's come down here and animate the
| | 05:20 |
Panel slider.
So $, parentheses, tick marks for string
| | 05:25 |
literal .panel_slider.
That's out of the parenthesis .animate
| | 05:31 |
another set of parenthesis semi-colon.
Inside of the parenthesis for animate
| | 05:40 |
beginning and ending bracket.
Inside of the brackets type left, colon,
| | 05:44 |
this is going to be newPosition.
Lets come up here and copy that variable name.
| | 05:50 |
So animate newPosition plus string literal
px, then outside the brackets but still
| | 05:58 |
inside the parentheses comma, space, and
the amount of time.
| | 06:04 |
Let's put 1,000 milliseconds for one
second of time.
| | 06:08 |
Now that we have our activate navigation
function complete let's come up here and
| | 06:10 |
copy the name.
We need to run this, let's come inside of
| | 06:14 |
the layout adjustment.
Let's add that name.
| | 06:20 |
Let's paste in our function name put in
our brackets then a semi-colon.
| | 06:23 |
So after the layout's been adjusted and
we've generated all the navigation items
| | 06:27 |
and set all of the variables including
current panel, we're going to run the
| | 06:30 |
activate navigation.
So let's choose File > Save.
| | 06:33 |
So now back in the browser we can hit
Reload.
| | 06:36 |
Come down to our navigation.
Let's click on one of these.
| | 06:39 |
I'll click on 1990 to 1999.
And then we'll see that the panel will
| | 06:43 |
animate to the center of the browser
screen.
| | 06:46 |
You'll also see the selected state gets
assigned to the individual navigation
| | 06:49 |
items as well, and then we'll see that
each navigation item will animate the
| | 06:53 |
timeline to the corresponding panel.
And now, with that working, next we'll
| | 06:57 |
animate the background graphic.
| | 06:58 |
| | Collapse this transcript |
| Animating the background| 00:00 |
Now to animate the background graphic,
we're going to add some additional
| | 00:02 |
instructions inside of the navigation
on-click event.
| | 00:06 |
So after we animate the panel slider,
let's add a few lines.
| | 00:09 |
Let's create a new variable.
We're going to call this backgroundwidth.
| | 00:15 |
We're going to set this equal to, so we're
going to search and find the size of that
| | 00:18 |
background graphic.
So $(.timeline .background_slider img).
| | 00:29 |
So, we're searching for the image inside
of the background slider div and then .width.
| | 00:42 |
Next variable, we're going to define the
move amount.
| | 00:47 |
We're going to set the move amount equal
to the backgroundWidth minus the timelineWidth.
| | 00:56 |
We want to calculate that first, so let's
put those inside of parenthesis.
| | 00:59 |
And then we're going to divide that by the
total panels, then a semi colon.
| | 01:04 |
So we're basically doing here, is we're
taking the width of the timeline and then
| | 01:09 |
we're taking the width of the overall
background graphic, finding out what the
| | 01:12 |
difference is, which is 600 pixels divided
by the number of panels.
| | 01:16 |
Which in this case, is a six and we're
going to move the background 100 pixels
| | 01:20 |
for every time you click on one of the
navigation items.
| | 01:22 |
This is going to ensure that when we're on
the last panel, the background graphic
| | 01:26 |
will be as far to the left as possible.
And when you're on the first panel, the
| | 01:30 |
background graphic will be as far to the
right as possible.
| | 01:32 |
And if the user's web window is wider than
your background graphic, we have that
| | 01:35 |
gradient in place that will give us a
subtle fade on the right and left to the
| | 01:39 |
corresponding colors.
So after we declare those two variables,
| | 01:43 |
next line.
Let's start with a conditional statement.
| | 01:46 |
We're going to say, if beginning and
ending parenthesis beginning and ending
| | 01:51 |
bracket split that open on the brackets.
Inside of the parenthesis for if, what we
| | 01:56 |
want to do is test the current panel.
We're going to say, if current panel does
| | 02:01 |
not equal zero.
Let's come in here and declare a new
| | 02:05 |
variable called multiplier.
We're going to set that equal to current
| | 02:10 |
panel plus one.
Since current panel is based on an index
| | 02:13 |
and index is base zero, which means the
first item is actually zero.
| | 02:18 |
However, if the current panel is actually
zero, we want to make sure to keep that.
| | 02:23 |
So let's add an else onto this, beginning
and ending bracket, split that open.
| | 02:28 |
Inside up here, we're going to set var
multiplier, we're going to set that equal
| | 02:31 |
to 0.
Next, one more variable.
| | 02:34 |
We'll set new background position.
We're going to set that equal to, the moveAmount.
| | 02:42 |
We're going to multiply that by the
multiplier.
| | 02:48 |
Now, we want to calculate that first, so
let's put that inside a parentheses.
| | 02:51 |
Then we'll multiply that times negative
one, then a semicolon.
| | 02:56 |
So now with our calculations complete,
let's animate the background,
$('.background_slider'
| | 03:04 |
'img.background').animate();.
| | 03:10 |
Inside of the parentheses beginning and
ending bracket we're going to animate the
| | 03:22 |
left property, colon, let's come up here
and copy new background position variable name.
| | 03:34 |
Let's paste it inside of here, plus two
tick marks for a string literal, px.
| | 03:39 |
Outside of the brackets, comma, 1,000
milliseconds.
| | 03:44 |
So with that in place, let's choose file
save.
| | 03:47 |
Let's switch back to our browser, let's
hit Reload.
| | 03:49 |
And now when we come in here and click on
the navigation items, not only do the
| | 03:54 |
panels animate to the center, but the
background moves as well.
| | 03:57 |
So when we're on the last navigation item
we can see the far rightmost area of the image.
| | 04:01 |
And if we click on the first navigation
item we can see the far left area of the image.
| | 04:07 |
Now one thing you might notice at this
point, if you resize the browser and click
| | 04:11 |
to navigation items, the panels don't go
to the right spots, and this is something
| | 04:14 |
that we're going to address a little bit
later on when we start detecting the
| | 04:17 |
window size.
The next thing we're going to do is style
| | 04:19 |
the images inside of the individual
panels, and then we'll work on the media
| | 04:23 |
queries for small screens.
| | 04:24 |
| | Collapse this transcript |
|
|
4. Making the Design ResponsiveAdding CSS styles for the panel images| 00:02 |
Now to style the images inside of the
panels, if we go back to the index.html,
| | 00:05 |
from the snippets file, you'll see that
each one of the images, I've put a class
| | 00:10 |
on here.
So, Arpnet has a class of Arpnet on the
| | 00:13 |
image, tcp has one for the TCP panel.
So, if we come back to our timeline.css.
| | 00:20 |
After our navigation rules, let's come in
here and add some rules that target those
| | 00:23 |
specific images.
So, first we'll do dot timeline
| | 00:27 |
space.panel space img.arpnet, start our
brackets.
| | 00:36 |
We're going to set margin properties here.
We're going to set top to zero, right to
| | 00:40 |
zero, bottom to 10 pixels, and left to
zero pixels.
| | 00:46 |
Next, we'll target timeline .panel,
img.tcp, begin our brackets.
| | 00:49 |
We're going to set a float property here
of left, then a margin top of 10 pixels,
| | 00:57 |
20 pixels on the right, zero on the
bottom, and zero on the left.
| | 01:01 |
Next, we'll target the timeline .panel,
then img.tcp_ip.
| | 01:09 |
We'll set the float to left and then
margin-right to 20 pixels.
| | 01:22 |
Next, we'll target timeline .panel
img.www.
| | 01:27 |
We're going to set a float of left, and
then margin top 10 pixels, 15 on the
| | 01:36 |
right, 0 on the bottom, and 0 on the left.
Next, we'll do timeline panel space
| | 01:44 |
img.voip for voiceover IP, begin our
bracket.
| | 01:49 |
We're going to set a float property here
of right.
| | 01:54 |
Then for the margin, we're going to set 10
pixels on the top, zero on the right, zero
| | 01:58 |
on the bottom, and 10 pixels on the left.
Next, we'll do timeline panel
| | 02:03 |
img.telecommunicatons_usage, start our
brackets.
| | 02:09 |
We're going to set float to right, and
then margin properties of 10 pixels on the
| | 02:14 |
top, 30 on the right, zero on the bottom,
and 10 pixels on the left.
| | 02:18 |
And now next, we'll put in a roll to clear
the floats.
| | 02:23 |
Let's start with .clear_both, begin
bracket.
| | 02:27 |
Set the clear property to both, and then
end the bracket.
| | 02:32 |
Now with these rules in place, let's hit
Save.
| | 02:34 |
Let's come back to the operating system
and reload this in our browser.
| | 02:37 |
And now we can see in out timeline, our
images have better positioning inside of
| | 02:40 |
the panels.
As we go through to the different panels,
| | 02:43 |
we can see that in some cases, we have
images floating on the left, with content
| | 02:46 |
that goes around the right.
And then images with right float
| | 02:49 |
properties, with text going around the
left hand side.
| | 02:54 |
Now, with the content styled in the
panels.
| | 02:56 |
Next, we'll work on some media queries to
target small screen devices.
| | 02:58 |
| | Collapse this transcript |
| Creating a CSS media query for small screens| 00:00 |
Now to detect small-screen devices, we're
going to add an inline media query.
| | 00:04 |
So, in the timeline.css file, let's scroll
down to the bottom.
| | 00:07 |
Let's hit a few returns.
Let's start by typing in @media space
| | 00:13 |
screen and, then in parenthesis, we'll put
max-width:colon 500 pixels ,so 500px and
| | 00:23 |
the parentheses, and then a beginning and
ending bracket.
| | 00:26 |
So, any rules that we put inside these
brackets are now only going to be invoked
| | 00:30 |
if the screen size is less than or equal
to 500 pixels.
| | 00:34 |
So, let's come in here and open up those
brackets.
| | 00:38 |
Now, the first rule we're going to create
is going to be targeting the timeline container.
| | 00:42 |
So, .timeline then beginning bracket, lets
change the margins to zero.
| | 00:48 |
The background, lets set the color to
81194C.
| | 00:52 |
Then we'll specify a URL, we're going to
change the background image.
| | 00:57 |
Dot dot slash to go out to root, images
slash background_small.jpg, set no repeat.
| | 01:07 |
We're going to center the graphic on the X
and zero pixels for the Y.
| | 01:12 |
So, now when we're in a small-screen
device, we're going to change out the
| | 01:15 |
background image that's being used in the
timeline container.
| | 01:17 |
Next, let's add a few more rules.
Next, we'll target the h1 tag, so
| | 01:23 |
.timeline space h1.
We'll set the text align to left.
| | 01:30 |
We're going to set the padding.
Set the top to 10 pixels, 10 pixels on the
| | 01:34 |
right, 10 on the bottom, and then 20 on
the left.
| | 01:43 |
Next we'll target the panel container, so
.timeline .panel_container.
| | 01:50 |
We're going to set the height of this to
auto.
| | 01:58 |
Then we're going to set the background to
none.
| | 02:01 |
And we also want to set the filter to to
maker sure the IE 7, 8, and 9 will get rid
| | 02:06 |
of that gradient.
Then we'll set a margin of zero on all
| | 02:11 |
seven lines.
Next we'll set the panel slider.
| | 02:19 |
So, .timeline space .panel_slider.
Here we want to remove the absolute
| | 02:26 |
positioning, so we're going to set
position to static.
| | 02:29 |
And then we're going to set the height to
auto as well.
| | 02:32 |
Next, we're going to target the individual
panels, so we have a couple of rules we
| | 02:35 |
need to set for that as well.
So, let's start by targeting the panels,
| | 02:39 |
so .timeline, space .panel, begin our
bracket.
| | 02:46 |
First, we're going to set the width to
auto, so it will no longer be 340 pixels wide.
| | 02:52 |
We're going to set the height to auto as
well.
| | 02:58 |
We're going to remove the positioning on
these.
| | 03:00 |
So, set position to static, then we're
going to set border top, so border-top,
| | 03:09 |
shorthand style for this.
First, we'll set the width, 1 pixel.
| | 03:14 |
The style is solid, we're going to set
this to 30% white.
| | 03:18 |
So RGBA 255 three time and then 0.3 for
the alpha.
| | 03:19 |
And then lastly, let's set padding-bottom
to 20 pixels, then end the bracket.
| | 03:35 |
So, with all of these rules in place, when
the screen is less than 500 pixels all of
| | 03:38 |
these rules will now be invoked.
So, lets choose file, Save.
| | 03:42 |
Lets come back out, open this up in a
browser.
| | 03:46 |
So, now in a browser we hit Reload.
Now, if we bring the browser down under
| | 03:50 |
500 pixels, we'll see some of the changes
taking effect.
| | 03:54 |
We'll see that all of the panels are now
stacked vertically.
| | 03:57 |
We can scroll all the way through all of
them.
| | 04:01 |
So, now that we know that were properly
targeting under 500 pixels, were going to
| | 04:04 |
to finalize a few things.
Next, were going to take out the
| | 04:07 |
background image from the large screen.
And were also going to remove the
| | 04:09 |
navigation and style some of the content
in the individual panels, so they fit
| | 04:13 |
better on a small screen.
| | 04:14 |
| | Collapse this transcript |
| Hiding elements on small screens| 00:00 |
Now, we're going to put in the final rules
for our small screen devices.
| | 00:04 |
So, inside of our media query, the target
screen is under 500 pixels.
| | 00:08 |
After the rule, the targets (UNKNOWN).
Let's come in here and add some additional rules.
| | 00:13 |
Next, we're going to target the
navigation.
| | 00:14 |
So, .timeline nav on small screen devices,
we're going to set display to none.
| | 00:21 |
Since direction going to use their finger
to swipe through to see all the panels.
| | 00:26 |
Next, we'll target the background slider.
So, .timeline background_slider.
| | 00:32 |
And we're going to set the display of this
to none as well.
| | 00:34 |
Since we're now assigning the background
small, in the main timeline container for
| | 00:38 |
small screens.
Next, we'll target the first panel and
| | 00:42 |
then the panel content.
So, first, let's do timeline .panel and
| | 00:48 |
then :first-child.
This pseudo class will pick out the very
| | 00:55 |
first panel, and we're going to set
padding-top of 40 pixels.
| | 01:00 |
We want to have enough room for our
internet label set in the h1 tag only on
| | 01:04 |
the first panel.
Next, we're going to target timeline .panel_content.
| | 01:12 |
So, for each one of these, we need to add
a little room for the label at the top.
| | 01:15 |
So, let's add padding-top of 60 pixels.
And then next, we're going to target the labels.
| | 01:24 |
So, .timeline .panel_content .label.
We're going to set a top property of
| | 01:32 |
negative 10 pixels, and then a right
property of 10 pixels.
| | 01:36 |
This way, those labels won't touch the
right-hand side of small screens.
| | 01:40 |
And next, we're going to make some
adjustments to some of the images inside
| | 01:43 |
of the panel content.
So, first, we're going to target the image
| | 01:46 |
for World Wide Web.
So, .timeline .panel .img.www.
| | 01:55 |
We're going to set a margin of 0 on the
top, 25 on the right, 0 on the bottom and
| | 02:01 |
0 on the left.
Next, we'll target the voice of our IP.
| | 02:07 |
So, .timeline .panel .img.voip.
We're going to set a margin of 10 pixels
| | 02:14 |
on top, 40 on the right, 0 on the bottom
and 20 on the left.
| | 02:20 |
And next, we'll target telecommunications.
So .timeline .panel img.telecommunications_usage.
| | 02:29 |
We're going to set the float on this to
left.
| | 02:33 |
And for margin, we'll set 10 pixels on the
top, 15 on the right, 0 on the bottom and
| | 02:38 |
0 on the left.
Now with those final rules in place, let's
| | 02:41 |
go back and reload this in a browser.
So, on the browser, we hit Reload.
| | 02:46 |
We can see that on the first panel, we
have some extra room for the internet
| | 02:48 |
label at the top.
We can see that each one of these
| | 02:50 |
individual labels now has a top setting of
negative 10.
| | 02:56 |
We can scroll down and see some of the
changes we've made.
| | 02:59 |
So, for example, down here, we've changed
this to be a float left.
| | 03:04 |
And all of the content fits nicely inside
of the small screen area.
| | 03:09 |
So, now that all of our CSS and HTML is in
place.
| | 03:12 |
Next, we're going to check the window
size, and we're going to reset the panel
| | 03:15 |
if the window size changes, or we go from
small screen to large screen devices.
| | 03:19 |
| | Collapse this transcript |
|
|
5. Adding an Autostart and Screen Size DetectionSetting the timeline to autostart on a panel| 00:00 |
Now, we're going to add some width
detection and also add an auto-start.
| | 00:03 |
So the first thing we want to address is
the fact that if the user changes the size
| | 00:07 |
of the browser the timeline doesn't
actually line up with the navigation items.
| | 00:11 |
So to see this on our design if I come
down here and click 1980 to 89 you'll see
| | 00:14 |
that the panel lines up in the center.
But if I come in here and change the size
| | 00:20 |
of the browser.
Then click on 1970 to 79, for example.
| | 00:24 |
You'll see that this is actually offset.
This is because we're only detecting the
| | 00:27 |
window size one time.
So to alleviate this problem, let's come
| | 00:31 |
back to our job descript file.
Let's scroll up to the top, and inside the
| | 00:35 |
document ready, we define the timeline
width.
| | 00:39 |
Let's come in here and copy this.
We want to leave this here because on our
| | 00:42 |
auto-start, we're going to use this value.
But everytime the user clicks one of the
| | 00:46 |
links, we want to make sure that we
recheck this.
| | 00:49 |
So with that copied, let's scroll down.
Let's find our click events that we've
| | 00:53 |
assigned to the anchor tags.
After the current panel, let's hit a return.
| | 00:58 |
And lets simply paste this in here as
well.
| | 00:59 |
So each time the user clicks on a
navigation link we're going to go check
| | 01:03 |
the timeline width and just make sure of
its size before we do the rest of the calculations.
| | 01:08 |
Lets hit save.
Lets switch back to our browser.
| | 01:10 |
Lets hit reload.
Now lets come down and click.
| | 01:14 |
I'll click 1990 to 1999, that lines up in
the center.
| | 01:17 |
2000 works.
Let's come in here, and let's move this
| | 01:21 |
down really small.
Let's click 1970-79.
| | 01:25 |
You'll see this now lines up properly.
And if we make this really large, click
| | 01:31 |
2000-09, this line up perfectly.
So with that positioning problem
| | 01:34 |
alleviated, let's close our browser, let's
go back to our JavaScript.
| | 01:38 |
Now we want to create a custom function so
we can check the window size, so we can
| | 01:41 |
detect if somebody goes from a small
screen to large screen and give us the
| | 01:45 |
opportunity to auto start the timeline on
a specific panel.
| | 01:48 |
So after activate navigation, let's scroll
down, let's add another function.
| | 01:54 |
We're going to call this, check window
size.
| | 02:00 |
Beginning and ending parenthesis,
beginning and ending bracket.
| | 02:02 |
Let's put that open on the brackets.
So the first thing we're going to do in
| | 02:07 |
here is declare a new variable.
So far new timeline width.
| | 02:12 |
So let's type dollar sign parenthesis.
Stringliteral.timeline, that's out of the
| | 02:20 |
parentheses, .width.
So we're going to set the new timeline
| | 02:25 |
width variable to whatever the current
timeline width is.
| | 02:29 |
Let's hit a few returns.
Next we'll set timeline width.
| | 02:33 |
We'll set that equal to the new timeline
width variable.
| | 02:39 |
Then a semi colon.
So right now this isn't doing anything intelligent.
| | 02:42 |
We're actually going to add some
additional scripts inside of here in the
| | 02:45 |
next movie to detect if we go from small
screen to large screen.
| | 02:48 |
However, these variables in place are
going to allow us to put in out auto start.
| | 02:51 |
So let's hit a few returns.
Let's come down here.
| | 02:55 |
Let's start a conditional statement.
So I'll type if, beginning and ending
| | 02:59 |
parentheses, beginning and ending bracket,
split that open on the brackets, inside of
| | 03:05 |
the parentheses for if, we're going to
check our variable called first run.
| | 03:12 |
Two equal signs for absolute quality,
we're going to see if first run is equal
| | 03:16 |
to true.
And if first run is equal to true what
| | 03:19 |
we're going to do is target one of the
navigation items and perform a click.
| | 03:23 |
So start with a dollar sign, parenthesis,
tick marks for string literal .timeline
| | 03:31 |
nav a:nth-child beginning in a new
parenthesis.
| | 03:38 |
Inside of the parentheses what we want to
do is target the individual navigation
| | 03:41 |
item that matches the current panel.
So get your cursor inside of the
| | 03:46 |
parentheses, two more tick marks.
Inside put two plus signs, we're going to
| | 03:50 |
concatenate a statement here.
And what we want to do is take the current
| | 03:54 |
panel variable and add one to it.
So let's add another set of parenthesis so
| | 03:58 |
I'll put in current panel plus one.
Outside of the parenthesis for the actual
| | 04:06 |
searching for that nth child type .trigger
another set of parenthesis and a semi-colon.
| | 04:17 |
Inside of the parentheses for a trigger.
Put a string literal, type in Click.
| | 04:22 |
So basically what we're doing is we're
finding whatever the current panel is and
| | 04:25 |
we are clicking the corresponding anchor
link.
| | 04:28 |
So that will invoke the navigation click
event and then in turn, the timeline will
| | 04:32 |
respond to that, based on this click event
that we wrote up here.
| | 04:34 |
So now, after we run our instruction based
on the first run variable let's come down here.
| | 04:42 |
After we trigger the click let's come in
here and reset the first run variable to false.
| | 04:47 |
Now lastly we need to run the check window
size function so let's scroll up to the top.
| | 04:55 |
We want to run this once a second, so
every second we're going to check the
| | 04:58 |
status of the window size, and we're
going to do this by using a set interval.
| | 05:03 |
So we'll come in here and use a JavaScript
function called set interval begin parenthesis.
| | 05:08 |
We're going to type in check window size,
the name of the function, and then set an
| | 05:12 |
interval amount of 1,000 milliseconds.
This means that the check window size will
| | 05:15 |
run once every second, and will do all of
those calculations out of that function.
| | 05:20 |
So now, with these in place, let's hit
File > Save.
| | 05:22 |
Let's come back out to the operating
system and reload this in a browser.
| | 05:27 |
So the first thing you'll see is this
animates out to the last panel.
| | 05:30 |
You'll also notice that the navigation
item is in its selected state.
| | 05:33 |
This the navigation item was actually
clicked, as if the user had loaded the timeline.
| | 05:38 |
Waited a second and then clicked on the
actual last panel.
| | 05:41 |
And you can set the current panel to any
number as well.
| | 05:44 |
So you can set starting from 0, 1, 2, 3, 4
or 5.
| | 05:48 |
So you can the timeline start on any
particular panel.
| | 05:51 |
So now, with that in place, the last thing
we need to do is set it up so that if you
| | 05:55 |
start on a small screen device and move to
a large screen, we do the same
| | 05:59 |
recalculations on the window size.
| | 06:01 |
| | Collapse this transcript |
| Detecting the screen size for a responsive layout| 00:00 |
Now to detect when the window starts from
under 500 pixels and changes to large screen.
| | 00:05 |
Or goes from large screen to small screen,
we need to add some conditional statements
| | 00:09 |
inside of our check window function.
So let's scroll down to the bottom of our
| | 00:12 |
JavaScript file.
Earlier we set up these two variables,
| | 00:17 |
newTimeline width and then we simply set
the timeline width to the new value...
| | 00:21 |
So before we set the timeline width to the
new timeline width, we want to do a few
| | 00:25 |
conditional statement to make sure that,
that's the setting we want to use.
| | 00:27 |
So we're going to start with an If
statement, parenthesis, brackets.
| | 00:32 |
Split that open on the brackets.
So inside the parenthesis, we're going to
| | 00:36 |
check newTimelineWidth.
We're going to see if that is greater than 500.
| | 00:42 |
And we also want to see if the timeline
width is greater than 500.
| | 00:45 |
So we're going to use two ampersands here.
We're going to set timelineWidth is
| | 00:54 |
greater than 500.
So the new timeline width is greater than
| | 00:56 |
500 and the timeline width is greater than
500, we're going to come in here, let's
| | 01:02 |
put a comment.
We want to do nothing.
| | 01:06 |
Nothing significant has changed.
Let's come down to the ending bracket.
| | 01:10 |
Let's type else if.
We want to run a second conditional if statement.
| | 01:15 |
Parenthesis and brackets.
Inside of these parenthesis, what we
| | 01:21 |
want to do is check NewTimelineWidth is
less than 500 and the timelineWidth is
| | 01:31 |
also less than 500.
Let's come in here.
| | 01:35 |
We're also going to do nothing.
Then we're going to add an else.
| | 01:40 |
Another set of brackets.
Hit two returns.
| | 01:46 |
And inside of this else statement, we'll
know that we've either gone from a small
| | 01:50 |
screen to a large screen or a large screen
to a small screen.
| | 01:52 |
And if that happens, we want to reset the
first run variable.
| | 01:56 |
So when we go from small screen to large
screen, we can re-invoke our first run settings.
| | 02:01 |
So inside of here, we're going to add
another conditional statement.
| | 02:04 |
We're going to say if parenthesis,
brackets.
| | 02:11 |
Inside of the parenthesis for this if,
we're going to type, if newTimelineWidth
| | 02:16 |
is greater than 500 and timelineWidth is
less than 500.
| | 02:25 |
We're going to come in here and set first
run back to true.
| | 02:32 |
And since each navigation item resets the
current panel, when first run is invoked,
| | 02:37 |
it's going to run the current panel.
So this is going to give us the ability to
| | 02:40 |
have the timeline go back to the panel
that it was at if somebody goes from large
| | 02:45 |
to small back to large.
So to see this working, let's hit File > Save.
| | 02:49 |
Let's come back out and reload this in a
browser.
| | 02:55 |
So by default we go to the last panel.
Let's come in here and click on 1980 to 89.
| | 03:01 |
Now let's come down and move this down to
the small screen.
| | 03:03 |
So now we can scroll through and see all
of the small screen items.
| | 03:08 |
Now if we go back to our large screen
size.
| | 03:10 |
Wait for a second, you'll see that 1980 to
89 will reset itself into the center
| | 03:14 |
because we've reset the first run.
And the current panel was set by clicking
| | 03:19 |
1980 to 89 before we went to small screen
devices.
| | 03:23 |
Now back in our JavaScript file, we have
these two conditional statements where we
| | 03:26 |
don't have anything happening.
You can certainly come in here and add
| | 03:29 |
additional functionality based on whether
the timelines are both greater than or
| | 03:33 |
less than 500 pixels.
So this gives you a nice construct to be
| | 03:37 |
able to detect for any user experience
that you want to have happen between small
| | 03:40 |
and large screens.
And now with all of this in place, next
| | 03:44 |
we'll set some CSS rules for IE7 and 8 to
override some of the CSS3 properties we've
| | 03:49 |
put into our design.
| | 03:50 |
| | Collapse this transcript |
| Optimizing CSS for IE 7 and 8| 00:00 |
Now in our CSS, we use some CSS3
properties that aren't going to work
| | 00:04 |
inside of IE 7 and 8.
So let's come over here to our project files.
| | 00:09 |
Let's open up timelineie7_8.css in our
text editor.
| | 00:14 |
Let's come in here and let's redefine some
of those properties.
| | 00:17 |
And if you remember back to the HTML file.
We added in an IE conditional statement to
| | 00:22 |
target Internet Explorer if its under
version 9.
| | 00:25 |
And here we had a link to our IE 7 and 8.
So let's come back here and let's add in
| | 00:30 |
some rules to overwrite some of those
properties.
| | 00:33 |
So first we're going to target the
timeline navigation.
| | 00:37 |
So we'll type .timeline nav.
We're going to set the width here to 100%.
| | 00:47 |
Next we're going to target the timeline
nav a:first-child.
| | 00:49 |
We're going to set border-left-width to
four pixels.
| | 01:05 |
Next, we're going to set the Timeline Nav,
a.selected, since we can use
| | 01:09 |
semi-transparent colors.
IE 7 and 8 don't support RGBA.
| | 01:13 |
We're going to come in here and just set
the color of the text to black, and the
| | 01:17 |
background color to white.
Next, we'll target the, labels inside of
| | 01:23 |
the panel content.
So .timeline .panel_content .label.
| | 01:31 |
I'm going to pick a medium violet, light
color here to use for all of them since we
| | 01:35 |
can't use semi-transparency here either.
So the color's going to be a58293.
| | 01:42 |
Next we're going to target the paragraph
element inside of the panel of content.
| | 01:45 |
So .timeline .panel_content p.
We're going to set the color to white.
| | 01:51 |
So now with these in place, if you save
your file, load this up in IE7 or 8.
| | 01:56 |
You'll see that the changes here are being
reflected.
| | 01:58 |
We can see that the labels all have the
same color without the semi-transparency.
| | 02:02 |
The selected state of the navigation has
black text and a solid white background
| | 02:06 |
fill, and the paragraph text is showing as
full white as well.
| | 02:09 |
So having a conditional IE CSS file will
give us the ability to use all the latest
| | 02:14 |
CSS3 for modern browsers.
And still maintain some compatibility back
| | 02:17 |
with IE 7 and 8.
And now that we've completed creating your
| | 02:20 |
interactive animated timeline, next we'll
talk about we're you might want to go from here.
| | 02:24 |
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 |
Now that you've completed this course, I
have a few more courses in the lynda.com
| | 00:03 |
online training library with very similar
techniques.
| | 00:06 |
One is Creating a Sortable Photo Gallery,
where we adjust the layout based on screen size.
| | 00:10 |
And using HTML tags, we can actually sort
different photography based on individual
| | 00:15 |
keywords that you put in.
And you can use the sorting idea for
| | 00:18 |
anything, not just photography.
And if you'd like to use jQuery in a more
| | 00:22 |
visual environment, I have some courses
using edge animate in combination with
| | 00:26 |
jQuery, so, you can custom program some
interactive experiences inside of a very
| | 00:30 |
visual environment.
And those courses include creating a
| | 00:32 |
randomized animation of a starfield, and
creating your own interactive homepage
| | 00:36 |
marquee for your website.
And with that, that completes creating an
| | 00:40 |
interactive animated timeline with jQuery,
and I really appreciate you watching my course.
| | 00:43 |
| | Collapse this transcript |
|
|
