Develop News Ticker Easily using jQuery

http://learnwithcrypters.com/jquery

Click this link to learn jQuery from scratch and to accomplish amazing things in just a few lines of code.

jQuery is a very popular JavaScript library which makes front-end web development easy. As its official tag line says, it is a "Write Less, Do More" JavaScript library. jQuery simplifies JavaScript programming. You can implement a complex functionality in just 5 or 6 lines of jQuery code where it might require 25 or more lines of JavaScript code to implement the same functionality.

In this video, we develop a new ticker from scratch using jQuery. A news ticker is nothing but a scrolling display of news headlines or important pieces of information on a website or television screen. News tickers are really useful when you have to display more than one piece of information continuously on your website. Once you watch this video, you will realise how easy it is to add unique features to your website using jQuery.

http://learnwithcrypters.com/jquery

---

Closed Caption:

let's try to build a new sticker now you
might have seen new stickers in many
different websites especially in popular
news sites
this is a new site and this is the new
sticker this one you could see that the
topmost item gets hidden and a new
information comes as the top item during
specific intervals if you look at the
new sticker you'll be able to understand
that the topmost item is getting changed
every time that is hiding the top one
the next one in the position becomes the
first and then we move the mouse over
the new sticker it stops that is now
this is the topmost item it is not
getting changed but when we move our
mouse outside the new sticker it again
changes so we are going to implement a
new sticker like this from scratch now i
have created a basic that page and add
reference to the required Jake verified
so first we need to have some content
isn't it so i'm going to add some dummy
content for the time being let me add an
unordered list and let the IDB same news
and let me add a number of list items so
Li we can add whatever text we want let
it be the first piece of news let me
create some the Macon dead like this
okay now I'm really with some content
that is check how it appears on a web
page now refresh see it is a normal an
ordered list with 12345 list items now
let us first try to implement the
functionality and later we can add some
style to make it more professional
so let us write a jquery code what we
have to do actually the first item
should be hidden and if you see this
cold you could find that the effect to
say slide up effect isn't it is getting
he then as sliding towards the top so we
can just add the slide up effect to this
first item but at the same time but we
have to do this hidden items should be
added at the bottom because if you see
this you could find that the same item
will be displayed after a number of
items that is this is not getting over
the same information is getting
displayed repeatedly so the item that is
getting hidden should be added at the
bottom so that it will be displayed
again once all the items are over so
let's try to create the function
function that is named it does start a
good and what we have to do we have the
first access the very first list item so
for that dollar how we can access it
let me first access the unordered list
using its ID then the first item can be
accessed using a life first if you
remember this is a position based
selector then i have the right slide up
ok this wills slide up the first item
but at the same time we have to append
it at that end of this an ordered list
so we are going to add a function and
pass it to the slide up event and let me
add our code here what we have to do we
have to append this first item that is a
current item so dollar this we need to
append it to there is a method name a
pen to this is similar to a pentameter
the implementation is same
the difference is that when we use the
pen to method first we specify the item
to be added and then be specified that
item to which we need to append it so we
need to append this to this an ordered
list so dollar hash news
this will be appended and then we should
display item isn't it slow slide down
okay i haven't closed this trouble codes
that is why I just showing us an error
now if you see this new site if you look
at this part you could find that it is
sliding down that is it is getting
displayed and here it is sliding up and
hear this sliding down so we are sliding
down the added item using slide down
method now will this implementer
actually new sticker
no we have to call this function to
Peter Lee isn't it then only it will
work fine
so we can use the JavaScript my third
set interval and we need to specify the
name of the function as the first
parameter start picker then we have to
specify the delay that is that interval
so let me set an interval of thousand
milliseconds that is one second
now let us check whether our code is
working the fresh see it is getting
added at the bottom by getting hidden
let me increase the time period 2 3
milli seconds and check the difference
refresh see every three second it is
getting hidden in the same time adding
to the bottom that is here it is getting
displayed and here it is getting hidden
so this is the basic functionality of a
new sticker and in this site if you move
your mouse over the new sticker it is
getting stopped is in it now the item is
not moving up when he be moved the mouse
outside the item then it is working as
before so to implement that began stop
over new sticker functionality on the
howard event so here is a however event
you can I
the specified two functions that is this
is handler in that is when you move the
mouse over the new sticker and this is
handler out so we need both these
functions because when we move in it
should stop and then be again move out
it should start as this here now it is
working when i move in it stops when i
move out it again starts so to implement
that what we can do is we can write
another function named function
start/stop occur and what we can do in
stock picker we can stop calling this
set in development method so there is a
JavaScript method corresponding to this
that is named clear interval and clear
interval method needs an ID that is what
began do is we can create a variable
named interval and while calling this we
can set the value to interval this is
the implementation of set in development
clearinterval methods and inside stop
ticker we can call the clear interval
method passing this interval value that
is it is a unique ID for the clear
interval to understand which method
should stop
so here we have called the clear
interval method and pasta intervent this
is the unique ID now we have to call the
stop the car method on the howard of the
unordered list so let me add the dollar
document ready part dollar document dot
ready function
ok now
as soon as the page is loaded that you
can should work right so what we can do
we can call this as soon as the page is
loaded so I'm moving it inside the
document already and we have to write
the however that is dollar hashname news
dot Howard and we can write as we have
seen here we can write two different
functions 14 handler in and the other 14
and let out that is this is when the
mouse is moved inside element and this
is when the mouse is moved outside so
while writing let me first write two
functions function this is the first
function then comma this is the second
function and in the first function but
should be called the stopped because
should be called so let me call the stop
the car because when we move the mouse
over the unordered list bender it could
functionality should be over and inside
this which function should be called it
should be the same that is it should
start again
so let me copy and paste it here ok I
think you understand the school because
we have done it from scratch itself we
have two different methods start occur
and stop thicker the star ticker
actually starts that because so we have
called the start ticking as soon as the
page is loaded using set interval and on
the heart of the unordered list we can
call two functions when his handler in
that is when the mouse is mood inside
this it should stop that is why we are
calling the stop thicker method here and
inside this function we are calling the
star ticker again and now let us check
whether it is working fine refresh we
have
specified a delay of three seconds that
is why it is working like this
now suppose I move my mouse over here
yes it is stopped
isn't it now that ticker is not working
let me move the mouse outside that occur
and see it is started again
so this is the basic implementation of a
new sticker now the issue is that it is
not looking like it cut is it it is not
looking as a professional new stickers
so we can do that using CSS we are going
to do that next
so let's try to add some style before
that let me wrap this unordered list
inside a deal so that we can add some
properties like background color border
etc so let me add a class name the class
name be safety car
okay this is just to style de to cut
ok now let me style it first let me
style the ticker itself that is the deal
let me set some background color it
makes you sick from the color picker i'm
choosing a lighter shade
ok this should be fine okay let me also
said the with let the weight bc
200px that the height be say 350 PX ok
let me also add a border that it be say
3px solid let me against you say color
from the color picker a darker shade
copy
ok now let's check how WS refresh
ok by this shone outside okay i have a
day and didn't do but this is not
removed that is why this shone outside
and made a fresh sea
it is shown inside itself but the issue
is that the date is our flown so what we
can do we can set the overflow property
to hidden so that it will not overflow
and let me also add some rounded corners
using the border radius property let the
radius B 15px let me also try to Center
the deep so margin 0px auto ok now let's
check our kicker see it is appearing
like this let me increase the vit and
reduce the height that the Whitby say
250 and the height be 350 itself so
let's check the fresh see it is
appearing like this what we can do is we
can align that takes to be justified
so what we have to do that let me add it
in the end lie text a line that it be
just to fly
okay and let me also remove the bullet
points using list style type 2 1 this
will remove the bullet points so let's
check now the fresh see the bullet
points are removed and the text is now
justified
ok let me remove the space by setting
the margin and padding of the unordered
list so unordered list let the margin be
same 1px and padding also be 1px ok
let's check it fresh
ok now it appears like this that made it
increase the vid a bit more because it
does not seem nearly 350 and let me
reduce the height say 200
ok now how will it look like fresh see
it is looking more good and let me also
add a border at the bottom of every item
so i can do it like border bottom let it
be
2px solid it means selected color darker
color from here
copy ok
and one more thing i can do is i can set
height for this thing so they'll be more
space the total itís let me check it
the total height is 200 so let me set a
high top say 70 PX so there will be a
gap between each item noticed it is more
congested so depression see now it is
looking like this see this working
perfectly fine that may reduce the time
delay to one second
so let us see it very kyookie refresh
see it just getting changed and when i
move my mouse over the item it stopped
again when i move my mouse outside again
it works so here is a new sticker we
have implemented this from scratch
you can even add some majors are some
valuable text content here we have been
reducing the me text you can add useful
text and have it on your website to
display some useful information a new
sticker is really useful when you have
to display more than one piece of
information continuously so you can
implement a new sticker on your website
like this