FRIHOST • FORUMS • FAQ • TOS • BLOGS • DIRECTORY
You are invited to Log in or Register a Frihost Account!

Javascript newbie in trouble!

   Frihost Forum Index -> Scripting -> Html, CSS and Javascript
 


rameshbn1
Hi guys,

Let me say this first - I'm new to Javascript. I have steered clear of it until now, but now I'm forced to use it in a site I'm trying to make.

What I needed was this:

When a user does mouseover on a link, I need to popup a small window.
Then I need to write some details on this window.
When the user moves over to another link, the details on this window should be rewritten.

This much I accomplished with a lot of trial, error and prayer.

This is what I need next:

In one situation, I need this popup window to be on top of the parent window always.
In another I need some way to close this window when the user does mouseout on the link.

OK, I know by now you javascript gurus have started laughing - but won't somebody help me?
Esch
You're not looking for a popup window, really; what you want is a "tooltip".

The way I would do it is like this, keeping in mind I haven't tested this at all and am just giving it to you as an idea:
Code:

<script language="Javascript">
// will display whatever info you give it in the tooltip with the id 'mytooltip'
function showTip(info)
{
   var tip = document.getElementById('mytooltip');
   tip.style.display = '';
   tip.innerHTML = info;
}

// will hide the tooltip (when you mouseout of a link)
function hideTip()
{
   document.getElementById('mytooltip').style.display = 'none';
}
</script>

<!-- this will show a tooltip in the top-left corner; it's initially hidden -->
<div id="mytooltip" style="position: absolute; z-index: 999; top: 5px; left: 5px; width: 200px; border: solid 2px gray; display: none;"></div>

<!-- here's a link that'll show the tooltip with some info inside it -->
<a href="http://www.google.com" onmouseover="showTip('Example; click to go to google or whatever');" onmouseout="hideTip();">go to google</a>


There are obvious enhancements you can make to this, such as having the tooltip go to a position near the link when it appears, giving it a close box, changing the tooltip's visual style, etc. I'd give it a class and style it from there myself.

Hope that helps, anyway.

UPDATE: Sorry, hideTip() should've been the following:
Code:
function hideTip() {
   document.getElementById('mytooltip').style.display = 'none';
}

Note the addition of 'style'; it won't work otherwise.


- Other suggestions: put the div on the right side so it doesn't obscure your text using 'right: 5px' rather than 'left: 5px'. Also, giving it a background color wouldn't hurt (so the text doesn't show through from behind it) as well as some padding wouldn't hurt.
rameshbn1
Hello Esch,

Thanks, great answer Very Happy . I'm trying out your code now.

I have one forboding, though - the 'info' I need to write involves multiple lines, with headings and all that. You see, what I'm trying to do is to make a periodic table of elements. I've put all the elements in a table which looks like the normal periodic table, and the names of the elements are links. When the user moves over an element, I was planning to popup a window and show all the details of the element in this window - up to 32 lines in one case, and this varies. Infact I had a table in mind, but I didn't know how to make a table in a popup window, so I settled for lines of text.

Will the info variable in the code take <br> tags? OK, I'll try out the code now.

Thanks again.
FunDa
Thanks Esch ...

Ramesh the br and all html tags work in this ... Is ur peiodic table on the net ?
Good idea of urs ...
rameshbn1
Hi John,

No, It's still in the 'workshop'. I'm hoping to finish it in a week though. I will pm the link to you Razz

The tooltip code works, but i need to work on it to make it do the things I want it to do. Anyway, thanks Esch, you gave me a new idea.
Reply to topic    Frihost Forum Index -> Scripting -> Html, CSS and Javascript

FRIHOST HOME | FAQ | TOS | ABOUT US | CONTACT US | SITE MAP
© 2005-2007 Frihost, forums powered by phpBB.