jQuery and AJAX Tutorials 27 | Optimizing jQuery Arrows 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 27th tutorial so for now
you guys already did a lot and if you
were following along you you build the
jQuery chat pod and you know some basics
of jQuery and you're actually capable of
creating a website right now and we
coded some CSS and HTML code and stuff
and now we're working this jQuery
portfolio which is going to look very
cool and well before we continue
building it or improving it I want to
make a simple visual improvement on it
and because I don't like this errors and
like the space between the arrow and the
and uh and this edge and stuff so let me
yeah fix real quick so I hope you guys
using Google Chrome since this is the
best browser well it's not the
commercial for the Google Chrome of
course but anyway if you're a web
developer Google Chrome is a very very
good browser for you so what I want to
do now I want to adjust the position of
this two arrows so what do I do i just
select this element in the google chrome
developer tools which are really awesome
and I have this image so what do I have
I don't want to work a lot on it well I
I know there are way better workarounds
on it so but I wanted to do it very
quick and simple so what I want to do is
I want to move this arrow to the left a
little bit so I will use a negative
margin left property for it I'll just
say - one pixel and you can use your up
and down arrows on your keyboard to
adjust it so I'm now on just I'm just
going down and well now see when it's
three pixels it fits perfectly so we'll
keep it and we I also would like to add
some opacity to this arrow because I
don't like weight appears on the screen
it's
I want to make it like semi-transparent
so I always said it transparency to 50%
like this well now it looks way better
and we had just have to memorize what we
did we picked up the image the left
image and added some negative left
property of three pixels and opacity of
0.5 and now let's just go ahead to the
project to the CSS file and grab the
left image so and what I want to do I
can actually just copy this right here
and paste it here and we can actually
use this opacity what I did end so I
just cut the opacity I'm not gonna
delete it and we can paste it right here
for the TD elements so as well as right
so that left will be a 50% transparent
and now I'm going to do the same with
the right one because I hope if I pick
the right one and say margin right of
minus three pixels it's going to as I
want it so let's just go ahead and make
a test yeah now it looks way better and
now I'm happy and we can continue
working on our jQuery portfolio so the
first thing I want to do I want this um
I want there these arrows to kind of to
to uh to be not to be so transparent
when I hover over over it so the user
gets kind of an effect of hovering over
and and just add some interactivity to
it so let's just go ahead to our jQuery
source code to our JavaScript code and
add a new selector a new event for the
hovering over so what I want to do is I
want to select the TD element which is
actually ha hold on let me go a little
bit I can select the right and I can
select the left at the same time
and I can use the smiles over function
and let's just try to go ahead and say
this dot CSS remember we did it like in
the very first tutorials we use this CSS
function of jQuery to edit CSS run time
and I can set its opacity to let's say
hmm 0.75 so let's just just go ahead and
test how it's gonna look like yep I
hover over it and it's highlighting but
I wanted to do the same for the mouse
living and I want to set the opacity
back to to 0.5 so I'll just cut I just
copied this the same event the same
selectors and instead of mouse over you
can say mouse leave help so I'm not sure
actually guys to be honest you but but
it works oh my god it works yep so holy
cow it works anyway uh you know jQuery
is so is so great well it's so intuitive
I actually forgot this function for
Mouse leave and I just typed mouse leave
and it worked all right great
all right guys I see you I'll see you in
the next tutorial and I hope you liked
this one and if you have any questions
just go ahead and ask I will be looking
forward to answer all of them so I don't
promise but I will try alright guys have
a nice day and see you soon