Create Multiple Pop-up Divs using the jQuery prev() Method

Posted on 13 August 2011 by Laura Montgomery

This tutorial is an update on a previous Creative Individual jQuery tutorial – Create a Pop-up div in jQuery. The first tutorial showed you how to create a very simple pop-up div, but after a few requests in the comments, I felt it was important to update the technique so that multiple pop-up divs could be created without duplicating the code unnecessarily.

If you haven’t already read the first tutorial and are new to jQuery, it might be worth reading it to get a better understanding of the basic techniques before trying this slightly more advanced method.

The Technique

In this tutorial we are going to create a simple profile overview page containing 4 profile images and names. When we hover over the image or name a more detailed profile will appear. This div is positioned before the image and name link in the code and is initially hidden. When we hover over the image, a jQuery event will occur which will change the display declaration from hidden to block, making the div appear. This is when we make use of the prev() method.

Tutorial Demo

Still not sure what we are trying to achieve? Check out the tutorial demo below:

View the Tutorial Demo

The HTML

Create a new HTML document and insert all the usual code – doctype, html tags, head tags, body tags, etc. as shown below:

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8" />
    <title>jQuery Tutorial - Pop-up div on hover - Version 2</title>
  </head>
  <body>
  </body>
</html>

With that done, let’s insert our mark-up. First we’ll create a div with an id of container to act as our content wrap (to center it on screen and give it a nice width). Then I’ve inserted some basic information for the viewer in the form of a h1 and p. Very simple so far!

Then we get to the important bit. Create a div with a class of profile. It’s important to use a class because we are going to have more than one of these on screen and of course we want our code to validate. Inside this div create another div with a class of pop-up. Insert whatever kind of information you need here but for the purposes of this example, I’m going to use basic profile information – Name, Age, and Location.

Again inside our div with a class of profile but below the div with a class of pop-up, add the trigger link. Inside my link with a class of trigger I’ve added an image and a span with the profile name.

...
<div id="container">
  <h1>jQuery Tutorial - Pop-up div on hover</h1>
  <p>
    To view profile information for each person, simply hover your
    mouse cursor over the profile image or name.
  </p>

  <div class="profile">
    <!-- Hidden on load by CSS -->
    <div class="pop-up">
      <p>
        <strong>Name:</strong> Person 1<br />
        <strong>Age:</strong> 23<br />
        <strong>Location:</strong> Canada
      </p>
    </div>
    <!-- Show the hidden div on hover -->
    <a href="#" title="Person 1" class="trigger">
      <img src="blank-avatar.gif" alt="Profile Image" />
      <br />
      <span class="name">Person 1</span>
    </a>
  </div>
</div>
...

You then of course repeat the div with a class of profile however many times you need, but the basic structure remains the same.

Next we’ll need to create a div to clear the floats we will be adding to the profile divs in our css. I tend to always use a class of clear for this purpose. However you could add this style to almost anything, such as a footer or section.

...
      <!-- A clear div to sort out our floats -->
      <div class="clear">
        <p>
          This techique makes use of the <strong>prev()</strong>
          method.
        </p>
      </div>

    </div>
  </body>
</html>

There’s one last thing we need to do before we are finished with our HTML. Let’s link to our stylesheet which we will be creating in the next step.

...
<head>
  <meta charset="utf-8" />
  <title>jQuery Tutorial - Pop-up div on hover - Version 2</title>
  <link rel="stylesheet" href="styles.css" type="text/css"
  media="screen" />
</head>
...

The CSS

Now its time to make things look a bit prettier. Create a new document and name it styles.css, i.e. the file name we have just linked to in our HTML.

First let’s quickly sort out our basic styles and wrapper div:

body {
  margin: 0;
  padding: 0;
  font-family: Arial, Helvetica, sans-serif;
  background: #000 url(bg-texture.png) repeat;
  color: #dddddd;
}

h1, h3 {
  margin: 0;
  padding: 0;
  font-weight: normal;
}

a {
  color: #EB067B;
  text-decoration: none;
}

div#container {
  width: 580px;
  margin: 100px auto 0 auto;
  padding: 20px;
  background: #000;
  border: 1px solid #1a1a1a;
}

All pretty basic stuff. Next we’ll style the profiles by floating them left and adding a width, plus giving our span a little bit of styling to make it sit nice.

div.profile {
  width: 70px;
  text-align: center;
  float: left;
  margin: 10px 37px 30px 38px;
}

span.name {
  display: block;
  padding-top: 5px;
}

Now the important bit, the pop-up div itself. We are going to use position: absolute and display:none, plus a bit of styling to make it look good.

/* HOVER STYLES */
div.pop-up {
  display: none;
  text-align: left;
  position: absolute;
  margin-top: -100px;
  width: 120px;
  padding: 0px 13px;
  background: #eeeeee;
  color: #000000;
  border: 1px solid #1a1a1a;
  font-size: 90%;
}

And don’t forget our clearing div to sort our our floats on the profile divs.

div.clear {
  clear: both;
}

That’s the CSS done! Easy.

The jQuery

Now for what you’ve all be waiting for, the jQuery! Head back over to your HTML file. First we need to link to the jQuery library. I pretty much always link to Google’s files rather than download my own copy. The main reason for this is that it tends to speed things up a touch with user experience. Insert the following into the head of your HTML file.

...
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
...

Next we are going to create our pop-up effect. You can create your jQuery code in an external javascript file, such as popUp.js and linking to it just like we did above for the jQuery library. And in fact if you’re using a lot of javascript/jQuery I’d recommend it to keep things clean and legible. However for this example I’m going to write my code directly into the head of my HTML, below the line where I have link to Google’s jQuery library.

Note: If your writing into the HTML head, you’ll need to wrap your jQuery with script tags:

<script type="text/javascript">
...
</script>

First let’s make our document ready. Below I’m using the long version for legibiliy but feel free to use the short version – $(function() { … });

$(document).ready(function() {
...
});

If the javascript is running, i.e. the user doesn’t have javascript disabled or isn’t using a device that doesn’t support it, we can then use jQuery to change some CSS on our pop-up divs. First we’ll change the display declaration to display:block, then we’ll set an opacity declaration of opacity: 0:

$(document).ready(function() {
  //If Javascript is running, change css on product-description to display:block
  //then hide the div, ready to animate
  $("div.pop-up").css({'display':'block','opacity':'0'})
});

Next we are going to make use of the .hover() function, so that when someone hovers over our trigger, the image and span which are contained within the trigger link, something happens:

...
$("a.trigger").hover()
...

Inside this hover method we are going to create a function which will animate our pop-up divs, causing them to fade in. We’ll will use the this selector to select the current element and the .prev() method to select the previous element from the selector – in this case the current selector is a.trigger that we hovered over and the previous element is div.pop-up just before it in the code. We will then use .animate() to change the opacity from 0 to 1 and finally, set the animation speed. Sounds a lot but all this happens in only a few lines:

...
$("a.trigger").hover(
  function () {
    $(this).prev().stop().animate({
      opacity: 1
    }, 500);
  }
)
...

OK, so far so good. If you check your page in the browser you’ll see that our fade in effect is working perfectly. However, there is quite an obvious problem. The pop-up div doesn’t fade out again when we hover off. In fact it just hangs around there getting in the way! That’s because we haven’t told it to fade back out again when we hover off. Thankfully the .hover() function includes a callback which allows us to animate the hover off state. So let’s sort it out now.

We are going to do pretty much the same thing, only this time the opacity will change from 1 to 0 and we’ll speed up the animate a bit so that the pop-up fades out quicker than what it fades in:

...
$("a.trigger").hover(
  function () {
    $(this).prev().stop().animate({
      opacity: 1
    }, 500);
  },
  function () {
    $(this).prev().stop().animate({
      opacity: 0
    }, 200);
  }
)
...

Rechecking your page in the browser, you can now see that everything is going according to plan.

That’s it!

View the Tutorial Demo

Get The Source Code

You can download the complete tutorial source code by clicking on the big button below and unzipping the file.

This entry was posted in jQuery, Tutorials