jQuery Tutorial - 6 - Document Ready Event Video Lecture | Importance of jQuery in Website Development - IT & Software

hi this is Alex from PHP academy' de org
with a video tutorial for the new Boston
in this video tutorial we're going to
look at the document ready functionality
and how we can use it in our page to
perform a specific set of operations
when we load our page now the document
ready functionality is part of
implementing jQuery and setting
everything up so when the document has
loaded we can actually start to perform
a specific set of functions or something
within our page this is important
because we don't always want to just
allow a user to click something and then
perform an action we might want
something to happen as soon as our page
is loaded and we can also use this as an
example of implementing jQuery in order
to for something to happen when we start
our page up so let's go ahead and start
writing out the code now I'm going to
create an area here which is a div I'm
going to give this div an ID and then
I'm going to simply close it here so the
ID is just going to be message and this
is going to be welcome to my website now
the main aim of this video is to when
the page loads we want this to
automatically fade in so so we need to
make this div actually initially hidden
so I'm going to use an inline style
attribute which I highly discourage I'm
just using it for the purposes of this
tutorial obviously if you're using CSS
it's extremely good practice to put this
in a separate file however just for the
purposes of this tutorial I'm going to
use the style attribute so I'm going to
say display:none and this will just hide
this the contents of this div when we
load up our page so let's refresh you
can see that we have nothing although we
do actually have a div here now what
we're going to do with jQuery is when
the document loads we're actually going
to fade this div in so it's the opacity
going to start zero and it's going to
graduate and eventually be a hundred so
100% visibility so we have jQuery
included down here however we want to
create an another file which handles the
fading in of this div so let's go ahead
and create another file and let's just
save that inside of our J's folder and
I'm just going to call this init Jas now
I've caught it in it because it's this
is short for initial light
initialization or initiation sorry and
inside of here we're going to actually
use the document ready functionality so
I'm going to use a dollar sign and I'm
going to say document then I'm going to
say dot ready so this here is the
function ready this here is the
reference and that's the reference to
our overall document inside I'm going to
create a function and I'm going to
create the blocks here and I'm going to
pull that down so essentially now what
we've done is in here after our document
is ready everything inside of this will
be run okay so we can either call
external functions for example we might
have a function up here called load
posts and we could say when the document
is ready load posts okay so that's an
example of what we could do however just
for now we're going to create some
simple functionality and just embed it
within this function so what we need to
do is we need to reference this ID which
has an ID of message or reference this
div sorry which has an ID of message so
let's go ahead and do that so dollar
sign hash message
remember we using hash to reference the
element dot fade in and then we're going
to give it an a parameter of fast and
this will just fade it in quickly in
fact let's just do slow so we get more
of the effect and visible so now what
we've done is on the document ready
status we have faded in using the fade
in font
at a time of slow you can also use a
numerical value in here so an integer
such as a thousand which would be one
seconds because this is a one second
because this is in milliseconds or you
can use textual representations of speed
so I'm going to use sorry not show slow
and this will fade in the message div so
remember we've initially hidden it
however this functionality will actually
start to gradually show it until it's at
100% visibility so let's go ahead and
just refresh the page okay so it's not
working and the I I know why it's not
working we've created out init j/s file
how we've not included it onto our page
so again this is extremely important we
create a script here to include this
external file so the type is text
forward slash JavaScript the source
again we've saved it in our j/s folder
and this is init j s so let's go ahead
back to our browser and refresh again
and you can see that this div has just
faded in so using the ready
functionality R and referencing the
document we can perform a series of
operations based on when the document
has loaded and we can then you know do
things like call external functions for
example to load a specific set of news
or anything so this is an extremely
useful part of implementing jQuery to
actually allow you to perform things
when your page has loaded