hi this is Alex from PHP academy.org
with a video tutorial for the New Boston
in this tutorial we're going to look at
the jQuery slide down function and this
is effect that this is an effect that
will slide down a particular element and
it works uh probably best with divs so
what we're going to do is we're going to
be creating a div uh which slides down
at the top of the very top of the page
now the first thing we need to do is
style this div in order to make it look
um
make it look you know the right size so
we can fade it down or slide it down so
the first thing I'm going to do is the
inclusion of a stylesheet so I'm going
to say linkr
equals
stylesheet um the type is going to be
text SL CSS and the source we're going
to locate it in CSS SL
style.css so let's go ahead and create
this uh Style CSS file now um let's just
save this file
out uh into a directory uh CSS style.
CSS okay so we can start to style this
div um I'm going to include it first of
all here just so we have reference to it
so the div is there and the div ID is
going to be topor message it's just
going to be a message that slides down
at the top of the screen uh and I'm
going to put some content in here as
well so we see you're not logged
in do you want to sign up and we can
create this as a link just as an
example so now that we've got this in
place you'll see that it looks something
like this uh we've got we see you're not
logged in do you want to sign up uh
let's go ahead and style the page and
this div as well so the first thing we
want to do is change the body and we
want to say m margin top n pixels and
margin left n pixels in fact no that's
not important okay so now for the top
message we want to apply styling uh we
want to say the width so the width I'm
going to pick at 700 pixels I'm going to
choose a background color for this as
black and I'm going to choose padding as
10 PX uh let's go for 20 PX um we're
also going to want to change the font
size to make it look a bit bigger so 20
pixels let's just take a look at how
it's
looking and that's not worked because
this is not Source it's HRA okay let's
go back to our page uh you can see it
looks like this at the moment we
obviously need to change uh a few things
like the font color so we'll just say
color # FFF that's white and we we also
need to Center this as well so margin
left Auto and margin right Auto so now
that we've got the effect that we need
except for the fact that we need to text
align
Center we can start to actually create
something that's going to slide this
downwards uh soon as we enter the page
now obviously this isn't functional
within an actual website it would get
annoying um however just the effect
itself can be useful uh perhaps it could
perhaps you could include it in a
specific function uh on specific pages
and based on the fact if the user is
logged in or not however for now this is
just an example okay so the first thing
that we need to do um I've included
obviously jquery.js that's located in
the JS folder as well as effects. JS
which is also located in the JS folder
now this is extremely simple we have our
uh div just up here now we need to um
initially have this hidden so there's
one thing we need to change in our
style. CSS and that is display none so
now when we revisit our page in the
browser you can see it is not um active
it's still there as an element but it
isn't uh shown yet so using jQuery we
can slide this down so we're going to do
this when the document has loaded so we
use hash uh sorry dollar sign document.
ready
and inside of here we create a function
and we give it a block so we have curly
parentheses here as well as the F
function um parentheses just here so I'm
going to bring this just down a couple
of lines so we can work within okay so
now what we want to do it's a single
line to actually create this effect so
it's extremely easy to do and effective
we want to reference top message and
then use the uh slid down function so
dollar and then inside of here we want
to say topor message with a hash to
reference the ID then we say dot slide
oh sorry if I spell it correctly slide
down and then in Brackets we can give
some optional parameters in a moment
however just the slide down function on
its own will work so let's go back to
our page and hit refresh you can see
that that's slid down this div and quite
nicely as well and quite smoothly Okay
so we've got a a variety of parameters
that we can give here we can give the
speed um we can give the effect type how
the effect actually slides and we can
also give a callback function as well so
uh I'm going to just go ahead and uh
demonstrate the speed and if you go over
to the jQuery documentation uh there's a
variety of other options as well as the
Callback function that you can Implement
okay so I'm just going to say slow
you'll see that now the speed has
decreased very slightly if I was to go
ahead and choose say 3,000 that equals
to 3 seconds so that slides down a lot
slower uh obviously that wouldn't uh be
appropriate if we choose something like
500 or 300 uh that's 3 of a second so
that slides down pretty quickly so
obviously this example doesn't
include um for example a button to
actually you know make the um div go
back up again however in the next part
of the tutorial we're going to be
looking at the slide up and we'll
Implement a button that will actually uh
slide this back up again