IntroductionPreviewing the final project| 00:04 | Hi! I am Chris Converse and in this course we're
going to be building a sliding tab panel
| | 00:07 | for your website. I want to start
by showing the final project.
| | 00:11 | We're going to be creating this tabbed 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 any one of the tabs.
| | 00:32 | We're also going to build a styled version
of this as well. So if you'd just like to
| | 00:36 | stop at this point in the course with the
generic style to apply your own design to,
| | 00:40 | 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 tabbed panel.
| | 00:54 | 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 tabbed
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 | And then of course if somebody didn't have
JavaScript or CSS, they would see a nicely
| | 01:20 | laid out page like this.
| | 01:22 | And 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
to earlier courses I have in the lynda.com
| | 01:29 | online 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 access to all five of these folders.
| | 00:10 | If you're not a Premium subscriber,
you'll have 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:18 | Now, inside of folder 1 we have Files to add.
We're going to copy these into our main project
| | 00:23 | folder to give us a jumpstart.
| | 00:25 | This includes an HTML file, and 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 | And 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:42 | 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; 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 tabbed panel, which
| | 01:05 | is going 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 | And 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:07 | I'm just going to open this up
and resize this a little bit.
| | 00:13 | 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 files.
| | 00:34 | Let's close up folder 1.
| | 00:36 | Now that we have all of our starter 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, we're
going to open up index.html up in a text editor.
| | 00:05 | Now, if you'd prefer to take this course in
a more design-oriented tool, we're offering
| | 00:09 | the same course in the lynda.com library
using Adobe Dreamweaver instead of a text editor.
| | 00:14 | Now, inside this file I want to show
you a few things that I have set up.
| | 00:18 | On line 6 here we have a link into our includes
directory, to a file called sliding_panels.css.
| | 00:24 | This has a few CSS rules to just dial the
type, but we're going to be writing all of
| | 00:28 | the CSS rules for the panels inside of here.
| | 00:30 | We have a link over to jQuery, and we also have a
custom JavaScript file called sliding_panels.js.
| | 00:37 | This is an empty JavaScript file,
but we do have it hooked in here.
| | 00:40 | And then lastly, since we're using HTML5, as
specified up here, we have a link into Google's
| | 00:46 | html5shiv. So if we're using a browser which is
less than IE 9, which is specifically targeting
| | 00:52 | IE 7 and 8, we have a link into the Google
html5shiv, which will explain, through JavaScript,
| | 00:58 | to IE 7 and 8 how to render HTML5 content.
| | 01:02 | And then lastly, we have a sliding_panels_ie.css
file, where we can respecify some CSS3 properties
| | 01:08 | that aren't supported in IE 7 and 8.
| | 01:11 | Now, inside of the body area of the HTML file, you'll
see I have a comment here, Sliding Panels go here.
| | 01:16 | This is where we're going
to start putting our HTML.
| | 01:18 | So I'll just scroll up here a little bit.
| | 01:21 | So the containers we want to create are going
to be one for the overall sliding panels itself
| | 01:25 | and then one for the tabs
and one for the panels.
| | 01:27 | So let's start by creating a div element.
| | 01:31 | Let's add a class, and the outermost class
we're going to create is going to be sp.
| | 01:37 | Let's end the div element.
| | 01:39 | Let's split that open. Inside of here
we're going to create two more divs.
| | 01:44 | The first one we're going to set a
class of tabs. End that element,
| | 01:54 | and then another div with a class of panel_container,
so panel_container, and then end that div as well.
| | 02:04 | So now that we have our outermost HTML
containers created, next we'll create elements inside
| | 02:08 | of the tabs container
for the individual tabs.
| | Collapse this transcript |
| Creating the HTML containers for the tabs| 00:00 | Now, to add elements that are going to become
our tabs, let's come into the div with the
| | 00:04 | tabs class, split that open, and we want to
add HTML elements into here that will become
| | 00:10 | the tabs that users can click on.
| | 00:11 | So sometimes you might see other
plug-ins that do panels for you.
| | 00:15 | We'll use things like anchor
links or unordered lists.
| | 00:18 | I prefer to use span tags, since they
require the least amount of CSS to style.
| | 00:22 | So let's start by adding a span tag.
| | 00:25 | After you end the span tag,
the first panel is going to be iPad.
| | 00:33 | This is going reference
one of my iPad courses.
| | 00:36 | Let's hit a Return.
| | 00:38 | Let's add another span.
| | 00:39 | This one is going to be for Video. And then let's
add one more. This one will be for Photography.
| | 00:49 | So now that we have our tab elements in place,
next we'll work on the containers for the panels.
| | Collapse this transcript |
| Creating the HTML containers for the panels| 00:00 | Now, we're going to add the containers inside
of panel_container for the individual panels.
| | 00:05 | So let's come in here and
let's open up panel_container.
| | 00:07 | I'm going to scroll up here a little bit.
| | 00:10 | So we're going to have the container that's
going to hold all of the individual panels.
| | 00:14 | So let's start with a div, add a
class. The class name is panels, plural.
| | 00:22 | Let's end that div. Split that open.
| | 00:26 | Inside of here we're going to put the
containers for each individual panel.
| | 00:31 | Another div. The class is panel,
singular. End that div.
| | 00:39 | Let's open that up, and then inside of here
we're going to put another div, with a class
| | 00:44 | of panel_content, and then end that div.
| | 00:52 | Let's split that one open.
| | 00:54 | So now we have everything that
we need for an individual panel.
| | 00:58 | Let's come in here and copy the structure
for that one panel, let's copy that to the
| | 01:02 | clipboard, let's hit a return, and
let's paste it two more times.
| | 01:06 | So at this point we have everything we need
for three individual panels. We have these
| | 01:11 | three panels here, which are all inside of a
div that's got a class of panels--and again,
| | 01:17 | all of those are inside of the
outermost container of panel_container.
| | 01:22 | So now with all of this markup in place, next
we can add some content into the individual panels.
| | Collapse this transcript |
| Adding content to the containers| 00:00 | Now we're going to put some
content into the individual panels.
| | 00:03 | Now, I've prepared some of
that content in a snippet.
| | 00:05 | So from your text editor, choose File > Open.
| | 00:08 | From the desktop, let's go into Exercise Files >
Snippets, and let's open A-panel-content.html.
| | 00:16 | So inside of here, I've just grabbed some content
from some of my previous courses on lynda.com.
| | 00:20 | So for the first panel, let's come up here and grab
from the h2 down to the ending paragraph tag.
| | 00:26 | Let's copy that to the clipboard.
| | 00:28 | Let's come back to index. Let's find the
first panel, and let's paste that in here.
| | 00:32 | I'm going to come in here and format
this as well, so I can see the structure.
| | 00:39 | Let's scroll down.
Here is the second panel.
| | 00:42 | Let's come back to our snippets.
| | 00:44 | Let's find content for second panel, again,
from the h2 down to the ending paragraph. Copy.
| | 00:51 | Back to index.html.
Let's paste that in the second spot.
| | 01:00 | Scroll up to the third panel.
Come back to our snippets.
| | 01:05 | Let's copy that content.
| | 01:07 | So at this point we have all of the content in
place for all three of the individual panels.
| | 01:11 | Next, we can work on adding some
CSS styles to style that content.
| | Collapse this transcript |
|
|
2. Styling the Tabs and PanelsAdding CSS styles to the text| 00:00 | Now that we have our HTML containers and
content in place, let's open up our CSS file.
| | 00:06 | So from your text editor choose File > Open.
| | 00:10 | From the desktop, let's go into mySlidingPanels, let's
go into includes, and let's open sliding_panels.css.
| | 00:16 | So inside of here after, the rules we have
just for the default layout, let's come in
| | 00:23 | here and let's target the h2 in
paragraph tags for the content we just added.
| | 00:27 | So we'll start with .sp, space, h2,
beginning and ending bracket.
| | 00:33 | So for the h2 we're going to
target the font size property.
| | 00:37 | We're going to set that to 1.15ems, which is
going to be 15% larger than the base font,
| | 00:44 | which again up here we can see
that base font is set to 14 pixels.
| | 00:50 | Next, we're going to set margin.
| | 00:52 | We're going to use shorthand style for this,
so 0 on the top, 0 on the right, 0.5ems on
| | 00:57 | the bottom, and 0 on the left.
| | 01:03 | Next, let's create a rule to target the paragraph
tags inside of our panels, .sp p, brackets.
| | 01:12 | We're going to set font size to 1em.
| | 01:19 | Next, we're going to set margin: 0 on the top, 0 on
the right, 1em on the bottom, and 0 on the left.
| | 01:26 | So, now with these two rules in place for
the content, next we'll work on rules for the
| | 01:31 | outermost container and the tabs.
| | Collapse this transcript |
| Adding CSS styles to the tabs| 00:00 | Next, let's create a CSS rule to
target the outermost container.
| | 00:03 | So let's hit few returns,
.sp, space, beginning and ending bracket.
| | 00:10 | First we're going to set a
width of 325 pixels, then a space.
| | 00:16 | Next, we'll set position relative. That way any
items inside of this container will position
| | 00:22 | themselves relative to this container.
| | 00:25 | Then lastly, margin: 0 on the top, 0 on the right,
10 on the bottom, and 10 pixels on the left.
| | 00:34 | Next, we're going to target the tabs,
so .sp .tabs, space. This is the tabs container.
| | 00:43 | We're going to set position relative here.
| | 00:47 | And then next we're going to set a z-index.
| | 00:51 | We're going to set that to 101.
| | 00:54 | Now, the reason that we're doing this is
because the tabs container comes before the panel
| | 00:58 | container, and we want to have the
tabs on top of the panel container
| | 01:02 | so we can create the illusion of the tabs
being selected and connecting in with the
| | 01:05 | content of the panel container.
| | 01:08 | After this rule hit a few returns.
| | 01:10 | Let's target actual spans in the tabs
container, .sp .tab span.
| | 01:17 | Let's split that open.
| | 01:22 | The first thing we're going to do is redefine
the display type, and we're going to change
| | 01:25 | these to be inline-block.
| | 01:29 | Next, we're going to set border-top, colon,
and then we're going to use shorthand style
| | 01:35 | for these as well.
| | 01:36 | So the first property is going
to be the width, so 1 pixel.
| | 01:40 | Next is the style, solid, space, and then the color
pound sign and three letter Cs for light gray.
| | 01:48 | We're going to set border-bottom next, so
let's copy that, paste it on the next line and
| | 01:55 | change top to bottom.
| | 02:00 | After that property let's hit a return.
| | 02:02 | Let's set padding.
| | 02:04 | We're going to set 8 pixels on the top, 12
pixels on the right, 8 pixels on bottom, and
| | 02:11 | 12 pixels on the left.
| | 02:13 | Next, margin, 0 pixels on all sides.
| | 02:18 | Next, we're going to set background-color.
| | 02:21 | We're going to set that to
pound and three Fs for white.
| | 02:28 | Next, we're going to set the cursor to a pointer.
Since the span tags are not anchor links, we
| | 02:33 | want to make sure the browser will still show
our users a pointer pool, indicating to them
| | 02:37 | that they can click on these.
| | 02:39 | And then last property, we're going to set
position of relative, then a semicolon.
| | 02:45 | So now with the base styling of the tabs in
place, next we're going to target the first
| | 02:49 | and last child and add some
additional CSS rules on to those items.
| | Collapse this transcript |
| Styling the first and last tabs| 00:00 | Now we need to write CSS rules that are
going to target the first tab and the last tab,
| | 00:04 | so we can do things like add a rounded corner
on the top left and top right and change the
| | 00:08 | padding inside a little bit,
and add the right and left borders.
| | 00:11 | So let's add a few lines in our CSS,
.sp .tabs span. Then we're going to add
| | 00:22 | a pseudo-class: first-child,
beginning and ending bracket.
| | 00:30 | Let's split those open.
I'm going to scroll up here a little bit.
| | 00:34 | So the first property we're going to add to the
very first item is going to be padding-left.
| | 00:41 | Since we're going to have a rounded corner
on the left-hand side, we want to push the
| | 00:43 | type in just a little bit more, 15 pixels.
| | 00:47 | Next, we're going to add border-left.
We're going to set that to 1 pixel solid, pound sign,
| | 00:59 | three Cs for a light gray.
| | 01:02 | Let's copy that rule, paste it on
the next line, change left to right.
| | 01:09 | Next, we're going to add some CSS3, and we want
to make sure we target the most common web
| | 01:13 | flags used as well,
which include WebKit and Mozilla.
| | 01:18 | So we'll start with the
webkit-border-top-left-radius.
| | 01:27 | We'll set that to 12
pixels. Let's hit a return.
| | 01:30 | Let's target Mozilla, -moz-border-radius-
topleft, 12 pixels. And then lastly, we'll put the CSS3
| | 01:45 | property name: border-top-left-radius: 12 pixels.
| | 01:57 | Now with the rule for the first child
done, let's copy this entire rule.
| | 02:01 | Let's add a few returns
after. Let's paste it.
| | 02:07 | Let's come in here and change the name of
the rule from first child to last child.
| | 02:13 | Let's come down and change
padding-left to padding-right.
| | 02:18 | Let's come down and change the
webkit-border-top-left-radius to top-right-radius.
| | 02:25 | For Mozilla, we'll change top-left to top-right,
and for the CSS3 we'll change top-left to top-right.
| | 02:33 | Let's scroll down. There is one more rule we
want to create, and that is the selected state
| | 02:41 | for the individual tabs,
once a user clicks on them.
| | 02:44 | So we will type .sp .tabs span.selected.
Inside here we're going to set the color property
| | 02:58 | of the type to pound and three
9s for a dark gray, then a space.
| | 03:07 | Then we're going to set border-bottom to 1
pixel solid, then pound, three Fs for white.
| | 03:16 | Now save your work.
| | 03:17 | Now we did use some CSS3 properties here,
which IE 7 and 8 are not going to understand, so
| | 03:22 | let's open up our IE CSS file.
| | 03:24 | So if you're in the text editor, choose File >
Open going to the mySlidingPanels/includes.
| | 03:32 | Let's open sliding_panels_ie.css.
| | 03:35 | So let's come in here and type
.sp .tabs span, put in our brackets.
| | 03:48 | What we're going to do here is simply specify
border so all four sides get affected. 1 pixel
| | 03:56 | solid, pound sign, three Cs for a light gray.
| | 04:01 | So for IE 7 and 8 they're going to just put
the same border on all four sides of each
| | 04:05 | one of the individual spans.
| | 04:06 | This will give those users a tabbed feel,
but again, they want get the rounded corners
| | 04:10 | and some of the effects
that we can get with CSS3.
| | 04:14 | So now with in this place, make
sure we save all of our files.
| | 04:17 | Let's come back to operating system
and let's preview what we have so far.
| | 04:20 | So let's open up index.html up in a web browser.
So what we can see here is we have our panels in place.
| | 04:26 | We have the very first panel with
the rounded corner on the top left,
| | 04:30 | the last child with the rounded corner on
the right. We can even see a little bit of
| | 04:33 | extra padding on the right-hand
side here and left side here.
| | 04:37 | We can see the HTML styling happening inside of the
content, and we can see all three panels of content here.
| | 04:43 | So before we continue,
let's make some minor adjustments.
| | 04:45 | First I would like to have the sliding panel
float so that the content underneath can
| | 04:49 | actually wraparound, and I would also like
to make sure that these tabs are actually
| | 04:52 | touching, so that they make a
nice little lockup together.
| | 04:56 | So let's come out of our browser.
| | 04:58 | Let's first go into our sliding_panels.css.
| | 05:00 | Lets find the rule that targets
the outermost container, .sp.
| | 05:05 | After the margin property,
let's add float right. Hit Save.
| | 05:13 | And then let's go into the HTML file.
| | 05:16 | Let's find the class that's
holding the all of the individual tabs.
| | 05:20 | And since we're using span tags here,
what we're going to do is remove all of the white-
| | 05:24 | space, so that the browser doesn't interpret the
space in between the spans as space in the content.
| | 05:34 | So this particular div now will have no spaces
inside, and each of the individual spans will
| | 05:38 | just be right next to each other in the code.
| | 05:41 | Let's hit File > Save.
Let's come back out to our browser.
| | 05:45 | Let's hit Reload, and now we'll see the sliding
panel showing up on the right-hand side, allowing
| | 05:49 | content on the left, and we'll see that
these tabs are now touching each other.
| | 05:53 | So now that we have tabs
styles and positioned,
| | 05:57 | next we can work on the positioning
and layout properties for the panels.
| | Collapse this transcript |
| Styling the main container and the panels| 00:00 | Now we're going to create some CSS rules to
position the panels. So in the sliding_panel.css
| | 00:06 | file, let's scroll down to the bottom.
| | 00:08 | After the rule where we were created the
selected state of the spans, let's come down and let's
| | 00:13 | create .sp .panel_container,
beginning and ending bracket.
| | 00:25 | Let's split these open.
| | 00:29 | So what we're going to set
inside of here is position.
| | 00:31 | We're going to set this to relative as well.
| | 00:35 | Let's hit a return, border:<space>.
| | 00:40 | We're going to set all four sides, 1 pixel for the
size, solid for the style, three Cs for gray.
| | 00:49 | Let's hit a return.
| | 00:51 | We're going to set background
color, three Fs for white.
| | 00:57 | We're going to set overflow to hidden.
| | 01:02 | That way when the panels are positioned
outside of the container area we get that sliding
| | 01:06 | and clipping effect.
| | 01:10 | Next, we're going to set the z-index.
We're going to set this one to 100.
| | 01:13 | Remember we set the tabs container to 101,
so even though the tabs container comes first
| | 01:18 | in the code, it will show up
on top of the panel container.
| | 01:23 | Next, we're going to set
the margin-top to -1pixel.
| | 01:25 | This will set the panel container to be underneath
of the tabs container by one pixel on the top.
| | 01:34 | Next rule we're going to create, we're going to target the
panel content, so sp .panel_container .panel,
| | 01:47 | singular, .panel_content.
| | 01:54 | Put in our brackets. Inside the brackets
we're going to specify padding, space, 15 pixels.
| | 02:03 | Now with these rules in place,
let's come back to the browser.
| | 02:05 | Let's hit Reload.
| | 02:08 | Now we can see we get a little bit of
padding around each one of the individual panels.
| | 02:12 | So that looks good.
| | 02:14 | Let's come back to our CSS file.
| | 02:16 | Let's hit a few returns, and now let's put in
some rules to position the actual panels.
| | 02:22 | So .sp .panel_container .panels,
plural, add in our brackets, and here we're
| | 02:35 | going to set position to
absolute and a top value of zero.
| | 02:43 | Next line, sp.panel_container .panel,
singular. Put in our brackets. We're going
| | 02:57 | to also set the position to
absolute for these as well.
| | 03:01 | And then next, we're going to
set height to 400 pixels.
| | 03:04 | We're going to set this Height property here for
some of the styling we're going to do later.
| | 03:09 | If you don't want to have specific heights
on these and you don't want to put some of
| | 03:12 | the background styles in and you want to use
this sort of generic style we looked at in
| | 03:16 | the introduction video, you can
omit this setting altogether.
| | 03:19 | So now make sure your files are saved.
| | 03:21 | Let's come back to the operating system.
| | 03:24 | Let's reload these.
| | 03:25 | So now when we load this in a browser, you will
notice that we can't see the panels at all.
| | 03:29 | Since the panels are set to absolute position,
the panel container doesn't have any idea
| | 03:33 | how high they are, because with absolute
positioning it doesn't pay attention to the
| | 03:37 | height of those overall items.
| | 03:39 | So what we're going to be doing in the next
couple of movies is setting up some JavaScript
| | 03:42 | files to animate the panel
container open so we can see the content.
| | 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,
so let's choose File > Open from the text editor.
| | 00:06 | From the desktop, let's go into SlidingPanels/
includes, and let's open sliding_panels.js.
| | 00:10 | So this JavaScript file is completely empty.
| | 00:15 | I just basically have it
hooked into the index.html file.
| | 00:19 | So in our JavaScript, file the first thing
we're going to want to do is specify a variable.
| | 00:23 | So let's start with var panelWidth.
| | 00:28 | We're going to set that equal to zero.
| | 00:31 | During the rest of our script, we're going
to refer back to panelWidth. This will give
| | 00:34 | us the ability to change the panelWidth in
CSS and not have to constantly come back
| | 00:38 | and modify our JavaScript as we want
to change the size of our panels.
| | 00:44 | After we've declared that variable, let's come down and
let's start by adding jQuery's document ready structure.
| | 00:50 | So let's type dollar sign, beginning and
ending parentheses, inside (document). Outside
| | 00:57 | of the parentheses we'll type .ready, another
set of parentheses, then a semicolon after.
| | 01:04 | Inside of the parentheses for ready we're
going to type function, beginning and ending
| | 01:10 | parentheses, beginning and ending bracket,
and let's split that open on the brackets.
| | 01:16 | So now anything inside of this document
ready is going to happen after all of the HTML is
| | 01:20 | loaded into the browser, so the first thing we're
going to want to do is reset that panelwidth variable.
| | 01:25 | Now that everything has been loaded, we can
use jQuery to figure out how wide that is,
| | 01:29 | and again the width of that's
going to be set with our CSS file.
| | 01:31 | So what we're going to do is we're going to
type window.panelWidth, and the reason we're
| | 01:40 | doing this is we need to use the window prefix
here to target this variable that is outside
| | 01:46 | of this function. So window.panelWidth.
| | 01:51 | We're going to set that equal to, and we're
going to use jQuery to query the width of
| | 01:55 | the overall container.
| | 01:57 | So a dollar sign, parentheses, two tick marks
inside of the parentheses for a string literal.
| | 02:02 | We're going to target .sp, outside of the
parentheses .width, another set of parentheses,
| | 02:09 | then a semicolon, and then save new work.
| | 02:13 | So what's going to happen here is we're
going to set panelWidth. Then once the document
| | 02:17 | is ready we're going to reset the panelWidth to
whatever the actual width of that overall container is.
| | 02:23 | And now that we have this global variable set,
next we can work on positioning of panels
| | 02:26 | based on this variable value.
| | Collapse this transcript |
| Lining up the panels in a row| 00:00 | Now we need to find and position each
individual panel inside of the panels container.
| | 00:05 | So let's hit a few returns.
| | 00:07 | We'll start with dollar sign, parentheses, tick
marks for string literal, .panel_container .panel,
| | 00:19 | outside of the parentheses .each, then a
semicolon. Inside of the parentheses for each type
| | 00:27 | function, beginning and ending
parentheses, beginning and ending bracket.
| | 00:32 | Let's split that open on the brackets.
| | 00:34 | Now let's move our cursor inside of the
parentheses for function and type in index.
| | 00:40 | This is going to tell jQuery that for each
panel we want to find, we want to keep track
| | 00:43 | of the number as well.
| | 00:45 | This will give this something
to multiply the position by.
| | 00:47 | Okay, now inside of the function for each,
| | 00:51 | so every time we find one of the individual
panels, we're going to start with a dollar
| | 00:55 | sign, parentheses, type this.
| | 00:58 | We're going to target each panel that we find.
| | 01:01 | Outside of the parentheses we're going to
type .css, beginning and ending parentheses,
| | 01:06 | then a semicolon.
| | 01:08 | Now, inside of the parentheses for CSS we want
to set multiple CSS properties, so we're going
| | 01:13 | to put a beginning and ending bracket.
| | 01:14 | Now, inside of the brackets, the first
property we're going to set is going to be width.
| | 01:19 | So two tick marks for a string literal, type
width. Outside of the string literal let's
| | 01:24 | hit a colon. And the width of these is
going to be the actual panel width.
| | 01:29 | So let's come up here and copy
window.panelWidth variable.
| | 01:33 | Let's come down here and paste that after
the colon. And now the value for width has
| | 01:38 | to be set with pixels, so we're going to type
a plus sign, two more tick marks for a string
| | 01:43 | literal, and put in px.
| | 01:45 | So this is going to set the width of every one in the
panels to match the width of the overall panel container.
| | 01:51 | Now, to set the second property,
| | 01:52 | let's get our cursor outside of
the string literal for px.
| | 01:56 | Let's hit a comma and set
our second CSS property.
| | 01:59 | Two tick marks for a string literal, set
left. Outside of the string literal let's
| | 02:05 | hit a colon, and for the value of
left we're going to do a calculation.
| | 02:08 | So let's start by adding a beginning and
ending parentheses. Inside we're going to
| | 02:12 | take the index variable, we're going to
multiply it by--by putting an asterisk.
| | 02:18 | We're going to multiply it
by the window.panelWidth.
| | 02:20 | So let's come up here and
copy that variable name.
| | 02:24 | Let's paste that inside of here. Then outside the
parentheses but still inside of the brackets,
| | 02:31 | let's add a plus sign, two tick marks
for a string literal, and then px.
| | 02:36 | So basically what we're doing here is for
every panel up here that we find inside of
| | 02:41 | panel container, each one we're going to set
this CSS width to the width of the overall
| | 02:49 | panel width, and the left position, since these are
absolute positioned, to whatever the panelWidth is.
| | 02:55 | So this is going to set the very first one,
since index is going to be zero to start, at
| | 02:59 | the zero position and then the next
one is going to be 325 and then 650.
| | 03:06 | On the next line what we're going to need
to do is take the panels_container, which is
| | 03:09 | holding all of the individual panels, and make
sure that its width is wide enough to encompass
| | 03:14 | all of these new positioned panels.
| | 03:17 | So to target the panels container, dollar
sign, parentheses, tick marks for a string
| | 03:22 | literal, .sp .panels, outside of the
parentheses .css, another set of parentheses,
| | 03:33 | and a semicolon.
| | 03:34 | Inside of here we're only going to set one
CSS property, so we don't need the brackets.
| | 03:38 | Two tick marks for a string literal.
| | 03:40 | We're going to set the width. After the string
literal for width, let's hit a comma, and here
| | 03:47 | we need to do another calculation,
so another set of parentheses.
| | 03:53 | Inside we're going to set index+1. Now since
index starts at 0, we need to make sure
| | 03:58 | we add one to it so that we can do a calculation and
not get zero, since the width is going to be absolute.
| | 04:03 | Now, outside of the parentheses with
that calculation, let's do an asterisk.
| | 04:07 | We're going to multiply this times
the window.panelWidth variable.
| | 04:12 | Let's come up here and copy that name.
| | 04:15 | Let's paste it inside of here, then a plus
sign, two tick marks for a string literal and
| | 04:20 | then px, and then save our work.
| | 04:23 | So now that we've positioned each individual
panel, next we can work on applying click
| | 04:27 | events to the tabs.
| | Collapse this transcript |
| Assigning click events to the tabs| 00:00 | Next we are going to apply a click event to every one
of the spans we find inside of the tabs container.
| | 00:06 | So inside of our document ready, we want to
start with a dollar sign, parentheses, tick
| | 00:10 | marks for a string literal.
| | 00:12 | Inside of the string literal, .sp .tabs span.
| | 00:20 | Outside of the parenthesis we're going to type .each,
another set of parentheses, and a semicolon.
| | 00:28 | Inside of the parenthesis for each, we're going
to type function, another set of parentheses,
| | 00:35 | beginning and ending bracket.
| | 00:36 | Let's split that open on the brackets.
| | 00:39 | So for each span we find inside of the tabs
container we want target each of those items.
| | 00:45 | So we're going to start with a dollar sign,
parentheses, this inside of the parentheses, .on.
| | 00:51 | Another set of parentheses, semicolon.
| | 00:56 | Inside of the parentheses for .on, tick marks
for a string literal, type click, then a comma.
| | 01:06 | Then we're going to type function, another set
of parentheses, beginning and ending bracket.
| | 01:11 | Let's split that open.
| | 01:12 | And now the instruction we want run inside
of here when somebody clicks on one of these
| | 01:16 | events is going to be a
function called change panels.
| | 01:20 | So we'll type change panels, beginning
and ending parentheses, then a semicolon.
| | 01:27 | So this change panels is a custom function
here that we haven't defined yet, but with
| | 01:31 | this instruction is basically doing is
finding every one of the spans inside of the tabs
| | 01:36 | container, applying a click event to it, and
then when a user clicks on these items, we're
| | 01:40 | going to run this custom function, and
this function we'll define in our next movie.
| | Collapse this transcript |
| Animating the panels based on the tab clicked| 00:00 | So now that we have a click event assigned
to each span that targets this changePanels
| | 00:04 | function, let's come down here and copy that
name, plus the parentheses, and let's come
| | 00:09 | down to our document, after the document
ready, and define our custom function.
| | 00:16 | So we'll type function, space, paste in the
function name, beginning and ending bracket.
| | 00:21 | Let's split that open on the brackets.
| | 00:24 | Now we need to do a calculation here, which
is we need to know, based on the tab that was
| | 00:28 | selected, where to animate the new panels to.
| | 00:32 | And what we need to do is make that
calculation based on the actual span that was clicked.
| | 00:36 | So we need one extra variable. So inside of
the parentheses, for changePanels, let's
| | 00:41 | type newIndex, so when we call this
changePanels function, we can some along a variable that
| | 00:48 | will be captured in this name.
| | 00:50 | Now when we call the function,
we're actually sending anything yet.
| | 00:53 | So let's come back into the click event for
the spans, let's hit a few spaces, and let's actually
| | 00:59 | send the indexNumber of
the item that was clicked.
| | 01:03 | So we can do that by typing dollar sign,
parentheses, this, outside of the parenthesis.index and
| | 01:12 | then another set of parentheses.
| | 01:13 | So when we call changePanels we're also going
to send the index position of the item that
| | 01:18 | was clicked, and jQuery will
take care of that for us.
| | 01:21 | So then when we call this, we'll know which
individual span was clicked, and then down
| | 01:26 | here we can start creating our
variables for our calculations.
| | 01:30 | So first we're going to start
with var space newPanelPosition.
| | 01:38 | We are going to set that equal to a set of parenthesis.
Then we're going to calculate the window.panelWidth,
| | 01:47 | so let's come up here and
copy that variable name.
| | 01:49 | Let's paste that inside of the parentheses.
| | 01:52 | Now we're going to multiply that by adding an
asterisk, times newIndex. Then we're going
| | 01:59 | to take that value, so outside of the parentheses,
we're going to multiply that times -1.
| | 02:05 | That's going to give us a negative number
for the width of the panels so that we know
| | 02:08 | where to slide the panels_
container toward the left on the x axis.
| | 02:15 | Next variable, newPanelHeight=$() tick marks
inside for a string literal .sp .panel:
| | 02:34 | nth-child, another set of parentheses.
| | 02:40 | so what nth-child does in jQuery is it picks
out a specific child based on an index number,
| | 02:46 | so what we're doing here is we're basically
figuring out which one of the panels we want
| | 02:51 | to animate to, based on which one
of the children was clicked on.
| | 02:55 | And so inside of the parentheses here
we're going to typically put a number, but what
| | 02:58 | we're going to do is do a
calculation based on our newIndex variable.
| | 03:02 | So inside of the parentheses two tick marks
for a string literal; inside there, two plus
| | 03:07 | signs; inside there, we are going to put a
beginning and ending parentheses; and inside
| | 03:12 | these parentheses we can do our calculation.
| | 03:15 | So we're going to type newIndex+1. Since the
index can start at 0, we don't want to actually
| | 03:23 | multiply this item by 0.
| | 03:25 | We need to have a number starting with 1.
| | 03:28 | Now, outside of the parentheses for the
item we will search for, we are going to type
| | 03:31 | .find, another set of parentheses; inside
of the parentheses, for find, two tick marks
| | 03:40 | for a string literal.
[00:03:4134]
We want to search for panel_content, outside of
| | 03:47 | the parentheses .height, another set of parentheses,
then a space. Then we are going to add 15, then
| | 03:59 | a semicolon, which is going to give us 15
pixels of space on the bottom of the panel.
| | 04:04 | Now that we have got these two calculations in
place, now we can actually create our animations,
| | 04:09 | so dollar sign, parentheses, tick
marks for a string literal.
| | 04:13 | We are going to target .sp .panels, plural,
outside of the parentheses .animate, another
| | 04:25 | set of parentheses, semicolon, inside of the
parenthesis for animate beginning and ending
| | 04:30 | bracket. The property we are going to animate is
going to be left:, and we are going to animate
| | 04:36 | that to the newPanelPosition.
| | 04:39 | So let's come up here and copy that variable
name. Let's paste them inside of here, outside of
| | 04:44 | the brackets, 1000 milliseconds.
| | 04:49 | Let's hit a return.
| | 04:50 | Now let's animate the height of the panel_container,
dollar sign, parentheses, tick marks for a string literal,
| | 04:57 | .sp .panel_container, .animate, another
set of parentheses, semicolon, brackets inside.
| | 05:13 | Inside the brackets we are going to target
the height property, colon, and we're going
| | 05:17 | to animate that to the newPanelHeight.
| | 05:20 | Let's come up here and copy that. Let's paste that
inside of here, then comma, 1000 milliseconds
| | 05:28 | for that as well.
| | 05:30 | So now make sure all of your files are saved.
| | 05:32 | Let's come back up to the browser
and let's reload this in the browser.
| | 05:36 | Now in the browsers we still don't see the
panels, because we haven't actually animated
| | 05:39 | anything open yet, because we
haven't run any of our custom functions.
| | 05:42 | But if I come up here and click on one of the
tabs, we will see that the panel_container
| | 05:46 | opens up, and that extra 15 pixels down here
give us that same padding set that we set
| | 05:51 | in the CSS. And if I click on video, we will
animate this over. Notice the height of the
| | 05:57 | overall panel, and it makes that new height as well,.
Click on Photography, Video, and then back to iPad.
| | 06:07 | Now we have the panels tab animating correctly
to the right panel and corresponding to the
| | 06:11 | tab that we clicked on.
| | 06:12 | Next, we will work on adding the selected
state to the tabs so that we can indicate
| | 06:15 | to the user which tab they've clicked on.
| | Collapse this transcript |
| Assigning a selected state to the tab clicked| 00:00 | Now we want to add the selected class to any of
the tab items that were actually clicked on.
| | 00:05 | So inside of the changePanels function,
after we animate the panelHeight, let's hit a few
| | 00:09 | returns, just scroll up here a little bit.
| | 00:13 | And so what we're going to do is we're going to
target $('.sp .tabs span').removeClass('selected');.
| | 00:44 | So we're going to remove the selected class from
all of the spans, and now we want to apply it to the
| | 00:50 | one that was actually clicked on.
| | 00:52 | So $('.sp .tabs span:nth-child()').
Inside of the parentheses, we're going to do the same
| | 01:12 | thing we did for finding the
nth-child of a panel ('++').
| | 01:16 | Now to set a parenthesis to do
a calculation, (newIndex+1).
| | 01:31 | Now outside of the parentheses for finding
that particular child, .addClass(); then inside
| | 01:43 | of that class, tick marks first a string
literal, type in ('selected').
| | 01:49 | So now with that in place, let's come back
to the operating system, let's reload this
| | 01:52 | in a browser, and then when I come up here
and click on the individual tabs, we'll apply
| | 01:57 | the selected class, which will
give us that bottom white border.
| | 02:02 | And since the tabs container is positioned
over top of the panel container and the panel
| | 02:06 | container has a -1 margin, we'll see that that
white border now connects in so that it looks
| | 02:11 | like the tab actually connects to the content.
| | 02:15 | Now that our tabs are working properly, next,
we'll add an autostart so that the tab panel
| | 02:19 | open when the page loads.
| | Collapse this transcript |
| Setting an autostart on page load| 00:00 | Now we're going to set the sliding
panels to automatically open on page load.
| | 00:04 | So inside of the sliding_panels.js file,
let's scroll up to the very top. After our variable
| | 00:10 | panelWidth, let's hit a return.
| | 00:12 | Let's specify another variable,
var startPanel, and let's set that = 1.
| | 00:21 | We're going to be using jQuery's
nth-child, which starts at 1 instead of 0.
| | 00:26 | So now with our variable declared,
we need to actually trigger this to start.
| | 00:30 | So inside of the document ready, after the
click events that we're assigning on the spans,
| | 00:35 | and so what we're going to do inside of here
is trigger the corresponding span that matches
| | 00:39 | the startPanel variable. So it'll be as if
the user actually clicked that on page load.
| | 00:44 | So to do that we're going to start with a
dollar sign, beginning and ending parenthesis,
| | 00:49 | two tick marks inside for a string literal
.sp .tabs span:nth-child, beginning and ending parenthesis. Inside here
| | 01:06 | we're going to concatenate the actual child we want to
target, two tick marks for a string literal, inside two Plus
| | 01:12 | signs to concatenate the variable. Inside the Plus signs
we'll type (+window.startPanel+')').trigger('click');
| | 01:38 | So basically, what we are doing is for the
first child placed on the startPanel, we're
| | 01:42 | going to come down here and find the first span and
then we are going actually trigger a click event.
| | 01:49 | Let's hit Save. Let's come back up to the
browser and let's hit Reload.
| | 01:55 | Now on page load will actually open up the
first panel, and then our users can go through
| | 02:00 | and click through the remaining
panels in our sliding panel.
| | 02:04 | Now at this point we have a fully functioning
tab panel, and this actually matches the more
| | 02:09 | generic or unstyled version we
looked at in the introduction video.
| | 02:12 | But I do want to show two of the
flexibilities that we've built into our script.
| | 02:16 | So let's come back to our JavaScript file, and
at the very top I am going to change startPanel
| | 02:20 | from a 1 to a 2, because we can pick any
one of the panels to be the starting panel.
| | 02:26 | And let's come back to sliding_panels.css.
| | 02:29 | Inside of here, let's find the rule where
we specify the overall containers' width.
| | 02:35 | We set this to 325. Let's come in here
and change this to 500 and then hit Save.
| | 02:42 | Now in our sliding_panels.js file we spent the time
specifying this variable up here called panelWidth.
| | 02:48 | That way we could go in and make a css change,
reload this in the Browser, and get the width
| | 02:53 | to change for our sliding_panel and
not have to recalculate anything.
| | 02:58 | So let's come back to our browser, let's hit
Reload, and now we'll see we have the exact
| | 03:03 | same sliding_panel taking up 500 pixels of
width, autostarting on the second panel because
| | 03:08 | that's what we set as our startPanel, and we get
the flexibility of having the design reorient
| | 03:13 | itself to being 500 pixels now.
| | 03:17 | Now, with our base sliding_panel complete,
next we're going to work on creating some
| | 03:20 | custom graphics and custom styling.
| | 03:23 | If you don't want to follow along with that part
and you want to skip ahead to the progressive
| | 03:26 | enhancement, you can jump ahead to the chapter
where we cover progressively enhancing this user experience.
| | 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 a 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've done here is brought out a
guide that matches the 500-pixel mark to sort a
| | 00:18 | give me a sense of how
wide my content needs to be.
| | 00:20 | 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 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-hand side here,
| | 00:41 | and we're 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 | for can 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 up to the File
| | 00:59 | menu, choose Save for Web & Devices.
| | 01:02 | We will come up here and choose JPEG.
| | 01:07 | Next, you'll hit Save.
| | 01:09 | On the desktop, you'll go into mySlidingPanels,
go into the images directory, and overwrite
| | 01:16 | any of the individual graphics for iPad_
background, photo_background, or video_background.
| | 01:21 | Or of course, you can make your own file
names and just modify the file names we're going
| | 01:24 | to create your on 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 start creating some custom styles for
individual tabs and panels, let's come back
| | 00:04 | to our index.html file.
| | 00:07 | Inside the file, let's scroll down and
find the div with the class of tabs.
| | 00:11 | We have our three spans inside of here.
| | 00:13 | So inside of the first span,
let's hit a space and add a class.
| | 00:18 | We are going to add a class
of iPad to the first one.
| | 00:24 | For the second one, we're going to add a class
of Video, and for the third one we will add
| | 00:30 | a class of Photo.
| | 00:32 | Next, we're going to
scroll down inside the panels.
| | 00:34 | So find the very first
panel. Let's hit a space.
| | 00:37 | We're going to add a second class onto this.
| | 00:42 | So class="panel ipad."
| | 00:44 | I'll scroll down and find the second one
"panel video." I'll scroll down and find the third
| | 00:54 | one. This will be "panel
photo." Then hit Save.
| | 01:00 | Now with the custom classes in place, next we can
work on creating custom styles to target these items.
| | Collapse this transcript |
| Adding CSS rules for the video panel| 00:00 | Now with our custom classes inside of
here, let's come over to sliding_panels.CSS.
| | 00:04 | Let's scroll down to the bottom.
| | 00:06 | What we're going to do here is let's target
the video panel and video tab, since we have
| | 00:10 | those set to open by default.
| | 00:13 | So first we will do the tab,
so .sp .tabs .video.selected.
| | 00:27 | The first property is going to be color: #ffce6f.
It's going to give us a yellowish-gold color.
| | 00:37 | Next, we will do background-color: #3a3563.
| | 00:46 | That will give us a dark-violet color.
And then lastly, border-bottom: 1px solid, and we
| | 00:57 | will pick the same color as the background.
| | 00:59 | Let's copy that, paste it down
here, and then hit a semicolon.
| | 01:07 | Next, let's target the actual panel,
so .sp .panels .video .panel_content. Beginning and ending bracket.
| | 01:25 | We're going to set the
background property inside of here. background: url().
| | 01:33 | Inside the parentheses we're going
to target the images directory.
| | 01:36 | So we're inside of includes, so we
need to do (../) to come out to root.
| | 01:46 | images/video_background.jpg.
| | 01:50 | Next we will set the no-repeat, then
0 px on X and 0 px on the Y axis.
| | 01:59 | Next line, let's come up here and
let's copy this rule name.
| | 02:05 | Let's hit Paste, then hit a space.
| | 02:08 | Let's target the h2s, set our brackets.
| | 02:14 | We're going to set the color
of h2s to black. Next line.
| | 02:20 | Let's paste in the beginning part of our rule,
hit a space, then a p, target the paragraph tags.
| | 02:29 | We're going to set color on these to white.
| | 02:34 | Next rule, space, a--we're
going to target the links.
| | 02:38 | We're going to set the color to
pound sign #ffce6f and then hit Save.
| | 02:49 | So again, each one of these rules is
targeting the panel content only if it's inside of
| | 02:54 | a class called video, and then we
can specify all of these colors.
| | 02:58 | The colors we're picking here are designed
to match the background graphic that we are
| | 03:01 | assigning up in here.
| | 03:03 | So make sure all of your files are saved.
| | 03:06 | Let's come back out to the
browser, and let's reload this.
| | 03:12 | So now we can see the selected state
has all of the colors that we specified.
| | 03:16 | We can see our background graphic. We can
see the color of the type and the headings
| | 03:19 | and the links down here.
| | 03:22 | So now with the custom style in place for
the video panel, next we will work on the
| | 03:25 | iPad and photography panels.
| | Collapse this transcript |
| Adding CSS rules for remaining panels| 00:00 | Now to save us some time on
styling the remaining two panels,
| | 00:03 | I've put some CSS rule into a snippet.
| | 00:05 | So let's come up to the File menu.
| | 00:07 | Let's choose Open. In the Exercise Files, let's
go into Snippets and open up B-panel-style.css.
| | 00:16 | So inside of here I have some rules that are
going to target the panel and tabs that have
| | 00:19 | the iPad class and the tabs and
panels that have the Photo class.
| | 00:24 | So let's come in here and copy all of these rules.
| | 00:27 | Let's come back to sliding_panels.css and
after our video panel rules, let's paste in
| | 00:33 | all of these rules.
| | 00:35 | Let's hit Save, let's go back out to
the browser, and let's here reload.
| | 00:41 | Now, in the browser we can see, as we go to the
individual panels, we have a custom style
| | 00:44 | for the tab, some background
graphics, custom-styled type.
| | 00:48 | Let's go back to video and
then back over to iPad.
| | 00:53 | Now this point we've completed
creating a tab panel for our website.
| | 00:55 | In the next movie, we will talk about how you
might want to add some progressive enhancement
| | 00:58 | techniques into here so that if somebody
doesn't have JavaScript enabled, all of the content
| | 01:03 | will still be visible within the browser.
| | Collapse this transcript |
|
|
6. Adding Progressive Enhancement TechniquesRemoving CSS rules that hide elements| 00:00 | Now, the idea behind progressive enhancement
is to make sure that we're not disabling parts
| | 00:04 | of our website if the user visiting our
site doesn't have JavaScript enabled.
| | 00:08 | So what we're going to be doing is hiding
the tabs container and making sure that the
| | 00:13 | panel containers actually show.
| | 00:16 | Then we're going to reset those
CSS properties with JavaScript.
| | 00:19 | That way we know the user has JavaScript
and we can invoke our desired user experience.
| | 00:24 | And for people that don't have JavaScript,
they will just see all of the content stacked
| | 00:27 | up from the individual panels.
| | 00:29 | So, back in our CSS file,
let's go to sliding_panels.css.
| | 00:34 | Let's come down and find the rule that
targets the tabs container, so sp tabs.
| | 00:40 | After the z-index, let's hit a space.
| | 00:43 | Let's set this display to none, since this
content won't make any sense if somebody doesn't
| | 00:48 | have JavaScript and they can't see the fact that
these tabs are triggering animations for panels.
| | 00:54 | And next, let's scroll down and let's find
those two absolute-positioned properties we
| | 00:58 | put on the panel and panels containers.
| | 01:00 | So, we have .sp .panel_container .panels position:
absolute; top; 0; and the next one down, position:
| | 01:07 | absolute; height: 400.
| | 01:08 | Let's come in here and
delete these two rules.
| | 01:11 | Then hit File > Save.
| | 01:15 | Now to test this and make sure that the
JavaScript does not require to make the layout work,
| | 01:20 | let's come back to index.html.
| | 01:22 | At the top of the page, let's just come in
here and comment out our JavaScript file.
| | 01:26 | So, let's add a beginning bracket,
exclamation point, two hyphens.
| | 01:33 | Let's come out to the end of the line,
add two hyphens and a greater than sign.
| | 01:42 | And now with our JavaScript temporarily
commented out, let's come back out to the browser and
| | 01:46 | let's hit Reload.
| | 01:47 | So now without JavaScript, we'll see that the
CSS is still rendering all of the individual
| | 01:52 | styles, and all of the panels are
stacking up on top of each other.
| | 01:56 | The CSS is also hiding
the tabs up here as well.
| | 02:00 | So now that we know that our page works
properly without JavaScript, let's close our browser.
| | 02:05 | Let's come back into our index.html file.
| | 02:07 | Let's uncomment that JavaScript.
| | 02:11 | And now with JavaScript re-enabled in our page,
in the next movie, we can work on adding
| | 02:14 | those CSS properties back into our
project for those who have JavaScript enabled.
| | Collapse this transcript |
| Reassigning CSS rules with JavaScript| 00:00 | Now, to add those CSS properties back into
our document for those who have JavaScript
| | 00:04 | enabled, let's come back to sliding_panels.js.
| | 00:06 | Now, at the very top of the document, inside
of the $(document).ready, the first thing
| | 00:12 | we're going to do up here is
reset the display type to the tabs.
| | 00:15 | So, let's target the tabs, dollar sign,
parentheses, tick marks inside for a string literal.
| | 00:22 | Inside of the string literal, .sp .tabs, outside of
the parentheses .css, another set of parentheses,
| | 00:34 | semicolon, inside of the parentheses for
css, two tick marks for a string literal,
| | 00:40 | display, comma, another string
literal. Set that back to block.
| | 00:47 | So that rule is going to make sure
that the tabs are now visible again.
| | 00:51 | Next let's target those two
other containers for the panels.
| | 00:54 | So, dollar sign, parentheses, tick marks for a
string literal, .sp .panel_container .panel,
| | 01:07 | outside of the parentheses .css;
another set of parentheses, semicolon.
| | 01:15 | Now, we want to set multiple
CSS properties inside of here,
| | 01:18 | so inside let's add a
beginning and ending bracket.
| | 01:22 | The first property is going to be position, two
tick marks for a string literal, set position,
| | 01:28 | then a colon, another string literal, absolute,
second property, comma, two tick marks, height,
| | 01:43 | colon, 400 pixels.
| | 01:49 | Let's copy this entire statement,
paste it on the next line.
| | 01:54 | Inside of the string literal for the item we're
searching for, let's change panel to panels, plural.
| | 02:01 | We'll keep position absolute,
| | 02:03 | but instead of height, we're going to change
the height property to top, and the value
| | 02:09 | is going to be 0 pixels.
| | 02:13 | Then let's hit Save.
| | 02:14 | So, now with these three lines we're adding
back in the display property for tabs and
| | 02:19 | we're adding the position: absolute, and the
top and height settings for the panel and
| | 02:23 | panels containers.
| | 02:25 | So now to test this,
let's come back to our browser.
| | 02:28 | Let's hit Reload.
| | 02:29 | And we should get the exact user experience we
had before we started adding in the progressive
| | 02:33 | enhancement techniques. So, I can select them
in here and interact with all of my content.
| | 02:38 | But as we saw in the last movie, if you have
JavaScript turned off or disabled in your
| | 02:42 | browser, you will see all of the
content stacked vertically instead.
| | 02:46 | So at this point, we've completed adding the
progressive enhancement techniques into this project.
| | 02:50 | Next, we'll talk about where you might want
to go from here, specifically around applying
| | 02:54 | progressive enhancement techniques to other
courses I have in the lynda.com online training library.
| | Collapse this transcript |
|
|
ConclusionWhere to go from here| 00:00 | So we just completed adding some progressive
enhancement techniques to our sliding tabbed panel.
| | 00:04 | There are 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.
| | 00:14 | This is a series of panels that line up on
a horizontal row, very similar to what we
| | 00:18 | just did in our sliding panels.
| | 00:20 | So we can actually set this to have all 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,
| | 00:32 | in this case the question, and clicking on
it will open the corresponding div, which
| | 00:36 | has the answer to the related question.
| | 00:38 | 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_answer_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 0.
| | 00:56 | So, any interactive project you're 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
tabbed panels, and I really appreciate you watching my course.
| | Collapse this transcript |
|
|
