You are here: irt.org | Articles | JavaScript | Window | Dictionary Popup Utility [ previous next ]
Published on: Monday 7th July 1997 By: Martin Webb
This article will describe the how to open simple sibling windows and how to control the contents of the sibling windows.
This article was inspired by a question asked in the newsgroup comp.lang.javascript. This article goes far, far beyond the reply I made.
Note, the following two examples, make use of the location search property, and as such will not work offline when using Microsoft Internet Explorer 3.x.
Take a look at the following paragraph:
You can connect a telephone to a computer to enable you to send electronic messages around the world.
If you click on any of the highlighted words a window will popup with the definition of that word.
This can easily be performed by opening a specfic location for each word definition, however the approach taken here, is to open the same location, but passing it a different value in the search property:
<SCRIPT LANGUAGE="JavaScript"><!--
function def(word) {
if (word == 'around') {
type = 'adverb';
definition = '1. nearby.<BR> I left my bag around here.<P>2. in every direction.<BR>For miles around.'
}
else if (word == 'computer') {
type = 'noun';
definition = 'an electronic machine that arranges information and stores it on disks or tapes, using a set of instructions called a program.';
}
else if (word == 'connect') {
type = 'connects connecting connected - verb';
definition = 'to link up two things.<BR>Connecting telephone to a computer.';
}
else if (word == 'message') {
type = 'messages - noun';
definition = 'a piece of information or an instruction that you send to someone or leave for them.';
}
else if (word == 'send') {
type = 'send sending sent - verb';
definition = 'to make someone or something go to another place.<BR>Send me a postcard!';
}
else if (word == 'telephone') {
type = 'noun';
definition = 'an instrument that allows you to talk to and hear people who are far away, by means of electrical signals.';
}
var filename = 'def.htm' + '?' + word + '|' + type + '|' + definition;
myFloater = window.open(filename,'myWindow','scrollbars=no,status=no,width=300,height=200')
}
//--></SCRIPT>
<P>
You can
<A HREF="javascript:def('connect')" onMouseOver="status='';return true">connect</A>
a
<A HREF="javascript:def('telephone')" onMouseOver="status='';return true">telephone</A>
to a
<A HREF="javascript:def('computer')" onMouseOver="status='';return true">computer</A>
to enable you to
<A HREF="javascript:def('send')" onMouseOver="status='';return true">send</A>
electronic
<A HREF="javascript:def('message')" onMouseOver="status='';return true">messages</A>
<A HREF="javascript:def('around')" onMouseOver="status='';return true">around</A>
the world.
</P>Each of the highlighted words uses javascript: within the HREF to invoke a JavaScript function: def() passing it a copy of the word highlighted. It also sets the status bar message to blank, using the onMouseOver event, to ensure that the location javascript:def('word') is not shown. Note, if return true is left out, then the status bar message may not be set correctly on some browsers.
The def() function then checks which word was passed across, setting the type and definition, which are then added to def.htm and ? to form filename. The | character is used as a separator between the various components - this will aid the splitting of the string later.
This filename is then used by the window open() method as the location of the popup window.
The def.htm then needs to strip the search propert, excluding the ?, which is then written to the document:
<BODY>
<SCRIPT LANGUAGE="JavaScript"><!--
function strip(string) {
var first = string.indexOf("|");
var second = string.indexOf("|",first+1);
outputDefinition(string.substring(0,first),
string.substring(first+1,second),
string.substring(second+1,string.length));
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript1.1"><!--
function strip(string) {
var myArray = string.split('|');
outputDefinition(myArray[0],myArray[1],myArray[2]);
}
//--></SCRIPT>
<SCRIPT LANGUAGE="JavaScript"><!--
function outputDefinition(word,type,definition) {
document.write('<BIG>' + unescape(word) + '<\/BIG><BR>');
document.write('<I>' + unescape(type) + '<\/I><BR>');
document.write(unescape(definition));
}
strip(self.location.search.substring(1));
//--></SCRIPT>
</BODY>This uses two different versions of the strip() function, one of which is invoked by browsers supporting JavaScript1.1 and the other for browsers supporting JavaScript.
This is done, because the split() method was introduce from JavaScript 1.1 onwards.
In the JavaScript1.1 version the split() method is used to the split the string into three separate elements of myArray[].
In the JavaScript version the same effect is achieved by using a combination of indexOf() and substring() methods.
Each of the two strip() functions passes the three values to the outputDefinition() function for output to the document.
The previous example, although trite, will soon take up alot of space within the document if expanded any further, and, as it stands, only works for the current document.
The basic example can be enhanced further. Rather then store the definitons within the main document, the definitions can be kept in the file thats opened in the popup window. All we then need to do in the main window is pass the word to be looked up in the dictionary.
Lets rewrite that original paragraph:
You can connect a telephone to a computer to enable you to send electronic messages around the world.
<SCRIPT LANGUAGE="JavaScript"><!--
function dd(word) {
myFloater = window.open('define.htm' + '?' + word,
'myWindow','scrollbars=no,status=no,width=300,height=300')
}
//--></SCRIPT>
<P>You can <A HREF="javascript:dd('connect')">connect</A> a
<A HREF="javascript:dd('telephone')">telephone</A> to a
<A HREF="javascript:dd('computer')">computer</A> to enable you to
<A HREF="javascript:dd('send')">send</A> electronic
<A HREF="javascript:dd('messages')">messages</A>
<A HREF="javascript:dd('around')">around</A> the world.This time we are only passing word to the define.htm file by appending it with the ?.
The onMouseOver events have also been removed - this makes the document smaller.
The functionality required to hold and display the dictionary definition is held within define.htm:
<BODY onBlur="window.focus()">
<SCRIPT LANGUAGE="JavaScript"><!--
function Definition(word,type,definition) {
this.word = word;
this.type = type;
this.definition = definition
}
function setDefinition(word,type,definition) {
myDefinition[item++] = new Definition(word,type,definition);
}
var item = 0;
var myDefinition = new Array();
setDefinition('around',
'adverb',
'<B>1<\/B>. nearby.<P><I>I left my bag <B>around<\/B> here<\/I>.<P><B>2<\/B> in every direction.<P><I>For miles <I>around<\/I>.');
setDefinition('computer',
'noun',
'an electronic machine that arranges information and stores it on disks or tapes, using a set of instructions called a program.');
setDefinition('connect',
'<\/I><B>connects connecting connected<\/B><I> verb',
'to link up two things.<P><I><B>Connecting<\/B> telephone to a computer<\/I>.');
setDefinition('message',
'<\/I><B>messages<\/B><I> noun',
'a piece of information or an instruction that you send to someone or leave for them.');
setDefinition('send',
'<\/I><B>send sending sent<\/B><I> verb',
'to make someone or something go to another place.<P><I><B>Send<\/B> me a postcard!<\/I>');
setDefinition('telephone',
'noun',
'an instrument that allows you to talk to and hear people who are far away, by means of electrical signals.');
var word = self.location.search.substring(1);
var found = false;
for (var i=0; i<item || !found; i++) {
if (word.indexOf(myDefinition[i].word) != -1) {
found = true;
document.write('<TABLE WIDTH=100% HEIGHT=100%><TR><TD VALIGN=TOP><H1>' + myDefinition[i].word + '<\/H1>');
document.write('<P><I>' + myDefinition[i].type + '<\/I><P>');
document.write(myDefinition[i].definition + '<\/TD><\/TR>');
if (i == item - 1) {
document.write('<TR><TD ALIGN=LEFT><A HREF="define.htm?');
document.write(myDefinition[i - 1].word + '">prev<\/A>');
document.write('<\/TD><\/TR><\/TABLE>');
}
else if (i == 0) {
document.write('<TR><TD ALIGN=RIGHT><A HREF="define.htm?');
document.write(myDefinition[i + 1].word + '">next<\/A>');
document.write('<\/TD><\/TR><\/TABLE>');
}
else {
document.write('<TR><TD><TABLE WIDTH=100%><TR><TD ALIGN=LEFT><A HREF="define.htm?');
document.write(myDefinition[i - 1].word + '">prev<\/A><\/TD>');
document.write('<TD ALIGN=RIGHT><A HREF="define.htm?');
document.write(myDefinition[i + 1].word + '">next<\/A><\/TD><\/TR><\/TABLE>');
document.write('<\/TD><\/TR><\/TABLE>');
}
}
}
if (!found) document.write('<H1>' + word + '<\/H1><P>Definition not found');
//--></SCRIPT>
</BODY>The first addition is the use of the onBlur event within the BODY tag, to reset the focus back to the window - this keeps the dictionary window on top of the main window.
The dictionary definitions are then held within the myDefiniton[] array. Which is an array of Definition objects, each created by the setDefinition() function.
The array is controlled by item which keeps track of how many items are in the array.
Once the array has been populated, the search property of the current location is obtained, minus the ? prefix.
The word property of each Definition object within the myDefinition[] array is compared with the search parameter. It uses the indexOf() method, so that, if passed for example the word 'messages' is passed, it will return with the show the definition of 'message'.
It performs this until either the end of the array is reached, or the word is found.
When the word is found it outputs the formatted definition to the document.
It also includes previous and next links to the word definitions each side of the current one. The links use a similar approach to the initial location, i.e.:
Where word is either the previous or next dictionary entry.
Once the define.htm file has been loaded into the browsers cache, then there is no overhead in calling it more than once.
The dictionary could be extended even further, for example, if a word in a definition exists as a definition itselfm then the word could be highlighted to allow a simple cross-reference, or, the inclusion of a simple search facility.
Almost complete control of pop-up windows
The JavaScript Pop-up Window Primer