Slide Down (Tutorial - 71) - JQuery Video Lecture - Scripting

hi this is Alex from PHP academy' dog
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 a fact that this is an effect that
will slide down a particular element and
it works
probably best with divs so what we're
going to do is we're going to be
creating a div 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 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 style sheet so I'm going
to say link rel equals style sheet the
type is going to be text forward slash
CSS and the source we're going to locate
it in CSS forward slash style dot CSS so
let's go ahead and create this as style
dot CSS file now let's just save this
file out into a directory at CSS style
dot CSS okay so we can start to style
this div 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 top underscore message it's
just going to be a message that slides
down at the top of the screen and when
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 we've
got we see you're not logged in do you
want to sign up 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 margin top nor
pixels and margin left nor pixels in
fact no that's not important okay so now
for the top message
we want to apply styling we want to save
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 10px
let's go for 20 V X 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 its href okay let's go back to
our page you can see it looks like this
at the moment we obviously need to
change a few things like the font color
so we'll just say color hash FFF not
white and 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 as soon as we enter the page
now obviously this isn't functional
within an actual website it would get
annoying however just the effect itself
can be useful perhaps it could perhaps
you can include it in a specific
function on specific pages and based on
the fact if the users logged in or not
however for now this is just an example
ok so the first thing that we need to do
I've included obviously jQuery jeaious
that's located in the J's folder as well
as effects jeaious which is also located
in the J's folder now this is extremely
simple we have our div just up here now
we need to initially have this hidden so
there's one thing we need to change in
our style dot CSS and that is
display:none so now when we revisit our
page in the browser you can see it is
not active it's still there as an
element but it isn't shown yet so using
jQuery we can slide this down so we're
going to do this way
the document has loaded so use hash
sorry dollar sign document dot ready and
inside of here we create a function and
we give it a block so we have curly
parenthesis here as well as the front
function and 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 slide down
function so dollar and then inside of
here we want to say top underscore
message with a hash to reference the ID
then we say dot slide 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
on quite smoothly ok so we've got a
variety of parameters that we can give
here we can give the speed and we can
give the effect type how the effect
actually slides and we can also give a
callback function as well so I'm going
to just go ahead and demonstrate the
speed and if you go over to the jQuery
documentation 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 three seconds so that
slides down a lot slower obviously that
wouldn't be appropriate if we choose
something like 500 or 300 that's 0.3 of
a second so that slides down pretty
quickly so obviously this example
doesn't include for example a button to
actually you know make the difficult to
toriel we're going to be looking at the
slide up and we'll implement a button
that will actually slide this back up
again