[thelist] unobtrusive popups with links

Christian Heilmann codepo8 at gmail.com
Tue Oct 2 02:49:21 CDT 2007

On 10/2/07, Brian Cummiskey <brian at hondaswap.com> wrote:
> I'm working on an unobtrusive JS popup, similar in function to those
> InteliText ads (i'm sure you've seen them.. the double green underline
> ads??)
> my basic plan is this:
> Search document, and replace some keywords on the fly with a span
> wrapper (didn't do this part yet--- hard coded span around a word for
> now for testing)
> replace said span with a useless link "#" and trigger a CSS popup on
> hover via DOM scripting and appending elements
> The problem i'm running into is that my spans for the popup are inside
> the A element, and thus any content inside the popup is inside the
> Anchor also, which is giving me a hard time.  The whole point of this
> popup is to link internally to related content based off keywords.
> thus, I have an anchor inside an anchor which doesn't work.
> This is what i've whipped up so far, and i can't take credit for a lot
> of the code....  the popups and a couple functions were from various
> other projects i've used in the past from other sources.  will be fully
> documented with sources later.
> http://hondaswap.com/testing.php
> code starts as:
> <div class="page">
>             <span class="skmtt">Popup</span><br />
>             <span class="other">no pop span</span><br />
>             <span class="skmtt">Other popup</span>
> </div>
> and after the DOM runs and replaces the skmtt class spans, rendering
> turns into:
> <div class="page">
>         <a class="skmtt_pop" href="#" id="tooltip_0">test<span class="skmtt_tooltip" id="tooltipspan_0"><span class="skmtt_top"></span><span id="skmttinner_0" class="skmtt_mid"><div id="skmtt_guts0" class="skmtt_guts">THIS IS THE POP UP<br><br><a href="/index.php">Some thread</a><br><br><a href="index.php">an other thread</a></div></span><span class="skmtt_bot"></span></span></a><br>
>         <span class="other">no pop span</span><br>
>         <a class="skmtt_pop" href="#" id="tooltip_1">test<span class="skmtt_tooltip" id="tooltipspan_1"><span class="skmtt_top"></span><span id="skmttinner_1" class="skmtt_mid"><div id="skmtt_guts1" class="skmtt_guts">THIS IS THE POP UP<br><br><a href="/index.php">Some thread</a><br><br><a href="index.php">an other thread</a></div></span><span class="skmtt_bot"></span></span></a>
> </div>
> As you can see, i have nested Anchors, which doesn't work (on top of the
> fact that it's invalid).
> The only way to keep the popup open while mousing IN the popup is to
> have it be inside the A element, which is css styled to display block.
> anyone have any suggestions?  Am I going about this all wrong?

Yes, you use the DOM to add lots of markup to support flaky CSS
rollovers. Why not do the rollover and window with JS, too?

For example: http://icant.co.uk/sandbox/yuipanel/ (the last example
shows you how to create them on the fly).

As to popups on double underlined terms: I hate them more than I hate
my shower getting cold unexpectedly in between. I am a writer, I am
also a reader. I like text and being able to read it without
subconsciously stumbling over lines. I also like using my mouse, to go
somewhere and click a link. A rollover is NOT a call to action, it is
a hint that there is more to come. Adding useless links is a sign you
are doing something wrong.

If you want to make money, get a good Google rank and use text link
advertising. These pay monthly and not on interaction you have to
force onto the user.

Chris Heilmann
Book: http://www.beginningjavascript.com
Blog: http://www.wait-till-i.com
Writing: http://icant.co.uk/

More information about the thelist mailing list