Official website for Web Designer - defining the internet through beautiful design
FOLLOW US ON:
Author: Imagine Admin
18th November 2009

Interactive pop-up bubbles with jQuery & CSS

Interactive pop-up bubbles with jQuery

Interactive pop-up bubbles with jQuery & CSS

Interactive pop-up bubbles with jQuery

Move beyond pure CSS with special visual effects courtesy of jQuery. Adding sparkle to your web design is much easier than it was previously, and helps draw users into your content

jQuery takes away all the nasty cross-browser compatibility problems that are often associated with coding JavaScript interactive visual effects and interactions. Because the framework handles all the differences, you can forget about these technical details and instead concentrate on creating beautiful interfaces and fantastic user interaction feedback. A further benefit is that it takes very little code to create sophisticated effects, allowing you to spend less time on the coding itself; all of a sudden it’s cost effective to add advanced functionality.
In this tutorial we’re looking at a straightforward example of an effect made popular by the Coda website (http://www.panic.com/coda/). When you roll over the primary buttons a balloon puffs up into view. When you mouse off the button the balloon puffs out of existence. This interaction adds to the user’s experience, providing useful further information and a nice visual polish to the site. You aren’t limited to navigation however, and in our example we’re going to create the equivalent of an old-fashioned image map with pop-up bubbles over the areas of interest.

01 Create the container
We’re adding hotspots to a cool infographic we’ve drawn for a big company. Each of the black badges will spawn a pop-up bubble, so start off by adding the container and setting the image as the background to the container. Create a new HTML page and add the code below (you’ll find the image we’ve used in the set of files found here):

HTML:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/
TR/xhtml1/DTD/xhtml1-transitional.dtd”>
<html xmlns=”http://www.w3.org/1999/xhtml”>
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=UTF-8” />
<title>Popup info boxes</title>
<link href=”styles/screen.css” rel=”stylesheet” type=”text/css” media=”screen” />
</head>
<body>
<div id=”panel”>
</div>
</body>
</html>
Style sheet:
body {
font-size: 62.5%;
color: #333333;
font-family: “Lucida Sans Unicode”, “Lucida Grande”, sans-serif;
}
#panel {
position: relative;
margin: auto;
background: transparent url(panelbg.png) no-repeat top left;
width: 960px;
height: 708px;
}

02 Draw the pop-up bubble
We need to draw a suitable pop-up bubble. You could choose to use a nine-slice system to make the pop-up box the right size for your content, but we’re taking a quicker approach and creating a one-size-fits-all graphic. We used Illustrator, but you can use your graphics software of choice.

03 Add the anchors
We’re going to use a series of hotspots to hold and launch our pop-up bubbles. Each hotspot is actually an anchor tag with the pop-up bubble code nested inside. Add the code below to create the first of the hotspots:

<a href=”#” class=”moreinfo” id=”moreinfo1”>Chemical
<div class=”floatingpanel”>
<h2>Chemical</h2>
<p>Annual growth of 8% year on year in the chemical division as a result of strong Q3
figures.</p>
</div>
</a>

Pages: 1 2 3

  • Tell a Friend
  • Follow our Twitter to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.
    • http://www.crearedesign.co.uk Victoria Web

      Thanks for this excellent jquery tool, i will definitely start using it in my web designs.

    • Batfan

      Nice tutorial/effect. However, I would make one suggestion . . .

      A demo would be nice, with some sort of call-to-action button linking to it . . .

      I can only speak for myself but, I know that 90% of the time, if there is no demo, I do not bother reading the tutorial.

    • Jeanine

      Its unfortunate that the shading doesn’t seem to work quite right in Internet Explorer (but what is new?) but otherwise the tutorial was a nice straightforward use of jQuery. Many thanks for this great tutorial. Just a notice, if anyone has any problems, redo your quotation marks ;)

      If you download the files and run the index.html it should work just as well as a demo, just a few more steps to see it.

    • Kathleen

      Agreed with Batfan. I like to see what tutorial will accomplished.

    • Bradvin

      +1 demo

    • Martin

      @Batfan and @Kathleen:

      Did you guys even went to the Coda website link that is PROVIDED in the tutorial. If you had you 2 would have seen the DEMO you 2 wanted so badly. I don’t know about the 2 of you, but for me that example was more than enough to see what this tutorial will do.

      I can only speak for myself but, I know that 90% of the time, I read the entire thing before writing a reply.

      And by the way if you guys need more explanation as to where you will see a “demo” at the Coda website. Just hover over the Download button. You will see your demo.

      @author of the tutorial:

      Thanks for the tutorial. This is nice.

    • http://www.bestwebsitesdesigner.com Jeff

      Great article on jquery. I was looking for such tool for my web design http://www.bestwebsitesdesigner.com. I will try to implement it tonight and if have any problems will put my comment here :)

    • Rich

      Might be great but where’s the demo!?!

    • Oğuz Çelikdemir

      I agree with @Batfan, should be nice to see a demo page. Without that, just we can imagine.

    • http://www.eyesocket.net Amy

      Looks cool. Any demo yet?

    • Phil

      There is a problem, when I mouse over it quickly the floating panel gets stuck and doesn’t animate back to invisible. All it takes is brushing the mouse over it and it’ll get stuck. How can this be fixed?

    • http://bentrem.sycks.net Ben Tremblay

      What @Batfan said … no demo?
      Nice of you to include the GIF at the top, but … well …

    • http://www.evertonvianna.com.br Everton Vianna Arquiteto de Informação & Web Designer

      demo?!

    • http://www.kcaloter-nyz.net nmilofo elciabn

      foundmostwillagreewith your blog.

    • Patrick

      Thanks for sharing