jQuery Tutorial 23: Creating jQuery News Ticker - Part 1

Learn how to create your own jQuery newsticker and make it work like a charm!

---

Closed Caption:

what's going on guys and welcome to 23rd
chick ray tutorial in which will be
learning to create a kind of new sticker
effect in jquery so have you ever seen a
kind of new sticker with which
automatically takes here and there based
on your click on the next and previous
buttons so you could actually make it
like a covert maker where you have coats
store in an area and you can just those
quotes could automatically pop up once
the user clicks next next next buttons
and you pretty much understand what I'm
saying when we finally build this so
let's create it
let's get started with the spot boy so
create that first of all we need to
create some sentences to work with and
let's say
my new sticker
and let's give it
each new sticker
and I'm just creating
a rotting this is my sentence 1 i'm not
standing it very much
ally with that to you but i just want to
show you that how simple it is with
jquery to do such things
so let's say we have seven new stickers
and the first one being the active one
let's say out of this i create the ID
next
next
the righty previous
previous or rather this should be
spanked
so that it appears in all night
so let's check this out in a browser and
here it is so that's how it works
let's just give it a couple of breaks
for that separated
and we're good to go
what about this
two pipes
and obviously the formatting will ever
end so let's just make it right to sew
in the script section let's start with
our scripts
okay so yeah so let me explain this line
which is on my fingers and this line
right here technically means the same
line as documented ready function so
these two lines are one and the same
thing so document already function is
same as this line this line is just a
shorthand of this whole bunch of texts
with which we can use for replacement of
the slides so you may want to use this
line because it's a cleaner version of
this line and saves you a couple of
milliseconds so anyways let's get
started with the script section
and first of all what i would like to do
is I would like to have a even attached
to these two buttons that whenever they
are clicked something should happen
let's grab the idea of each of them and
since they are created on the document
we need not to use the on one we could
the sterically go with click and make
sure you spell it right inside function
let's do something now first of all what
you need to do is let's get this active
one into our chick ray and what we can
do is let's say variable active do is
another this one but just simply they've
got active so now active div is simply
distinct and why I'm not just using it
like this i'll tell you right now so
currently all the seven sentences are
visible to us but we would like to have
only one sentence was about to us at a
time because that's what you sticker
does and to do that let's hide it with
CSS news ticker
let's say display man and i hope you are
good with CSS so i won't be explaining
much of the stuff I'm doing right here
to you you could check out my CSS
tutorials to learn CSS one but coming
back to the tutorial now we have only
the active sentence at visible one and
we have got the reference of the active
inside this variable as well so the next
thing we want to do is remove active
class from this div and make the next
one active and if suppose we are on this
stiff then jump from this day to the
very first div let's program this bit so
first of all we would like to active
George remove glass active and right
here we are using a new method i guess i
didn't explain that in my previous
tutorials so you would seeing a bunch of
this in my this tutorial because there
are so many methods and jquery cannot
explain you every method individually so
you would learn all these with the
passage of time so remove class will
actually accept the argument without any
dog or hash are basically just a dog
because it is removed class method and
it would remove the class if present
from the element and it would not throw
you an error if the class is not present
so that's really much handy if you do
not need to check whether the classes
present or not with its statement so
remove class technically removes active
class from this div which is currently
active
and now I would like to try the control
to the next div and what I will do is
not next not add class active now what's
happening here is
the next method would actually select
the very next element which has this
active class or which is basically
stored in this active and now this is
the main reason I'm using this variable
as a reference for instance if i just
used are basically i'm sorry this should
be just active give because we are
already using the dollar sign the
constructor function right here
so for instance let's say if I just use
this right here
as this now this basically means Dave
active removeclass state so reactive and
now it became like this think and in the
next line jquery has no idea what is
David active because in the previous
line it already removed different active
class from everyday life in the Dom tree
currently only one so that is why i'm
using this reference active to work with
because even if i remove the glass from
this active give their reference remains
to that particular element only unless I
change its value to something else
so now active now we have to move this
class from this dave stay right here but
technically active is still referring to
distant only so now with active next
next is a method which will select the
very next sibling of this active or
basically this reference right here and
we are just adding a class of active to
it
now it pretty much seems good right now
but we've got a platform a small problem
and oh what's that
so small problem and what's that
let me show you now let's reload this
and we've got a nice pretty intense
let's click next next next next next and
next and next
now you see that it does not go back to
the one because when it is on this stiff
then on the next one it does not find
anything at it just simply removes the
act of class and this line fails to
execute so what we don't do is we would
like to check if the next of this div
actually exists or not so we'll do if
active talk next dot length
is equal to 0 and explain what I what I
did this then active dog next dot act
hope we want this an else statement and
if the lentils 0 that means if there's
an element then we would like the div
dot new sticker which is the first if
remember eq we used it right here and i
would like to add a class of active to
it so we are back on one and this thing
right here
one thing you should know that whenever
you perform any door manipulation with
shakeri you would always get a additive
result as the response from the Czech
way so when we do like active dr.move
class then check way is not returning us
a boolean value here
jquery would return is added value here
and we are not storing it in any
variable because we need not to work
with anything jquery is returning but
right here when we are using active dot
next then jquery would have done me a
one single element lamp of addy and if
the addy is empty
that means the length is 0 and if the
length is 0 that means there's no next
element to this active and if there's no
next element then what we can do is I
would just use the first new sticker
this one and i would add the class
active to it again
and otherwise continue with our own
previous task
let's reload this and we've got a
sentence 1234567 123 and finally you
have created your own infinite type of
new sticker so that's how we create oh I
guess I didn't created functionality for
the previous one and previous one is
pretty much the same just like the next
one let's go to the score a bunch
let's replace it with the human handler
for previous and for the previous one
instead of next I would like to have the
proof now this proved work similar to
next just it would select the previous
element instead of the next element and
similarly we are checking active proof
that length 0 then do this otherwise you
are good but right here we would need
not zero but the last element so how can
we do that let's see
so
if you have ever been into it to python
then the baton this is completely
irrelevant to right now but and just
discussing with you that in Python when
you create areas are technically called
as list in battle as a B and C then
let's say this is some containing a
variable than zero reference to aa1
refers to be an easy reference to see
but in Baton we have a as- indexing as
well and a negative 1 refers to the last
element negative 2 second-last negative
3 third-last cancelled and similarly the
same functionality we have in the eq
method and when we passed negative 1 2
eq then it means that go back even to
the last last element you have of new
stickers from negative 1 technically
means the last element since 0 means the
first- one would technically means the
last element the negative 2 would
second-last negative 3 4 5 6 7 and this
is pretty much handy when we are working
with dynamic you say the dynamic musical
you don't know the length of the number
of new stickers you have in your widget
now
we're going to go let's reload this 23
and these crews are all the way around
on the balcony give me a sick
ok ya got rid of that so let's reload
this and two three four five
let's go back works simple now let's
check this out next one work like a
chance and so the previous one so
congratulations you just build your
first new sticker with the simple simple
goal of jQuery so that's how you work
with jquery why you're creating widgets
and that's how simple jQuery can make
your work if you see that all this
discord is kind of very simple to
understand as human readable so i hope
you enjoyed your new sticker
and if I am in a good mood then in the
next tutorial will be working more on
this new sticker and making it a kind of
fancy one so i'll see you then
and don't forget to subscribe