jQuery Variables, Capabilities, and Conditional Logic Tutorial

by birtanpublished on July 3, 2020

hello everyone welcome to another lesson

in our introduction to JavaScript with

jQuery series in our first lesson we

looked at some of the reasons we use

javascript in the first place we learned

how to handle events traverse and

manipulate the Dom we learned how to

receive a bit of data without a page

refresh but we didn't get into the meat

and potatoes of actually programming

with jQuery so in this video that's

exactly what we're going to do we're

going to learn about variables functions

and conditional logic but let's not get

hung up on terms at the moment just know

that we're going to learn how to write

more powerful code and we're going to

learn how to not repeat ourselves so

without further ado let's dive right in

on the right side of your screen is a

simple page and as we scroll down this

page we see that new elements sort of

fade or slide into view once they're

visible so as we're scrolling we see new

content slides in now let's not debate

whether that's an actually useful effect

or not just know that some clients may

request it and I think it's a great

example to sink our teeth into and learn

more about variables functions and

conditional logic so in this copy I've

removed all the JavaScript so we see

that it's just a standard page no jQuery

no effects are taking place so we're

going to rewrite that javascript

together so you can learn about

programming with jQuery let's get

started

so before we write any code let's

describe what exactly it is that we want

to happen let's use this second image

this image of the pink flower as our

example so initially we want the image

to be invisible or hidden and we want to

display it once the user is revealed

about this much of it via scrolling so

we know that javascript is great at

handling events so our first event that

we want to use as a trigger is once this

much of the image has been scrolled too

so let's start thinking about how we can

write our code to make that possible so

let's begin with our standard jQuery

code which is jQuery document ready and

this will just tell the web browser to

wait until it's ready and then run any

code inside these brackets so if we know

that the event we want to

once a certain amount of scrolling has

taken place we're going to need a way to

keep track how far down from the top

we've scrolled so there's this neat

method and jQuery named scroll top and

we can run this method on any object and

it will return a value in pixels

telling us how far we scrolled so if we

run this on the browser window itself we

will get a returned value now if we

refresh the page right now we see that

absolutely nothing happens because we

haven't done anything with this returned

value yet but we could for example

output it in a message box so alert and

then if we refresh we see 409 so that

means where we are now we've scrolled

down 409 pixels from the very top so

this is a very useful value to have so

we probably don't want to just alert it

in a message box what we likely want to

do is save it for later use in our

calculations so this is where variables

come into play variables are used in

most programming languages and

JavaScript is no different so you can

think of a variable as a box that you

use while you're moving so let's say

you're moving to a new house and you put

all of your belongings that have to do

with your kitchen in a box and you

labeled that box kitchen so in our code

let's create a new box but obviously

technically speaking we're creating a

variable so var and then we give it a

name we can give it any name we want so

instead of writing kitchen on the box

let's give this a name relative to a

project so we'll say window scroll

position top ok and then equal sign and

then this is where you get to define

what you want to put in your box so we

want to save this value of how far down

we've scrolled so now we've created a

variable named window scroll position

top and anytime we want to access this

later on in our code we have this magic

key word this magic moving box that

holds it okay so we have this variable

and it keeps track of how far down the

page we've scrolled but it only updates

when the page first loads so for example

if we go back to the version with

JavaScript and we refresh

we see that as we scroll things are

happening so obviously that value that

keeps track of how far down we've

scrolled we need that to not just update

when we first load the page but we need

it to update every time we scroll so

let's hop back over to the version

without the JavaScript the version that

we're riding right now and back to our

code let's write code that fires every

time we scroll

so we'll say jQuery window scroll and

then let's move this variable inside

this function okay so now every time we

scroll not that we can see it yet cuz

we're not outputting anything but this

variable is getting updated real time so

every time we scroll window scroll

position top our moving box is getting

updated with our current scroll position

so let's add a little bit of code so you

can actually see it updating on the fly

because I think seeing it visually will

really help you understand what's going

on so I'm going to add this div with a

class of status to our HTML I've got a

bit of CSS that just positions it in the

top right and let's update the text that

sits inside that div every time we

scroll so all we need to do is select

that element status and then we're going

to use the HTML method to control what

text is in it and we're going to just

going to use our variable as the output

so if i refresh we see that we have this

black box and every time I scroll it's

updating it with the variables value so

this value corresponds with how far down

we've scrolled and you can see that if

we're at the very top and we haven't

scrolled at all

it's zero but remember for our effect we

want to know when an item begins to

enter the bottom of the window the

bottom of the viewport so then once it

enters our vision then we can sort of

start to fade it in so let's create

another moving box on there variable

that holds how far down the bottom of

our screen is so we're going to need to

know a few things to calculate that

we're going to need to know how far down

we've scrolled but more importantly we

need to know how tall the browser window

currently is so we'll create a new

variable and when they

window height and then inside our moving

box or inside our variable will say

jQuery window run the height method to

retrieve the height and we'll create

another variable that simply adds these

two because that will tell us not only

how far time we've scrolled but we're

the bottom of the browser sets as well

so the new variable we'll call it window

scroll position bottom and it's simply

window height plus window scroll

position top and let's update our logic

so the status box gets updated with that

variable so now when we refresh we see

that even if we're at the top this reads

671 and if we make our window smaller

and resize again says 570 so now our

logic is getting pretty complex it's not

only updating on scroll but it's finding

out the height of the window and our

scroll position and then adding those

two numbers on the fly so you can see

the advantages of variables they allow

us to keep track of different values and

stay organized mentally so moving on we

want to figure out a way to fade in this

flower once it starts to become visible

as a user Scrolls so once it reaches

about right here so the last number that

we need in order to do this is we need

to know how far down the page does this

flower image sit now luckily jQuery has

this really neat method named offset

which makes it easy to figure out how

far the image sits so we'll create a new

variable and we can have anything we

want I'm going to call it object offset

and actually first let's go ahead and

make sure that that image has unique

class and it does so this particular

image has a class of example photo and

none of the other images or elements on

the page have that class so great so

we're going to say jQuery and we'll

select that element so example photo and

will simply say offset now the offset

method it doesn't just return one value

it returns an object which has two

properties so we'll create another

variable and we'll name it object offset

top

and all this is is simply this value but

we only want top so this will make sense

in just one moment

now instead of outputting the scroll

position up here just for debugging

purposes let's output the offset of this

image so we'll move this line down below

all of our new variables sure to add a

semicolon here and we'll change the

output to this new object offset top

variable so if we refresh we see that we

have this new value 1573 and then some

fraction but that's really useful

because that's telling us how far down

from the top this flower image begins so

now we have all of the numbers and

variables we need to come up with our

calculation to fade this image in at

just the right moment so let's begin

writing code to do two things first

we'll hide the image and then secondly

we'll use conditional logic well say if

the bottom of the windows scroll

position is larger than the offset of

the image then reveal the image so let's

start writing the code to make that

happen so we'll begin by hiding the

image we'll select the element jQuery

example photo and we'll adjust its CSS

so we use the CSS method and we say

opacity should be zero don't worry about

memorizing all of the syntax in this

lesson I will include a link to the

source code so you can review the syntax

at your own speed but if we refresh we

see that the image is now invisible so

the next step is to use a bit of

conditional logic we will include our

conditional logic within this scroll

function so that it fires and checks the

logic every time we scroll the page so

we will say if and then this is where we

include our condition so if this

condition is met then we'll run some

code so we'll say if window scroll

position bottom is greater or larger

then object offset top then run this

code so anything in between this bracket

and this bracket will be run if this

condition is met so for example let me

just copy and paste this so if we said

if 2+2

double equal sign for that would always

be true obviously that could never be

false so if that were the case then

anything we included in between this

break in this bracket would always run

but for our example this is the exact

logic that we want to run so if it's

false we don't want to run this code so

the code that we're going to include

conditionally would be to animate the

image in so once the image should be

shown then run this code to show it so

we'll say jQuery example photo we want

to animate its transparency to make it

visible

so we'll say animate and see the opacity

and we'll set it to full so 1/4 full

opacity and we'll make the animation

take 3 seconds just so it's a bit drawn

out so you can see it take place in this

video so now if we refresh and we scroll

down to just the right spot

you see that our conditional logic says

hey the image is now visible or would be

visible so let's show it and now we want

to be sure to not overload the browser

and what I mean by this is even though

the image is animated in if I scroll

down again the browser is still checking

to see if this condition is true and if

it is it's trying to animate the image

so as I scroll is trying to animate the

image again and again and again and

again and it's continually checking this

logic even though it no longer needs to

so that's terrible code on computers or

devices that don't have ultra powerful

chips you might actually freeze the

browser so there's no need to write

wasteful code like this so what I like

to do is to include extra layer of

conditional logic to avoid that

situation now we want to make sure that

this anime line only runs once so once

the image is animated I'm going to chain

on another method and I'm going to say

add class of animation complete so then

we're going to run an if statement

inside another if statement so we'll

create a new if statement and we'll say

if the element so example photo if it

has a class of animation complete

then run a bit of code but there's a

neat trick with this house classmen has

class method if you include a

exclamation point at the beginning of

this check you're basically saying if

this element does not its the negation

so if this element does not have a class

of animation complete then run this code

so we're basically just going to copy

and paste this code into this if check

and then refresh and now it's exactly

what we wanted and we're never going to

overload the browser now let's clean

house a bit we no longer need this

status div telling us what the return

value is so let's remove that from our

HTML and we'll also remove it from our

JavaScript let's review our progress so

if I scroll to the top of the page and

refresh you see that we have an image

that is aware of just the right moment

and then fades in now what have we

learned in order to achieve this we've

learned about variables we've learned

about conditional logic and the last

topic for this lesson is going to be

functions you'll recall that earlier in

the lesson I said we would learn how to

not repeat ourselves and functions are

one of the best ways to avoid repeating

yourself so for example what if we also

wanted this yellow box to fade into view

once we scrolled to it well if we take a

look at our current code it's not very

reusable because we're directly calling

out the example photo class so how can

we adjust our code so that it's flexible

and reusable so that we could easily use

this same sort of logic on this yellow

box so for example this yellow box has a

class of sidebar and we know that in

jQuery it's very easy to simply select

an element and then run a method on it

so for example if we wanted to hide the

yellow box we just need to select it and

then run the hide method so if i refresh

we see that it's gone what if we could

write code so that instead of hide we

had our own method and we could name it

anything we wanted so we could call it

reveal on scroll and what if that worked

well it can work we just need to create

a function it can serve as a method that

houses this Lodge

but is flexible and reusable so let's

get to it so let's remove this dummy

code and let's begin creating our new

function so what would we call it I

believe it was reveal on scroll

so we'll say jQuery reveal on scroll

okay

so let's add a comment that says and our

function here okay

so now we need to create this function

in a way that is flexible and reusable

so that we can use it on any element we

want so we're going to include a little

bit more code before we start getting to

the meat and potatoes we'll say return

thiseach okay now any code we include

in between this bracket in this bracket

will run and it will be relative to the

specific element that's running on now

that may not make sense at the moment

but bear with me what we've really done

is set up our code in a way so that we

can now use the this keyword so for

example we could say jQuery this hide so

now we have this function and this is

obviously not what we want but just to

show you how this is working if we say

jQuery sidebar reveal on scroll it's

hiding itself because our function is

saying hide and it's using the keyword

this so and now we have code that is

reusable so now all we need to do is

move all of our logic that we wrote

earlier with these object offset top

variables in this conditional logic we

just need to move that into this

skeleton for our new function and we'll

be all set so let's cut and paste our

object offset variables in our

conditional logic we'll cut and paste it

into our new dynamic function we need to

make sure and go through any where we

see the selector of example photo we

want to replace this with the keyword of

this to make our code flexible so

and we also see that logic here as well

as here okay now we also want to make

sure that we remember to include the

code that initially hides the object in

our new function code so let's take this

line and cut and paste it into our

function and get rid of example photo

and make the selector use the this

keyword now let's keep in mind this code

is probably going to funk excuse me fire

every time we scroll so we probably want

to use the conditional logic to make

sure that this code only runs once so

we'll say if this has class of hidden

and then we want that to be the negation

so if it doesn't have a class of hidden

already then run this code and give it a

class of hidden so now we have all of

the code necessary related to the object

that gets scrolled in in this new

function named reveal on scroll so now

we can call that function on any object

we want at any moment we want so down

here we still have the variables that

keep track of the window scroll position

and they're firing every time we scroll

so now down here let's say we want to

use our new function on the side bar so

we'll say side bar reveal on scroll so

if we refresh this won't work and it has

to do with the topic called variable

scope so what this means is that because

these variables that keep track of the

windows height in the windows scroll

position because they are created within

this scroll function our reveal on

scroll function can't access these

variables so if we want our reveal on

scroll function with the code which

lives up here if we want that to be able

to access these variables these

variables need to live one level up

thing to live towards the root of our

code so let's move these variables to

the root

our code so that they'll be accessible

from other functions but keep in mind we

do want them to still be updated every

time we scroll we just don't want to

initially define them in this scroll

function so I want to leave this code in

here but I'm going to remove the VAR so

this way we're defining our variables in

the root of our code and we're updating

those existing variables every time we

scroll so now if we scroll to the top of

our page and we refresh we see that it's

working exactly like we want it to now

watch how easy it is to use this

function on multiple objects we can say

example photo reveal on scroll and now

not only will it work on the sidebar but

it works on our example photo we can

take it one step further and say we want

to use this for this function on every

list item on the page reveal on scroll

so if i refresh we see that each bullet

item these blue items on the Left each

one fades in when it would become

visible and our image is still fade in

as well now this code looks a little bit

repetitive for example why would we have

three different lines running these

functions when we could combine this

into the first one so we could say take

the sidebar and run this function but

also take the example photo and also

grab the list items so we could remove

these two lines hit refresh and we see

that the exact same functionality is

still in place well the reason that we

had it set up this way is because

wouldn't it be neat if we could run

different options in different tweaks to

each element so for example what if we

want our sidebar to fade in from the

right and what if we want our example

photo to fade in from the left so this

is an example of how we can send

arguments to our custom function and

then run slightly different code

depending on what argument

we pass it so let's update our function

to be able to receive these arguments so

up where we're defining our reveal on

scroll function we want to add room for

parameter so we'll call it direction and

now we can use this variable named

direction anywhere in our code in this

function and it will receive this value

so for example let's write some code

that uses conditional logic so for

example if the value that we pass is

right we'll run one bit of code but if

the value that we pass is left we'll run

some other code so that would look like

this if Direction equals right then

we'll run one bit of code inside these

brackets but otherwise else in this case

the direction would only be right or

left so else otherwise run some code

between these brackets so now we need to

adjust our code to not only set the

opacity to zero but also offset the

element to a certain direction so then

it can sort of appear to have this slide

in effect so we still want to add the

class of hidden no matter what so that

this code only runs once but let's

rewrite the code that sort of sets the

opacity to zero and offsets it to a

direction so if the direction that we

pass as an argument is right

we'll say adjust the CSS of this element

so that its opacity is zero but also we

offset it to the right by a certain

amount we'll say 700 pixels and then

we'll run similar code if the value that

we passed in is left or if we just don't

pass any value at all so now we'll make

this negative 700 pixels and then

finally let's adjust the code that

reveals the image or the element so this

code right here it sets the opacity to

be fully visible

let's also adjust this so that it sets

the right value to zero and instead of

three seconds now let's make this

something more reasonable like one

second so now if we refresh scroll down

the page we see that

different elements are fading in from

different directions at different times

as we scroll and this is all thanks to a

reveal on scroll function now the nice

thing about functions is how flexible

they are so let's say we wanted the

ability to have some elements slide in

very quickly but other elements to slide

in very slowly we can add a second

argument for speed in milliseconds so

let's say we want the sidebar to fade in

very slowly so for seconds we want list

items to scroll in from the left quite

quickly so only 800 milliseconds so we

need to add another parameter to our

function so up here where we're defining

our function will just say comma speed

and then we'll just use this variable

this keyword down here where we were

defining how quickly we wanted the

animation to take place so instead of a

thousand milliseconds we'll now just say

speed so now if we refresh we see that

the list items fade in very quickly in

the sidebar very slowly now that that's

in place our lesson is complete let's

review what we've learned we learned

about variables which you can think of

as moving boxes you write a label on the

outside and then you can include

anything on the inside for easy use

later we learned about conditional logic

so you set out a condition and then if

it is true or not true

you can run specific code and finally we

learned about functions which help us

not repeat ourselves and they help us

write really reusable code so if you add

all that up it allows you to create some

pretty neat functionality in your pages

and that's a wrap thank you very much

for watching I hope you feel like you

learned something and stay tuned for

more web development tutorials thanks

bye

Related Videos

Be the first to comment “jQuery Variables, Capabilities, and Conditional Logic Tutorial”

Your email address will not be published.

There are no comments yet.