jQuery Scroll Event

The jQuery scroll event works just the .click() event, the main difference is that we usually want to bind it to the whole document (the webpage) rather than a specific div or img tag.

So the event declaration will look like this:

Note: This should be within the document ready function.

In this function, the first thing we’ll do is work out the current scroll position of the page and save it in a variable to use later:

The .scrollTop() function returns where the scroll bar is for our selected element, in this case, we’re asking for it in regards to our body tag. Our scrollPosition variable will now contain a number which is where the user currently is on the page, so at the very top, this will be zero.

We’re then just printing out that value to our console. So, if you open your page in a browser and pull up your console, you should see numbers being output as you’re scrolling your page.

You can now use a simple if statement to test if a user is past a pont:

 

jQuery Change Image

Changing an image in jQuery is pretty straight forward. First of all, you need an image to change. This is just a usual html image in your page with an id on it:

We know that the image being displayed comes from the “src” attribute of the image tag, so this is what we want to change using some jQuery magic which, looks like this:

This can happen in any usual event. For example, to change an image when a user clicks something on our page with an id of “change-image” we would do this:

 

 

 

jQuery Intro

In your scripts file, you should always start with the following:

This makes sure your page is fully loaded before any further interaction takes place.

Selectors

Selectors are how you select what element on your page that you want to “interact” with (element referring to the part of you HTML, an image for example). This interaction might be a click, hover or something else. You can select elements in a number of ways, most commonly you’ll use the element based on its class or id.

Selecting by class

Selecting by id

There are a number of ways that you can select elements, refer to this link for some more examples: jQuery Selectors

Events

Once you’ve selected your element, the next thing to do is bind an event to it. An “event” is basically what user interaction do you want to respond to. The most common events are click and hover events. After you define the event you need to provide a function that will happen when that event occurs. which looks like this:

You can find more events here: jQuery Events

What happens next?

The body of the function (that is what occurs on the provided event) is completely up to you. This may range from a single line to show or hide something on the page, to a far more complex function spanning many many lines.

To simply hide something, you can do the following:

Some of the most basic built-in functionality in jQuery are:

There are also counterparts to each of these which will show it if it’s hidden and hide it if it’s showing:

Changing Classes

jQuery makes it easy to change the css classes on our elements in a number of ways.

We can add or add a class to an element like this:

And remove one like this:

There is also a toggle class function to remove a class if it is on the object and add it if it is: