/    Sign up×
Community /Pin to ProfileBookmark

How to get this popup div to appear by cursor -and multiple?

I have a popup div that appears when you hover over a link (Description Here). Problem 1 is that it’s not showing next to the cursor. Next problem is that I want a popup for EACH link in the table. HELP?! Thank you!

Example is here: [url]http://www.concrete-creative.com/icix/training.html[/url]

Code here:

[CODE]
function ShowPopup(hoveritem)
{
hp = document.getElementById(“hoverpopup”);

// Set popup to visible
hp.style.top = hoveritem.offsetTop + 18;
hp.style.left = hoveritem.offsetLeft + 20;

hp.style.visibility = “Visible”;
}

function HidePopup()
{
hp = document.getElementById(“hoverpopup”);
hp.style.visibility = “Hidden”;
}
[/CODE]

[CODE]
<a id=”hoverover” style=”cursor:default;” onMouseOver=”ShowPopup(this);” onMouseOut=”HidePopup();”>Description Here</a>
[/CODE]

[CODE]
<div id=”hoverpopup” style=”visibility:hidden; position:absolute; top:0; left:0;”>
<table width=”198″ border=”0″ cellspacing=”0″ cellpadding=”0″ bgcolor=”#FFFFFF”>
<!– Top blue header –>
<tr>
<td><img src=”images/comment_left.jpg” width=”8″ height=”28″ alt=”” border=”0″></td>
<td background=”images/comment_mid.jpg” width=”182″ valign=”top” class=”maintable_header”><b>Training Event Name</b></td>
<td><img src=”images/comment_right.jpg” width=”8″ height=”28″ alt=”” border=”0″></td>
</tr>
<tr>
<td valign=”top” colspan=”3″ width=”198″ class=”comment”>Full description here.
Cras quis tellus turpis. Proin
sit amet tristique massa.</td>
</tr>
</table>
</div>
[/CODE]

to post a comment
JavaScript

6 Comments(s)

Copy linkTweet thisAlerts:
@3NexMay 13.2010 — If you insist, I can get that fixed for you. But instead, I would suggest another approach. Since your popups are "just" appearing and vanishing without any significant animation, it would be a lot better and easier to perform this with CSS (also, it would work when javascript is disabled).

So, as you list out the rows in your table, you put the div with the full description inside that same column where it says "Description here", but you hide it and position absolutely so it's a little above the column, or to the right (or however you like it). Then you give class="hoveritem" to the column of the table, and inside your CSS you put:
[CODE]td.hoveritem:hover div { display:block; }[/CODE]
And every hovered td will show that full description box only on mouse hover. If you didn't understand what I mean, I can build you an example?
Copy linkTweet thisAlerts:
@FalconWebMasterMay 13.2010 — I don't know about chausfeld, but I'd like to see an example. Thanks
Copy linkTweet thisAlerts:
@chausfeldauthorMay 13.2010 — I would love to see it too, but I'm going to give it a shot on my own too... Thanks!
Copy linkTweet thisAlerts:
@chausfeldauthorMay 13.2010 — not getting it to work - can we see an example? thanks so much!
Copy linkTweet thisAlerts:
@3NexMay 13.2010 — Here you go:

http://turcin.net/javascript/hover-box.html

Note that this (probably) only works in Firefox because I was just trying to build an example. For IE you're (probably) gonna have to do a couple more tweaks.
×

Success!

Help @chausfeld spread the word by sharing this article on Twitter...

Tweet This
Sign in
Forgot password?
Sign in with TwitchSign in with GithubCreate Account
about: ({
version: 0.1.9 BETA 5.18,
whats_new: community page,
up_next: more Davinci•003 tasks,
coming_soon: events calendar,
social: @webDeveloperHQ
});

legal: ({
terms: of use,
privacy: policy
});
changelog: (
version: 0.1.9,
notes: added community page

version: 0.1.8,
notes: added Davinci•003

version: 0.1.7,
notes: upvote answers to bounties

version: 0.1.6,
notes: article editor refresh
)...
recent_tips: (
tipper: @AriseFacilitySolutions09,
tipped: article
amount: 1000 SATS,

tipper: @Yussuf4331,
tipped: article
amount: 1000 SATS,

tipper: @darkwebsites540,
tipped: article
amount: 10 SATS,
)...