You are on page 1of 87

Course Introduction

Course Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This course is Extending
Bootstrap with CSS, Javascript, and jQuery and this is the course
introduction. There's a lot of reasons to watch this course. We're going to do
a step-by-step learning on building things like left or sidebar navigation in
Bootstrap, some custom dashboard widgets, we're going to learn to
extend the checkbox and radio buttons, make them look a little better, build
some product selectors, customaccordions, and learn how to work with
progress and wait messages.

Course Audience and Pluralsight Courses to Help You


Okay, for this course I assume that you know Bootstrap, that you understand
Javascript and jQuery, that you're familiar with CSS and CSS 3, and are also
familiar with HTML and HTML5. Now if you don't know any of those, well then,
Pluralsight has courses to help you such as Bootstrap 3, Introduction to
HTML for Designers, Your First Day with HTML, HTML5 Fundamentals, Quick
Start to Javascript Volumes 1, 2, and 3, Javascript From Scratch, Useful
jQuery Plugins, Introduction to CSS, and CSS 3 From Scratch.

Course Outline
This course has seven modules. Module one is this one right now, the course
introduction. Module two we're going to create left navigation. This is a
complete sidebar navigation that we're going to create from scratch, we're
going to include media queries, so that when we collapse on a small device

it will collapse with transitions and add icons. Module three will be building
custom dashboard widgets such as summary blocks, seen in the upper right
hand corner, and readme boxes seen in the lower right. Module four is
extending check boxes and radio buttons. We're going to style checkboxes as
buttons and group buttons and style radio buttons as buttons and group
buttons, as seen in the display, the following genres, the jazz, the country, and
the rock. Module five is building custom product selectors. This is where you
can have like a shopping cart, select different items, and we're also going to
use our style checkboxes and we're going to calculate totals using
jQuery. Module six we're going to learn how to customize the Bootstrap
accordions. We're going to add up and down indicators to the right side of the
Bootstrap accordion, and then we're going to make those glyphs change
using jQuery. In module seven we want to take a look at having
progress messages, we're going to keep the user from clicking on buttons
when they shouldn't, and we're going to use pop-up messages for longrunning operations. Alright, let's begin this course.

Create Left (Sidebar) Navigation


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is Create Left
or Sidebar Navigation. Now there's a lot of reasons you want to watch this
particular module. We're going to learn to create a left navigation system. This
is a sidebar navigation. This is not built-in to Bootstrap, so that means that we
have to build our own custom styles. We're going to use media queries and
what we'll do is we're going to make that left navigation disappear on small
devices at first, and then we'll go on and learn how to show icons instead of

text on those same small devices. We'll then show you how to add accordion
menus within the left navigation as well, so let's get started.

Introduction to Simple Left Navigation


Okay, so to build our simple left navigation the main thing we want to do is
just keep the HTML as clean as possible. We're going to use a nav element,
we're going to use an unordered list, and list items. You can see that I've just
created a couple of my own little styles here, the main one being the pdsa-snwrapper, and that gives us that black area you see over there on the screen
under Music with the Home, Genres, Playlists, Songs, and Download. Now
we're going to create this wrapper class style and then within it we'll just use
element styles to basically create the rest of the styles, so we are going to
start out with our pdsa-sn-wrapper, which gives us the black area, we're going
to position it absolutely and a few other things, which we'll talk about,
and then we're going to use the ul, right, after that say, hey, anything within
the pdsa-sn-wrapper that is a ul element we're going to style them this
particular way. Alright, let's take a look at how we create this step-by-step.

Building the HTML for Our Left Navigation


Okay, I'm going to use Visual Studio, but we're going to do everything in
HTML using just Bootstrap and jQuery and CSS, so you can use whatever
editor you want, so I'm going to build just a simple MusicSite and I'm going to
use what's called the Empty template in Visual Studio, which means basically
nothing comes in, and then what I'm going to do is I'm going to add to this
website that we built here, some things that I downloaded, such as Bootstrap
and jQuery, so I'm going to add a Content folder here and it simply has

our bootstrap.css, okay, this is all the stuff that comes down with the
Bootstrap, so however you get Bootstrap into your project is fine. Comes
down with the false and then, of course, some scripts right? The jQuery and
Bootstrap. Alright, so however you do that go ahead and create a site or
whatever and then I'm going to create just a basic default.html page, so it's
just an HTML page here, and I'll just call this Music Site and then what I'm
going to do is go ahead and add in my Bootstrap CSS here at the top, I will
add jQuery, and Bootstrap down here at the bottom. Now that I have that
we're going to go ahead and just create a container because that's typically
what you do with Bootstrap, and then within the container I'm going to create
a header and inside of the header I'm going to create an href, and I can go
ahead and just point that back to itself here, the default.html, and then we just
say My Tunes. Now also within here we're going to build our navigation area.
Like I said, we're going to create anavigation area with an unordered list and
some list items, and the only thing we're going to really style here at the nav
level is our wrapper, which we haven't built yet, so it's not going to show up in
my Intellisense here, but we will build that in a minute, and then we're going
to build also one other thing. We're going to stick with kind of the --Bootstrap way of doing things where we create a brand, so just like they do in
their horizontal, we're going to create a brand, and inside of that brand we'll
style it a certain way, but we're also going to have a thing that will always get
us back to the home, so I'm just going to call it Music. Alright, after this I'm
going to create another li and we'll just create a series of a hrefs inside of
here as well. Not going to build any pages for these right now, well maybe the
first one here, we'll do a Home just so we can always get back. Why not,
huh? Alright, after that we can now simply just build whatever menus we want
and we're not going to build any pages, so I'm just going to go ahead and use

a pound sign here, but let's create things like Genres, music genres, and we'll
create maybe Playlists how about, oops, I can spell it right, Playlists, and then
we'll also build how about Songs, and last one will be Downloads
(Typing). Alright, so now we have some stuff laid out here. If we run this it's
not going to look like much because we really haven't applied any styles,
okay, so I'm showing you on a mobile device first, alright, because I have a
simulator here, we're going to see why that's important later, and then let's
take a look at it under IE maybe or Google or whatever, it doesn't really matter,
but as you can see, it just doesn't look like a lot because we haven't applied
any styles. Alright, so let's go ahead and add one more area down here
though and again, another container, because this is going to be where we're
going to put our main content, so I'm going to create a content area, and I'm
going to give that my own style as well, which we call body-content. Now
typically within Bootstrap we create rows and columns right, so we're going
to go ahead and just create a class here called, and let's see, we'll do a couple
of breakpoints here. I'm going to do an extra small of 10 to give us a little bit
of a padding, and then maybe we do a large,we'll make it full screen or the full
width of the container, in this case, which is 12. Alright, just so we have
something to show let's just create an h1 maybe, and then we'll put a project
tag in with This is where you gather --- all of your music. Alright, so again,
let's go ahead and run this. Alright, and again, it still doesn't look like
anything because we haven't added any styles, but that's what we're going to
do next.

Styling the Left Navigation

Okay, so let's add our styles, so we'll go up here, I'm just going to add them
at the header level at this point. Later on we'll move them into a style sheet,
but I kind of like starting out here, that way I can just do everything on one
place. Now I am going to go ahead and override the container of Bootstrap
because I --- want it to --- use 100% of the screen at this point. Then I'm going
to add that body-content that I added there and for this one I'm going to kind
of push it over because we got the left navigation that I want to have here, so I
need to move the body over past that, so I'm going to do this at 14ems, and
I'm also going to put in a header area at the top, so I want to move it down a
specific amount as well. Then we'll set the width here at 85% how about for
the body. Alright, if you remember I had a header that I added down here in
this HTML, so the header I want to do some things okay. I'm going to put a
padding in of 0.7 ems, I'm also going to add a background-color here of gray, I
will add a color of white, and a font-size of large. Now the other thing is I did
put inside of the header I did put an anchor tag, so let's go ahead and make
sure we style that as well right, so you can see that within the header I have
an a tag, so let's go ahead and put a background-color on this guy of gray
as well. We'll use the same color of white and I don't really care for the
underlines, I'm going to go ahead and eliminate that, and the only other thing
I'm going to do on this one is on the hover I want to kind of change the hover
a little bit for that anchor tag as well because again, I don't want a text
decoration showing up. Alright, so if we run this now you can see we now
have a header area here at the top. Okay, so pretty simple. You know, not too
bad. Alright, so now let's go ahead and add styles for our left navigation,
right, so that's this guy, the pdsa-sn-wrapper, the brand, and then of course,
styling the uls and the lis within that area as well. Let's go ahead and add
our .pdsa-sn-wrapper and let's style this guy. Now I'm going to use absolute

positioning for this and I'm going to go ahead and put it at the top of 3.6 ems,
and I'm going to do a left here of 0. I want to make sure that the left is set
explicitly, mainly because we're going to use some transitions later on and I
want --- to transition that left, so we have to set that here. Now, if you
remember, I moved the body-content over by 14, so I'm going to make the
width here of 13. I'm going to set the height of this to 100% and I'm going to
set the background-color of black because that's what we saw in our slides.
Alright, so now let's go ahead and add the uls right?Anything within the
wrapper that is an unordered list, we'll set the width here to be 11 ems, so
that'll give me a little bit of padding around it right? I don't want you to liststyle on this, I don't want any bullets coming up, okay, so we're going to do a
margin-top now, and these guys, this ul to be 2, and on margin left I'm going
to set at 1 and I don't really need any padding around this at all. Our next one
then is within a ul we have li, so what do we want the lis to look like
right? Again, I'm going to set a little bit of a marching top here at 1 and the
margin bottom I'm going to set at 0.5. Then, let's see, next one would be
underneath the wrapper ul li. We then have an anchor tag don't we within the
HTML, so now we need to style that a little bit as well, so we just keep listing
each thing that we want to style right (Typing)? I want to do a color. Again, the
text decoration, I don' want any text decoration on this on here, and we'll set a
padding of 0.5em on this guy. Okay, and then the next one that we have is our
hover, and for the hover again, we're going to do a text-decoration of none,
and we're going to do a color here of fff. Alright, so you can see it's pretty
simple stuff that I'm doing here. There's really nothing too out of the ordinary
here. I've got him active, I'm then going to do the focus, see these different
pseudo classes. Again, it's really just kind of making sure that each one is
defined out so that we make it look like we want (Typing). Alright, so we're

getting close to the end here. The last thing we have is our brand alright, so
we need to style that brand here. On the brand I'm going to just --- do a few
things. Actually we should always still do this the same way.Let's go ahead
and still make sure it's within our wrapper here, right, so that everything flows
down nice and easy. Margin-left on this guy, is going to be a 0.5 ems, but I
want that negative, I want it to kind of go a little bit less than the normal things
we're going to click on, so add a couple of more things here like so. Now on
these guys we're also going to do the anchor tag that's within it, so we want
to style the anchor tag right? We have that, and again, we're going to do a
color on the sky of white like so, and then of course, the last thing we're going
to do is we'll hover on this guy. What do we want? I want a color of light blue
on this one and a background of none. Phew. Alright, that was a lot of styles
that we added there, but you can see how each one of these styles relates to
what we did down here, so now if we run this what have we got? Hey, not too
bad. Alright, looks like my container is off a little bit on the first one, so maybe
I misspelled something, so we've got our div class container that's --- the
header and the navigation area. We then have our div container with our
body-content, so if we look up here and make sure, yup, we've got
our container of 100%, okay, the body-content has been moved over, that's
great, so if we see the body content is over here where we put it, so let me
show you a couple of things here right? One of the things is, well that looks
like it's down a little bit too far right, so maybe we might want to move that up
a little bit, so we can change that body content, and move it up, so you can
just play with this until you get it to where you want it. This is what's nice
about having a dynamic editor like this, sohopefully you have an editor that
you can take advantage of as well, and you can just change things and
then move along. Alright, now one of the problems with this here though is if I

go down to a very small size we'd have very little room left over. In fact, let me
show you this on the iPhone again, because you'll see that this left nav takes
up way too much space doesn't it? Okay, so this is a little bit of a problem
isn't it, because we want to fix that, so that that really goes away if we're on a
small device, and that's what we'll talk about next.

Adding a Media Query


Okay, so we saw the problem with we need that navigation to go away, so
what we're going to do is make that left navigation disappear by using a
media query, so what we're going to do is we're going to build an @media
query inside of our CSS that has a max width of 768, so that means that when
we hit that 768 or below it's now going to apply this to the pdsa-sn-wrapper,
so this left is going to move by -13ems over. If you remember, I set the width
of the pdsa-sn-wrapper to be 13, so by moving it -13 it causes the whole left
navigation to disappear as you see in the screenshot on the right here. When
I do that I also want to move the body content over as well, so I'll make it a
margin-left of 0, and that makes that move over, so those are the two things
we're going to apply in this media query to make things disappear on a small
device, so let's take a look at how we do that. Okay, so back in our screen, the
one thing that I had forgotten was a row inside of the container here, that's
why --- the header wasn't showing up correctly, and so now you can see it
takes up the full width here. Alright, so let's go ahead and add our media
query. Now in Visual Studio it's really easy. They give us this nice Intellisense
and I can tab and it'll bring in a code snippet, so I'm going to change this a
little bit though, so I'm going to change this, so that the max width then is --768, like so. Alright, so then within here is where you simply put in whatever

you want. Okay, so in this case I want to make sure that the left is going to
move over by -13 ems, so here's thething, if you come up here and you
change the width right here on this guy, you have to make sure that
you change this to be the corresponding amount, alright, otherwise it won't
disappear. I'm also going to change the body content, so it's margin-left goes
to 0em. Now just to make this a little bit more clear here, what we could do is
add in a little bit of additional text, so I'm going to grab this large amount of
text here and drop it right into here, so now let's go ahead and run this. Now
we just have a lot more text, as you can see, and I did that so that we can
really make this a little more dramatic. You can see that as soon as it hits that
extra small breakpoint, which is 768 in Bootstrap, the left nav goes away, and
the --- body-content moves over. This is really evident if we were to do this on
the iPhone simulator. When you run this guy it's just not even there and now
we have all of our content displayed in one place.

Add Transitions for Visual Interest


Okay, so instead of having that left navigation just simply, boom, disappear
really quick, let's ease it a little bit by using some CSS 3 transitions for a little
bit of animated effect. What we're going to do is set some properties. Now
what's really important when you're using the transitions is that those
properties that your animating must have been set explicitly somewhere
else. If you remember when I created the pdsa-sn-wrapper I set the left to 0,
and then also on the body-content I had a margin-left set and that's what I'm
going to do, is I'm going to transition the margin-left on thebody-content, I'm
going to transition it over to 0.3 seconds in a linear fashion, so that means it
goes the same speed the whole time over 0.3 seconds. I'm going to do the

same thing on my pdsa-sn-wrapper. I'm going to transition the left property


over 0.3 seconds in a linear fashion, so that means that I'm going to move
these things from what they're set now to to the value that I'm going to in the
media query, so let's take a look at how we do this. Okay, so the first one
we're going to add our transitions to is the body-content, so we'll do a
transition here, and like I said, this one will be the margin-left over 0.3
seconds in a linear fashion. Now that's basically usually all you need,
however, I would still recommend you add in the moz-transition and the
webkit-transition just --- in case you happen to hit an older browser that
doesn't support the new CSS 3 transition. They all will have these old ones.
Then the other one is on the pdsa-sn-wrapper, so we'll go ahead and just
copy these down here, but then we'll change it because it's now the left
propertythat we're now going to animate. We'll change those, so now we have
the transitions on the body-content, and the wrapper. I'm going to switch this
back to Internet Explorer because this isn't going to work if we have it on the
iPhone because it just is already in an extra small. We want to show the
transition now, so when I'm in a large screen like this, as soon as I hit that
breakpoint see how everything just kind of nicely animates. Now, like I said,
0.3 seconds is what I had there. Maybe you want it to be a little bit longer. You
can just change these here. I think the 0.3 is pretty good, but in case you
haven't seen this before, just so you can see what it looks like, okay, so
whatever you want to do is perfectly fine, but this adds a little bit more visual
interest and isn't so abrupt for the user.

Transition to Icons on Small Devices

Okay, now sometimes what we might want to do is still have a little bit of
navigation on small devices, so even though we've gone to a small device we
don't want to eliminate it completely. We might want to add icons instead of
the text because the icons will take up less space, so kind of not a bad idea to
make something that looks like this, so what we'll do is we'll use the
Bootstrap visible classes for text, like visible-sm, visible-md, and visible-lg,
but as soon as we get to the breakpoint of the 768 or less, we're going to use
the Bootstrap visible-xs class to display the icons, so all we have to do is
layout our HTML a little bit differently using these visible classes in
Bootstrap, and we'll be able to do media queries with transitions and icons,
so let's take a look. Okay, so down here our HTML is where we're going to
start making a few changes. We have our anchor tag here for the brand area.
What we're going to do is we're going to add classes on. Now these are
classes that are just built right into Bootstrap, and they're the visible classes,
so we have visible large, small, medium, etc. Well for the brand portion we
really only want it to show up when it's small, when it's medium, and when it's
large like so. That's the only time we want those. Now I'm going to stay and
I'm just going to kind of copy these because I'm going to need these
again. Now what I'm going to do is start changing each one of these down in
here because in the anchor tag what I really want to do is apply a span on
this. I really want to use a span for --- all the letters, I should make that an
uppercase H, and then what I can do also within the anchor tag here is I can
add an i with a class of, in this case I'm going to use my glyphicon, and I'm
going to use the glyphicon-home, because I want that little home symbol
there, and then I'm also going to add the visible-xs. I only want this one to be
visible when it's extra small, so you can see that what I've done is within
the anchor tag I wanted some text that displays, so I had to use the class

down here on the span in order to have just the text appear, and then I want it
to go away when it's visible-xs. Pretty simple to do. What we have to do is we
have to do this on each one of these other ones as well, each one of these
anchor tags down here, so each one of these we have to apply the same
thing, so let's grab the span here, and put that in, then close it off, and then
we'll grab our i here and put that below it, but for each one of these i's I want
to use a different type of thing, so for this one we will use the globe
for instance, and then I'm going to go ahead and just copy this and then we'll
change this to Playlists and then we'll change the globe on this one to list-alt,
so I've already figured out kind of what I want.You'll just go and look at the
Bootstrap site and figure out what kind of icons you might want to use
for your particular thing that you're doing. We'll do Songs and for this one I
have there is a music icon, and then for the downloads instead of the globe
on this one there actually is a download glyph that we can use, so not too
bad. Now if you'll notice though I've changed the HTML, so I know have an
anchor tag, within that I have a span, and I have an i, so I do need to add
some styles now to support that, so what I'm going to do is I'm going to build
up my styles now by using .pdsa-sn-wrapper again, okay, ul li a and then span
because we want to be able to have that a certain way, so I'm going to set the
margin-top on this guy to be -1em, the margin-bottom will also be --- -1em, the
margin-left though is going to be 1em and the margin-top is going to be -1em.
We've got kind of some different stuff going on here and you'll see, when we
run this, you'll actually see what this does, so then we're going to change the
padding a little bit here too because I'm trying to scrunch everything up a little
bit more to make it a little bit more compact on a small device, so by doing it
this way, changing some of these margins and paddings, it helps me kind of
scrunch it up a little bit. That's for the span, but I also want to do the same

thing for the i that I have within there as well, so we'll make sure they have the
exact same paddings margins, etc. Now the other thing I want to do is
now modify the media query that I have because now I don't want the whole
thing to go away. Remember the width of the whole thing is --- 13, so it made a
left at 13. Well I want to leave some now, just enough to show those icons,
alright, and then, you know I apologize, I don't' think I'm going to do that here.
I think I'm going to do this down here, so what I'm going to do is I'm going to
add one more for the i here because this is where I kind of want to change
these guys, so I'm going to do the padding left on these guys at a 10 am, the
margin top is going to be a -1 and then the margin bottom is going to be a -1,
so when I'm within the small breakpoint that's when I want to modify the eye
because remember the eye contains the glyphs. We've got all these styles
here, the margin-left on the body content. Again, I need to make that stand out
a little bit more. I'm again, not taking it all away am I. Alright, so now let's go
ahead and see if I've got all this typed in correctly. We can now see text and
then we can see the icons. Now I purposefully left this because I wanted to
show you, okay, look here, it's a little bit less padding her, but then it's a little
bit more when I go to the breakpoint there, so one of the things you always
want to do is make sure that you're consistent okay, because otherwise it
looks just a little bit off, so I did that on purpose function kind of a
teaching tool again, to showy You. You want to make sure you're consistent,
so now the body content always tats the same doesn't, as far as the length
away from things. Alright, pretty simple to add text or have images depending
on which model we're under, and again, you can kind of then look at this on
an iPhone and make sure that, yeah, you know what, I've still got enough
room for the content there. Cool. Excellent, so kind of a nice way to add ---

again, some visual interest, but also add something that's useful for a small
device.

Left Navigation with Accordions


As our last sample in here let's add some accordion menus, some kind of like
a second level of menu. You can see here we're going to create an accordionstyle menu using just all the built-in Bootstrap stuff, okay, so we'll use the
collapse style from Bootstrap to get our second level of menus, so we're
going to style that second level of menus using our own custom styles
because we want to indent to the proper spacing. We don't want too much
spacing because again, we're trying to target also the mobile devices, so we'll
set our padding at about 0.5em. We're going to create two div tags, one for
small, medium, and large breakpoints and one for extra small breakpoints
because --- that second level needs to become invisible when we're collapsed
down, otherwise, the icons that we're displaying would leave space in there
for that second level of menu even though you can't see it, so we've got to
make sure that those go away. Alright, let's take a look at how we built this left
navigation with accordions in there. Okay, so what I'm going to do is I'm
going to make the genres and the playlists into some accordions, so if you're
familiar with Bootstrap, you know how Bootstrap creates the accordions on
an anchor tag, we can create a data-toggle, and we can equal collapse on this
and then what you should do is set the data-target as well, equal to the name
of the ul that we're going to target here, so I'm going to create one
called ulgGenres ---. Okay, so now we have the span, that's all fine, but what
we want to do then is still within this li right after the anchor tag we're going
to create another ul here, and that one's going to have an id of ulGenres, so

this guy is going to match this guy. I mean that's pretty simple
right? However, we still need to set a class on this of collapse, so these are
accordions or collapsers, whatever you want to call them, and then I'm also
going to set the data-parent on this to be our side navigation parent, whatever
we call this guy, so I haven't named this yet, so I'm going to go ahead and set
this one up with sideNavParent, so this is the container for all of this, so that's
what we want to use then down here on our data-parent. Okay, so let's put a
pound sign in and sideNavParent. Alright, now one of the things I mentioned
in the slides though is I'm going to create lis here right, just like we normally
would, but I don't want these to show up when we're in this extra small
breakpoint, so what I'm going to do is I'm going to add a div around the whole
ul here, and I'm going to set the classes on this to be the same as for the text,
so they're only going to show up when I have the text, which is
small, medium, and large. Alright, so now within each li I can add my anchor
tags and do whatever I'm going to do, so maybe I have All Genres, so let's
just add a few here. We have All Genres and then maybe we have Jazz and we
have Country and we have Rock, so just a few genres of music here. Alright,
so pretty simple right? Not too bad to do. Then we can do the same thing
down here for our playlists, so instead of genres this'll be ulPlaylists, so that
all stays the same, and then down here we can add our own same stuff, the
div, the ul, so I'm just going to do a little copy and pasting here, change this to
ulPlaylists, and then we'll have also All Playlists ---, and then instead of Jazz
Country we'll do, whatare we going to do here, like My Top Rated how about
okay? We could also do, let's see, Top Country for instance, that would be
another good playlist to have, and then maybe how about Top Classic
Rock. There we go. Alright, so not too bad, so let's go ahead and run this
again, in the Internet Explorer, so there's the icons, here it's now expanded

out okay, so it brings in the thing. Now we haven't done the styling we need to
do and we also need the little caret there too don't we? Okay, so it has a little
down caret. Alright, so what we can do is right after these words here we
could add a non-breaking space, and then we could just add a b or an i,
whatever, with a class of caret, and that's what a lot of people do here, so let's
go ahead and copy that from Genres, and then we'll copy that down to the
Playlists as well, and there we go. Now we have our little guys here, but those,
if this is expanded, right, remember that div tag is going to make it go away,
so then our icons just show up, but it doesn't show the expansion of the
accordions, so pretty simple to do, not too bad. Of course, then what we'd
want to do is come up here and add a little bit of styling, so that that
second level has the appropriate padding, so let's add our pdsa-sn-wrapper
again, under ul li ul, so that means that's the second level of unordered lists
here. Again, we want to set the list-style to none just to make sure, I mean it
should be handled by the upper one anyway, but kind of sometimes I like
being a little more explicit there. Now I don't want the margin top, you saw the
margin top was kind of pushed down a ways, so it didn't want that, so we're
going to go ahead and just modify things a little bit here, so let's run this now,
so you can see how it's moved up a little bit, okay, and again, feel free to play
with these, okay, do whatever you want to do as far as the styling of this.
Maybe you want to bring it up even a littlecloser, maybe you want to move
this over a little bit more, whatever is appropriate for you. Alright, so pretty
easy to style the second level of that as well, and we now have a nice way to
do accordions.

Module Summary

Alright, so hopefully you've learned a lot here about left navigation or sidebar
navigation that it's up to you, you've got roll-your-own, but as we saw, not too
many classes there that you need to add, too many styles. I like adding media
queries and transitions for interest, switching to icons on small devices
really kind of gives you more real estate, which is great, then of course, you
can get creative with the accordions as well. I hope you enjoyed this module
and let's move onto the next module now where we're going to talk about
creating dashboard widgets.

Build Custom Dashboard Widgets


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is Build
Custom Dashboard Widgets. There's a lot of reasons to watch this particular
module and we're going to create some widgets for a dashboard, so things
that would go on like a homepage or any place where you want to guide the
user to more information, so we're going to create something called a
summary block, which looks like what you see here. We're going to create a
readme block as well, and we're going to build these step-by-step. We're also
going to create some CSS themes for these where we can apply colors that is
independent of the structure of each of these blocks, so like I said, we're
going to do it step-by-step and build each one individually, so with that let's
go ahead and get started.

Introduction to Summary Blocks

The first thing we're going to do is build what are called summary
blocks. Now summary blocks are used to display summary information about
other details that might be on another page, so you typically place these on
dashboard screens, main pages, things like that, and then it simply has a link
at the bottom that goes into more detail then. Now to do this it's only
approximately 100 lines of CSS and that includes 4 different color themes, so
like anything, we always want to build the HTML structure first, so we build
the structure using divs, and then we'll add on some additional things like
glyphs, and then some classes. When we build this the first thing we're going
to do is build what I call the Main Wrapper Area and this is the top level div
that surrounds the whole box. The next thing we do is we add on the Graphic,
which, in this case, is just a glyph icon. Now I took a little out there of
Bootstrap just so that we wouldn't have onto two lines, so there's another
glyph icon in there. Then we have our Body Text area. Again, a wrapper
around these lines 1 and lines 2. Okay, so we have the wrapper around inside
of a wrapper to wrap up the body portion. Finally, we then have the Footer
Area, so the Footer Area is there where we put then the link that will guide the
user to the next page, so it has an anchor tag, and again, I used a little
glyph in there. Now we add in the CSS, so the CSS is what you see in bold
here, so the first thing would be the pdsa-summary-block. Again, I used my
URL as the prefix for all of my wrapper classes. By doing that it just lets me
know that it's my stuff number one, number two I hopefully won't collide
with any other styles that are out there. The pdsa-summary-block uses like a
position relative, a width, a margin, we're going to build all of this though by
hand, but it's the surrounding wrapper area. Next, I create a class called
summary-background. This one is part of the wrapper, so it goes after pdsasummary-block. Again, set some different CSS properties here. We next have

the summary-body area, that's that body that I was talking about that then has
a summary-line1 and a summary-line2, and then finally we have the summary
footer down below and you can see a little bit that it's got this opacity down
here of about 60% and the reason why we like that is then when the
user hovers over it it'll kind of go full opacity, so that's kind of nice to be able
to get a little bit of a clue that yes, you can click on that. Down in here we then
have the hover and that's where you see the opacity and finally we have the
glyph icon, which is then pulled all the way to the right, and it's just
a chevron-right, so it gives that little right arrow. Alright, with that let's go
ahead and build one of these from scratch.

Build Summary Blocks Step-by-Step


The first thing we're going to do is from our previous demo in our previous
module we're going to take all of the styles that we created for the left
navigation, we're going to cut it out of the style area, and we're going to go
ahead and add a new style sheet and we'll call it pdsa-sidebar.css and we'll
drop all of these into one place now, go back to default and we'll simply drag
that guy on, so now we have all of our styles for the sidebar in one place. The
next thing we're going to do is we're going to come down here to where our
body-content is. If you remember, I added in a whole bunch of stuff here, all
that lorem ipsum stuff, so we're going to get rid of all of that and get back to
just a normal Bootstrap type of thing. Alright, so what I'm going to do is I'm
going to create, let's see, I'm going to use small on this guy here, so I'm going
to create a couple of columns, so I'm going to create two columns there that
are four each and then I'm going to create a whole other row that also has
four columns, so we're going to use these columns to build up our little

summary-block. I'd like to build our summary-block, so we're going to build it


just like I had described before with the divs and all of that. I'm going to go
ahead and add in the names that I know I'm going to create here like pdsasummary-block first. Then we'll have another div here with a class =
summary-background, so even though I don't have all these classed build yet
I know that I'm going to use them. For this one we're going to do our glyph
icon and then on the glyph icon we're going to use the globe on this one, so
it'll look like a little glove there, so that'll be the first summary-background
area.Then we're going to have another one, which is our summary-body, so I'll
have our summary body, and then you will have our div class summary-footer
that we're going to create. Within the body, if you remember, I had two things.
I had a div class summary-line-1 and then I had a number 14 in there if you
remember from our slides, and then we had a summary line 2 and it had
genres. Within the footer I'm going to create an anchor tag here, it's not going
to go anywhere right?Yeah, we're going to build all these out later, but this
one will say View Genres, and then we're also going to put within the sinker
tag our i with our glyphicon and the name is going to be glyphicon-chevronright. Okay, now if we just run this right now we should have everything we
had from our previous module, the left navigation, and now we have this
funny looking stuff here. Okay, so it doesn't really look like anything at this
point, that's because we need to add some styles now. Alright, so let's go up
here to the top and let's start adding our styles now, so pdsa-summary-block
will be the first one, and again, I don't care whether you're using Visual Studio
or some other thing. You could be using PHP, any editor you want, any type of
environment you want, this is all just pure HTML Bootstrap and CSS, so this
will work in any environment. Now we're going to make the position relative
on this one because we're going to want it to flow within the Bootstrap stuff

and later on I'm going to put in a position absolute for things within the
summary-block, so we're going to do a width here of 100%, so take up
whatever the container is that it's within. On the margin we're going to simply
do a 0.3em, we'll do a padding of 1, we're going to do a minimum height on
this, now I'm using the minimum height here just because I'm trying to get a
certain look, and you can play with this, you don't have to do this. It kind of
depends on what you're wanting to accomplish here, but that's always
something that can change. I'm using this specific background-color and
we'll talk about the coloring stuff in a little bit once we start our theming.
Okay, so now that we've got that, the summary-block that's the overall
wrapper, I'm now going to add our summary-background, and if you
remember, we got two things that we could potentially use for putting in a
glyph icon, well we have a few things, but most people either use an i or they
use a div, so I'm going to go ahead and make sure that whichever one you
want to use, i or div for your glyphicon, it's styled the same. You could add
lots of stuff there, a span, a b, all sorts of things are applicable there, so just
add on whatever you feel is appropriate. We're going to add a margin-top on
this guy of 0.1em, we're going to do a font-size of --- 8em, I want a large font
size on this one, and then the opacity on this is going to be 30%. Remember
this is the background of that glyph okay? Now that I've just done the
wrapper and the background let's go ahead and run this and see what this
now looks like, ah, so it's getting a little better. You can see the opacity on the
glyph right? Let's go back and change this really quick and change that to a
one, which is full, and then let's go ahead and refresh, so you can see how
much brighter it is. I kind of want it as kind of a background thing and that's
why I wanted the 0.3 there, just so it's kind of not really in your face, so it's a
little bit more soft there. Alright, so now let's add the body style, so we're

going to do pdsa-summary-block --- .summary-body, there we go. Alright, so


this --- is the one I'm going to absolutely position now and then you can do
the absolute because it's within a relative right, so that means position it
absolutely within its parent or the first parent it finds that's an absolute one.
Cool. We're going to do a top and a right on this one, 0.8, so I want it a little bit
away from the right, so then we've got our summary-body, and we also have
then the summary-line-1, there we go, and we're also going to have a
summary-line-2, so we'll build two of those. This one, text-align, is right, just
like we'd expect, because remember it was over to the right. Same thing for
line-2 here. Now the font-size on the first one is going to be xxlarge --- and a
font-size on line-2 not as much, so we're just going to do like a medium on
this one. Again, let's run this and take a look. Yeah great. See now that's kind
of the major information, that's kind of what we're describing. We haven't
done anything with the links down here yet, but at least we have the glyph,
and we have the body now, which is great. Okay, so let's build our summaryblock summary-footer now, so we're going to put the summary-footer in. Now
this one I'm going to again, do a position of absolute because I want it to be
down at the bottom of this, so we're going to do an absolute position, we'll set
a background-color here --- of blue. We're going to set the bottom to be 0,
we're going to set the right to be 0, so that way it's all at the bottom right, and
the width is going to be 100%, so again, within the container, the nearest one
it finds that's relative up from the position absolute, it's going to take up the
full width of that. Let's add some padding here, 0.4em for instance. Let's do a
font-weight. Now these things are a little arbitrary. I kind of chose them. Feel
free to do whatever you want to do. Now in the text-transform I want to be
able to type in normal words, but I want to have it converted to all uppercase,
so I'm going to use a transform there. That way if I don't want to have them all

uppercase I don't have to type everything as uppercase and I don't have to go


back and fix anything then. Now the font-size I'm going to go ahead and use
small and opacity I'm going to do at 0.6, 60%, and I want that because I want
to do a hover where when I hover over it people know that they can click on
it. Alright, let's copy this, place this down here with an a, because the anchor
tag I want to take off any text-decoration, and I want to make the color on that
white. Now the next thing I'm going to do here is, I've just talked about I
wanted to hover, I want to hover on the whole summary-footer, so I'm going to
make that one the opacity is then going to go to 1, so it's going to start out at
60%, and then it's going to go to a 1 like so. Alright, let's go ahead and run
this. It comes up, we can hover, and you can see how it changes oh ever so
slightly. If you want a little bit more of an effect that's fine, but that should be
enough to get the point across that the user can then click there. One more
thing you might add on that is change the cursor to a pointer, so that really
gives them a clue that when they come in there they can click on it.

Introduction to Summary Blocks Themes


Okay, so now let's take a look at how we can theme these summary blocks, so
if you saw in the last sample I just had colors right in each individual area
right, the header, the footer, the body, all of that, so what we're going to do is
remove all the colors from CSS and we're going to put those colors into new
CSS styles, and we're going to follow the same Bootstrap naming scheme.
We're going to have a primary, we're going to have a success, we're going to
have an info, and we're going to have a danger for instance. After we remove
all the colors from the styles we're going to separate them into two styles, so
I'm going to take the things out that are just structure only and put those into

pdsa-summary-block, then I'm going to grab the colors and put those into the
appropriate named pdsa-summary-block-primary, so then I can
combine those two together, --- and then add any additional ones too, right,
any color styles like block or success.Then what I can do is I can use those
two styles together on the wrapper, so here's the wrapper that I had a minute
ago, so I had pdsa-summary-block space and then summary-block-primary,
so this is what allows me to then theme each one, so I have the structure and
then, of course, the different themes separated out. Kind of a nice way to do
things, so let's go ahead and do it.

Theme Summary Blocks


Okay, so the first thing we're going to do is add another style sheet on this
pdsa-summary-block, and then we're going to grab again, all of the styles that
we just created, cut them out of here, and we'll paste them right into here.
Alright, so there's all of those things. What we have to do now is start
separating out the colors right, so let's go ahead and take this, copy this, and
call this -primary and then we look for colors, so background-color and the
color, and we move that up into the primary. Then what we have to also do
though is we have to look for anything else in there that has colors, well
I happen to know that it's summary-footer, that one has colors as well, so if
we scroll down, we look, we look, right, no color, no color, ah, there we go,
there's a background-color for summary-footer, so we're going to grab that
and we're going to throw it up into the summary-footer area, and then if we
want we can change this, we could do like a deepskyblue, I mean feel free to
get creative here, and then the only other one that we have is the anchor tag,
right, so remember I use an anchor tag down in there, so again, we scroll

down here to find summary-footer, summary-footer a, and we see another


color, so I'm going to grab that, and I'm going to put that up here. There we
go. We've now created a theme, so now if we go back to here, and we see our
pdsa-summary-block, let's run it right now, and you'll find that the structure's
in place, but it doesn't look like anything, okay, actually not even the
structure's in place because what I have to do is grab this, and put our
stylesheet in, so now if we run this we'll have the structure, but, as you can
see, there's no other colors or anything, so I mean that's just the default color
from the browser. This is where we then have to tell it, okay, what do we want
to add on? Ah, let's add our summary-block-primary that we had before. Now
let's go ahead and run this and we should be right back to where we were
before. Excellent. Now we can extend this a little bit more right?We can come
back into our summary blocks, we can grab all of these things now, and this
is where you might want to think about maybe just adding some comments in
here or something, if you wanted to put anything in here, so Structure --(Typing) of Summary Blocks, and maybe this is then the Theme of Summary
Blocks. Alright, so I copied the summary-primary, let's change this to now
success right? We'll change each one of these now to success, and there's
only three things that we need to really change on this, but the new just
simply change the colors, so for the success I know it's a 3c763d. No I do not
know all those off the top of my head folks, I have them written down. That
would be kind of sick actually. Alright, so now I've got a success theme as
well, so if we come back over here, let's go ahead and take our whole
summary-block and let's copy and paste that into the next column, but then
let's simply change this to the success one. Now we could use this, but now
we can change some of this, so let's do a list-alt for the glyphicon, becauseI
want to make it look different, and let's say I now have five playlists, so, and

then I might want to say, See Playlists, something like that. Now when we run
this we now have one that's the primary color, we now have one that is the
success theme, okay, and they will both lead us to different pages and we can
just continue this and continue this, right, so we could actually add another
one, and maybe it's going to be an info, so again we copy, and we would then
create these new ones. Create one on info, right, so I'm just following the
exact same pattern that Bootstrap has already setupfor us, so I'll do a 31708f
on this one and this one is kind of a teal color, so I'll use teal there, and then
we can go back here to where I created the new one and we do info, and then
what we're going to do is use music here, so we'll use the glyphicon-music,
and then maybe this one's got quite a few more things, so 2143 songs, and
then maybe we have something like all songs, and I think that's it. Now let's
run this one and there we go, so just a little bit of creativity here, just theming
things and making things look a little different each time, kind of nice right,
but we keep the structure in place, and that's what's really important here. I'm
going to now use a danger theme. This one'll be a94442, this one's the red
color, you know, the danger color, so all of that's fine. Then let's go ahead and
copy one more time and change this to the danger and then we'll use a
different one here, it'll be the download maybe, so we'll have maybe one
Download and my Get Downloads. Something like that and now we have four
different summary things on our dashboard that is kind of a nice homepage.
People can see at a glance what they have on their site as far as music, and it
leads them then to other places to view these different pages, and we'll build
those up a little bit later.

Introduction to Readme Boxes

Our next dashboard widget is called a readme box, so we're going to use a
readme box when we have again, moreinformation that needs to be gathered,
but we want a tiny little thing up front to say, hey, you can do something, you
can get to somewhere else, and again, we're going to have to create this with
CSS, we're going to do the same type of thing, it almost looks like a Bootstrap
panel here with a header, a body, and a footer, so we're going to layout the
HTML and the styles first, so we could actually even use a panel if we
wanted to, but I wanted to at least, you know, the idea here is to kind of learn
how to build some of these things, so we're going to use the pdsa-readmebox as the overall wrapper. We're then going to create a header area, we're
going to create a body area, and we're going to create a footer area. Alright,
let's take a look at how we lay a readme box out in HTML and CSS.

Build Readme Box Step-by-Step


Okay, so just like I've done for the other ones, I'm going to go ahead and just
layout all the structure first, so I'm going to put a readme block at the bottom
of my default page here (Typing) and I use the columns again, so I'll do just an
extra small 8 on this one. I kind of want it to go across the whole other 4s that
I have up here. Alright, so now I'll actually do it as a 12, and then --- let's make
it look exactly like the others right? There we go. Alright, so now let's go
ahead and lay this out, so I'm going to do a div class= and I'm going to do
again, I know what I'm going to build, so I'm going to go ahead and just put in
these things, but if you don't know you might want to just put in the divs first,
and then kind of fill it out. Sometimes helps to kind of lay it out on paper
sometimes, but it's up to you however you want to approach this. Again, I'm
going to have a header, but in the header is where I want to use a glyphicon,

so I'm going to use a glyphicon here, alright, sometimes it just helps to just
spell it out doesn't it, glyphicon, and then we'll use the music one, so there's
our header area, and then we're going to have a div with a class of readmebody, in this case, so there's our body, and then of course, we're also going to
have the readme-footer area. Alright, so within the body I'm going to use an
h1, maybe do something like Free Music, and then I'll put a little p tag here,
and the p tag I can say, you know, Each day we have a free song selected
especially for you, something like that. Down here in the footers then are
where I want to now lead them to more information about that, right, so again,
I don't have anything built at this point, so I'm going to just put something in
like this, so Lead me down to my free song or See my free song,
so something like that. Alright, so there's the overall structure, and again, if
we were to run this we're not going to see a lot, it's not going to look like
anything because we have not styled this at all. Alright, so let's go ahead and
create some styles, so again, we'll come up here to the top, and let's
layout the pdsa-readme-box like so. Alright, position I'm going to do relative
again, okay, because I am going to use again, I'm going to use some absolute
positioning within that, so I want to make sure that the wrapper itself is
marked as relative, that way any absolutes I use within there are absolute to
this relative style, I'm going to use a border-width here, so the border-width is
going to be thin, if I can hit semicolon, border-style is going to be solid, and
the border-color is going to be 31708f, and then the width of 100%. Again, I'm
making this readme-block, I'm building in such a way, so that it can work
within Bootstrap, that way I don't have to do all of the responsiveness, I don't
have to create media queries to make this work, I know that I'm going to place
one of these within the row and column that Bootstrap has, that way this
thing with the width of 100% will always take up what its container is. Alright, I

need a few more things here. Padding is --- 1em. The opacity, again, I'm going
to do a 0.9, there you go. We're going to use a margin of 0.3 and we're going
to set a minimum height okay, I just want a minimum height on this one, just
so I can have it looks, you know kind of stands out, but again, feel free to play
with that as you want. Now I'm going to also use a hover on this guy, oops, if I
can hit the right things there, there we go, a hover, and on the hover,
obviously, I'm going to set the opacity to 1, so again, --- I want to kind of when
I move over it I want it to change a little bit, so that the user knows that they
can then select something, and again, you might want to do the cursor
pointer. Alright, so then we have the readme-box, and I want to have a
readme-header, right, because inside of that we're going to have a readme
header. Now the header, you know, not too much stuff going on here, it's
just a -1em, and that takes away any sort of padding or margins that we might
have around it. 0.5em for the padding, I've got a background-color --- (Typing),
and I'm going to do a background-color of a #31708f again, and of course,
we're eventually going to eliminate those right, alright, because we'll
theme this one as well. Now on this one we also inside of the header we have
an i, but again, we could also use other things, so you might want to add
another one, which would be like a div if you wanted, or a b, just so that
whatever the user wants to use, as far as their glyphicon goes, any one of
these would then work, and I'm going to set the font-size here as xx-large like
so. Now if we run this with just these you can see I've got a little bit more
structure now, at least I have kind of the outline of everything. The body and
the footer have not been styled yet, but at least it's getting closer.

Adding More Styles for Readme Box

Let's add styles now for the body and the footer, so again, we do the pdsareadme-box, we then do the readme-body like so, and in the body, okay, the
position on this one will be relative still, I don't really need any absolute
positioning on this one. Margin-top, we're going to put up a little bit away
from the header, and margin-bottom we're also going to put it the same
amount away. Alright, so the next thing now is in the readme-box readmebody remember I had an h1, so I want to make sure that we have a specific
style for this one, so we're going to do a font size here of x-large how about,
there we go, and then we also had a paragraph if you remember, and again,
feel free to add whatever you want on this, so it's totally up to you whether
you want to use p tags or whatever, but these are kind of some standard
things that you might do is an h1 and a p tag. Alright, so now let's go ahead
and style instead of the readme-body the readme-footer. On the readmefooter this is the one that we're going to make now position absolute and this
one we're going to set the bottom to 0, we're going to set the right to 0,
we're going to set the width to be 100%, again, I want it to take up the full
container that I'm in, text-align ---. On this one I can do center or left or right,
whatever. You know, again, play with it, have some fun, and add a little bit of
padding so the words kind of appear above the bottom of the footer, and I'm
going to set the font-size on this guy to be small. Then the last thing I need for
the footer here is inside the footer I do have an anchor tag, so on the anchor I
do want to set text-decoration to none, and I also want to set a color on it.
Alright, so we've added quite a few styles now, we go ahead and run this guy,
and now it should look like something. That's kind of nice, right? We've got
the little music symbol for your music, so it's an extra-large font, we've got
the p tag here. Notice as I move over it here, as I hover over it, it does change,
the opacity changes, and then of course you can click on the See My Song

and it'll go right down to whatever page we chose, we haven't done that yet,
but we'll hook all of this up later.

Theme Readme Boxes


Just like we did with the summary blocks, we're also going to do the same
thing with the readme boxes. We're going to remove all of the colors from the
CSS and put colors into new styles and again, we're going to follow the
Bootstrap naming schemes right? We're going to use primary, we're going to
use success, we're going to use info, and you can add on as many as you
want. We're just going to do a few of them here, so let's go ahead and do
it. Okay, so just like we did for the summary-block we're going to come into
the styles in our default.html, we're going to cut all of these out. We'll come
over to the content folder and we're going to add a new style sheet, (Typing)
I'm going to name it pdsa-readme-box, there we go. Alright, so again, this is
the Structure for the Readme Boxes, and then up here we'll create the themes
for the readme boxes, so we know that for the readme-box we do have the
border-color here, so let's go ahead and cut that one out and put it up here,
and then we've got to give this one a name, so this'll be our primary here, so
for the primary we're going to use the 428bca for the readme-boxprimary. Let's just go ahead and copy this again, and for this one it will be our
.readme-header. Now the header down here, there we are, the backgroundcolor, we're going to cut it out of here, and place it up there. Again, use the
same color scheme. Alright, and then the last one that we have here is for
the anchor tag I believe, yup, that's the one, but it's on the footer not the
header, so in the footer we had an anchor tag on this guy, and let's go down
and find that one, so all the way down here at the bottom, color is red on this

guy, but for the primary I think we want to do our --- actually choose white on
this guy, I think that'll look that best. Alright, so there's the primary color. Let's
go ahead and just copy all of these and we'll change each one of these now
and we'll do our success color, so each one of those gets changed to
success. I did one too many didn't I, like wait a minute I did four, and I know
we wanted to use just three, there we go, so Success, Success,
Success. Alright, so this one is 3c763d. Now the background-color we could
just use something like green, okay, because that's the success color, and
we'll use maybe red for the footer anchor. Then let's create one more down
here, which will be the info, there we go, so I got three of those, and now we
can just change these to be 31708f, so we'll use that both here and here, and I
think for the color onthat we can stick with red, that's good, so oops, forgot
the hound sign. Wahlah. Now let's go back to the default page and let's drag
these in now, so we just keep building up our list of stylesheets on the pages
that we're using, I don't have any other styles now overriding anything, but I
do need to come down here because on a readme box I now need to add the
readme box and then primary or one of the colors in order to get it back to
what I had before, and there we go. Okay, so each day we have selected a
song especially for you, we hover over it and everything looks good. Alright,
so kind of neat just being able to theme. The next thing that we'll do then is
we'll start building another page here, so that we can move from one page to
another, and then we'll build up some more readme boxes.

Add a New Page with Readme Boxes


Let's go ahead and use some of those readme boxes, but use them on a
different page. One of the things that I had done down here is I had wanted to

create a page that gives me all genres, so we're going to create a genres.html,
so let's go over here and now, actually probably the best thing to do is let's go
ahead and save the default page, and let's just copy and paste it right back in,
and just rename this. The reason why is --- so I can just put genres up here,
but that way I have all of my links and everything already ready for me. The
whole menu system's still in place now, so all of this still is there.Now I've just
got to change the body area down here, so one of the things I'm going to do is
I'm going to start removing some things here, so I really don't need all these
summary blocks on this page, I'm going to kind of replace them a little bit, so
I'm still going to use the two rows and two columns approach, so I think I'll go
ahead and just leave all of those setup, but I can go ahead and remove the
whole last row. Alright, so now I've got this Genres here, page, so if we just
run it, I mean, you can see that it looks just like other one, but it's kind of
blank now, so we're ready to add, you know, whatever we're going to add
to this particular page, so in this case, what I want to do is now build up the
readme boxes for this, so let's go ahead and go to the default page, and let's
grab this readme-box and let's go ahead and put it down into the first row and
the first column, but we're going to change this a little bit, because we don't,
you know, this is for now Genres that we want to show, so let's go ahead and
we'll start, let's kind of get some of this stuff, how about we do this? Instead
of See My Song or something we'll just there's going to be whatever's here,
so now we kind of have a skeleton that we can use, and then we can just copy
from one to the other, alright, and so we'll do that in a second. Let's go ahead
and fix this up. I've got the music icon, which I think is fine for this for all of
our genres, so one genre that we're going to have is jazz and, you know, you
could put some information in here. Jazz is a genre of music that originated in
the late nineteenth, well you can never spell that can you, and early twentieth

century. Alright, so I'm not going to finish that up, I mean you guys get the
idea. Okay. Alright, and then down here what do we want to do? Well maybe
we want to go to a Jazz.html page okay, and we'll fill that in later, but it might
lead us to then seeing all the jazz songs right?Maybe on this jazz.html page
we would see all of the jazz songs, so that's kind of a good starting point,
so this is our primary greet me box. Let's copy and paste this down, and then
we can do another one, but his one will make success. Okay, so we'll use the
success one, and now we'll have, how about country. We can use the country
now, and country music, (Typing) Country music is an American popular
music that originated blah blah blah, and then we would have a country.html
page, See All Country Songs. We're just trying to get kind of some things
going that are kind of navigation, but also kind of summary information, so
then we'll do our next one, which would be then --- what do we have, we had
info, --- primary, no I did primary, so info on this one right? Let's make
sure. We got success, primary, yup, info would be the one that we're now
going to do, and this one will be for Rock. Rock music is a genre of popular
music that is sometimes called rock and roll. Alright, and again, we would
have them an HTML page for rock, and then See All Rock Songs. Let's see if I
got it right. It's a lot of typing and a lot of stuff to do on a fly, but hey look at
that, not too bad. Where we're at is this genres.html now in the site, right? If I
click on one of these I go back to the default page, click down here, and click
on genres, we then go to the genres page, and so everything kind of has the
summary information and finally we would get down to some places that have
actual data on them, and --- we'll finish up some of these pages a little bit
later, I'll probably do some of them off camera. Now one of the things that you
might notice here is that when Imove this way we're getting these transitions
whether we want them or not. Remember, the transitions are for when we go

to the smaller size. We don't really want it to happen whenever we're moving
from page to page, so let's learn how to turn that off.

Stopping Transitions When Moving From Page to Page


Okay, so let's shut this down. What we're going to do to stop this is we're
going to go into, we're going to create a new site area here, so I'm going to go
ahead and add a new Style Sheet and I'm just going to call it Site, site.css.
Okay, so it's inside of here that you can add some things, so actually I think in
the pdsa-sidebar it added some things that probably really belong more in the
site.css not in the sidebar one, so let's cut these out, and it's all of these guys,
the container, the body-content, the header, the header a, all of that. Now what
we're going to add on is something called notransition, so I'm just adding my
own thing here, and I'm saying I want this to apply to everything underneath
this particular style andwhat I'm going to do is I'm going to do a webkittransition, as you can see, I'm going to do a none and I'm going to mark this
as important, and I'm going to do this for literally everything. I'm going to do it
for the mozilla, we can do opera, o-transition, okay, I can do the Microsoft, and
of course, I can just do transition, which is our CSS 3 W3C standard. I'm
going to set these up. Now what this does, this takes away all transitions and
overrides anything else that's there. I'm now going to use this guy on each
page's body (Typing), so I'm going to do this on each page's body, so I'm
going to do it on default and genre like so. Now by doing that, right, let's go
ahead and run it now, so the default page comes up, so oops, I messed
up something didn't I? I'm sorry about that. I forgot to add in my style sheet
for site. I usually put my site on right after Bootstrap, so I'm going to put it
here on default and on the genre one. Alright, let's make sure everything's

working, so we're on genre, there we go, much better. Now we go back to


default. Now I'm not getting the transitions as I move from default to genres
we're not getting the transitions, and as you can see, we're also not getting
them there, so that's a little bit of a problem. What we're going to do is we're
also going to add now a script file, our own script file, so let's go ahead and
come in here, excuse me, and we're going to go ahead and add a Javascript
file and I'm just going to call it pdsa-common okay, again, call this whatever
you want, but now I'm going to simply write just a tiny little bit of jquery here
where I'm going to do a function, and then inside of that function here like so,
okay, we're going to write just a simple line of code, and it says, let's go find
body, and let's --- remove the class notransition. There we go. Pretty simple.
Now on the bottom here, right after the Bootstrap or just at least as long as
it's after the jquery, we're going to put that at the bottom of every one of our
pages, so we'll come down here to the bottom of this guy. What this says is
that hey, after the page is loaded we do want to --- remove that class that's on
the body, this guy, so that we can get the transitions back. Okay, so, oops,
didn't mean to click on that one. Let's go ahead and get back to like Default
and let's run this. Now if I've done everything correctly we still don't have the
transitions happening as I move between default and genres, but we get our
transitions back now. Not too bad huh? As you can see, we've done a lot, we
added some summary boxes, we added some readme boxes, we've
added another page, so things are starting to come together on our site, and
we really haven't done a ton of js or CSS, it's just been all pretty standard
stuff.

Module Summary

Okay, well I hope you saw that it's important to have a vision in your mind of
what you want to create as far as your widgets right? Build that HTML first,
add in the CSS then to style that, and I like using those wrapper classes like I
talked about. I also like adding themes, but you add those themes if
they're applicable for the widget that you're building. I like adding glyphs, it
adds a little bit of interest, so it's not just plain old words, and again, I like
placing these things into the Bootstrap columns using that width of 100%,
you know, position relative, and what that does is it allows Bootstrap to do all
of the responsiveness. You don't have to build that into your widgets with
media queries and things like that. Alright, I hope you enjoyed this module. In
the next module we're going to talk about how to make your checkboxes and
radio buttons just standout and look a little better.

Extending Check Boxes and Radio Buttons


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is Extending
Check Boxes and Radio Buttons. There's a lot of reasons why you want to
watch this module. We're going to create some compelling check boxes and
radiobuttons that are different from the standard Bootstrap ones that you
do. We're going to create them within a button, we're going to add glyphs, and
then we're going to change those glyphs using a little bit of jQuery to make
them just a little bit easier to press on and have just a little bit more visual
appearance to them, so let's get started.

Using Bootstrap Check Boxes

Okay, to start out with let's take a look at normal HTML check boxes. If you
create check boxes you use the input type= checkbox. You don't really want
to do this because they don't render well on all the vices or all screen
resolutions. You can use the Bootstrap styles for inline, which means they go
horizontally across, so just by simply wrapping them with a class checkbox =
inline will take that care of that for you or you can use them for vertical, and
for vertical you still wrap them into a class of checkbox, but then you add a
label on as well, and then they go down. This lines them up a little bit better,
and pretty much guarantees that they're going to work across almost any
type of device. Let's take a look at building these. Okay, so let's open up the
Genres HTML that we created, and let's go down, let's collapse the header
container, let's go down to the body container here, and what I'm going to do
is I'm just going to go ahead and create a whole other row again, (Typing) so
let's go ahead and get those there. Alright, now I don't need this. I'm going to
go ahead and just close that off like that, and then one thing I'm going to add
here though is I'm going to add text-center on this guy because I want
these things and I'm going to do just centered here. Let's do an h3 and let's
say, Display the following genres. Okay, so if you remember, let's go ahead
and review the genres here. This is where we have a lot of readmes, so maybe
all you want to do is display a few of the different genres, you don't want
everything, you know, assuming you had more here, so let's go ahead and
add in then just input type= checkbox like so, and then we'll do Jazz, we'll do
Country, and we'll do Rock like so. Alright, so now we have these in here and
there is what it looks like. Okay, well that looks not so good, so obviously if
you know Bootstrap, okay, one of the things that we typically do with
Bootstrap is we do wrap each one of these in a div, so put a div around each
one of these here, so we'll just do this real quick like so. Alright, so then what

we do is on the div we just add class= and then you can do checkbox- maybe
inline, we'll start with that one. We'll do this on each one of these divs here
and we go ahead and run it. Okay, so it looks a little better. I mean they do a
little bit with the stuff, but not really enough to make a difference, so one of
the things that you might consider is also use another Bootstrap class
called well, and I'm going to go ahead and do a well and I'm going to use a
well-sm and I'm going to wrap all the check boxes within there, okay, and so
there we go, we'll go ahead and run that now. Well that makes it actually stand
out a little better, it gives us a little bit more padding and margin around
things, so looking a little bit better. They still don't look that great, okay, and
obviously instead of the inline you could also do --- just the vertical type as
well, so now for the vertical type you typically wrap these inside of a label,
okay, so then you could add a label around each one of these like so, okay,
and then we have now them going down in a line now. I've gotten text
centered, so obviously they're coming out a little bit, but just wanted to at
least point that out to you. These are some of the different things you would
do with check boxes, however, we have some better things that we can do.

Check Boxes in a Button


Now what we can do is we can put check boxes into a button, so we're going
to combine the checkbox and the button classes from Bootstrap, so what this
does is it makes it a little bit easier to press for the user by wrapping these up
within the button classes, so here you can see all I do is on the label we put
the button and then the button default or primary, whatever color you want,
you put those around it. By doing this, right, we need a little bit of extra CSS
to style this correctly because we have to make some adjustments to the

padding, but minimum width, the left margin, and the text alignment. Alright,
let's take a look at how we do these. Okay, so what we're going to do is we're
now going to go back to the inline because that makes more sense, we're
trying to get ours to go across the screen not down, so that'll be one of the
first things we do is let's put these back inline, but now what I'm going to do
is add on to the label, the btn, and the btn-default classes from Bootstrap, so
we're going to do this so that we get that button effect like so. Alright, so let's
go ahead and run this. Now this isn't going to look that great yet because we
still need to style things a little bit okay. Now it does give us a bigger area to
press though, and that's what we're looking for, but you can see how things
are just a little off, and that's due to the way the buttons and the check boxes
line up in Bootstrap, so all we have to do is just add a little bit of styling. What
we're going to do is we're going to --- use the checkbox and we're going to
do .btn and then we're also going to do this for the --- checkbox-inline and the
.btn, so we're going to make a couple of styles herethat apply to both of
those, so first thing is the padding-left. We want to set it at 2em and we also
want to set the min-width here. Now you'll have to play with the minimum
width based on the style that you're doing, the words that you'reputting in,
okay, so it's just a little bit that you'll have to fix up there, so then for --the checkbox-inline only what we want to do is actually pull that margin-left
back a little bit okay, because it just makes sense when we're doing things
inline, and then the last thing we do is a checkbox --- in a label, oops, hit the
right keys there, there we go, so checkbox in a label or the checkbox-inline,
okay, and when it has a label in it as well, right, then we want to do the textalign of left.Alright, let's go ahead and run this and see if this looks a little
better. Ah, that's much nicer. What you can see here right is this is kind of
nice because what it does is it gives us a bigger area to press, so think about

running this on a mobile device, right, you don't have to just hit this little
square right here, you actually get this whole area that you can press on.Kind
of a nice thing to do is just wrapping this up into a button.

Check Boxes in a Button Group


The next thing we're going to do now is take those checkboxes and put them
within a button group, so button groups allow styles around check boxes that
kind of bring them all together, so what you do is you add the class div called
btn-group and data-toggle= buttons. Now what this does is this kind of brings
them all together, makes them float right next to each other, adds rounded
corners on the ends of them. Then what we're also going to do is add glyphs
within the label, so we'll add a span or you could add an i or a div, whatever
you want in there, and then just add whatever glyph icon you want, so now
you can use the glyphicons from Bootstrap or you could even use ones from
Font Awesome. In fact, I find the Font Awesome ones actually look a little
better, but I wanted to keep things kind of pure Bootstrap for now, so we'll
just start out with these. Let's take a look at how we build these now. Okay, so
now let's fix this up for using check boxes in a button. Now what we're going
to do is we're actually going to add a div around all of these, so I'm going to
go ahead and just take out these inner divs because we're going to eliminate
those guys, and now this div is actually going to be the btn-group, there we
go, and we're going to do a data-toggle=buttons, so now we've got all ofthese
guys, right, just the label portion of these, sitting within this button
group. Let's take a look and see what this looks like then. Now you can see
that it puts them together, right, so they're no longer free floating, we lose the
checkbox okay, and well you'll notice how they're rounded corners on the

ends, but these are now just square, as you would expect, but they still
ControlTemplate like certificate, so yeah we can check each one off and one,
but that's kind of a nice effect as well, so again, at any point here you can
stop and say, oh I like that, you don't have to keep adding stuff on right, but
there is one more thing you could do. Maybe you still want kind of checkbox
effect, but want to use these group boxes like this, so that's where what you
could do is you could simply add inside of the label, right, you could add a
spare with a class of glyphicon, and then glyphicon, and then it's -ok-circle.
We'll go ahead and add that one there, let's go ahead and add these now into
each one, but on the other ones what I'm going to do is I'm going to
use glyphicon-unchecked like so, so I'll only have one checked at this point,
basically the first one. We'll go ahead and run that, so now you can see that
we've added a little bit more visual interest. Now like I said, I kind of like the
Font Awesome ones, I think they look better here, but again, just to give you
the idea of using glyphicons. Now the problem is though these things will still
check like check boxes, but the glyphs are not changing at the same time, so
that's what we have to learn how to do next.

Toggle Glyphs in Check Boxes Using jQuery


Okay, so now we have to learn how to toggle the glyphs. Well, in order to do
that we have to add a little jQuery to connect to the change event of those
checkboxes, so we're going to add a little bit jQuery here, right, and we're
going to connect into each type of checkbox on change and then we're going
to write a function in here where we check to see and hey, is this property
checked and then if it is then we are going to remove the class glyphiconunchecked, and we're going to add the class glyphicon-ok-circle, which are

the ones that we just used, so if they're checked we remove the unchecked,
we add the ok-circle, and then in the else condition we would flip flog those. I
just didn't put them on here because of the room on the slide, alright, but let's
go ahead and write this and see how this works. Okay, so the first thing we're
going to do is we're going to set everything to unchecked, alright, remember I
kind of defaulted that first one. Now that we've done that let's come down and
let's write a little bit of script here, and it's not anything that bad, if you've
done any jQuery at all this is pretty standard stuff okay, so in the
document.ready what I'm going to do is I'm going to write a function, and
inside of here then what I'm going to do is I'm going to first off do a selector,
okay, so the selector is going to be --- type= checkbox, so let's connect any
input type that is a checkbox, and in the on change were again, going
to create another function here like so. Alright, so what are we going to
do? Well inside of here we're going to do an if statement to see if this, this
being the checkbox that we checked on, if the property checked is there
(Typing). That means, of course, that hey, something was checked. Now if
that's the case we want to say okay, this, the checkbox, let's move to your
previous element, so again, think about where we're at, so let's collapse this
guy, so let's think about this.I'm on input type, this is this in our jQuery. I'm
going to move to the previous to span because this is where I want to toggle
these glyphicons here right, so we've got the same design pattern all the way
through. We're saying okay, let's go to the previous one, and then let's
remove the class, right, and it's going to be glyphicon-unchecked, and what
are we going to do? We're going to add the class glyphicon-ok-circle. Alright,
not too bad, so that's the if statement. Now, of course, we need the else
because we also want to do the opposite as well, right, so if the property
checked is not there, then let's go ahead and flip flog these guys. We'll just

change these guys around, okay. Everything looks correct. Let's go ahead
and run it and see if I got everything typed in correctly. Hey, look at that. Now
everything checks as appropriate, so we're still getting the button group
action with it fading out the background, they're changing the background,
but we're also getting the effect of toggling these guys here. Now one of the
things, that's fine, okay, we've now connected to that, but what would happen
if we came up here and we said well, we're going to always just keep this one
checked or maybe that came from a backend system or something where it
checks that one automatically, so if I run this we're in an invalid state because
that one really should be checked. In that case, we'd add a little bit more
code down here wouldn't we, okay, so outside of the change event, which
means run this when the document's ready, what we want to do is kind of the
same thing that we got here, right, we'd want to use the remove class and add
class on all of that, except it's not on this because this doesn't have any
context at this point. Instead it would be input:checked, right, so that's our
selector that says, hey, if we find an input is checked let's go ahead and
remove the unchecked and add the other one, right, the ok-circle. Now the
other thing though is remember the label up here, the label is the guy here
that is actually workingwith the button group, so since that's the one that has
to be marked as active, so what happens is when you click on those the
active class is added to that label, so we need to do the same thing. We're
going to do the same thing here where we're going to, I'm just going to copy
this code a little bit, so same thing, if we find the input is checked, instead of
going to previous let's go to their parent, right because the parent would be
the label wouldn't it, and then let's add the class active. Now we've got our
jQuery, so that if we have something checked it will automatically flip the ---

icon andtoggle that, so it looks like it's actively checked. Pretty simple, but
kind of a nice little UI thing that you can add on.

Radio Buttons in Button Groups and Toggling Glyphs


Okay, so now let's take a look at radio buttons because radio buttons we're
going to style exactly the same way as we did the checkboxes, and when we
don't want to use the normal radio buttons from HTML, we want to use the
Bootstrap style, but we're probably going to also want to put them into
buttons right, give us a little bit more of a surface area. You might want to
even take advantage of the button groups, and then we might want to add in
the glyphs as well. To do that we still have to toggle using some jQuery, so
we're going to add some jQuery to connect up to the click event of the
buttons. We're going to pass in the container because we might want to
have multiple sets of toggle buttons on a form, so we want to name the
container of each one, so that we can specify which ones these belong to, so
we'll do something like what you see here where we'll toggle any group of
buttons within a named container, so I'm going to set an id at the button
group level called genreSelect, and then we look for any button classes below
that and we hook up to the unclick event. We then pass the parent name and
this, which is the button we just clicked on, to toggle radio buttons function.
This function is responsible for then setting all the glyphs to unchecked first,
right or basically removing the only one that is checked right now, because
remember, you can only have one radio button at a time. Then finding the first
selected radio button in the button group and removing the unchecked and
adding in the record, which is the --- record, it's the one that looks like a little
record. Alright, let's take a look at how we do this. Okay, so I'm not going to

go through the same thing I did with the checkboxes because everything I did
with checkboxes you can do with the radio buttons as well. Instead, what I'm
going to do is I'm going to create a new page, so I'm going to copy the
TemplatePage, I'm going to call this Songs. Okay, so we'll change the title
obviously. Alright, now down here where we have the typical row and
column type stuff I'm going to delete this last row and I'll inside of this row
here I'm going to add the same thing I have here. We'll copy this over and
we'll paste it in. Now what I'm going to do is I'm going to change all of these to
radio because we're going to use radio, so what I'm going to do on songs in
the next module is we're going to actually create a series of product
selections, so you could select a whole bunch of songs that you want to
purchase, so we want to be able to filter and say hey, let's display what? Do
we want to display All Songs, do we want to just show the Selected songs or
do we want to do the Unselected? This is like our genre filtering here, right or
song filtering, so let's actually call this songSelect --- that's our id. Now the
reason I'm doing this is because we could have more than one button group
of radio buttons, and we need to be able to identify them, so by group. If we
have an id around the whole button group that allows us to then say, hey, this
group of radio buttons is going to act all as a group. Now what I'm going to do
on this one is I'm going to call this glyphicon-record or record because that
gives us a little circle in a circle. By doing that, if we run this and take a look
at it really quick with our radio buttons, it's got the glyph icons, we can see
the little record, and then the unselected ones as well. Alright, so that all
works, that's great, so now what we have to do is get them hooked up right? I
mean they work as far as the button group goes, but the glyphs are not
changing. This means that we have to write a little bit of jQuery as
usual. Alright, so let's come down here and let's add a little script. Let's do

our typical (document).ready(function(), so there we have our document


ready, so when this is ready what we're going to do is we're now going to
hookup to a selector. Now the selector we want to take into account the
songSelect, right, that's our filter guy that we have there, and I'm looking for
any of the class buttons in there. I'm looking for all these labels. I want to
hookup to the click event of each of these labels, so I'll do the on click and
when they get clicked on I then want to again, write a function. What we're
going to do is we're going to call a function called ToggleRadioButtons,
doesn't exist yet, but we're going to now create it. Let's create our function
and what we're going to do is we're going to accept a groupName, right, that's
that id, that container id that I just had, and the current label that I just clicked
on, so up here I'm going to pass in then again, what, songSelect as the group
name, and I'm going to pass in this, and that's the thing that I clicked on and
that's the current item. Now again, I have to select using the groupName plus
anything that has the glyphicon-record because remember only one of them
can have this image at a time, so I need to find the one within this group that
has that icon on it, and I want to remove it. I'm now going to grab glyphiconrecord and I'm going to remove that guy and then I'm going to add the
class back on, which is the unchecked. Now all of them in the group are
marked as unchecked. Then I want to use the current one that I have, the
label, the current label, and what I want to do is I want to find now the first
thing that is the first child, so first-child, so I'm going to use that selector now,
and you can do it with this in front of it or you know, which means start at the
here and go down or you can just use that, either one works, and then we're
going to do a removeClass on what are we going to remove, we're going to
remove the unchecked on this specific one, and then we're going to add the
class glyphicon-record like so. Alright, so now we've written our jQuery to

hookup to everything within our songSelect group okay, because again,


remember we could have a whole other one of these and we want to
make sure that each radio button group works together. I don't want to just
blindly say let's hook into all buttons because if you had a whole other group
of them, then what would happen? All of them would be unchecked or
checked. I want to work with them as a group. Alright, now this one as we can
see here, I've got this one already selected right, the checked and
the glyphicon-record and all of that, so I really should have it as an active
here as well, okay, but I don't need to. In fact, we should do exactly what we
did on the other one, and that is we should just keep them all unchecked at
the very beginning here. Alright, so let's go ahead and run this and see if I
got everything hooked up correctly. Hey, look at that, it all works correctly
doesn't it. Check boxes, radio buttons, can all work within these groups. You
can add a little visual interest. Now again, I'm just using the glyphicons that
come with Bootstrap, but feel free to add the ones from Font Awesome. Like I
said, I think they look just a little bit better.

Module Summary
Alright, well this module we talked about making our check boxes and our
radio buttons look a little better by applying some Bootstrap styling, but
mainly by kind of placing them into some buttons right, and then we put into
button groups too, that way it gives us kind of even a more different look, and
then we added glyphs. Okay, now I like glyphs because they kind of really
give the user really kind of a nice looking UI element to them, so I use the
Bootstrap glyphs, but you know, you also might want to try out the
Font Awesomes. I think they have some really nicer icons and then, of

course, just writing a little bit of jQuery helps with toggling the glyphs right,
and we need to do that because you know, obviously we're not getting the
built-in functionality of a checkbox or a radio button, and we're going to see
where we use these a lot in the music site in the next module, so we're going
to add onto this and use these checkboxes again.Alright, I hope you'll join me
for the next module.

Custom Product Selectors


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is Custom
Product Selectors. There's a lot of reasons to watch this module. We're going
to build some custom product selection boxes, we're going to use the
Bootstrap panel classes, but add some of our own custom styles as
well. We're going to use the check boxes in buttons that we learned about in
the last module, we're going to use jQuery to calculate totals of every product
that you select, and we're going to use Javascript objects to create some nice
generic code that you can use over and over again. Alright, let's go ahead and
get started.

Introduction to Product Selectors


Okay, as I mentioned, we're going to use the panel classes that are built-in to
Bootstrap, so we're going to start with those, but we're going to then add
styles for each area in this selector, so we're going to have a title, we're going
to have a description, we're going to have a price, and then we're going to use
that button group that we learned about in the last module in the panel footer

itself, and that will be a toggle, so that you can select and unselect a
particular song or maybe album that you wish to purchase. The button group
uses check boxes that we covered in the last module, so we're going to use
the btn-group with the data-toggle= button, we're going to use the glyphicon
again, we're going to use an input type of select checkbox, and then we're
going to also use a label, right, so we're going to use a label for the word, so
we're combining quite a bit into that little checkbox in a button area. We're
then going to use jQuery to toggle the buttons and the text because what we
want to do right, is we want to respond to the change event on a checkbox, so
we can toggle the glyphs and the text based on whether it's checked or
unchecked, so what we'll do is we'll change the checked and unchecked
things, we're going to remove the class for btn-primary and btn-success, and
we'll change the color of the button and, of course, we will also change the
text. Alright, let's take a look at how we build one of these product selectors.

Build a Product Selector


Okay, so we're going to start in Songs.html. Now if you remember I created
this last time. Now I don't know if you noticed, but I also added a few other
pages, so I added a country.html, and this just is simply our menu system
that we had before, but then down here I simply added a table of
country songs. I then added jazz.html, which is the same thing right, it has the
whole container for the header area and the navigation, and then again, we
have a table of jazz songs, and then rock is the exact same thing. These
pages don't do anything. They are just there as kind of a way for you can see
that we can navigation through some of the various pages. The other thing I
did is I did add a Template page, whichhas all of the things that we've covered

so far. All the styles put in, all of our navigation is built-in, and then just has a
simple body content area, and you'll notice I added some nice comments
here, so you can kind of see where everything is, and just kind of separate it
out a little bit, but I use this then to create all of my new pages. Alright, just
wanted to kind of show those to you. Now let's go into the songs because this
is where we're now going to hookup one of these product selectors. If you
remember, I've already added like our little data-toggle, our little button group
for being able to choose which of these selected, unselected or All Songs, so
we have that row. What we want to do now is add a brand new row on
because we're going to now start building these product selectors, so we'll
add a row, and then we're going to add, of course, a column (Typing), and
we'll do a column, let's see let's do an xs and then let's do a 4 here, actually
no we should do xs it should be 12, and then let's go ahead and use sm as 4.
Then we could have a couple of these side by side or however many we want.
I'm going to do it this way. Now let's go ahead and start building up then a
normal Bootstrappanel. I want to use the panel-warning although again, feel
free to use whatever you want. Now if you remember we have a panel-body
and a panel-footer and a panel-header. We're not going to use a header in this
particular instance, but we are going to use the body and the footer, so then
inside of the body what I'm going to do is a span class =, now I haven't built
title yet, but I am going to, and this is where you would then put the name of
your artist for instance, or the name of the album or whatever you're going to
do, so I'm going to use the artist name here, but I'm trying to keep this kind of
a little bit more, you know, I guess just a little more generic here, so I'm going
to also build one called description, or I haven't built that yet, but we're going
to, and I'm sorry, I meant the title to be the name of the album, and then of
course the description would be the artist. Alright, so we have title

description and then the last thing, if you remember from our slides, was
the price. Alright, and then we can just put in whatever price we want, let's
just say $10. Alright, so pretty simple. Now let's do --- another div down here
in the panel-footer and what we want down here is again, one of those btngroups right? We're going to use a btn-group, we're going to use our datatoggle here equal to buttons like so, and then on this guy is where we start
adding all of our stuff, so we're going to add a label with a class of btn, and
then btn-success. Now I'm going to go ahead and make this guy active for
this particular one, okay, but again, it doesn't really matter what you do here,
so inside of the label then is where we're going to put other things, so we're
going to have a span with the class equal to our glyphicon, oops, there we go,
glyphicon, and then our glyphicon, if I can spell it here, -ok-circle, so that
means that one's going to be selected. We now have that. We're now going to
need our input, type= checkbox. I'm going to go ahead and name this,
although I'm not sure I need that right now, but we might later on, and I am
going to make this guy checked. Alright, so I now have an input, and if you
remember the last thing that we, oh sorry, one more label, and this is a label
for and that's going to be a name here, oops, I should have put an id in here is
what I should do too. Let's just call it chk1, so that way we have a label
for that, and then we can put in our Selected. Alright, so we now have, as you
can see, pretty good little set of HTML here. Let's go ahead and run it, but it's
not going to look like much yet because we really haven't created our styles
for here. We still need to do a little bit of styling, but you can see our check
boxes there, so that's good. Let's go ahead and go back up and let's add
some styles here, and then we can start building our styles.

Styling the Product Selector

The first style we created was title, so we'll build a title style here, and the title
style I'm going to do display: block, and we'll do a font-weight of bold how
about, and let's do a font size of 1.5em. I just want to make it a little
larger. Then we had the description if you remember down there and the
description again, display: block and I want each of these on a separate line,
so I'm going to do that, and then the font size on this case will be 1.25, so I'm
just trying to get some very specific look and feel here, and then we had a
price, so the price I'm going to do a font-size here, same as the other one, --1.25em. Now the other thing I'm going to do is I'm going to change a couple of
things here. The panel-body. One thing that I would like to do is have a
minimum height on this because I want them all to look the same when I get
them all into the page, so we're going to add more than just this one, so I
want them all to be consistent. Then I'm going to go ahead and change the
btn-group here and I'm going to change a couple of things within it, right, so if
it's a btn-group inside of the button I know that I have a span. I also know that
on that btn-group I'm going to have a button and I'm going to have an input
that is type=checkbox, so if I have either one of those what I want to do is add
a little padding to the top(Typing), and add a little padding on the bottom,
which actually I'm taking away padding on the bottom. Alright, so let's take a
look, let's run this. Hey, there we go. Now that looks kind of like what we had
in our slides, so we now have a little product selector box. All we have to do
now is make this work and we do that with basically the same jQuery that we
saw earlier, so we'll come down here, and then we will start adding in some
jQuery down at the bottom here to work with these boxes.

Write jQuery to Toggle Product Selector

Okay, so if you remember, we had added this code to ToggleRadioButtons


back on the last module, but in theGenres.html is where we have the code
that works on those checkboxes, right, so these guys here, so let's go ahead
and grab all of this code, copy it to the clipboard and I will come back in here
and we'll drop it into the document ready here, so this part should still all
work just the same, right, it's still using the same icons and everything.
However, there's a couple of additional things we want to do. For instance,
one thing I want to do is on this .parent, now the parent for this is going to be
the button, so what I want to do with that is I want to remove the class that I
had added before, which is the --- btn-primary right, I think I had, so if it's
checked we're going to remove btn-primary and then we're going to add the
class btn-success, so that's when it gets checked, and then the other thing
we're going to do here is on this again, the next thing is the label, so
remember we're checking on the checkbox here, so we're going to go up to
the parent and remove primary and change it to success, and then we're
going to also then do the label here, and change the text when it's checked,
so again, we go next, and then I can set the text here to be Selected like so.
There we go. Now I need to do these same things down here on the
opposite one, except I've got to then change these to the opposite, so
primary, and then Not Selected. Alright, so just a little bit of jQuery here and
hopefully I got it right. Let's go ahead and run this and see what we end up
with. Hey, look at that we're now changing to color or changing the glyph and
we're changing the text back and forth depending on what I'm doing, so this
will give me a niece little product selection.

Intro to Making Your Product Selector More Generic

Okay, the last sample I wrote works fine, but there's way too much hardcoding in that Javascript, so I'd like to be able to remove things like
glyphicon. Hey, maybe I want to use Font Awesome and btn-success and btnprimary. Hey those are great classes, but maybe I want to use a different color
scheme for that, and the word Selected and Not Selected. Maybe I want In
Cart and Not In Cart or something like that, so a lot of hard-coding going on in
that Javascript, so what we could do is we could just simply create a
Javascript object for each of those checkbox options that I've hard-coded
previously, so this'll avoid all of that hard coding, so notice the property
names, and notice then the default values are exactly what I have right now,
so you can see all of those there, but this gives me the flexibility to then
change them, so what I could do is I could modify those checkOption
properties to change the check boxes prior to calling any of those routines,
so in the document ready I would just setup any of the id or the checked
text. I set each one of those to what I want the values to be. Pretty simple. I'm
also going to create two functions to replace the code in that if and the else
statement that I wrote and I'm going to call one of the following based on the
check property, so I'll either call the set checked, which we're going to write
here in a second, and then we're going to use now the checkOptions, so you
can seeI've gotten rid of all that hard-coding, those literals in there or we're
going to call setUnchecked and again, use our checkOptions Javascript
object, so these functions will now be used to toggle the glyphs and the text
based on the values in the checkOptions Javascript object. Alright, let's go
ahead and change our code around and make it just a little bit more generic.

Create JavaScript Objects for More Generic Code

Okay, so the first thing we're going to do is create our Javascript object and
remember I called it checkOptions, so we're going to go ahead and create
this, so we're going to create an id. Now the id is really for the container
around these particular groups, this product selector or group of product
selectors, because I might want to have two different groups of selectors, and
I want to be able to modify things specifically for that particular group. We'll
create a selected glyph property, so this would be the glyphicon-ok-circle, so
there's our checked, and then we're going to create an unchecked glyph,
so then I could use the glyphicon-unchecked, hit the right keys here. Alright,
so then we have ourcheckedBtnClass, which is btn-success, and then we're
going to have an unCheckedBtnClass, which is our btn primary. Again, feel
free to change any of these right, and then our checkedText is Selected and
then the uncheckedText is Not Selected. Alright, so there we go. Actually I
think I did these as lowercase, there we go. Alright, so we now have our
Javascript object, so now what I'm going to do is I'm going to take the code
that I had written here inside of these if statements and I'm going to start
replacing it with these guys, but before I do that I'm going to kind of break
them out into a couple of different options here, so I'm going to cut out this
one, and I'm going to create myself a new function down here called
setChecked to which I'm going to pass in the control alright, and I'll move this
code down here, but now what I'm going to do is I'm going to now set my
checkOptions.uncheckedGlyph alright, and then I can
usecheckOptions.checkedGlyph and then for this one down here instead of
the button it's thecheckOptions.uncheckedBtnClass, --- okay, and then we'll
add in the checkOptions.CheckedBtnClass, and then again, replacing this
with the checkOptions.checkedText, yes, there we go. That's when I'm setting
the checked, so now let's go ahead and set UnChecked right, so this'll be for

the if statement portion, so again, we'll pass in the control that we're setting,
and I'm sorry, I need to change the this right, because we're now just going to
pass in this to each one of these.Alright, so now I do this basically just the
opposite don't I, checkedGlyph, uncheckedGlyph, checkedBtn, unchecked,
and then uncheckedText. Alright, not too bad. Hopefully I've got all of those
names spelled correctly, I think I do, alright, so now I can do SetChecked
right, passing in this, and then I can do the same thing on the else portions,
so instead of you know having all the code right there, I can simply call these
two little methods. Alright, not too bad, so now we have, so as you can see
we're responding to the click event for the radio buttons, we're responding to
the checkbox change here, and if it's checked, then we're going to call the
setChecked, otherwise we call the set UnChecked, alright, so not too
bad.Let's go ahead and run this and everything still works exactly as we
expect, that's great. Probably the last thing we should do down here though is
down in the document ready, so within the document ready what I want to do
is to check for anything that's already selected, right, and make sure that we
can do that, so I'm going to do a var checked = $ and then I'm going to use my
checkOptions.id + anything that's a btn-group, so what I'm doing is I'm
looking for a btn-group, and then I'm going to look for input:checked. Then if I
find that what am I going to do? setChecked on that checked collection that I
get back here, so that will then set all of those. Alright, remember these guys
here, those were for the selected ones up here in my row that is this All Songs
Selected or Unselected, so let's go ahead and run this one more time. These
all still work, we now have this guy, it all works, now we're ready to start
adding additional product selectors.

Intro to Calculating Totals

Okay, so once we add more selectors, we're then going to want to be able to
calculate the total each time we select or unselect a product, so we're going
to keep a running total going of all of the different products that we've
selected, so we're going to add another area that will have our total, and it'll
be a span with an id of total, and then we're going to just simply write some
jQuery that will connect up to the change event on each of those checkboxes
and calculate the total on the change. Now what's a little different though is
we have to get the price in each one of our product boxes and ifyou'll notice
it's got a dollar sign symbol because I'm here in the U.S. and then a period,
because that's out decimal place here, so we need to be able to strip out that
currency symbol, and then be able to add and subtract from the total area,
which, as you see, also has a currency symbol as well, so we have to
basically strip that out, add or subtract, and then format it back and put it into
the total area. We're going to do that by creating a stripCurrency function.
Now I've already written this one, I'm not going to go ahead and write it in
front of you, but you can see the code here. What I have is a set of optional
parameters, so you're going to pass in the value like $10, and then you
can optionally pass a symbol and a separator, and this'll make it a little bit
more globalized, so these optional parameters they simply check to see if we
didn't pass them in, and if we don't it just defaults, in this case, to a dollar
sign, the U.S. format, and a comma for any thousands separator. What we do
is we pass in the value that we then take out the symbol and replace it with
nothing, take out any comma separator or decimals separator, so if you're in
Germany it would be a dot for instance, and of course, look for any spaces,
maybe there's somebody put a space around it, so let's just strip those out as
well. What we end up with then is just the value. Now to format it back I've got
a formatCurrency function here with again, you're going to pass in the value.

That's the only thing that's required is the value that you want to now turn
into a currency, again, optional parameters for the decimals, how many
decimal places you want, what the decimal point symbol is, the separator, and
then the symbol. Again, if you don't pass them I've gone ahead and defaulted
it to U.S. format because I'm here in the U.S., but again, you could feel free to
change these around like the decimal point and the separator might
actually get switched. Alright, so then after that it's just a matter of breaking
into an array based on where the decimal point symbol is. We use a little
regex expression here to create currency with the separator in there. We join
them all back together and convert it back to a LocaleString that gives us the
number after the decimal point, and then we add on the symbol at the very
beginning, so pretty standard on the function here. Let's take a look at how
we built this now with our calculating totals.

Create Product Total Area


Okay, so here's our original panel. What I've done off camera is I added in a
few more. They're all exactly the same of what we just did, the only thing I did
is I just added in some additional ones, so that we have more product
selectors now. Here are then some different albums that we could select and
unselect and what I want to do is I want to then take whatever one's selected, I
want to take this currency here, the price, and I want to keep a running total
up here, so let's add in our running total. We'll come up here and above this
row we're going to add yet another row. Then let's go ahead and close these
guys off, there we go. Now, what I'm going to do on this one is I'm going to do
a column 6 here and inside of here I'm going to do an h3, Select Albums to
Purchase, and then I'm going to create another div class, col-sm-5, I want to

give myself a little bit of room on the right there, so I'm only going to go to 5,
and I'm also going to add another one in called totalArea, which I have not
created yet. I'm going to do a span and it will simply be Total and then another
span, but this span is going to have an id on it of total, and then I'm going to
put in 0.00. Now again, I'm in the U.S., so feel free to change that with
whatever you want. Let's go ahead and create this total area class, so let's go
all the way up here to the top, and let's create, and you know what, I'm going
to change the name of that, I'm going to stick more with kind of what, I don't
know why I did that, just thinking off the top of my head I guess, so let's go
down here, I want to change that and make that a little bit more generic. There
we go. Alright, so total-area, and so inside of here we're going to do a margintop of 2em, we're going to do a font-weight of bold, and we're going to do a
text-align of right. Okay, so let's go ahead and run that again, and take a
look. Now what I have is this Select Albums to Purchase and I have my total
area over here. We still need to hookup all of this stuff to actually connect
that, so we're going to have to now build this.Alright, before we can start
calculating all of that though we do need to add in those functions that
I mentioned, so I'm going to go ahead and grab these things now.

Write jQuery to Calculate Running Totals


What I have over here is a pdsa-numberformat.js, so I'm going to copy that,
and I'm going to go ahead and paste it into my scripts area, and then at the --bottom over here I'm going to go ahead and bring that script in like so.
Alright, so now we've added one more additional Javascript, and this one is
the one that has the things that I showed you on the slides, the stripCurrency,
and the formatCurrency, they're exactly the same as what I showed you on

the slides. Alright, so those are now available to us to use. What we have to
do now is simply create a little function here, so let's go down here, let's add
one more function, which is calculateTotal. What we're going to do is pass in
the current control that we clicked on, because that's the one that we clicked
on that has either selected or unselected, and then we're going tocreate a
total by grabbing, selecting the id total, and we're going to grab its text, so
that gives us the total amount that's in the total right now. Then I want to get
rid of any separators or currency symbols or anything. Alright, so that gives
us back that amount. Now I'm going to go ahead and do another one, which is
var price, and I'm going to grab now, using again a selector, but I --- already
just passed in the control, so I just want to find the closest panel. Once I find
the closest panel then I can find within that the price and from that I can then
grab the text. The control that I clicked on is one of these, let me go up here to
one of these panels that I've just clicked on here, so what I want to do is I
want to go up and find the closest panel, so if I click in here it's going to go up
and find the closest. Then it says, from there let's go down and find price,
the .price, and that then gives me the textural area, which is, in this case,
$11.00, and that grabs the price. I then need to do the same thing here, price
= stripCurrency of price. Now I have my two numbers. Now all I have to do is
check to see if the control okay, so if the $(ctl).prop("checked"), if that's true,
if it has been checked, then I want to add to the total, so Add to total here, and
we do that by saying total =, now here we can just use the parseFloat, and we
can take total = parseFloat, just to make sure we're grabbing everything as
numeric, I don't want it to treat it as strings, so we now have added to the
total, else if it's not checked then we need to Subtract from total. In this case,
we're going to take the total and we're going to subtract the price that we
just clicked on. Pretty simple. Last thing we have to do now is say okay, let's

go to the total, and in that text --- let's format as currency the total amount.
Let's do this, let's go ahead and just set a breakpoint right here, so we got the
calculateTotal, so now all we have to do is add this to the change event on
the checkbox. We go up here to where the change event is on the checkbox
and we now call our calculateTotal passing in this, so we do all the checking
and unchecking, and then we call the calculateTotal. Once we've got all that
we should be able to run this. Now we'll still have to do one more thing
before we're done, but let's at least get this part to work. Now we're going to
grab the total, which is 0 at this point, we grab the price we just clicked on,
which was 13, we strip them all, so that's what the strip does, and, in this
case, we're checking it, so we're going to take the 0 plus 13, give that back to
total, and what we should end up with now is in the total area 13. Now we
didn't take into account though that we already had one selected, so we do
have to take that into account. Let's go back over here, I can take off this
breakpoint now, so let's go back over here, so it's one more thing we have to
add within our document ready again, so we have to write a little bit more
code. Well if you look here, so what are we going to get, we're going to get
these input checks, so we've already got them here, so all I need to do really,
technically is just simply loop through. I could say, hey let's loop through
from one to checked.length like so, and then each time through we can set
the checked, and we can calculate the total, so this time it will be checked
subscript i. Alright, so this is now a little more technically correct because we
could have more than one thing checked. Before I only had the one checkbox,
so that worked just fine. Now if we've got multiple though, so then we would
want to go ahead and do this on each one of these. Okay, so let's try running
this, and we can now see that we have the value in there from the preselected

one, we can unselect it, we can select additional ones, and when we select
and unselect the running total stays up to date.

Generic Total Calculation and Final Sample


Let's now put everything into appropriate CSS and js files and we're going to
do one more thing and that's genericize that total calculation function, so just
like we did before, we're going to add another Javascript object to set
defaults, so you can see some of the defaults I have down here like the name,
the id of the specific area I want to put the total into, what's the price class,
and what's the price container class. You can see that each one of these is
reflected over in the little box over here on the right, the function calculate
total, we're just going to simply replace each one of these with the
appropriate generic value in the Javascript object, so let's go ahead and do
that. Okay, so let's go ahead and create a new script file here, so we'll just
create a new Javascript file, I'm going to call it pdsa-product-selector, and
then we're going to go ahead and grab all of the appropriate code over here,
so we need our Javascript object, cut that out, and pasted it in here. We can
do our whole document ready here if we want, in fact, let's go ahead and just
take everything from here, copy that, and we'll paste it in here, but there was
stuff in here for like toggling radio buttons, so we'll take that out, because
that's really only appropriate on that songs one, so we'll get rid of all of that
stuff that relates to just the songs. ToggleRadioButtons can go. Perfect. Then
back over here we can just get rid of what we don't need, so we need that, we
don't need the setChecked and Unchecked because that's part of our other
stuff. This stuff goes away as well here, so now we're back to where we were
when we first started this particular module. In the selectors though this is

where we want to add, yep, another Javascript object, so var totalOptions =,


so inside of here we're going to have the id, which I'm going to go ahead and
put in our default of total because that was the name that I had created before,
so I'll have our priceClass, you know, what's the class name, the style name
that we're using for price, so we're going to use that. I just keep hitting the
wrong key don't I. Then we also have what is the container class that we're
going to use to find the container that we're using, so in this case, it's a
.panel. Alright, so pretty simple on that, so now all we have to do is use the
total options down here in the calculate. This one will be totalOptions.id and
we use that here and we use it down here and then we had what, our
totalOptions.priceContainerClass, and then the totalOptions.priceClass. Now
let's go ahead and break this onto a few different lines, it's a little bit easier to
see than when you're reading on the screen. That's it. We now have these
options, these Javascript objects that we can use to set our various options,
which is nice. Alright, so we go back to Songs, we want to then go here,
and we want to drag our new product-selector into there. Now you should
always run this, check it, and make sure it still works after you start
refactoring and moving things around. It looks like everything's still working
good, so perfect, so everything's working, excellent. Our display guys up here
work, so no problem there. Alright, the other thing we're going to do is
we're going to add a new style sheet, pdsa-product-selector.css. Again, we're
going to come over here, and we're going to then grab all of these styles that
relate to the different product-selectors, so we can delete the styles out of
here, come over and drop those in, format a little bit, come back over here,
and let's go ahead and drop our new product-selector-css stylesheet back
onto Songs.html, run it one last time, and there we go. Very nice. We've now
kind of created a really nice product selection system.

Module Summary
Okay, in this module we learned how to combine Bootstrap elements together
to kind of create these new widgets and then we added our own styling within
those as well and remember I like to put my widgets into Bootstrap columns,
and that way I don't have to build all of that responsive coding myself. I then
created Javascript objects to avoid all that hard-coding, makes it a little bit
more flexible, and of course, move your jQuery into js files and you're CSS
into CSS files for reusability. Alright, I hope you enjoyed this module and I
hope you'll join me for the next one where we talk aboutbuilding some more
dynamic accordions that are built-in to Bootstrap.

Customizable Bootstrap Accordions


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is
Customizable Bootstrap Accordions. The reasons you want to watch this
module is we're going to talk about how to customize the
Bootstrap accordions or what are called collapsers. What we're going to do is
we're going to add some glyphs on the right and we're going to use different
glyphs for different accordions. We're also going to make those glyphs
change on open and close with a little bit of jQuery and we're going to use
data-attributes to avoid hard-coding anything. Alright, let's get started.

Adding Glyphs to Accordions


What we're going to do is we're going to add a glyph to the right side of the
panel and we're going to do that by adding another anchor tag with a glyph

within the panel-title element. You normally have one anchor tag to give you
the title of the panel, but what we're going to do is add a new one, and then
we're going to add our own custom style for positioning as well, besides the
glyph icon, so let's take a look at how we put this together. Okay, so back in
our music site let's go ahead and copy the template page and paste it right
back in and we're going to create a new page called Playlists. We're going to
create a Playlists page, so we'll change the title up here. Now we have our
typical container that we had for the menu system and all of that, but now
we're going to go down in here into the body content. Now for this one I'm
just going to use a row and a column that's basically the full width, so we
don't need anything other than that.Alright, now, as I mentioned in the slides,
we need to create a couple of styles, so let's go up here and create some
styles first, so I'm going to create on the panel, so I'm going to kind of extend
the Bootstrap panel one a little bit. I'm going to do a panel-heading .paneltitle. Alright, so within the panel, and we have a panel heading and a panel
title, what I want to do is I want to turn off the text-decoration. I don't want any
underline happening on those anchor tags, so we're going to,oops, sorry I did
forget the anchor tag, there we go, alright, so then the next thing I'm going to
do is I'm going to go ahead and create my own pdsa-panel-toggle. We're
going to use this a little bit later and that's the one that's going to give us the
float: right for our --- little glyph. Now within the first row I'm going to create a
div and I'm going to use the Bootstrap panel-group, and I'm going to give it an
id here, like playlist or something, and there we go. Now what I'm going to do
is I'm going to create panels within the panel-group, and this is how we create
an accordion. You can go back and look at getbootstrap.com for more
information on that. I'm going to use the primary color here, so we're going to
do a panel and then panel-primary. Within the panel I'm now going to do a div

class --- panel-heading like so. With anything we can have a heading, we can
have a body, so all of that stuff just kind of comes in just like you'd expect,
but let's go ahead and look at how we're going to do this. First thing I'm going
to do is I'm going to build an h1 here that is my class panel-title. I mean you
can use pretty much anything you want, I'm going to go ahead and just use
an h1, but now we're going to have two anchor tags here. Usually you just
have one and in that anchor tag is what you put in, such as My Top Rated, so
that might be a playlist that you have. Now the href for this needs to refer
down to what? To another div, so I haven't created that yet, so let's go ahead
and set that guy up. We have our panel-heading here, but what I'm going to
do is I'm going to create another once that's called mytoprated, so that's
going to be the new id. The class on this is going to be a panel-collapse. It's
also going to have --- collapse, and we're going to have one more, which is in,
which means it'll be expanded. Now within here is then where I'm going to put
my div class panel-body. Alright, so within the body is then where I put
whatever I needed to put, so maybe a header, and then maybe I have a table
of stuff. For now we'll just put My top rated songs are all in this playlist. There
we go. Pretty simple. Now that we have this mytoprated, that's what I'm going
to go ahead and hook this href up to. It's going to be the #mytoprated, there
we go. Then I'm going to do the same thing on the second one as well. Okay,
so I got that. Now the thing I want to add onto this though is a datatoggle, which is collapse, that's what gives us that functionality, and then
data-parent, which is going to be equal to --- #playlists, so it's going to
reference that id there. I want to do the same thing now on the other one as
well. These two need to match because I want both of them, regardless of
which one I click on, I want them both to be able to do that toggling. Now on
this one down here though I'm going to add on my pdsa-panel-toggle, and

we'll see why in a minute. I'm also going to add on a glyphicon and
the glyphicon-minus, so I'm going to use a minus and a plus sign
here. Usually you would have had just this, I'm adding on this additional
one. By adding this additional class in it does one thing for us now, which
means float it right, okay, later on down the road it's going to do something
different for us. Alright, so now let's go ahead and run this and take a look at
there we go, there's our accordion that has now, it just has one panel, but it
does have our minus sign there. Either one of these will actually do the
collapsing for me, so regardless of which one I click on they both work.
Alright, I'm going to bring this down one just because I'm running out of
different resolution, so now let's go ahead and add another guy, another
panel within our panel group, and this one'llbe how about let's see, Top
Country, so we'll have a Top Country list, so we'll change this to
topcountry, and we can now use this up here to collapse that area, so we'll
change this, this'll say Top Country, and then All of my favorite country
songs, so whatever, whatever we're going to have. We create a country, we
can create, how about one more, which would be a rock one, so let's create
one more, and that will be, how about we do Top Classic Rock. There we
go. Use that here for the header as well, and then this is Classic rock songs
which 'rock'. Alright, so again, we've got to make this top classic rock, we've
got to have a unique id for each one of these, so if --- each one then knows
which one they're going to expand and collapse, so again, if we've done this
right, excellent, they are all working correctly. Now I probably didn't want in
on all of them, so I'll probably eliminate that on the other two. Just want one
of them to be expanded when we come in probably like so, but at least they're
all working. Alright, so pretty simple, something a little accordion here, so

one of the things we've got to do though is we've got to learn how to change
the glyphs when we open and close these.

Introduction to Adding Glyphs Programmatically


Okay, so as we saw, all the glyphs were on each individual anchor tag, but
that makes changing them all very difficult because we'd have to actually loop
through or search through and find all the occurrences in the HTML, so
instead let's just take all those out and use jQuery to add our glyphs, so step
one is let's remove them all from the anchor tag, so all we have left then is the
pdsa-panel-toggle. Step two then would be to write jQuery in the document
ready, where we select all elements that have the pdsa-panel-toggle, and then
we add class, our glyphicon, glyphicon-plus or glyphicon-minus right? That's
kind of nice. We'll be able to do that. Step three then is we want to look for any
expanded accordions that have the Bootstrap class of in. Remember we had
the in on there on the first one. We're going to locate then the id attribute of
that particular one that has the in. We're then going to locate the href or all
local hrefs with that id and then we'll locate the next sibling with the pdsapanel-toggle. Once we've done that we remove the open glyph, which is the
plus sign, and we use the close glyph, which is the minus sign, which I did in
the last sample, but by doing this this is going to allow us to basically add
these glyphs programmatically, so we centralize all of that code of which
icons we want to use in one place, and that's in our jQuery, so let's take a look
at how we do that.

Add Glyphs to Accordion Using jQuery

Okay, so first step, remove all of the glyphicons from the anchor tags here, so
we find all the occurrences of those. Now I'm going to leave the in on the first
one and I've taken it out on the second if you remember. Alright, so we got rid
of those. Let's now go down to the bottom of the screen here and let's write
our typical stuff, so our document.ready, we're going to create a function here
like so. Alright, so what are we going to do inside of here? Well the first thing
we've got to do is find the pdsa-panel-toggle, so we're going to go ahead and
do a selector. Now I happen to know that I created that id called playlists, so
it's within that that I want to find all pdsa-panel-toggle, because I don't want
to just find anything, I may use that in another place, so I wanted to make sure
that I kind of did that, and now what we're going to do is we're going to add
the class, glyphicon, glyphicon-plus, so when they're closed I want the plus
sign to signify that they can open it, so now we're done basically, but let's
take a look here. Let's stop this and rerun it here. Has it worked? It has, so
there we go. We've now added those onto every place that has the pdsapanel-toggle, excellent. Now what we want to do is we want to remove this
one. Whenever we have that class of in, so let's go ahead and create a list that
again, we use our playlists and we look for .in, so anything that's within
there that has an in we want to get that collection. We can then create a loop
to go through the list.length, and each time through the loop what we want to
do is we want to grab that and again, do a selector. Now this is when it's a
little tricky because remember what we have to do, we have to go actually
look for the a What that gives us is --- select on that guy, because what we
want to go after is the attribute, and the attribute we're looking for is the id,
and then what we're going to do is finish that guy off, close that,close that,
and close that. Phew. That's a lot, so if you remember, what we're doing is
we're going through all the ones that have an in, we're going to find an anchor

tag that now has the same attribute of the id, so let's go back up here, so what
we've done is we're looking for anything with an in. There's an in right there,
so we go find this id, we grab that, that's an attribute, the id, and we say,
go find an href that has # and then that name. That's what this line of code
does right here. What we have to do then is we have to say, okay, we have
that, so now go to the next thing that has the pdsa-panel-toggle because the
next one that, within this right here, that has the pdsa-panel-toggle, would be
this guy, which is the one that's pulled to the right, and that's the one that
we're going to remove the class glyphicon-plus right there, we're going to
remove that one, and we're going to add the class glyphicon-minus. Does that
make sense? Hopefully. Alright, so let's semicolon that off, so there now if we
run this, let's see if we got it right here, there we go. That one changed to a
minus because that was the one that had the in. These guys are still pluses.
Now they're not changing yet, we're going to fix that here, but at least we have
the first part of this, which is pretty cool, just being able to toggle those
glyphs.

Change Glyphs Using jQuery


Now we want to make sure that they change, so the plus needs to go to a
minus and the minus needs to go to a plus. Well the way we do that is again,
select on the playlists, so we're going to do the playlists, and we're going to
hook into the Bootstrap hide.bs.collapse, so we're hooking into this event
here, so in this we're saying okay, let's go ahead and get that. Now it passes
us e (Typing). Alright, so we now have, we're hooking into the playlists and
the on, we're hooking into the on, on hide.bs.collapse. We're then going to --create a function here, so inside of here is where we want to do stuff. Well this

is where we want to remove and add classes again, so what do we do? Well
we kind of do what we did before. We have a pound sign okay, + e.target.id
because this passes us the id of the target that we just clicked on. That
happens to be the collapse thing alright, that has the in on it or not, so what
we have to do is we have to go previous, so that we can then find within this
guy the pdsa-panel-toggle. From there we remove the class and then we do
an addClass.Alright, so let me get this setup, and then we'll kind of walk
through it here. What we want to do is we want to remove the class, the
glyphicon-minus, and add the class glyphicon-plus, so again, we're doing the
hide portion, so we're saying get to the target id. In fact, you know what, let's
just set a breakpoint here and we'll be able to see this a lot easier. Let's click
on this, okay, and the id, there we go, is mytoprated, so what we're doing is
saying, hey, let's go find mytoprated, so it goes up here and says, oh, okay,
oh I found it, so --- my top right, there we go. Then we say, go to the previous,
so if you go to the previous, that means go to this guy, because
remember, we're here, this is the one that's clicked on, so we're taking the id
that we clicked on, we're going here, and then we're finding within here, hey,
find that a href or --- the thing that has the pdsa-panel-toggle. You can see that
right here, so find the next thing underneath of there that has the pdsa-paneltoggle, remove the minus, and add the plus, so we go ahead and run that, and
you can see what happened.Now we have to hook into the shell and do the
opposite, so I'm going to copy this and paste it back in, so now we're going to
hook into the show event, but on this one we've got to change this to a plus,
and this to a minus, but we're doing the exact same thing right? We're still
grabbing the id, going to the previous panel, finding within that the pdsatoggle, and then removing and adding. Alright, let's go ahead and run this
now. We have the minus sign, let's do this, hey there we go, we got them all

working. Pretty darn simple. Really a little bit of code. You know the whole
secret to this is knowing where you are in the Dom right, so if I know that
what I clicked on for the show and the hide, I know that that is this element
right here, so if I get this, and I'm here, I know that I have access to any
attribute on here, so I can grab that, and then I know well then okay, I
just have to go previous, and then within the previous thing find a class that
has pdsa-panel-toggle, find an anchor or whatever it is, and then I'm just
going to add and remove classes. It's that simple.

Use 'data-' Attributes for Generic Coding


Okay, so in the last example I still kind of hard-coded stuff, so instead of hardcoding what I'd like to do is use data-attributes on the accordion container
itself, the panel group, so at that level what I'd like to do is add a data-pdsacollapser-open, and add the open glyph that I want to use, glyphicon
glyphicon-plus, and then same thing for the close right, so I want to actually
add another data- that has the glyphicon I want to use for the closing. By
doing this it allows me to use Font Awesome or some other type of glyph and
again, the point I want to get to is it's in one place, I don't have to have things
hard-coded in jQuery, I only have to have it at one place, and that's at the top
of the accordion itself, so what we're going to do is in the jQuery we're going
to change it a little bit where we read the data-attributes, and we'll get each
attribute from the accordion container, so we'll just create a couple
of variables, and open that then goes and grabs that data, and a close, and
then we use that open whenever we're doing an add or remove. Then we grab
the close part from the data-pdsa-collapser-close, put that into a variable. We

then use that variable when we want to actually add or remove those as
well. Pretty simple. Let's see how we do this.

Adding 'data-' Attributes to Accordions


Okay, so let's modify our jQuery. We're going to do a var open = and then
we're going to do our selector here and we're going to use our #playlists and
then we're going to use the .data and then we're going to go after the pdsacollapser-open and we'll do the same thing for the close. Those are the two
things that we want to go after, so let's go up then to our panel-group, this
guy right here, that's the whole panel-group, and then let's add on those
appropriate data-pdsa-collapser-open --- and that's what we're going to now
put in, the --- glyphicon glyphicon- now this one will be what, the plus or the
minus? Always get that a little backwards. Alright, so let's go ahead and start
with that, and then this one will be the close. Alright, so actually I think it is
the other way around. Alright, then again, it doesn't matter, whichever way
you want to do it. Now that we have those coded there, these two lines of
jQuery will grab those, so now it's just a matter of us using the appropriate
things in the appropriate place, so this'll be the open. Anywhere that I now
have the remove with the plus I want that to be open and with the minus I
want to be the close. I'm just looking for each one of these right? Oops, I think
that one needs to be the close right? Oh actually, okay, so here's the thing,
when I'm here in the document ready I'm find using these variables because
these variables are available to me. However, once I get into the hide or the
show event I can't use those anymore. Unfortunately I will have to go back
and use these, so I have to spell these ones out for the open and the close, so
down here in the events I must use this one, and I must use this one to grabit.

I can't use those variables because I'm not within the scope anymore
right? Alright, so let's go ahead and just change these out again, so open
close, and open close. Alright, so I think that's it. Let me just try this. I think
this is actually going to work now, so we'll find out if I did it correctly. Okay,
look at that, it looks like it's going to work. Woo hoo. Alright, we love it when a
plan comes together right? Now what I've done is I've eliminated quite a bit of
hard-coding. I don't have to have the glyphicon all over the place because
again, if I wanted to change and use something from font awesome I'd have to
visit all of those places in the jQuery. Now I only have to visit this on spot to
make any changes of what I want, so the glyphicon leaders like chevron up
and down, maybe you want to use that. Alright, so just another helpful little tip
on extending these Bootstrap collapsers.

Handling Different Accordions


Alright, now the other thing that I want to accomplish here though is the
ability to have different accordions with different glyphs on them, so you
might use a plus and a minus like we have been doing on one accordion, but
maybe use a chevron up and down on a different accordion, and the way that
I've got this laid we should be able to do this. What we're going to do first is
we're going to move all the CSS and the js into appropriate .css and .js files
and then we're going to make the jQuery a little more generic, so we're going
to add a loop for each of the panel groups, each container of the accordion,
and we're going to add an id attribute to each container as well. What we're
going to end up with then is a data- for the name of the container as you see
here and that's going to be used by jQuery to setup each containers glyphs,
so this data-pdsa-collapser-name is actually going to just point right back to

the id. It could be genre, it could be playlists, it could be artists, whatever that
container name is that's what we're then going to use. This will allow us to
create multiple accordions with one set of jQuery, so let's take a look at how
this works.

Making the jQuery Generic for Multiple Accordions


Okay, so let's go back up to our group here, and let's add that one additional
data-pdsa-collapser-name and that's going to be, in this case, equal to
playlists because this one needs to match whatever our id is, so you might
break things onto separate lines sometimes it does make things a little bit
clearer. Alright, let's start up here with the styles. Let's go ahead and cut
these out of here and let's go ahead and add a new style sheet and we'll call it
pdsa-collapsers and we'll drop all of that in (Typing) and --- then let's go
ahead and grab that guy the collapsers and drag him right in. Perfect, so the
styles are there. Now let's go down and grab all this jQuery that we have, cut
it out of here, and under Scripts let's go ahead and add that now, a new
Javascript file, pdsa-collapsers. There we go and then let's go back so we
don't forget to do it because I've done that before, as I'm sure you guys have,
let's don't forget to add that back in. Perfect. Alright, so inside of the
collapsers.js stuff we have to still do another thing, so we have to get
our collapsers, and we're going to do that by doing again, a little selector
here, so I'm going to say let's go after anything that has data-pdsa-collapsername attribute, so we're saying give me all of those things as a collection.
Then I want to create another for loop where I loop through those
pdsaCollapsers.length. Now all of the code that we had before, so everything
inside of there now needs to go within that, so we're going to grab all of this,

we're going to cut it out, and we're now going to just simply paste it
right within the for loop, so let's go ahead and create another variable now to
grab out name. When we're within this loop what we want to do is grab the
name from here, because that's the name of the container, so we're going to
do a pdsaCollapsers, subscript i --- .id, there we go. Alright, so we then have
the name, we have the open, and we have the close right, so now we've got to
place the name here though don't we because that's what the name is, so
we'll delete that and we'll simply add name, delete that, + name. Anywhere
that we see that playlist or whatever that is we want to use the name, so we
just scroll down and we take a look, there's another one, close it out, add the
+, add the thing back in, pretty easy, and I think we'll find this down here as
well. Let's see, did I get that right? I missed one, sorry, there we go.All we're
doing is making this a little bit more generic here aren't we, so we just keep
coming down, we find this, alright, --- add the places to add the + name over
and over again. Pretty darn simple, + name. Alright, so all of these places
we're just going to add that on, and this is just all in the attempt to make sure
that things stay as generic as possible like so.Alright, that was pretty easy.
Okay, so now if we've done everything correctly we should go back to
the playlists and hopefully we can run. We've brought in our CSS, we've
brought in our js, and look at that, everything still works. Then we can add
another one of these and change the glyphicons.

Module Summary
Okay, in this particular module we saw how we could add a little bit more
visual interest to those accordions by using glyphs and we use jQuery to then
modify the glyphs, which is kind of nice, and using the 'data-'s instead of

hard-coding the glyph names. This keeps things generic, allows us to change
things in just one place. Also adding that id on, so that we make our jQuery
very generic and be able to handle multiple containers. Alright, well I hope
you enjoyed this module, and I hope you'll join me for the next one where we
talk about, don't keep your user waiting or how to handle progress messages.

Let Your User Know Something Is Happening


Module Introduction
Hello everybody. Paul Sheriff here with Pluralsight. This module is Let Your
User Know Something is Happening or working with progress
messages. There's a lot of reasons to watch this particular module. We're
going to learn different methods of updating users on the progress that's
happening on your website. We're going to stop users from clicking on
buttons twice, we'll create some pop-up messages, learn how to gray out the
background, and even add spinning icons from Font Awesome. All of these
are great indicators to your users that something is indeed happening and
not to startclicking anymore. With that, let's get started.

Disable Button and Change Text


Okay, so the main thing we want to do is inform the user when a button is
clicked. Like I said, we don't want them to click on a button again, so what
we're going to do is we're going to the onclick event. What we'll do is we'll
disable the button number one, and number two we'll change the text on the
button. By doing this the user knows that something's happening and by
disabling it, obviously they can't click on it again. These are good things, so

let's take a look at how we build this. Okay, so what I've done offline is I
created a Download.html, so I took our template page, just created this, so it
has the standard stuff like a container, and then our body content. Now in the
body content I added a new panel and within the panel I added a table, so let's
take a look at what this looks like here, so you can see it's just a table of here
are the songs that maybe you've purchased and you want to now download
them, and so you'd click on the download button, but obviously when you
click on that you don't want the user to download again, so you want to
inform them that hey, something is going on here. Alright, so the first thing
we're going to do is we're going to come down here to the bottom where
you see the button, and we're going to add on the onclick. In the onclick what
we want to do is call method or a function that we're going to write called
DisplayProgressMessage and what we're going to pass in is this, the button
itself, and then whatever we want to put in, as far as the message that we
want to change, so let's just put in Downloading for instance okay, and that's
what the button will now reflect after we create this. Down here let's go ahead
and add a new script, function DisplayProgressMessage, so we'll pass in the
ctl, which is the button itself, and the message that we want to then display
on that control. What are we going to do? Well we're going to say okay ctl,
let's first off set your disabled property to true. We want to disable that. Then
what we want to do is change the text to the message that we typed in. Pretty
simple and then we just return a true here. Let's go ahead and run that and
wahlah. It's disabled, I can't click on it again, and the message changed, so
the user does know that something's happening. Now obviously at this point
in your process on your website you would post back to your server, you
would start the download process, whatever that means to do for you.

Adding a Pop-up Message


Let's now add a pop-up message. We're going to do this by creating a div that
has some styling, as a label in it of what we want to display in our pop-up.
We're going to start it out with the hidden class from Bootstrap, so that it
stays hidden until we're ready to display it. We're going to apply some CSS
that we can style it, so that it looks nice and looks like a pop-up
message. We'll respond to the onclick event with our Disable button and
changing the text, then we're going to unhide that div, so it displays
something like we see here on the screen. Let's look at how to add a popup
message. Back in our download page what we're going to do is we're going
to come up here and anywhere within the body, it doesn't really matter, you're
going to add this div and, like I said, --- inside of the label we're going to put
then, Please wait while downloading or whatever your message is it's going
to be, make it applicable for your site. It's inside of this div that we're going to
have a class that I want to call pdsa-submit progress and we're also going to
use the hidden class from Bootstrap, so that makes this hidden until we want
it displayed. Now obviously we need to create this style, so that we can see
what this looks like, so let's create the style, pdsa-submit-progress, and we
have a lot to do here, so we're going to do position: fixed, we're going to set
the top at 50%, the left at 50%. Now I'm also going to set my z-index here at a
1, I want it to make sure it pops up on top of all the other HTML, and you may
have to adjust that periodically too depending on other things that you might
have. I'm going to set the height, in this case, to 6em, so you know,
again, whatever you need for that is fine, and I'm going to do 20 because I
know that will fit my message pretty well. Now the thing you have to realize is
that we're trying to center this, so I have a left of 50%, but I have a width here

of 20, so what I need to do is pull that back a little bit, and we do half this
width as a negative number, so if you change this to 24 make sure it's -12 for
instance. Alright, now besides that I'm going to set a little bit of padding here
for the top, and I'm just going to do like 2.5ems. I'm going to do a little bit of
padding on the left, so the message will kind of scoot over a little bit for me,
background-color I'm going to set as black, and the color I'm going to make
white. Now I'm going to use a border-radius because I really want this to have
rounded corners, so I'm going to 0.4ems on that. Now just to make sure, I'm
going to go ahead and add in the mozilla one and also the webkit styles there.
The next thing I'm going to do is the box-shadow, so this one I'm going to do
0.4em, and then I'm going to use rgba, so it's 0,0,0 that's back, and then I'm
going to do 60%, so this gives me a box-shadow that's kind of gray, and
again, I'm going to use the same one, I'm going to use the w3z, the mozilla,
and the webkit styles for that, just to make sure I've got everything
covered. Okay, well we've got a style, we have our pop-up message that's
ready to be displayed, now we just have to display it, so down here in the
function DisplayProgressMessage, which is called from our button, what
we want to do now is show that area, so we're going to find the div, in this
case, it has the pdsa-submit-progress class and we're going to remove the
class hidden like so. By the way, one thing you can do is you can factor out
the control here since you repeated it twice you could use some jQuery
chaining here, so you can put those all together, just makes it a little bit
cleaner. Let's go ahead and run this now, so we'll click on our Internet
Explorer, we'll click on the button, and there is our little pop-up. Now
obviously I'm not posting back or anything, this is just HTML, but at least we
have a nice pop-up message that the user has been informed, they can't click

on anything, and they have some real visual feedback that something's
happening.

Gray Out the Background


Another effective technique to let the user know something is happening is to
gray out the whole body of the HTML. What we're going to do is create a class
style that has a background-color of lightgray and an opacity of 50%, so lets
the kind of the underneath stuff bleed through. When we respond to the
onclick event in our button now we're going to still disable the button, we're
still going to change the text, we're going to unhide our divs, so that we can
get our pop-up message, and then finally we're going to apply this style to the
body element to make it grayed out. That's going to again, let the user know if
something's going on don't touch anything at this point. Let's take a look at
how we do this.Let's go back up to our styles again, and let's add a new style,
pdsa-submit-progress-bg for background. Inside of this on is where we're
going to use our background-color of lightgray, and then we're going to
set the opacity here to 0.5, that's 50%. Now that we have that, okay that it's
ready to go, all we have to do now is go back down to our script and do one
more final thing. We're going to find the body tag and we're going to add the
class, the one that we just created, pdsa-submit-progress-bg for background,
so we're going to still do the disabled, we're going to apply the message,
we're going to still pop-up our little pop-up message, and now we're going to
apply to the body that class style that I created up here that will give us this
lightgray and the opacity. Let's run this now and we click on the download
and you can see everything has happened, it's grayed out, so it just kind of

gives them another visual clue that hey, don't click on anything, we're doing
something.

Add a Spinner
The next thing we're going to do is add the ability to spin a glyph. For this
we're going to download Font Awesome and this gives us the ability to spin a
glyph, they actually have an fa-spin in there. We're going to modify our CSS
slightly because when we add this we need to make the message area grow a
little bit, and we have to scoot that text over to allow room for our little
spinner that we're going to add, so when we respond to the onclick event
we're still going to disable the button and change the text. We're going to
unhide the div to display the pop-up message and still apply that CSS to
the body, so it's grayed out, but we're going to add in the Font Awesome
here. There's one more thing we have to do. When we post back the problem
is Javascript is single-threaded, so we've got to give that spinner time to start.
To do that we're going to wrap up the piece that removes the class of hidden
in the setTimeout Javascript function. Let's take a look at how we do it. What
you want to do is go up to Font Awesome, just do a search on Google for
Font Awesome, find it, and download it. Once you download it and save it to a
folder, which I've already done here, you'll expand it out, and you have the
CSS and the fonts. Inside of the CSS you'll find a font-awesome.min, you can
drop that into your CSS folder, and then you can grab the fonts, just grab all
of them in here, copy, and paste them into your fonts folder along with your
glyphicons from Bootstrap. Now that we have those we just simply go to our
Content folder that I have here, grab the Font Awesome, and drag it in and
that's it. You now have access to all of those like 500 and some Font

Awesome Glyphs. What we're going to do now is down here in the label area,
so in the label, we've got the label, but what we want to add now is our Font
Awesome, so we're going to do that by just adding an i or a div or whatever
you want to do, and then we're going to use the Font Awesome. Now I haven't
run this, so I'm not getting my Intellisense, but basically I want to make a font,
bring in a glyph, make it about two times its normal size, they have one called
the spinner, and then when you apply the fa-spin it will literally spin any of
the glyphs that they have. Alright, so pretty simple. That's all we had to do
there. Now we do have to modify the styles though a little bit, so the pdsasubmit-progress, we have to modify, so I'm going to put a little note here,
bonified forefront awesome store. Even if you added any glyph you
would really have to modify this style, so I'm going to change the padding-top
a little bit, I'm going to change the width, I made it basically 3ems more than
one it was, remember it was 20, and I'm going to change themargin-left now,
which affects the label there. I'm going to do this one at -, oh excuse me, no
this doesn't do with the label, this is for the width, right, it always wants to be
half of whatever the width is, so I did have to modify that. Now I'm also going
to do on the submit-progress an i. I want to style this, so that its margin-right
is 0.5em. Alright, so hopefully I've got everything right there, now what we
have to do is go down and change this, because this part right here, that part
is the part that if we don't give that some time to release the thread and go run
something else, the spinner won't start, so what we're going to do is we're
going to use the Javascript setTimeout and we're going to use the function
here like so and we're going to just simply move that piece into there. Now we
have to add some time here and it doesn't matter how much time you add. In
fact, just doing a 0 is all we need for it release time for it to go run something
else.Now what's interesting is on an HTML page we're not really posting back,

so you don't even need the set timeout, but when you start --- doing a real
post back from a button you are going to need this there. Alright, let's go
ahead and run this, and let's click on the download and wahlah, everything's
grayed out, we have the button changed, and we're now spinning a little icon
in our little download message.

Module Summary
In this module we gave the appearance to the user that something is
happening. We made our UI kind of responsive to the things that the user is
doing and we're doing that by informing them that hey, something's going on,
you clicked somewhere, we don't want you to do anything else, so
we're disabling any buttons that we don't want them to click on twice, we're
graying out the background, we're doing anything we can to give them
feedback that yes indeed, something is happening. Another nice little trick is
simply download the file to Awesome Stuff and use the spinning glyphs that
theyhave to make it look like again, something is happening. Users, they don't
really know that it's just a little thing spinning there, they think that yes,
something is indeed happening on the server.

Course Summary
Well that about does it for this course. Well we went through and we learned
how to build left-navigation. It's not built into Bootstrap, so we had to build it
and style it ourselves. We learned how to create some dashboard widgets like
in summary blocks and readme boxes. We built some product selectors, all of
this within the context of a music site. We customize the Bootstrap accordion
and finally we learned how to give some progress messages to the user, so

they don't try to click on things a bunch of times. Well folks, I hope you
enjoyed it, I've had a lot of fun bringing this course to you.While you're at it
check out my other Pluralsight courses. I have Build your own Bootstrap
Business Application template in MVC, Building Mobile Websites Using Web
Forms, Bootstrap, and HTML5, How to Start and Run a Consulting Business,
The Many Approaches to XML Processing in .NET Applications. I also have
WPF for the Business Programmer, WPF for the Visual Basic Programmer
Part 1, and WPF for the Visual Basic Programmer Part 2. From Pluralsight my
name Paul Sheriff, thank you very much.