IntroductionPreviewing the final project| 00:04 | Hi! I am Chris Converse, and in this course we're
going to be building a sliding tabbed panel
| | 00:07 | for your website.
| | 00:08 | I want to start by showing the final project.
| | 00:11 | We're going to be creating this tab panel
here where when I click on individual tabs,
| | 00:15 | the content inside is going to swipe back and forth to
animate to the content that corresponds to the tab.
| | 00:21 | We're also going to set it up so that
you can start on a particular tab.
| | 00:26 | So if I come up here and hit Reload,
we're going to actually start this on the second
| | 00:28 | tab, and we'll show you how to
set this to anyone of the tabs.
| | 00:31 | We are also going to build a
styled version of this as well.
| | 00:35 | So if you just like to stop at this point
in the course with a generic style to apply
| | 00:39 | your own design to, you can, or you can come in
here and we can create more customized designs.
| | 00:46 | So, in this case, we have custom background
graphics and custom type styles and layouts
| | 00:51 | inside of each individual tab panel.
| | 00:55 | Now there is one more aspect we're
going to be building into this course:
| | 00:57 | we're going to be taking a look at
applying progressive enhancement techniques.
| | 01:01 | So if somebody were to visit this tab panel
without having JavaScript enabled, this is
| | 01:05 | what the user would see.
| | 01:07 | They would see all of the
content from the panels stacked up.
| | 01:10 | They would still see the CSS in place,
but, again they wouldn't have that sort of tabbed
| | 01:13 | panel or enhanced user experience.
| | 01:16 | Then of course if somebody didn't have JavaScript or CSS,
they would see a nicely laid out page like this.
| | 01:21 | At the end of the course we're going to talk
about some of those progressive enhancement
| | 01:25 | techniques and how we can apply some of those
earlier courses I have in the lynda.com online
| | 01:29 | training library.
| | 01:31 | So I hope this course sounds
interesting to you, and if so let's get started.
| | Collapse this transcript |
| About the exercise files| 00:00 | When you download the exercise files there is
going to be a series of folders inside of there.
| | 00:04 | Now if you're a Premium subscriber to the
lynda.com online training library, you'll
| | 00:08 | have the access to all five of these folders.
| | 00:10 | If you're not a Premium subscriber,
you'll have the access to folders 1 and 2.
| | 00:14 | These are the minimum number of files that
you'll need to be able to complete the course.
| | 00:19 | Now, inside of folder 1, we have Files to add.
| | 00:21 | We're going to copy these into our main
project folder to give us a jumpstart.
| | 00:25 | This includes an HTML file, and then in the includes
directory, two CSS files and a JavaScript file.
| | 00:31 | These are empty but are
hooked into the index.html file.
| | 00:34 | Then finally, there's an images folder.
| | 00:36 | So in case you want to skip the Photoshop
part where we customize these graphics, you
| | 00:40 | can just skip that chapter and move on.
| | 00:43 | Now inside of folder 2,
we have two snippet files.
| | 00:46 | These files have some placeholder text and some CSS
rules that we can cut and paste later in the course.
| | 00:52 | Inside of folder 3 is a source Photoshop file.
| | 00:54 | You can use this file to
create custom background graphics.
| | 00:58 | Inside folder 4 is a copy of the
generic version of the project.
| | 01:02 | As we go through this course, we're going to be
creating a sliding tab panel which is going
| | 01:05 | to have very little styling in it
but will be fully functional.
| | 01:08 | If you want to stop the project there and
use that as the project to implement into
| | 01:12 | your website, you can use this one.
| | 01:15 | Then inside of folder 5 is the fully styled
one that has backgrounds and different graphic
| | 01:19 | colors and so forth.
| | 01:21 | So now that we're familiar with the exercise
files, we can start building our project in the next movie.
| | Collapse this transcript |
| Beginning the project| 00:00 | Now, to begin our project let's
create a folder on the desktop.
| | 00:06 | We'll call this mySlidingPanels.
| | 00:08 | I'm just going to open this up
and resize this a little bit.
| | 00:14 | Now, with our project folder created,
let's come back to the Exercise Files.
| | 00:17 | Let's open up folder 1, called Files to add.
| | 00:20 | Let's select the images directory, the includes
directory, and the index.html file, and let's
| | 00:25 | drag a copy of these into the
project folder we created on the desktop.
| | 00:29 | So once all of these are in place,
we'll come back to the exercise file.
| | 00:34 | Let's close up folder 1.
| | 00:36 | Now that we've all of our startup files
in place, we can start editing the HTML.
| | Collapse this transcript |
|
|
1. Creating the HTML ContainersCreating the main panel and the tab containers| 00:00 | Now, to begin editing our HTML file, let's
open up index.html up in Adobe Dreamweaver.
| | 00:06 | Now, if you prefer to take this course in a
more code-oriented tool, we're offering the
| | 00:10 | same course in the lynda.com library using a
text editor instead of Adobe Dreamweaver.
| | 00:15 | Now inside of Dreamweaver, let's come over to
the Code view of this particular document,
| | 00:19 | and I want to point out some things
that I've added into this file already.
| | 00:23 | First is we have a link to
the sliding_panels.css file.
| | 00:26 | We also have a link into jQuery, a link into
a sliding_panels.js file, and then down here
| | 00:32 | we have links into a Google html5shiv,
| | 00:36 | if the version of IE is less than 9.
So here we're linking to the Google shiv.
| | 00:41 | This is going to ensure the fact that were
using a document type here, which is for HTML5,
| | 00:46 | that IE7 and 8 will be
able to understand this.
| | 00:48 | And we also have a link to a special IE CSS
file so that we can redefine some of the CSS
| | 00:54 | 3 properties that IE 7 and 8 don't support.
| | 00:57 | And if you're using a more recent version of
Dreamweaver, you'll see the related files
| | 01:00 | up here actually match these
items that we were just looking at.
| | 01:04 | So the first thing we're going to do
is create some content containers.
| | 01:07 | So we're going to do this inside of Code view
to make sure that the structure of the HTML
| | 01:11 | is exactly what we need.
| | 01:12 | So I have a comment in here
called Sliding Panels go here.
| | 01:16 | You can take that comment and then delete
it, and we're going to put in our main HTML
| | 01:20 | content containers for the sliding panels.
| | 01:23 | The first one is going to be a div tag.
So I'll start a new tag, div.
| | 01:28 | We'll set a class of SP on this item.
| | 01:32 | Let's end the tag and let's end the element.
| | 01:36 | This is going to be the main
container for our sliding panels.
| | 01:40 | Inside of here we're going to add another div.
| | 01:41 | We're going to set a class of tabs on this.
| | 01:47 | End that tag and end that element.
| | 01:51 | Let's put that on the next line, and let's
add another div inside of the container div.
| | 01:58 | This one is going to have a class of
panel_container, and then end that element.
| | 02:10 | Now, with our main HTML containers complete,
we'll add some additional containers for our tabs.
| | Collapse this transcript |
| Creating the HTML containers for the tabs| 00:00 | So now we'll add HTML
containers for the individual tabs.
| | 00:04 | So let's get our cursor inside of
the div with the class of tabs.
| | 00:08 | Let's tab in, and we can put HTML elements
inside of here that we'll use as our individual
| | 00:12 | tabs that our users can click on.
| | 00:13 | Now you can use any HTML
element here that you want.
| | 00:16 | Sometimes people like to put unordered lists
inside of here or use straight anchor tags.
| | 00:21 | Instead, I'm going to choose to use a span tag.
| | 00:24 | We'll type "iPad," then
we'll end this span element.
| | 00:27 | Let's hit a teturn.
| | 00:30 | Write another span. This one is
going to be for Video and the element.
| | 00:36 | Let's add one more. This one will be
Photography, and end that element.
| | 00:45 | Now that we have the HTML elements that
we're going to use as tabs, in the next movie we
| | 00:48 | can start working on the panels
inside of the panel container div.
| | Collapse this transcript |
| Creating the HTML containers for the panels| 00:00 | Now, for the panel containers, let's come up
here and split the div open a little bit that's
| | 00:06 | got the class of panel container.
| | 00:09 | Let's tab in, and let's add
another div inside of here.
| | 00:11 | We're going to give this a
class of panels, plural.
| | 00:17 | We're going to end that element.
| | 00:20 | Let's split that open. And inside of here
we're going to put each individual panel.
| | 00:26 | We'll start with another div
inside of the class of panels.
| | 00:30 | We're going to give this a
class of panel, singular.
| | 00:36 | Let's end that div tag.
| | 00:38 | Let's open up one individual panel, and then
inside of here we're going to put one more div.
| | 00:43 | We're going to give this a class
of panel_content and end that div.
| | 00:54 | So now this constitutes one panel.
| | 00:57 | Let's copy this to the clipboard, let's hit
a return, and let's paste it two more times.
| | 01:05 | So now inside of our panel container we have
one div called panels and then inside of there
| | 01:10 | we have three individual divs, each one
classed with panel, and then inside of each one of
| | 01:15 | those we have a div with panel content.
| | 01:18 | So now we have all of the HTML containers
that we need inside of panel container for
| | 01:22 | all of the individual panels.
| | 01:24 | Next, we can start adding in some of
the content for the individual panels.
| | Collapse this transcript |
| Adding content to the containers| 00:00 | Now, to add content for these panels,
we're going to come over to our snippets.
| | 00:04 | So in Dreamweaver come up to
the File menu, choose Open.
| | 00:08 | Locate your Exercise Files. Go into folder 2 called
Snippets and open up A-panel-content.html, then click Open.
| | 00:17 | So inside of here I have just some content
about some of my other lynda.com courses that
| | 00:20 | we can cut and paste into
the individual panels.
| | 00:23 | So the very first panel, which is for the iPad,
let's come over here and copy the h2 all the
| | 00:28 | way up through the ending paragraph tag.
| | 00:30 | Let's copy that to the clipboard.
| | 00:33 | Let's come back to index.html and inside of
panel_content for the first panel, let's tab
| | 00:38 | in and let's paste all of that content.
| | 00:41 | I'm going to format this a little bit as well;
I'll just select these lines, hit the Tab
| | 00:46 | key, and just tab these in so that
these three elements here all line up.
| | 00:51 | Let's come back to our panel_content.
| | 00:54 | Let's scroll down to the
content for the video Panel.
| | 00:58 | Select from the h2 all the way up through the
ending paragraph tag, copy that. index.html.
| | 01:03 | Let's come back and find the second panel.
| | 01:08 | Let's tab in and paste all of that content.
Again, I'm going to format this as well, to
| | 01:14 | line up all of the element tags.
| | 01:16 | Let's scroll down. This is our third panel.
| | 01:18 | Let's come back to our snippets.
| | 01:20 | Let's scroll down and find all of the
content for the photography panel.
| | 01:26 | Select all of this, copy to the
clipboard. Back to index.html.
| | 01:32 | Inside of panel_content for the third
panel, let's paste all of that content.
| | 01:42 | So with all of our content in place,
let's switch back to Design view.
| | 01:45 | Now, inside of Design view, we'll see
all of the content that we just added.
| | 01:48 | We can see our tabs up here inside of a div,
and Dreamweaver shows us the divs with a dotted
| | 01:52 | line, and then we can see our
three individual panels here as well.
| | 01:57 | So, now with all of our content containers in
place and all the content inside of those
| | 02:01 | containers, we're ready
to start doing some CSS.
| | Collapse this transcript |
|
|
2. Styling the Tabs and PanelsAdding CSS styles to the text| 00:00 | Now we want to create some CSS rules to
style the text inside of the panels.
| | 00:04 | Now, we're going to be using compound rules,
which means we want to target only the text
| | 00:08 | that's inside these panels. And Dreamweaver
gives us a nice little shortcut to help us
| | 00:11 | write a compound rule.
| | 00:13 | So if have my cursor inside of one of the
panels--and I can see on the document tree here
| | 00:18 | that I'm inside of the paragraph tag, inside
of panel_content--and we can see this follows
| | 00:22 | all way up to to the div.sp, which is the
overall container for our sliding panel.
| | 00:27 | With my cursor inside of here, I come over to
this CSS styles property, click on Create
| | 00:32 | New Style, and when we select Compound from
the type of list, notice that Dreamweaver will
| | 00:37 | write a compound rule targeting exactly the
element I had selected, all the way from the
| | 00:42 | highest-most parent, which
in this case is the sp tag.
| | 00:47 | Now we don't need this to be quite as
specific, so let's come in here and let's remove all
| | 00:50 | of the intermediate rules.
| | 00:53 | And we're just going to have .sp--the
outermost container--space p.
| | 00:57 | So we want to target the paragraph tags inside of
the outermost container for our sliding panel.
| | 01:02 | Next, let's come down here and make sure that
we have the sliding_panels.css chosen so
| | 01:07 | that when we write CSS rules here, even though
we're in the index.html file, those rules will
| | 01:12 | go into the sliding_panels.css file.
| | 01:16 | Let's click OK. Now for paragraph
we're going to come in here to Font-size.
| | 01:20 | We're going to specify 1 em. And over at the
Box properties, let's come in here, and let's
| | 01:26 | uncheck Margin Same for all, and let's add a
0 on the Top, 0 on the Right, we're
| | 01:32 | going to add 1 em on the
Bottom, and then 0 on the Left.
| | 01:37 | Now, when I click Apply we can see some
slight changes over in the left-hand side here.
| | 01:42 | We can see that we now have these
individual paragraphs have no margin at the top.
| | 01:47 | Let's click OK. Let's create one more rule.
| | 01:49 | We want this to be for an h2.
| | 01:51 | So I'll select a couple of characters in the heading.
Come over here, create a new CSS rule, Compound.
| | 02:00 | Let's get rid of all of the intermediate
classes, so we have .sp h2. Click OK.
| | 02:07 | What we're going do here for Font-size,
we are going to type 1.15 ems; this will give
| | 02:12 | us a 15% increase on the base font size.
| | 02:16 | Box properties, uncheck
Same for all from Margin.
| | 02:19 | We're going to type 0 on the Top, 0
on the Right, .5 ems on the Bottom. and 0
| | 02:27 | on the left, and then click Apply.
| | 02:30 | Once we do that, you'll see all of the h2 tags
now stick right to the very top of the panel
| | 02:34 | because we've removed the top margin.
| | 02:36 | And since the paragraph tags have the top
margin removed as well, we're getting exactly
| | 02:40 | half an em between the h2
and the paragraph tag.
| | 02:43 | So let's come over here and click OK.
| | 02:47 | Now that we have the CSS rules in place to
style the text in the panels, next we'll work
| | 02:51 | on some CSS rules that will
target the layout of the panels.
| | Collapse this transcript |
| Adding CSS styles to the tabs| 00:00 | Now that we have some CSS rules in place to style the
text, let's create some CSS rules for the layout.
| | 00:05 | Let's come over to the CSS Styles panel.
| | 00:08 | Let's create a new rule.
| | 00:09 | This is going to be a class, .sp.
| | 00:13 | We're going to target the main
sliding panel container. Click OK.
| | 00:18 | Let's come over to the Box properties.
First we're going to set a Width, 325 px.
| | 00:23 | Let's come over here to the Float.
| | 00:26 | We're going to set this to right.
| | 00:30 | Let's come down to Margin,
uncheck Same for all.
| | 00:32 | We're going to set 0 on the Top, 0 on
the Right, 10 pixels on the Bottom, and 25
| | 00:37 | pixels on the Left.
| | 00:40 | Next let's come over to Positioning and
let's set the Positioning to relative.
| | 00:45 | What that's going to do is make sure that
any elements inside of the sp container are
| | 00:49 | going to be positioned
relative to the container itself.
| | 00:51 | Now let's come down here and click Apply.
And if I move this window out of the way, we can
| | 00:57 | see that the sp container has now been
conformed to 325 px, is floating over to the right, and
| | 01:02 | allowing content to go on the left-hand side.
| | 01:06 | So with that in place, let's click OK.
Now let's create another rule.
| | 01:09 | We're going to target the tabs container, so
this is going to be a compound rule, .sp .tabs.
| | 01:18 | Let's click OK. What we are going to do inside of
here. Let's come down to Positioning.
| | 01:21 | We're going to set Positioning
inside of here to relative as well.
| | 01:25 | And then we're going to come down to the Z-
Index and we're going to set this to 101.
| | 01:31 | Now we're setting this because the natural
Z-Index would be in the order of the HTML
| | 01:34 | code, and since the tabs come before the panel
container, the tabs would be behind the panel container.
| | 01:40 | But assigning an absolute Z-Index for this
object and assigning a lower number for the
| | 01:44 | panel container will make sure that the
tabs will be in front of the panel container.
| | 01:48 | That way when we select the tabs, they'll
actually look like they are connecting to the content.
| | 01:53 | With those settings let's
come down and click OK.
| | 01:55 | And let's create one more.
| | 01:56 | We want to target the spans now
inside of the tabs container.
| | 01:59 | So let's create another rule,
compound, .tabs span. Let's click OK.
| | 02:12 | This targets the actual elements that we
want to have look and behave like a tab.
| | 02:17 | So what we're going to do inside of here
is let's come down to the Box properties.
| | 02:21 | For Margin we're going to set
0 and leave that same for all.
| | 02:24 | For Padding, let's uncheck Same for all.
Let's add 8 px on the Top, 12 px on the Right, 8
| | 02:32 | px on the Bottom, and 12 pixels on the Left.
| | 02:36 | Next let's come over to the Block properties.
| | 02:39 | For Display, let's type inline-block.
| | 02:45 | Next, let's come over to Positioning.
| | 02:47 | We're going to set Positioning to relative.
| | 02:50 | Next, let's go to Background.
| | 02:52 | Let's set the Background-
color to white, which is #FFF.
| | 02:56 | And then lastly, let's come down to the Border
settings, and let's come over here and uncheck
| | 03:02 | Same for all for the Style, Width, and Color.
| | 03:06 | And so for Top, let's come down here and
choose solid 1 px and #CCC for a medium gray.
| | 03:14 | And let's set the same properties for the
Bottom, so solid 1 px and #CCC for medium gray.
| | 03:23 | Now, we are not going to set the right
and left borders in this particular rule.
| | 03:26 | We're going to do that in another rule,
to target either the first or the last tab so
| | 03:30 | that we don't get the borders
doubling on the right and left sides.
| | 03:33 | So at this point let's click OK.
| | 03:36 | So now in the background you see the tabs are
white and since we set a relative property
| | 03:40 | and give it a Z-Index, it's actually
showing up on top of the panel container.
| | 03:43 | So now that we have the CSS rules in place
to target the top and bottom borders of the
| | 03:47 | tabs, next we'll work on creating rules that
will target the first tab and the last tab
| | 03:52 | and set the right and left borders on those.
| | Collapse this transcript |
| Styling the first and last tabs| 00:00 | So at this point we need to add two CSS rules
in that Dreamweaver doesn't have support for
| | 00:03 | in its visual interface,
but we can add them into the code.
| | 00:07 | So let's open up the CSS file, go
up to the File menu, choose Open.
| | 00:12 | Inside of mySlidingPanels go to
includes, open sliding_panels.css.
| | 00:19 | Once in here, let's scroll down to the bottom.
| | 00:21 | I am going to add a few lines down here.
| | 00:25 | And what we want to do is target the first
child span, so let's start by typing the .sp,
| | 00:31 | space, .tabs, space, span, colon.
That specifies the pseudo-class first-child.
| | 00:42 | Let's put in our brackets.
| | 00:51 | So for the very first child, or the first tab, what
we're going to want to do is set a padding-left,
| | 00:56 | set that to 15 pixels.
| | 01:02 | This will give us little bit more room on the
left-hand side of the text for the rounded
| | 01:05 | corner that we're going
to put into the top left.
| | 01:07 | Let's hit a return.
| | 01:09 | Next, we're going to do border-left, colon,
space, and we're going to use shorthand style here,
| | 01:16 | 1 pixel for the size. Next is the style
solid Space, then the color pound, and three 's
| | 01:25 | for medium gray.
| | 01:27 | I'm going to select this property.
| | 01:29 | Let's copy that to the clipboard, paste it on the
next line, and change border-left to border-right.
| | 01:34 | Let's scroll down here again.
| | 01:38 | Next, we're going to specify some CSS3
properties for the rounded corners, and we still need
| | 01:42 | to use some of the rendering engine flags to
make sure that this works in browsers like
| | 01:46 | Firefox and Chrome and Safari.
| | 01:50 | So first, we'll type -webkit-border. And if
you have a later version of Dreamweaver, CS5
| | 01:59 | or later, Dreamweaver will actually help you
with some CSS3 properties. So we want to come
| | 02:04 | over here and choose border-top-left-
radius, then a space, then 12 pixels.
| | 02:12 | Next line we're going to target Mozilla, so -moz-border
-radius-topleft as one word, colon, space, 12 pixels.
| | 02:27 | Now the syntax between Mozilla
and WebKit are little different.
| | 02:32 | On the next line, we're going to put the name
of the final CSS property, so once the CSS3
| | 02:36 | specification is finalized, all the browser will
support this tag. Type border-top-left-radius 12 pixels.
| | 02:47 | So now with the first tab defined,
let's come up here, copy this entire rule.
| | 02:54 | Let's paste it after, and let's
change some of the properties here.
| | 03:00 | So instead of first child, we're going to
target last child. Instead of padding-left, we're
| | 03:06 | going to change that to padding-right.
| | 03:07 | And instead of border-top-left-radius,
we're going to change that to border-top-right, and
| | 03:17 | the Mozilla, change left to right, and for the
final property, we'll change this from left
| | 03:22 | to right as well.
| | 03:25 | Now, since we're in the Code view
let's just add one more final rule.
| | 03:28 | This is going to be for the
selected state of the tabs.
| | 03:32 | So I'll type .sp .tabs span.selected.
This is the class that we're going to dynamically
| | 03:42 | assign onto the individual spans depending
on which item the user clicks on. We'll do
| | 03:48 | that with JavaScript later.
| | 03:52 | Now inside here, what we're going to do is set the
color so pound sign and three 9s for a medium gray.
| | 04:00 | Now in the next line we're going to set border
bottom, so border-bottom: 1px solid,
| | 04:11 | and then we're going to set white.
| | 04:14 | This is going to give us the illusion that
the bottom border being white is going to
| | 04:17 | look like the tab connecting to the content.
| | 04:20 | Let's save our file.
| | 04:23 | Next, we need to add a CSS rule for IE 7 and 8,
since they don't support the CSS3 properties
| | 04:28 | we just added in.
| | 04:29 | So let's come to the File menu.
| | 04:31 | Let's choose Open.
| | 04:33 | Let's open sliding_panels_ie.css.
| | 04:37 | Now, in here we just simply want to
set a border for all four sides.
| | 04:40 | So .sp .tabs span, beginning and
ending bracket. And inside of the brackets
| | 04:50 | let's just type border, and if we just the
word border that will target all four sides.
| | 04:56 | 1 pixel, solid, and then three
Cs for gray and hit Save.
| | 05:05 | Now to test this let's come
back to our index.html file.
| | 05:09 | Let's choose Files > Save All.
| | 05:12 | Now, if you're using a later version of
Dreamweaver, you'll have a Live View button here.
| | 05:15 | If you don't have a Live View button, you can
go to the File menu, come down to Preview
| | 05:19 | in Browser, and you can pick
any browser on your system.
| | 05:21 | I am going to come in here and click Live
View inside of Dreamweaver's panel, and I can
| | 05:26 | see that these individual panels now
show up with the rules we just created.
| | 05:30 | The first child here, the first span, has
around a corner on the top left. The last one has
| | 05:34 | around a corner on the top right.
| | 05:36 | I have a little bit of extra padding over here
on the side of photography and a little bit
| | 05:40 | of extra padding on the left side of iPad.
| | 05:43 | Now you notice that these
are spaced out a little bit.
| | 05:45 | One of the thing that's happening here is the
hard returns in our code are being rendered
| | 05:49 | as spaces in the browser.
| | 05:52 | So let's come out of Live View.
| | 05:54 | Let's come back into Dreamweaver's HTML file.
Let's go into Code view. Let's scroll up in
| | 05:59 | Code view, and let's find the div
with the tabs class, right here.
| | 06:04 | And what we're going to here is just
remove all the whitespace in here.
| | 06:08 | So we have each of the spans starting and
stopping without any spaces in between. There we go.
| | 06:17 | Let's switch back to Design view.
| | 06:19 | Let's click back into Live view and
now the tabs will touch each other.
| | 06:25 | Now, as I mentioned earlier, you can use any HTML
element to be your tab. Some people prefer
| | 06:29 | to put divs or anchor tags in here and use float
properties; some preferr to use an unordered list.
| | 06:35 | I like to use spans because as long as I
don't have any space in the code, they'll line up
| | 06:39 | properly and that's the
default behavior of a span.
| | 06:42 | With some of the other approaches we
need do a little bit more in the CSS.
| | 06:45 | And now that we've all our tabs styled,
we're going to start styling the panels next.
| | Collapse this transcript |
| Styling the main container and the panels| 00:00 | Now we're going to set some
CSS properties for the panels.
| | 00:04 | So in the index.html file in Dreamweaver,
let's come over to the CSS Styles panel.
| | 00:09 | Let's create a new CSS rule.
| | 00:13 | Make sure we've select a Compound,
.sp .panel_container. Let's choose OK.
| | 00:24 | Let's go over to Background.
| | 00:27 | We'll set the Background-color to white.
| | 00:30 | Let's come over to Positioning.
| | 00:32 | Inside of here we're going to
set the Positioning to relative.
| | 00:34 | We're going to set the Z-Index to 100.
That's one number less than what we set the tabs
| | 00:40 | to, so that the tabs will actually
be on top of the panel container.
| | 00:44 | Let's come down to Overflow, set that to hidden.
So as the panels slide inside of the container,
| | 00:49 | we don't actually see them on
the right and left-hand side.
| | 00:51 | They're look like they're clipped in.
| | 00:53 | Let's come over to the Box properties.
| | 00:55 | Let's uncheck Same for all
from Margin and for Margin Top,
| | 00:58 | we're going to say negative 1 at the top
margin. That'll actually take the panel container
| | 01:02 | and move it up 1 pixel.
| | 01:04 | And again, since it Z-Index is lower than the
tabs, it'll actually tuck the panel container
| | 01:09 | underneath the tabs by 1 pixel.
| | 01:11 | And then lastly, let's come over to Border, keep
checked Same for all for Width, Style and Color.
| | 01:19 | For Top, let's come down and choose solid.
For the Width we'll set 1 pixel, and for the
| | 01:23 | Color, pound and three Cs and click OK.
| | 01:28 | Next let's create another rule.
| | 01:29 | We're going to target the panel content.
Compound rule. Tyep .sp .panel_container .panel
| | 01:42 | .panel_content. Let's choose OK.
| | 01:50 | What we're going to set in here under
the Box properties Padding for all,
| | 01:56 | let's just set 15 pixels. Then we'll click OK.
| | 01:59 | And you can see a little bit of space
showing up here in Dreamweaver's Design view once
| | 02:03 | we add that property.
| | 02:05 | Now to test what we have so far,
let's come upto the File menu.
| | 02:08 | We can choose Save All.
| | 02:10 | You can preview this in browser
or use Dreamweaver's Live view.
| | 02:13 | I'm going to click on Live view here. Now I
can see the tabs showing up here. I can see
| | 02:18 | the panel container, which is actually
overlapping the one pixel here, which is what's giving
| | 02:22 | us that nice clean single-pixel division
between the tabs and the content container.
| | 02:27 | Then I can see all of the panels spaced out,
and I can see the container actually extends
| | 02:31 | down to encompass all three panels.
| | 02:34 | So with that working, let's come out with
of Live view or come back to Dreamweaver.
| | 02:38 | Back in the index.html file,
let's create two more rules.
| | 02:41 | First rule we're going to create, it's going to be a
compound rule: .sp .panel_container .panels.
| | 02:55 | I'm going to target the panels container that's
holding all the individual panels. Let's choose OK.
| | 03:05 | Let's come down to Positioning.
| | 03:06 | We're going to set Position to absolute and
we're going to set a top value of 0 pixels for
| | 03:12 | Placement, and click OK.
| | 03:17 | Let's create another rule, another compound rule,
.sp .panel_container .panel, singular.
| | 03:33 | We're going to target all of the
individual panels themselves. Let's click OK.
| | 03:38 | Let's come over to positioning.
| | 03:41 | We're going to set Position to absolute.
| | 03:45 | Let's come over to the Box properties.
| | 03:46 | Let's set the height to 400. Then we'll click OK.
| | 03:52 | Now when we come up and preview in browser
or do Live view, the panels should disappear
| | 03:56 | completely. So what's happening here is the panel
container is condensing down because the elements
| | 04:01 | inside have absolute position properties and
in order for us to open this up, we're going
| | 04:05 | to query the height of individual panels and
open the panel container using JavaScript.
| | 04:10 | So, at this point we have all of our
CSS in place for our basic panel.
| | 04:13 | In the next movie, we'll start writing some
JavaScript to target these elements and activate
| | 04:17 | the panel's behavior.
| | Collapse this transcript |
|
|
3. Writing the JavaScript and jQueryAdding the jQuery document ready| 00:00 | Now we're ready to start
working in our JavaScript file.
| | 00:02 | I'm going to come out of
Live view in Dreamweaver here.
| | 00:05 | You might see that the Design
view looks a little messy.
| | 00:08 | What's happening here is all those panels are
rendering on top of each other since they have
| | 00:11 | absolute-positioned properties.
| | 00:14 | So from the File menu, let's choose Open,
let's go into the mySlidingPanels, let's go into
| | 00:19 | includes, and let's open sliding_panels.js.
| | 00:22 | So inside here we can start
writing our JavaScript file.
| | 00:26 | I am going to add a few extra returns in here.
And so what we're going to start with is we
| | 00:30 | want to declare a variable, so we're
going to type var panelWidth.
| | 00:38 | We're going to set that
equal to 0, then a semicolon.
| | 00:42 | So throughout the script, we're going to refer
back to this global variable, so that if we
| | 00:46 | change the width of the panel in CSS,
we don't have to go back and change our JavaScript.
| | 00:50 | Our JavaScript will always go back and
reference the panelWidth and then readjust everything.
| | 00:56 | Next, we're going to add in jQuery's document
ready structure, so start with the dollar
| | 01:00 | sign, beginning and ending parenthesis.
Type document inside of the parentheses, outside
| | 01:07 | of the parentheses .ready,
outside a parenthesis semicolon.
| | 01:14 | Inside of the parentheses for ready, type function,
beginning and ending parentheses, beginning
| | 01:21 | and ending bracket.
Let's split that open on the brackets.
| | 01:26 | So inside of this document ready is everything
that's going to happen once the browser has
| | 01:29 | downloaded all of the HTML. So the first thing we're
going to do inside of here is redefine the panel width.
| | 01:34 | Now that the document is ready, we can use
jQuery to find out how wide these sliding
| | 01:38 | panels are and redefine that panel width
variable. Then we can use that later on our scripts.
| | 01:43 | Now, to target the variable that's outside
of this function and global to the document,
| | 01:49 | we're going to type window.panelWidth, we're
going to set that equal to, and then we're going
| | 01:56 | to query the width of the sliding panels.
So dollar sign, beginning and ending parenthesis,
| | 02:03 | tick mark inside for a string literal, .sp
outside of the parentheses .width, another set
| | 02:13 | of parentheses, and a semicolon.
| | 02:16 | So now whatever the width of our sliding panels
main container is is going to be set to that
| | 02:21 | value for this panel width variable, and then
throughout the rest of our script, as long
| | 02:25 | as we reference this with window.panelWidth, we can
always get access to the width of our sliding panel.
| | 02:30 | Now with our panel width defined, next we can
work on positioning the panels so they're not
| | 02:34 | all sitting on top of each other.
| | Collapse this transcript |
| Lining up the panels in a row| 00:00 | Now the next thing we need to do is take each
individual panel and line them up in a line
| | 00:05 | inside of the panels_container.
| | 00:08 | So what we're going to do is we're going to
look at each one of the individual panels,
| | 00:12 | see where they are in the lineup,
and then position them accordingly.
| | 00:15 | So let's start by typing dollar sign, beginning
and ending parenthesis, tick marks inside
| | 00:21 | for a string literal. We'll type
.panel_container .panel.
| | 00:28 | So we're going to search for each
panel inside of the panel_container.
| | 00:34 | Outside of the parentheses .each, another
set of parentheses, semicolon. Inside of
| | 00:41 | the parentheses for each, type function, another
set of parentheses, beginning and ending bracket.
| | 00:51 | Split that open on the brackets.
| | 00:53 | So now inside of the each function we
want to target each panel that we find.
| | 00:57 | So let's start with dollar sign, parentheses,
type this inside. Each time an item's found
| | 01:04 | we're going to reference it as this.
| | 01:05 | Outside of the parentheses .css, beginning
and ending parentheses and a semicolon.
| | 01:13 | Now inside of the parentheses for CSS
let's put a beginning and ending bracket.
| | 01:18 | This way we can specify
multiple CSS properties.
| | 01:23 | Inside of the brackets, two tick
marks for the string literal.
| | 01:25 | We're going to set the width property
outside of the string literal but still inside of
| | 01:30 | the brackets, colon, and then we
want to target the window.panelWidth.
| | 01:34 | We want to set the width of the panels to
match the same as the overall container.
| | 01:39 | So let's copy window.panelWidth.
| | 01:43 | Let's paste it right inside up here.
| | 01:44 | And now we need to add pixels, so I'll type
plus sign, two tick marks for a string literal,
| | 01:50 | and then 'px,' since we need to
specify pixels as the CSS property.
| | 01:55 | Now after the string literal for px, let's hit a
comma, and we're going to set a second property.
| | 02:01 | Two tick marks, type in left. Outside of
the string literal let's hit a colon, and
| | 02:10 | then let's add beginning and ending parentheses,
and let's add a plus sign, two tick marks
| | 02:15 | again and then 'px.'
| | 02:17 | So what we're going to do
here is the left property,
| | 02:20 | we're going to do a
calculation inside up here.
| | 02:22 | So what we need to calculate here is the individual panel
that's been found and multiply it by the panelWidth.
| | 02:29 | So in order to count the panels that are being
found, let's come back in the each statement
| | 02:33 | inside the function and
let's type in the word index.
| | 02:38 | This tells jQuery to count
each item that it finds.
| | 02:41 | So what we're going to do down inside of the
parentheses for left is we're going to type
| | 02:44 | index, then an asterisk
to multiply index times.
| | 02:51 | Let's come up here and copy the
window.panelWidth variable, and let's paste it inside up here.
| | 02:58 | So the index starts at 0, so the very first
item will be 0 times the window.panelWidth,
| | 03:04 | which will give a 0, so the left
property of the first panel will be 0.
| | 03:08 | So that will be the one that we see.
| | 03:10 | Then the next time the index runs it will
be one, times the panelWidth, so the panel
| | 03:14 | width we're going to start with 325. The left
property for the second panel will be 325,
| | 03:20 | and then the next one will be 650.
| | 03:23 | Now that we have the individual panels lining
up, what we're going to need to do is take
| | 03:26 | the panels_container, which holds all the
individual panels, and make sure that the width of that
| | 03:31 | object is wide enough to
encompass all of the panels inside.
| | 03:35 | So inside of each function we're going to
type dollar sign, parentheses, inside of
| | 03:41 | the parentheses tick marks for a string literal,
.sp .panels. Outside of the parentheses,
| | 03:50 | .css, another set of parentheses, semicolon,
inside, two tick marks for a string literal.
| | 03:58 | We're going to set the width, then a comma,
and then what we're going to do is making
| | 04:04 | another calculation here.
| | 04:07 | Another set of parentheses. We're going to
type index+1. Since index is zero by default
| | 04:15 | we want to make sure that we have an
actual integer for the first time this runs.
| | 04:20 | Outside of the parentheses for index+1 but
still inside of the parentheses for CSS,
| | 04:25 | we're going to multiply this times to window
.panelWidth variable, so let's copy that.
| | 04:30 | Let's come down here after the asterisk, let's paste
that, and then let's add our string literal for px.
| | 04:37 | Plus two tick marks 'px.' So with this in
place, we have all of the panels lining up
| | 04:43 | in a row, and then we have the panels_
container wide enough to encompass all of those lined
| | 04:48 | up panels. Next, we can activate
click events for the tabs.
| | Collapse this transcript |
| Assigning click events to the tabs| 00:00 | Now we're going to activate the
tabs so our users can click on them.
| | 00:04 | So it's still inside of the document ready
function, make sure you're outside of the
| | 00:09 | each function for the panel_container.
| | 00:11 | Let's hit a few returns. Start with a dollar sign,
another set of parentheses, tick marks
| | 00:19 | inside for a string literal, .sp inside of the
string literal, space .tabs, space, span.
| | 00:30 | Outside of the parentheses .each, another
set of parentheses and a semicolon.
| | 00:38 | Inside of the parentheses for each, type function,
parentheses, brackets. Let's split that
| | 00:46 | open on the brackets.
| | 00:48 | So for each span we find inside of the tabs
container, dollar sign, parentheses, type
| | 00:56 | (this) inside of the parentheses, .on,
beginning and ending parentheses, semicolon, two
| | 01:04 | tick marks inside of the parentheses for on,
type click. Outside of the string literal
| | 01:11 | but still inside of the parentheses for on,
comma, space function, another set of parentheses,
| | 01:19 | another set of brackets. Let's split
that open, and then inside we're going to run a
| | 01:24 | custom function, changePanels, beginning
and ending parentheses, then a semicolon.
| | 01:34 | So this changePanels function is a custom
function that we haven't created yet, but
| | 01:38 | each time you click on an individual span, we're
going to run this particular changePanels function.
| | 01:44 | Now, in addition to calling the changePanels
function, we want to send along the index
| | 01:47 | of the item that was clicked on.
| | 01:49 | So inside of the parentheses for
changePanels, we're going to send this parameter.
| | 01:53 | So we'll type a dollar sign, beginning and ending
parentheses. Inside of the parentheses I'll type this.
| | 02:01 | Outside of the parentheses for this but still
inside of the parentheses for changePanels,
| | 02:05 | we'll type .index and
another set of parentheses.
| | 02:12 | So jQuery will keep track of the individual
item that was clicked and then reference its
| | 02:16 | own index, and then it will send that along
with the changePanels instruction to the custom
| | 02:21 | function that we will
write in the next movie.
| | Collapse this transcript |
| Animating the panels based on the tab clicked| 00:00 | Now that we have a click event assigned to
all of the spans inside of the tabs container
| | 00:04 | that call a function called changePanels,
let's come up here and copy this function name.
| | 00:11 | Let's come down on our script. Make sure
we're outside of the document ready for jQuery.
| | 00:16 | Let's type function, space.
| | 00:19 | Let's paste in that function name, beginning and
ending parentheses, beginning and ending bracket.
| | 00:25 | Let's split that open on the brackets.
| | 00:29 | Now when we call this changePanels
function we're also sending a parameter.
| | 00:33 | Inside of here we're sending this.index, so
this is going to be passed here into our variable
| | 00:38 | that we're going to define
inside of the parentheses.
| | 00:42 | Let's just call this newIndex.
| | 00:44 | So now inside of this
function, let's hit few returns.
| | 00:50 | We want to first declare a variable.
| | 00:52 | We are going to type var.
We are going to set newPanelPosition.
| | 01:00 | We're going to set this equal to--let's type
parentheses. Inside we're going to type window.panelWidth,
| | 01:12 | asterisk. We're going to multiply this times
the newIndex. Then outside of the parentheses
| | 01:19 | we're going to multiply that
value by -1, then a semicolon.
| | 01:24 | This is going to give us the panelWidth that
we want to move to the panels_container, and
| | 01:28 | we're setting a negative number so
that it moves towards the left.
| | 01:31 | Next, let's declare another
variable, newPanelHeight.
| | 01:35 | We're going to set that equal to dollar sign,
beginning and ending parentheses, semicolon,
| | 01:46 | and inside of the parentheses we want to
target the panel that's being activated so we know
| | 01:50 | how high to animate the height container so
we can have varying heights on our panels.
| | 01:54 | So inside of the parentheses two tick marks
for string literal, .sp .panel, then
| | 02:00 | I'll type colon, nth or nth-child, beginning
and ending parentheses. And inside of the
| | 02:11 | parentheses what we're going to do is concatenate
the actual index of the child we're looking for.
| | 02:16 | So inside of here we're going to type two
tick marks for a string literal, then two plus
| | 02:20 | signs inside of here, then inside of the
plus signs, two parentheses, then inside of the
| | 02:25 | parentheses, we're going to take newIndex
and we're going to add 1 to it.
| | 02:31 | Now we're adding 1 here because jQuery's
nth child starts with 1, but the index that's
| | 02:37 | coming down as the new variable when we call
this function is going to start from zero.
| | 02:42 | So we want to make sure that we take that
variable and add 1 to it so that the nth-child
| | 02:47 | matches the index number +1.
| | 02:49 | Now once we find the activated panel--let's bring
our cursor outside of these parentheses here--
| | 02:55 | we're going to type .find, beginning and
ending parenthesis, and we're going to search
| | 03:01 | for the panel content of the activated panel.
| | 03:05 | So inside of find, we're going to type two
tick marks for string literal, .panel_content,
| | 03:12 | then outside of those parentheses
.height, beginning and ending parentheses.
| | 03:19 | So now the newPanelHeight variable knows how
tall the outermost container needs to be to
| | 03:24 | encompass all of the content
that we put into the panel.
| | 03:27 | Now with these two variables
declared, we can create our animation.
| | 03:29 | So let's add a few more lines, dollar sign,
beginning and ending parentheses, tick
| | 03:35 | marks for a string literal, .sp .panels.
| | 03:39 | Outside of the parentheses .animates, another
set of parentheses, semicolon, inside of
| | 03:49 | the parentheses beginning and ending bracket.
Inside of the brackets we'll type left, colon.
| | 03:58 | Let's come up here and copy the
newPanelPosition variable name. Then outside of the brackets
| | 04:04 | comma, put 1000 milliseconds.
| | 04:07 | That's the amount of time it's going to
take to animate to the new position.
| | 04:10 | Next we'll animate the height, so dollar sign,
beginning and ending parenthesis, tick marks
| | 04:17 | inside for a string literal, .sp .panel_
container, outside of the parentheses .animate, beginning
| | 04:31 | and ending parentheses, semicolon, inside of
the parentheses, beginning and ending bracket,
| | 04:38 | inside of the brackets height:. Let's come up
here and copy the variable name newPanelHeight.
| | 04:47 | Paste that after the colon, outside of
the brackets, comma, 1000 milliseconds.
| | 04:55 | And to preview this, let's come back
to index.html, choose File > Save All.
| | 05:02 | Let's come into Live view
or preview in your browser.
| | 05:04 | And we won't see anything until we actually
click on one of the tabs, so I'll click on Video.
| | 05:09 | That will animate the panel open.
I'm going to scroll up here a little bit.
| | 05:13 | And now I can click between the individual
tabs and we'll see that the content not only
| | 05:17 | changes height but
actually swipes back and forth.
| | 05:19 | Now, one thing you'll notice notice is that
the height of the container is going right
| | 05:23 | to the very bottom of the content.
| | 05:25 | Now, we did set padding on the content containers
but the overall panel container doesn't account
| | 05:30 | for that since the items
inside are absolute positioned.
| | 05:33 | So to correct for this, let's come out
of Live view or out of your browser.
| | 05:38 | Let's come back to the sliding panels and up
here where we declared the newPanelHeight,
| | 05:43 | after height, let's come in here.
| | 05:45 | Let's add a plus and then add 15.
| | 05:49 | That's the amount of space we
want to have at the bottom.
| | 05:52 | Now let's save our file.
| | 05:53 | Let's come back and preview it again,
and then when we open up our individual panels
| | 05:58 | we'll now add an extra 15
pixels across the bottom.
| | 06:01 | So again, that space is not being defined in the
padding. We're actually opening that container
| | 06:05 | up an extra 15 pixels based
on the height of the content.
| | 06:10 | Now that our panels slide back and forth and
are height animates to the content inside,
| | 06:14 | next we'll work on
activating the tab's selected state.
| | Collapse this transcript |
| Assigning a selected state to the tab clicked| 00:00 | Now we are going to modify our custom function
to make sure that the tab we clicked on shows in
| | 00:04 | its selected state.
| | 00:06 | So let's come out of Live view.
| | 00:08 | Let's come back to our sliding_panels.js.
| | 00:11 | Now, still inside of the changePanels function, after
the panel_container animation, let's add a few lines.
| | 00:19 | Start with a dollar sign, parentheses, tick marks
inside for a string literal .sp, space, .tabs
| | 00:28 | space span, outside of the parentheses
.removeClass, another set of parentheses, semicolon, inside
| | 00:41 | of the parentheses for removeClass tick
marks for a string literal. Type selected.
| | 00:48 | So, every time we click one of the tabs,
we are going to take that selected class of all
| | 00:53 | of them and then we want to add it
back onto the one that was clicked.
| | 00:56 | So on the next line dollar sign, parentheses,
tick marks for a string literal .sp, space,
| | 01:03 | .tabs, space, span, colon, nth-child, another
set of parentheses, inside of the parentheses
| | 01:16 | for nth-child, two tick marks, two plus signs.
| | 01:20 | We are going to concatenate
in the new index number.
| | 01:24 | So let's come up here to where we declare
panelHeight. Let's copy the parentheses with
| | 01:28 | newIndex+1. Let's come down here and
let's paste that inside of the plus signs.
| | 01:34 | Now, outside of the parentheses for the item
we're searching for, type .addClass, another
| | 01:41 | set of parentheses, then a semicolon, inside of
addClass two tick marks for a string literal,
| | 01:49 | type in selected. Then hit Save.
| | 01:51 | Now there is one other CSS
property we're going to want to set.
| | 01:55 | Let's switch back to sliding_panels.css.
| | 01:59 | Let's find the rule that's .sp .tabs span.
After position: relative, we want to activate
| | 02:06 | our cursor for these individual items as well,
since the browser won't natively set the pointer
| | 02:11 | cursor on a span.
| | 02:15 | So let's add cursor:, space,
pointer, then a semicolon.
| | 02:24 | Now to test this, let's
come back to index.html.
| | 02:27 | Let's choose File > Save All,
Preview in Browser or do Live view.
| | 02:32 | Now in Live view, I can roll over the panels.
| | 02:34 | I can see my hand cursor.
| | 02:36 | I can click on a tab. The tab goes into its
selected state. We actually turn on that border
| | 02:41 | at the bottom in the selected class so
that we have a one-pixel white border.
| | 02:45 | Since the tabs container is overlapping the
panels container by one pixel, since we set
| | 02:51 | the panel container to -1 on the top margin,
we get the illusion here that this tab is
| | 02:56 | connecting to this panel. Same thing
for Video, same thing for Photography.
| | 03:01 | Now that we have our user experience working
properly, next we'll set an auto-start so
| | 03:05 | the panel will automatically open up to
a specific panel when the page loads.
| | Collapse this transcript |
| Setting an autostart on page load| 00:00 | Now we want to have the sliding panel automatically
open on page load, so let's come out of Life view.
| | 00:05 | Let's switch over to sliding_panels.js.
| | 00:08 | Let's scroll up to the top of the document,
and we are going to create a new variable up here.
| | 00:13 | So after panelWidth, we're going
to type var space startPanel.
| | 00:20 | Let's set that equal to 2, then a semicolon.
| | 00:23 | Now, we are going to be using jQuery's nth-child,
which starts at 1, so setting this to 1 will
| | 00:28 | start the first panel, 2 and then 3.
| | 00:31 | So to sort of autostart this, now that we
have that variable created, let's scroll down.
| | 00:36 | After the instruction to set a click event
on all the spans, let's hit a few returns.
| | 00:42 | Make sure you're still
inside of the document ready.
| | 00:45 | We'll type dollar sign, parentheses, tick marks
inside for a string literal, .sp, space, .tabs,
| | 00:56 | space, span:nth-child, another set of parentheses,
inside of the parentheses for nth-child, two
| | 01:08 | more tick marks, two plus signs.
| | 01:10 | Now, inside of the plus signs, we want to put
in the index, which is going to be the value
| | 01:14 | of the startPanel. So type window.startPanel,
then outside of the parentheses for the search
| | 01:24 | item .trigger, beginning and ending parentheses, semicolon.
Inside of the parentheses for trigger, type click.
| | 01:38 | So again, what's happening here is on browser
load it's as if the browser is finding the
| | 01:42 | nth-child of all of our tabs, finding the
item that matches the startPanel number and
| | 01:48 | actually clicking that item for us.
| | 01:52 | So to test this,
let's come back to index.html.
| | 01:55 | Let's choose File > Save All and then Preview
in Browser or use Live View, and now when the
| | 02:01 | panel loads, it
automatically activates the second tab.
| | 02:04 | Since we put the selected state for the tabs in
the change function as well, the tab automatically
| | 02:09 | moves to its selected state, panel 2 slides
over, and the height of the overall container
| | 02:15 | opens up to encompass all of the content plus the
15 pixels that we put down here at the bottom.
| | 02:22 | Now, to show the value of actually putting
the panelWidth in a variable, let's come out
| | 02:27 | of Live View. In our CSS
panel, let's double-click on .sp.
| | 02:33 | Let's come over to the Box properties and
let's change the Width from 325 to 500.
| | 02:40 | We'll click OK, come back into Live view or
Preview in Browser, and then notice that the
| | 02:45 | tab panel works perfectly with the
Width set to 500 instead of 325.
| | 02:50 | All of the contents inside are rearranged
and we get exactly the same user experience.
| | 02:55 | So again, setting the panelWidth as a separate
variable gives us the ability to change the
| | 02:59 | dimensions of the sliding panel without going
through and making mathematical recalculations
| | 03:04 | in our JavaScript file.
| | 03:06 | So now that we have our basic or generic
version of our sliding panel working properly, next
| | 03:11 | we're going to work on creating some background
graphics and start styling some of the content
| | 03:14 | inside of these panels.
| | Collapse this transcript |
|
|
4. Creating Custom GraphicsCreating custom graphics for the panels| 00:00 | Now, if you'd like to customize the graphics
that we're going to be using in the background
| | 00:04 | for the panels, you can come into the Exercise Files
and in folder 3, you can open up panel_backgrounds.psd.
| | 00:10 | Now in the last movie, we set the
width of the panel to be 500 pixels.
| | 00:14 | So what I have done here is brought out a
guide that matches the 500 pixel mark, to sort
| | 00:18 | of give me a sense of how
wide my content needs to be.
| | 00:20 | And there are a few ways you
can set up background graphics.
| | 00:23 | You can actually have the color be a gradient
down to a solid color here and then set the
| | 00:28 | same color for your background for the panel,
so maybe you don't have to have your images
| | 00:31 | quite as tall.
| | 00:33 | And the other thing you can do is you
can actually set other graphics inside.
| | 00:37 | So for example for the iPad course here,
I have an iPad in the right inside here, and
| | 00:41 | we're actually going to use padding to move
or manipulate the panel content to make sure
| | 00:45 | that the text doesn't overlap
these background graphics.
| | 00:49 | So in the Layers panel, I have the three
individual items I'm using for this course, and of course
| | 00:53 | you can put your own graphics
in here and save these out.
| | 00:56 | So when you have your desired artwork in the
canvas area, we're going to come up to the
| | 00:59 | File menu, choose Save for Web & Devices.
We'll come up here and choose JPEG.
| | 01:06 | Next, you will hit Save.
| | 01:09 | On the desktop, you are going to mySlidingPanels,
going to the images directory and overwrite
| | 01:16 | any of the individual graphics for ipad_
background, photo_background, or video_background. Or of
| | 01:21 | course you can make your own file names and
just modify the file names we're going to
| | 01:24 | create in our CSS rules
later on in the course.
| | 01:27 | I'm going to cancel out of here since I
want to keep these individual graphics.
| | 01:31 | So once you have your new graphics in place
or if you're going to use the graphics that
| | 01:34 | were included in the exercise files, in the
next movie we can start adding in some custom
| | 01:37 | classes and then some CSS rules
to make use of these graphics.
| | Collapse this transcript |
|
|
5. Customizing the Panel StylesAssigning custom classes to the HTML elements| 00:00 | Now to be able to lock onto individual tabs
and panels, to custom style them, we're going
| | 00:04 | to need to add some classes onto those items.
| | 00:07 | So in Dreamweaver, in your index.html file,
let's come over to Code view, let's scroll
| | 00:12 | up to the top of the document, and let's add
some custom classes onto individual items.
| | 00:17 | So first, let's start
with the individual tabs.
| | 00:20 | So for the very first span, which is for the
iPad course, inside of span, let's add class=ipad.
| | 00:31 | Let's arrow over to the span for Video, space,
add a class of video, and then lastly let's
| | 00:41 | come over to the span for
Photography and add a class of photo.
| | 00:48 | So now we have a custom class on each tab.
| | 00:51 | Let's scroll down inside of the panel_container,
inside of panels, and let's find each individual panel.
| | 00:59 | So for class panel for
the first one, hit a space.
| | 01:02 | Let's add a second-class
onto here called ipad. Let's scroll down.
| | 01:06 | Let's find the second one. This one is video.
Then let's scroll down and find the third one, space, photo.
| | 01:17 | So at this point, we have custom classes
on all of the tabs and all of the panels.
| | 01:20 | Next, we can create some CSS rules
to target these individual items.
| | Collapse this transcript |
| Adding CSS rules for the video panel| 00:00 | Now with index.html file open up in Dreamweaver,
let's switch back to Design view, and let's
| | 00:05 | create our first CSS rule to target
the selected state of the Video tab.
| | 00:10 | So let's come over to the CSS Styles panel.
Let's create a new rule.
| | 00:15 | Let's create a compound rule.
| | 00:18 | So this is going to be .sp, space, .tabs,
space, .video.selected. Let's click OK.
| | 00:32 | The properties we are going to change inside
of here, under Color, for the font color, let's
| | 00:37 | change this to #ffce6f.
| | 00:43 | Let's come over to Background color.
| | 00:45 | We are going to set the background color to
#3a3563, and let's come over to Border, uncheck
| | 00:56 | Same for all, and for the Bottom Border,
we are going to set solid, 1 pixel, and the color
| | 01:03 | here is going to be #354e5c, then click OK.
| | 01:12 | So now we are going to have a custom style
for the selected state of the video tab.
| | 01:17 | Next, let's create another
rule, another compound rule.
| | 01:23 | This one is going to be .sp, space,
.panels, space, .video. Let's click OK.
| | 01:33 | Let's come down to Background.
Under Background-image let's choose Browse.
| | 01:38 | Let's choose mySlidingPanels from the desktop,
let's choose images, and let's choose the
| | 01:43 | video_background.jpg. Click Choose.
| | 01:48 | Next, for Background-repeat, let's set no repeat, and
let's set 0 on the X and 0 on the Y position.
| | 01:53 | Let's set another rule, another compound rule. .sp, space,
.panels, space, .video, space, .panel_content. Choose OK.
| | 02:14 | Inside here, under Box Properties, uncheck Same for all
for Margin, inside of margin-right of 125 pixels.
| | 02:21 | This way the content won't extend all the
way to the right, and we can see the grapes
| | 02:24 | in the Background of the JPEG. Choose OK.
| | 02:30 | Next rule .sp, space, .panels, space,
.video, space, .panel_content, space, h2.
| | 02:43 | We are going to target the
heading color. Let's choose OK.
| | 02:50 | For Color, we are going to come in
and set that to black. Choose OK.
| | 02:55 | Next rule, set to compound, .sp, space, .panels,
space, .video, space, .panel_content, space, p.
| | 03:14 | We are going to target the
paragraph tags inside of that.
| | 03:17 | We want to come in here and set
that Color to white. Choose OK.
| | 03:24 | Then the last rule we are going to create,
targeting the anchor tags, we'll type .sp,
| | 03:33 | space, .panels, .video, space, .panel_content,
space, a, targeting the anchor link inside
| | 03:43 | of there. And for the Color, we are going to
put a custom color of #ffce6f, then click OK.
| | 03:56 | Now to test these custom rules, let's come
up to the File menu, let's choose Save All,
| | 04:00 | and then you can either Preview
in Browser or go into Live view.
| | 04:04 | Our Video panel is still
set to show by default.
| | 04:08 | We can see the background colors here, our
bottom border, our gold color here for the
| | 04:12 | label inside of the selected tab, our Heading
2 showing up in black, our copy showing up
| | 04:18 | in white, and our anchor
link showing up in gold.
| | 04:20 | And we can also see the 125-pixel margin on
the right-hand side, which keeps the text
| | 04:25 | from overlapping the grapes
in the background picture.
| | 04:29 | Now that we have the Video panel styled, next
we'll work on the iPad and the Photography panels.
| | 04:33 |
| | Collapse this transcript |
| Adding CSS rules for remaining panels| 00:00 | Now to style the remaining two panels I have
all of those CSS rules in a code snippet.
| | 00:05 | So in Dreamweaver, let's come out of Live
view or come out of Preview in Browser.
| | 00:10 | Let's come up to the File menu, choose Open.
| | 00:13 | From the Exercise Files, let's go into
folder 2 and open up B-panel-styles.css.
| | 00:18 | So inside here, I have a whole bunch of CSS
rules that target the ipad course panel and
| | 00:24 | the photo course panel.
| | 00:26 | So let's come in here and
copy all of these rules.
| | 00:30 | Let's move over to sliding_panels.css,
let's scroll down to the bottom of the document,
| | 00:35 | and let's paste in all of
these remaining rules.
| | 00:40 | Let's come back to index.html.
| | 00:42 | Let's choose File > Save All and again, either
Preview in Browser or you can use Live View.
| | 00:50 | Now you'll see that each one of these items
has custom design for both the selected tab,
| | 00:54 | the background graphics, the actual style
and placement of the content, and the links
| | 00:57 | down at the bottom.
| | 00:59 | So here's Photography, here's
Video, and here is the iPad course.
| | 01:05 | So now the sliding panel is complete. In the
next movie we're going to take a look at adding
| | 01:08 | progressive enhancement, where if somebody
doesn't have JavaScript enabled or CSS enabled,
| | 01:14 | we still see all of the individual content.
| | 01:16 | Now, this is an optional thing that you
might or might not want add into your website,
| | 01:20 | but I have been getting a lot of requests lately for
some progressive enhancement techniques in my courses.
| | 01:24 | So I'm going to show you step by step how
we would actually take this course and turn
| | 01:28 | it into a progressively
enhanced user experience.
| | Collapse this transcript |
|
|
6. Adding Progressive Enhancement TechniquesRemoving CSS rules that hide elements| 00:00 | So the idea behind progressive enhancement
is that we want to make sure that we're not
| | 00:03 | hiding any content with CSS in case the
user doesn't have JavaScript enabled.
| | 00:09 | So what will happen is the user won't be able to
actually see the content because the JavaScript
| | 00:13 | is not enabled and we can't actually
show or hide individual pieces.
| | 00:17 | So the first thing we'll want to do is set
the CSS properties in the default state to
| | 00:21 | hide elements we don't want to see and
make sure that everything else shows.
| | 00:26 | So over in the CSS Styles panel,
let's scroll down until we see .sp .tabs.
| | 00:32 | Let's double-click this rule to edit it.
Let's come into the Block properties and let's set
| | 00:36 | the Display of this item
to none and then click OK.
| | 00:40 | Next let's scroll down and find
the .panel_container .panels.
| | 00:47 | This is where we actually set
the absolute position property.
| | 00:50 | Let's delete this, and let's find the
next rule .sp panel_container panel.
| | 00:55 | Let's delete that as well.
| | 00:57 | So now in the Design view, if I scroll up and
down here, I can see Dreamweaver showing me
| | 01:01 | what the users will see if they
don't have JavaScript enabled.
| | 01:04 | So each of the panels will still be visible.
| | 01:06 | They'll have their background graphics and
all of this CSS treatments we gave them, but
| | 01:10 | they won't see is the user experience that
lines the panels up in a row, and an animated
| | 01:14 | interactive user experience.
| | 01:17 | So now that we've removed all of the CSS
properties that inhibit users from seeing content without
| | 01:21 | JavaScript, in the next movie we'll add the
CSS properties back in with JavaScript so
| | 01:26 | that we know they do have JavaScript and
then we can invoke our user experience.
| | Collapse this transcript |
| Reassigning CSS rules with JavaScript| 00:00 | Now that we have we disabled the CSS rules
that make our user interactive experience
| | 00:04 | possible, we need to add
them back in with JavaScript.
| | 00:07 | So in Dreamweaver, let's come back to our sliding_
panels.js file, let's scroll up, let's find our document
| | 00:13 | ready, and the first thing we are going to do
in the document ready is set a block property
| | 00:17 | back onto the tabs container.
| | 00:18 | So we'll type dollar sign, beginning and ending
parentheses, tick marks for a string literal,
| | 00:24 | .sp, space, .tabs, outside of the parentheses .css,
another set of parentheses, semicolon, inside
| | 00:37 | of the parentheses for css two tick marks
for the first string literal. We are going to
| | 00:42 | type display, outside of the string literal comma,
another string literal. Let's put in block.
| | 00:51 | So we set display none as the default state,
and now with JavaScript we are going to go
| | 00:55 | back and reassign display to block.
| | 00:59 | After that instruction, let's hit a few
returns and let's target the other two items.
| | 01:04 | So dollar sign, parentheses, two
tick marks for a string literal.
| | 01:08 | We are going to type
.sp .panel_container .panel.
| | 01:21 | Outside of the parentheses, we are
going to type .css, parentheses, semicolon.
| | 01:28 | Now, we need to set multiple CSS properties here, so
we need to add a beginning and ending bracket first.
| | 01:33 | We are first going to reset the position,
after the string literal, colon, another string
| | 01:42 | literal. We are going to set absolute.
| | 01:44 | Then we are going to hit a comma.
Now we need to set the height.
| | 01:51 | Two tick marks for a string literal,
then a colon, two more tick marks, 400 pixels.
| | 02:03 | Next line dollar, sign parentheses, tick marks inside for
a string literal, .sp .panel_container.panels, plural.
| | 02:20 | Outside of those parentheses .css, beginning
and ending parenthesis, semicolon, brackets
| | 02:27 | inside for multiple properties.
| | 02:29 | Inside of the brackets, two tick marks, position
colon, another string literal, absolute, comma,
| | 02:43 | next property top, colon,
string literal, zero pixels.
| | 02:49 | So what we are basically doing here is the
true rules that we set in our CSS originally
| | 02:55 | and then removed, we're adding
them back in with JavaScript here.
| | 02:59 | So let's hit File > Save.
| | 03:01 | Let's come back to index.html.
| | 03:04 | Let's choose File > Save All to test this.
| | 03:07 | Now in this case, I am going to come
over here and test this in a browser.
| | 03:10 | I am going to choose Safari.
| | 03:13 | So now when this loads in Safari, our tabs come back.
Our interactive user experience is in place.
| | 03:20 | But now what I am going to do here is I
am going to come up to the Develop menu.
| | 03:23 | I am going to disable JavaScript and then
reload the page and see what this page would
| | 03:28 | look like if somebody didn't have JavaScript.
| | 03:31 | So as you can see, we saw exactly what we saw
earlier in Dreamweaver. All of the panels stack up.
| | 03:35 | We see all of the CSS design properties we put
in place, but we don't get them stacked up.
| | 03:40 | We don't see the tabs and we don't
see the advanced user experience.
| | 03:44 | And then of course if we come over here and
disable styles altogether, this is exactly
| | 03:48 | the page somebody would see if
they didn't have JavaScript or CSS.
| | 03:52 | So all of the content would
be visible and accessible;
| | 03:55 | they just wouldn't get the added style and
they wouldn't get the advanced user experience
| | 03:58 | that we get with JavaScript.
| | 03:59 | So that completes adding the
progressive enhancement technique here.
| | 04:03 | Next we'll talk about how you might want to
apply progressive enhancement techniques to
| | 04:07 | some of my other courses.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | So we just completed adding some progressive
enhancement techniques to our sliding tab panel.
| | 00:04 | There is a few other courses I have in the
lynda.com online training library where you
| | 00:08 | can use these same techniques to
progressively enhance those projects.
| | 00:12 | One is the Homepage Promotional Marquee. This is
a series of panels that line up on a horizontal
| | 00:17 | row--very similar to what we
just did in our sliding panels.
| | 00:20 | So we can actually set this to have all of these
panels stack vertically if JavaScript is not enabled.
| | 00:25 | And the other project is a
frequently asked questions listing.
| | 00:28 | In this course I teach you how to create a
collapsible panel where we take one div, in
| | 00:32 | this case the question, and clicking on it
will open the corresponding div, which has
| | 00:36 | the answer to the related question.
| | 00:39 | So what you might want to do inside of this
particular example is go into the HTML code,
| | 00:44 | find the div called faq_answers_container,
set those to be visible by default in the
| | 00:50 | CSS, and then use JavaScript to go in and
change those FAQ answers' height to be zero.
| | 00:56 | So any interactive project you are working
on that includes HTML, CSS, and JavaScript
| | 01:00 | can benefit from techniques of taking some
of that content, setting the default display,
| | 01:05 | and then rearranging the CSS properties
once your JavaScript has been loaded.
| | 01:10 | So I wish you all the luck in creating your
sliding type panels, and I really appreciate you watching my course.
| | Collapse this transcript |
|
|
