jQuery and AJAX Tutorials 10 | jQuery Scrolling Video Lecture | AJAX and jQuery: Complete Series for Beginners - Front-End Programming

hey what's up guys my name is Ilias and
welcome to the tenth jQuery tutorial and
this tutorial we are going to upgrade
our chat pod well we didn't really
program the chat bot itself but we build
this interface using HTML and CSS and we
program some features using jQuery and
this tutorial we are going to fix some
issues which you already have and the
next thing I'm going to fix this
you know after a while after a while
chatting you get the following effect
that when there is a lot of text and but
the diff element doesn't have any fix-it
height you see that the div element gets
gets bigger and kind of pushes the
controls just pushes the text box and
push the 10th button and everything and
we don't have that it's not cool so what
we want to have we want to want this div
element to be fixed like to have a fixed
height and every time the text reaches
this bottom we want a scrollbar to
appear right here and we want to be able
to scroll within this display so yeah
and we're going to do this using jQuery
as well but in order to make this div
element fix it we just have to add one
line of CSS code so just go ahead and
check our CSS and find the container
which is the container by the way is
this display and let's just say that it
has to be a fixed height so it's not
minimal height anymore and just only add
one line of code which is overflow
scroll so what or orful scroll does is
well I'm just going to show it to you I
chat a while I have lots of messages
right here and
then you see that the development
doesn't gets doesn't get bigger so it
just get this scroll bar right here so
you can scroll but well it's that's not
it because you see every time I normally
user enters a message you usually well
every time you chat on a chatroom and
you enter a type a message and press
Enter you would usually see your message
right away so the like the chat blog
platform Scrolls down automatically to
the very button so that you can keep
track of the of the newest messages and
in order to do that we are going to use
jQuery so let's just go ahead and try
that right we want something to happen
when the user clicks event I mean when
the users when the users click send the
send button or just press the Enter key
so this is the right place to write the
following try the code for this for this
back for this for this to fix this issue
and what I wanna have we want to want
the script to scroll down or
automatically every time we enter a
message so let's just go ahead and
select the container and because this is
develoment we are going to work with and
there is a jquery build function called
scroll top and in the properties we just
we need to get the containers height the
containers current height and that's why
we need to select the container again
and then there is also a jQuery built-in
function called prop and it cans it just
fetches a property of something and in
this case we have to get the property
called scroll height well it's kind of
easy to memorize I'm called the scroll
top function on the container and the
scroll top function requires and
requires a number which is integer and
this number is and in our case this
number is just the height of the of this
element of this container so I think
this code should work so let's just go
ahead and test it all right and not
forget to reload the page every time you
make make make some changes in your
document so let me just chat a lot like
chat like that yeah and you see that the
scroll bar goes to the bottom
automatically without doing anything and
this is pretty much this is pretty much
how how the modern chat rooms work
you see I set this message even though
well even though it's all the way in the
bottom because it Scrolls down for me
automatically so that's it for now for
this tutorial and I hope you guys kind
of learn your stuff we will we didn't
really learn a lot in this video in the
previous video as well but just I
promise you if you guys watch this this
video tutorials set all the way to the
end you'll learn a lot and you'll be
able to build a cool website using
jQuery and HTML and CSS and all this
stuff so so that's it as I said I'll see
you guys in this tutorial have a nice
day