Author: Mark Billen

18th November 2009

12 comments

Interactive pop-up bubbles with jQuery & CSS

04 Position using CSS

04 Position using CSS
We’re going to position our hotspots absolutely. Because the panel is positioned relatively, all the co-ordinates are relative to the top-left of the panel. This may take a bit of playing around, but if you’re using an editor such as Dreamweaver you can just drag your hotspot into position once you’ve set it to have a width/height and be positioned absolutely. Add the code below to your style sheet:

#moreinfo1 {
position: absolute;
display: block;
text-indent: -10000px;
text-decoration: none;
width: 30px;
height: 30px;
top: 291px;
left: 205px;
}
.floatingpanel {
position: relative;
display: block;
margin-top: 0px;
margin-left: -3px;
width: 131px;
height: 109px;
padding-top: 32px;
padding-left: 13px;
padding-right: 13px;
background: transparent url(floatingpanel.png) no-repeat top left;
text-indent: 0px;
color: #333333;
}
.floatingpanel h2 {
margin: 0;
padding: 0;
color: white;
font-weight: normal;
font-size: 1.2em;
}
.floatingpanel p {
margin: 0;
margin-top: 5px;
padding: 0;
color: #333333;
}

05 Set up classes
We’re going to be adding lots of hotspots across our panel so rather than copy and paste the same code for each badge, the only thing that differentiates them is where they’re positioned on the page. We have slightly revised our hotspot code to split the position from the rest of the visual characteristics. We also need to set the display properties for the pop-ups themselves, so replace the #moreinfo CSS you wrote in the last step with that shown below:

.moreinfo {
position: absolute;
display: block;
text-indent: -10000px;
text-decoration: none;
width: 30px;
height: 30px;
}
#moreinfo1 {
top: 291px;
left: 205px;
}

06 Set pop-up to appear on mouseover
We can achieve a lot just with CSS. Because we’ve nested the bubble pop-up code inside our anchor tag, we can use the :hover pseudo-class to show the pop-up only when the badge is moused over. This approach means the effect will still work, albeit with less visual panache, if JavaScript is disabled. Add the code below and test in your browser: (new code shown in bold)

.floatingpanel {
position: relative;
display: block;
margin-top: 0px;
margin-left: -3px;
width: 131px;
height: 109px;
padding-top: 32px;
padding-left: 13px;
padding-right: 13px;
background: transparent url(floatingpanel.png)
no-repeat top left;
text-indent: 0px;
color: #333333;
display: none;
}
a:hover .floatingpanel {
display: block;
}

07 Get jQuery
Visit www.jquery.org and download the latest version of the jQuery JavaScript framework. You can also include the latest version directly from the Google Code repository if you prefer. Add the code below in the <head> section of your page to include the script (note that we’ve saved our copy of the jQuery framework in a folder called scripts):

Pages: 1 2 3

Tags: bubbles, Coda, CSS, jQuery, pop-ups

Did you enjoy this article? Share it!

Follow our

to find out about all the latest web development, news, reviews, previews, interviews, features and a whole more.

12 Comments »

Victoria Web said:

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

# 18 November 2009 at 5:11 pm

Batfan said:

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.

# 18 November 2009 at 6:38 pm

Jeanine said:

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.

# 18 November 2009 at 10:05 pm

Kathleen said:

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

# 18 November 2009 at 10:08 pm

Bradvin said:

+1 demo

# 19 November 2009 at 9:31 am

Martin said:

@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.

# 21 November 2009 at 10:29 pm

Jeff said:

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

# 24 November 2009 at 7:51 am

Rich said:

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

# 26 November 2009 at 10:13 am

Oğuz Çelikdemir said:

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

# 1 December 2009 at 8:50 am

Amy said:

Looks cool. Any demo yet?

# 6 December 2009 at 11:15 pm

Phil said:

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?

# 1 February 2010 at 8:34 pm

Ben Tremblay said:

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

# 18 June 2010 at 5:35 am

Interactive pop-up bubbles with jQuery & CSS

04 Position using CSS

12 Comments »

Trackbacks

What's your opinion?