Comments on: jQuery-Based Popout Ad: Part 2

By: Mart

Mart — Tue, 28 Jun 2011 14:49:53 +0000

Seems to have broken in FF5 :(

By: Andy

Andy — Fri, 22 Oct 2010 11:02:27 +0000

#popout #cap {position:relative}

should be

#popout #cap {position:absolute}

Otherwise IE7 doesn’t work properly.

By: Bill

Bill — Sat, 01 May 2010 04:59:13 +0000

Rob,
Many thanks for this tutorial. It is very good. I have a question that I am not sure about. It opens fine, the image is full, but if
I move the mouse, it looks like about 20PX disappears from the right
side of the image. I am using IE 7 and Firefox 3.10, it is the same.

By: Andrew

Andrew — Fri, 24 Apr 2009 10:03:34 +0000

Mrmrmr…. Doesnt work in Firefox 3.09

By: Mark

Mark — Wed, 22 Apr 2009 19:22:51 +0000

Nevermind, I fixed it. CSS issue with the close button positioning :)

By: Mark

Mark — Wed, 22 Apr 2009 19:15:55 +0000

it’s not working with chrome so well. it closes then gets stuck closed. all other browsers ok.

By: Rob

Rob — Fri, 24 Oct 2008 21:15:47 +0000

Yep! This works pretty well for forms. I’ve used it for signup forms on more than one website now.

By: Carlos @ VPSmedia

Carlos @ VPSmedia — Fri, 24 Oct 2008 21:07:24 +0000

Wow really cool. Can this be done with say a form? being able to use it to display a login form would be interesting.

By: Rob Glazebrook

Rob Glazebrook — Thu, 25 Sep 2008 21:23:13 +0000

…and now that I’ve said that, I’ve come up with a third, better, option.

Instead of using a background color, use a background image instead. It turns out that a repeated background image works just as well to give the anchor its proper size. So I’ve created a 1×1 transparent gif and set that as the anchor’s background in my CSS. The close button now works. I’ll get the example updated right away, and then update the tutorial soon.

By: Rob Glazebrook

Rob Glazebrook — Thu, 25 Sep 2008 21:03:42 +0000

Wow, Tom… you’re right. There’s a pretty major IE7 bug in there. And setting the background color does seem to fix it.

The problem is, IE7 ignores the size you specify on a link if the content (text, image, whatever) doesn’t take up all the space you’ve given it. And because we’ve set a “display: none” on the content, IE7 can’t find anything to click on. Never mind the fact we’re in “display: block” mode with a specified width and height.

However, as you pointed out, setting a background color makes it respect the size of our box. Of course, that also obscures our close button.

We have two options: first, we could just cut the close button out of our ad design, create it as a separate image, and put that in our close anchor. The anchor would be clickable, because it was filled with the image.

Or two, you can set a background color on the anchor tag, and then HIDE that color by setting its opacity to zero. IE7 still respects our size for whatever reason. Unfortunately, there seems to be an opacity bug in IE6 wherein the opacity filter doesn’t take into account positioned elements: the close button becomes transparent all the way down to the document underneath. So if you need IE6 support, this isn’t the best option. But it works elsewhere.