jQuery Tutorial - 28 - Font size switcher Video Lecture | Importance of jQuery in Website Development - IT & Software

and inside of there we are going to
write something in a moment now what
we've done here is we've taken the
element that we've specified in the
function and returned or placed it
inside of here usually we would do
something like pee but because we've
already fed in the element we can just
substitute the variable name in there
now the part of the CSS that we need to
actually to get from the the func pair
the paragraph is the font size so we can
simply specify in here font size let's
go ahead and alert this current variable
out and see what we get when we click on
one of these links so we're going to
click on one of these links and we're
going to be returned with the font size
currently set for these paragraphs so at
the moment you can see it shows 16px now
we need to find a way to add or subtract
a value from this number 16 in order to
make the text smaller or the text bigger
and the problem is that we've got this
px in the way so what we can do is
inside of our text editor we can
actually wrap this whole piece of code
just here inside the pass into function
and this will essentially it will
essentially cast this value to an
integer so we're still going to alert
out this current variable however now
that we've used past int it will remove
the px part of the string so now we have
an integer of 16 so now we can start
adding or subtracting values on
depending on which button we've pressed
so down here we'll get rid of alert and
we'll create an if statement to perform
a calculation based on whether smaller
or bigger has been fed into this
function so I'm going to say if size is
equal to remember size is the text we
fed in here smaller or bigger if it's
equal to smaller we need to perform one
block otherwise if the size is equal to
bigger we want to perform a different
block so inside of the first block we
want to create a new variable and this
is going to be called new underscore
size and that's going to be equal to
current minus one we're going to - one
pixel every time we could put two I
suppose that would make it a bit better
to use now if the text size has been
specified as bigger ie bigger link has
been selected we need to again create a
new variable called new size and this is
going to be equal to current but this
time plus two so if we are clicking the
smaller link we're calling this function
with the elements that we want to change
the size of and we want to make them
smaller so when we come in here we get
the current size cost to an int and then
we check and perform a calculation based
on whether it's smaller or bigger that
we want to go and that's obviously minus
2 and plus 2 okay so after this if
statement we want to change the element
CSS remember again we're using the
element that we fed in which is the
paragraph tags or paragraph element and
we want to change the font size in here
so this is going to be font size now we
want to change this to the new size but
then we want to also include the
textural px on the end of this so just
putting new size here won't actually
work because we need to then append on
px so now it conforms to CSS okay so
let's just run through this quickly on
index dot PHP we have these two links
smaller and bigger when we click smaller
or when we click bigger we have to event
handlers here
this one here and this one here if we
click smaller we send the P to the
change size function and we give it the
value of smaller for this size variable
here and the same with bigger we work
out the current size we then check with
we want to say smaller or bigger and we
either - if it's smaller or + if it's
bigger then we reapply the new size plus
the PX that we removed with this past
int function back to the font size CSS
style okay so let's go ahead and test
this out now we've got the text as it
normally is let's go ahead and click
bigger you can see that the font size is
automatically being being increased by
two pixels we can do this again and
again and again to make these bigger now
you'll notice that it's only changing
the size of these paragraphs because the
selector that we used was four
paragraphs and again we can go ahead and
make these smaller and smaller and
smaller until they're essentially
unreadable and gone so that's how to use
selectors inside of a function we've
passed an element through a function and
this is a nifty little piece of code
that will let you increase and decrease
the font size on a page