How to do a popup window when a link is clicked

[Andwise]

Okay, here is what I want to do. I want to make it so when a word is clicked a small popup window comes up with a definition of the word. I know this can be done with javascript but how can I do it so that the window size depends on the lenth of the definition. I hope I explained myself good enough. Thanks, Andy

[aspen]

I think that sizing a window via the length of the content would be fairly difficult. The only thing I could think of would be to get the length of the string and x that by ave num of pixels per character and then take the square root rounded up and make that number the length and width.

Complicated.

[Andwise]

do you know where I can find the javascript to do the popup window any way? I have looked on a lot of sites but am not sure what it is called so I can't find it. Thanks, Andy

[BrewSkee]

Hi Andwise,

Take a look at the following:

http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

http://www.dynamicdrive.com/dynamicindex5/popinfo2.htm

Not sure if that's what your're looking for.

Hope that helps
brew

[Andwise]

http://www.dynamicdrive.com/dynamicindex5/popinfo.htm

I have considered something like that. Would it slow down the loading of my site and can you customize the colors? Thanks, Andy

[aspen]

that script is fully customizeable with colors and a variety of other features.

the actual script HP is http://www.bosrup.com/web/overlib/

and it explains all the features there.

[BrewSkee]

Hi Andy,

If you look at the template.html you'll see the following in the head section:

<SCRIPT TYPE="" LANGUAGE="JavaScript">
<!--
var width = "250";
var border = "3";
var offsetx = 2;
var offsety = 2;

var fcolor = "#CCFFCC";
var backcolor = "#339933";
var textcolor = "#000000";
var capcolor = "#FFFFFF";
var closecolor = "#99FF99";

// -->
</SCRIPT>

This is where you can change the colors. Regarding load time. I wouldn't think it would be noticeable.

brew

[sadhu]

*Put this in the Head, don't forget to add <script> tags
<!--
function NewWindow(mypage, myname, w, h, scroll) {
var winl = (screen.width - w) / 2;
var wint = (screen.height - h) / 2;
winprops = 'height='+h+',width='+w+',top='+wint+',left='+winl+',scrollbars='+scroll+',resizable,menubar,status,location,toolbar'
win = window.open(mypage, myname, winprops)
if (parseInt(navigator.appVersion) >= 4) { win.window.focus(); }
}
//-->

*Put this around the link

<A class=titleLink title="Opens in new window"
onclick="NewWindow(this.href,'pd1','450','350','status=yes,toolbar=yes,location=yes,menubar=yes,scrollbars=yes,resizable=yes');return false;"
href="http://www.somewhere.com">somewhere.com</A>

You can configure wheather or not to keep the status bars, toolbars, menu, size it etc.