Basic introduction to jQuery (Part 2)

This tutorial directly follows the previous “Basic Introduction to jQuery (Part 1)“, so start there if you haven’t seen it yet.

Previously, we wrote a very simple jQuery function to make a pop-up box show up when we click on a button. Check out the Pen below to see what this looks like, as well as the corresponding code. Or, see the full page in a new tab →.

See the Pen jQuery pop-up button by Alex Turnwall (@alturnwall) on CodePen.0

This is all well and good, and helps us understand how a basic function is written. But in practice, it’s got a few problems.

Step 1

Let’s take the code from last tutorial, and simply copy and paste the HTML, so that we now have two buttons, and two pop-up boxes on our page:

<span class="my_button">Test Button</span>
<div class="my_target">Test Target</div>

<span class="my_button">Test Button</span>
<div class="my_target">Test Target</div>

Now take a look at the Pen, and click one of the orange buttons:

See the Pen jQuery pop-up button by Alex Turnwall (@alturnwall) on CodePen.0

Notice what happened? When you click either of the orange buttons, both of the pop-ups open.

That’s a problem. What we want to do is be able to add a bunch of these pop-ups or tooltips to our page that only open when the user clicks on the corresponding button.

Let’s take a look at the jQuery we wrote last week so we understand why this is happening:

$(".my_button").click(function(){
   $(".my_target").toggle();
});

Here’s how it works again:

When we click on any element with a class of “my_button”, it’ll toggle any element with a class of “my_target”.

If you look back at our HTML, you see we now have two of each “my_button” and “my_target”.

So how can we make sure we’re only targeting the specific pop-up box that corresponds to the button we press?

Well, you could write unique functions for each button you have on the page, and give each button and pop-up a unique class. But that would be pretty cumbersome, especially if each of these things is going to function similarly. We want to develop some good coding practices here, so we’re going to stick to the DRY principle (don’t repeat yourself), and if we wrote that function over and over again, we’d be repeating ourselves.

So, how then, how?

“This” keyword

We’re going to use the this keyword. From the jQuery site:

"this is a special keyword that is used in methods to refer to the object on which a method is being invoked”

The explanation on that page is pretty confusing if you haven’t done any object-oriented programming before, so let’s look at how we’ll use it.

Step 2

We’re going to change our jQuery from the aforementioned, to the code below. (Note that this won’t work just yet—we need to make some HTML changes too.)

$(".my_button").click(function(){
   $(this).children(".my_target").toggle();
});

We’re still using my_button as the thing we click on (our object). But now, instead of specifying that any my_target will be toggled, we’re saying the only my_target that will be toggled is a child of this .

But what exactly is this ?

In our case, this  refers to my_button  because it is “the object on which a method is being invoked”. In other words, it’s the thing that we click on in order to make something else happen.

So, anytime we see $(this)  inside of a function’s curly braces, it’s referencing the object of the function, which is inside the first $( object here ) .

Now that we understand how this is working, let’s make it work.

Step 3

Now to change the HTML—we need to actually make each my_target a child of each corresponding my_button by moving them inside:

<span class="my_button">Test Button
  <div class="my_target">Test Target</div>
</span>

<span class="my_button">Test Button
  <div class="my_target">Test Target</div>
</span>

And check out how it works:

See the Pen jQuery pop-up button (Part 3) by Alex Turnwall (@alturnwall) on CodePen.0

Now, when we click each button, only the corresponding pop-up opens. So, this is now reusable, so we can add as many of these to the page as we need—and we’re using a DRY method.

Of course, now we have some other issues with how this looks:

Because the grey pop-up code is now a child of the orange button, when the grey box is toggled (visibility added to the page), the orange button grows to contain it, as seen above. We don’t necessarily want that because it can have unwanted effects on the overall layout of our page.

But at this point, the functionality is done—we just need to fix the display, so the rest of the work is in CSS.

Positioning and styling the pop-ups

Step 4

Let’s find the styles back in our CSS. First think we want to do is make it so the grey pop-up does not effect the orange button. We can do this by adding some simple positioning:

.my_button {
    padding: 1em;
    background-color: #ffa457;
    display: inline-block;
    position: relative;
}
.my_target {
    background-color: #f3f3f3;
    padding: 2em;
    border:1px solid #e5e5e5;
    width: 10em;
    display: none;
    position: absolute;
}

The absolute position on the pop-up allows it to move freely around the page without effecting other elements on the page.

The relative position on the button allows it to be the reference object for the pop-up, meaning that we can change the position of the pop-up relative to the position of the button, instead of the position of the whole page. This will hopefully make more sense as we add some position values below:

Step 5

Now that the pop-up is an absolutely positioned element, we can use the declarations top, right, bottom, and left to alter the position of the element (we’re only using bottom and left here):

.my_target {
    background-color: #f3f3f3;
    padding: 2em;
    border:1px solid #e5e5e5;
    width: 10em;
    display: none;
    position: absolute;
    z-index: 2;
    bottom:110%;
    left:0;
}

The bottom declaration means that the bottom of the pop-up will be 105%  away from the bottom of the button. In this case, showing up on top (because 100% is defined by the hight of the parent button, therefore 105% is slightly higher, or above, the height of the parent).

The left declaration means that the left edge of the pop-up will be zero units away from the left side of the button. In this case, that means flush with the left side.

Finally, we added z-index  to ensure that the pop-up is appearing visually “on top” of other elements on the page (which have a default z-index of 0).

The result should look like this screenshot:

That looks pretty good, but let’s round out the design with a few more features:

Step 6

Because our “button” is a simple <span> and not an actual link pointing to a separate page, the browser doesn’t turn our cursor into the pointer icon (hand) by default—which can be confusing for our users. So let’s give our button better affordance (see sidebar) by changing the cursor, and adding a hover state while we’re at it:

.my_button {
    padding: 1em;
    background-color: #ffa457;
    display: inline-block;
    position: relative;
    cursor: pointer;
}
.my_button:hover {
    background-color: #ff6439;
}

This CodePen illustrates how they should look and function:

See the Pen jQuery Tooltip (Part 4) by Alex Turnwall (@alturnwall) on CodePen.0

Bonus trick: Adding a little indicator triangle with CSS

If we want to get a little more fancy, we can add a little triangle to the bottom of the pop-up that indicates it’s relationship to the button, like so:

Step 7

We can do this purely in CSS by utilizing the the :after pseudo class in the CSS, as seen below (and we’ll add a very slight box-shadow to the pop-up for a little added style):

.my_target {
    background-color: #f3f3f3;
    padding: 2em;
    border:1px solid #e5e5e5;
    width: 10em;
    display: none;
    position: absolute;
    z-index: 2;
    bottom:110%;
    left:0;
    box-shadow: 0 0 8px rgba(0,0,0,0.1);
}
.my_target:after {
    content:'';
    display: block;
    height: 0;
    width: 0;
    position: absolute;
    top:100%;
    left:10%;
    border-top:12px solid #f3f3f3;
    border-left:12px solid transparent;
    border-right:12px solid transparent;
    border-bottom: none;
}

Here’s how it works:

See the Pen jQuery Tooltip (Part 5) by Alex Turnwall (@alturnwall) on CodePen.0

Wrapup

Here’s how this demo looks on a separate page →

And you can download the whole demo here.

We’ve used some nifty jQuery and CSS to create some very useful pop-ups, which can be reused on our page as needed. We happened to style them in a manner that looks pretty similar to a tooltip, but this same basic functionality can be used for a bunch of different applications—modal windows, form explanation boxes, navigation dropdowns—really anywhere you need a box of info to appear with more information on click. All you need to do is update your CSS styles to change how it looks—the basic functionality is there.

Next time, we’ll dig even deeper into adding some additional functionality to this sort of pop-up… go to Part 3 of the tutorial.