You should know your CSS selectors pretty well. If you need a tutorial, see the previous article in this series. You should also understand that programs operate sequentially, which means that they execute one statement before moving on to the next. (Exceptions to this exist, especially in the realm of threaded applications, but they’re far more advanced than the scope of this introduction.)
The first thing you’ll need to do is include the jQuery library in the <head> section of your page or template. You can do this easily by adding this line to the end of your <head>:
Here’s an example. Let’s say we have this HTML snippet somewhere on our page:
As it stands, we’ll get a button, but the button won’t actually do anything. Let’s make it do just what it sounds like; we’ll change the background color to black and the text color to black as well.
So let’s start by selecting our button.
Having selected the button, though, we actually have to do something with it. We’ll use a method called “click,” which activates when the element is, well, clicked.
Note that if you try this, you’ll get an error. That’s because .click() requires a parameter, which is what we want to have included when the element is clicked. To send that info, we’ll use an anonymous function (a function that we never bother to name). It ends up looking complicated, but just know that it means “when this element is clicked, execute this function”.
Notice the use of the “css” method to change the document’s CSS rules on the fly. This can be used to resize or even reposition elements based on user input.
There’s a lot you can do with jQuery, but there’s a definite investment of time in learning how the different methods work. You can see the current list of elements in the library at https://api.jquery.com/. The best way to learn jQuery is to experiment a little bit, and feel free to reach out to me if I can help with a particularly tricky function. Next time, we’ll move on from some of the techy pieces and focus instead on how to create good navigation for your audiences.
Learn more about the use of technology in your church by subscribing to this blog!