Javascript/Pop up window

Advertisement

Expert: Randy L. Taylor - 9/20/2004


Question
Sorry to hear about hurrican Ivan... I have been watching it on the news broadcasts. It was a nasty one.

Just 2 more questions.. Simple ones this time.

1st..
I noticed in the script that you gave me, when you start putting in the text in the scripturesArray, you had added some "+'s". Why? Could you not have put in the entire John 3:16 text without breaking it up.?

2nd...
Can you tell me what a "global reference" is.

Thanks again
Eric
-------------------------
Followup To
Question -
Thanks for your reply... It definetly answers my problem.
The program works great and does exactly what I want it to do. However, I am not sure how to make it more practical for my purposes.

I will tell you what I am doing with this......

I am developing a church web-site that has page named "Statement of Faith". On that page... there are multiple bible scripture references. (In the neighborhood of 60 or 70).

When the cursor is put over the popup, the window will popup with the scripture reference inside. What I have been doing up untill now is developing a seperate page for every scripture reference... using an openwindow command and referring to the individual pages. Which of course would be rediculous if you have to close out  60 or 70 of these pages. That's why I want it to automatically close out the page.

Your program would work great if I could put it into a .js file and make the appropriate changes on demand or insert the text with the formating that I require... but I to single out each scriptural referrence is something that I am not sure how to do.

What I am afraid of is that I will have to copy and paste the program (the one that you gave me) for each time that I want the link to be activated and a new referrence to be referred to. That would make the coding extremly confusing. I don't mind making individual pages for the scripture quotes (that's relatively quick and easy),however, I think you can see my concern. If you can continue to help with this... I would be greatly indebted to you. Thanks.

Eric

-------------------------
Followup To
Question -
I am developing a web page that has a pop up window that occurs when a person "mouseover" a particular link. My problem is that I want the popup to self close when the mouse moves off the hyper link.

Note: I am not looking for a time out on the pop up. Rather... I  want it to close when the cursor moves off the link.

Do you have any suggestions? I have searched the internet high and low and cannot find a script that fits my need.

Thanking you in advance

Eric
Answer -
Hi there Eric,

In order to do something like that, you'll have to keep a global reference to the popup and have the onmouseover and onmouseout events use that to open and close the window.  I made a sample HTML page that does just that, and I have pasted the code at the bottom of this message.  Let me know if you any problems utilizing it on your own page. :)

take care,
Randy L. Taylor

<HTML>
<head>
</head>
<BODY>
 <a onmouseover="openPopUp()" onmouseout="closePopUp()">
   Mouse over to open the popup, mouse out to close it
 </a>
</BODY>
</HTML>
<SCRIPT language="javascript">
var popUpWin;
function openPopUp(){
 popUpWin = open("", "", "height=50, width=100, top=400, left=400");
 popUpWin.document.open();
 popUpWin.document.write("Hi, this is a popup!");
}
function closePopUp(){
 popUpWin.close();
}
</SCRIPT>


Answer -
Hi there Eric,

You may have gotten this twice, I just wanted to explain the long delay in receiving this - a little thing called Hurricane Ivan has caused me some unexpected delays. :)

I made a sample HTML page that does what you are looking for I think.  I put a lot of comments in so I think that you can see what is going on and add to it and modify it to be exactly what you want.  But, if you have any questions let me know!  

One thing to note is that you can put whatever text inside the links that you want - all that matters is what you pass to the showScripture() function.

take care,
Randy L. Taylor

<html>
<head>
 <title>Mouseover Popups</title>
</head>
<body>
<!-- Notice here how the showScripture() function is passed a string
    of the scripture to show-->
John 3:16
John 3:17
John 3:18
</body>
</html>

<!--Note:rather than using a <script> tag section like this, you
   could put all this code into a .js file if you prefer-->
   
<script language="JavaScript">

//a global reference to the popup window
var scriptureWindow;

//an array containing all the scriptures to show
var scripturesArray = new Array();

//this part of the code establishes the string
//indexes to the different scriptures
//the string you pass in the onmouseover event of the link,
//must match what you use below
scripturesArray['John 3:16'] = "For God so loved the world, that he gave his only begotten Son, " +
         "that whosoever believeth in him should not perish, "+
         "but have everlasting life.";
scripturesArray['John 3:17'] = "For God sent not his Son into the world to condemn the world; " +
         "but that the world through him might be saved.";
scripturesArray['John 3:18'] = "He that believeth on him is not condemned: "+
         "but he that believeth not is condemned already, "+
         "because he hath not believed in the name of "+
         "the only begotten Son of God";

//this function shows the scripture indexed
//by the input string, and sets the position of the
//poup window relative to where the user moused over the link
function showScripture(scriptureToShow){
 scriptureWindow = window.open("", "Scripture", "top=" + (event.screenY+10) +
         ", left = " + (event.screenX+10) + ", " +
         "height=200, width=300");
 scriptureWindow.document.open();
 scriptureWindow.document.write("<html><head><title>"+ scriptureToShow + "</title></head>");
 scriptureWindow.document.write(scripturesArray[scriptureToShow]);
 scriptureWindow.document.close();
}

//hides the popup window
function hideScripture(){
 scriptureWindow.close();
}
</script>


Answer
Hi there Eric,

Well, these might be a bit more lengthy answers than you were expecting, but here goes... :)

Question 1: I noticed in the script that you gave me, when you start putting in the text in the scripturesArray, you had added some "+'s". Why? Could you not have put in the entire John 3:16 text without breaking it up.?

Answer:
The only reason I used the continuation characters ("+" signs) was for readability of the code.  You are absolutely right in that they aren't necessary.  But, as a professional programmer, I am in the habit of trying to make not just code that works, but code that other people can understand and read easily. :)

Now, you're probably saying to yourself - "It sure doesn't seem more readable to me!".  But programmers generally hate having to scroll any code window horizontally, and so breaking strings up like that is a very common practice and considering good when it comes to readability. :)



Question 2: Can you tell me what a "global reference" is.

Answer:
A global reference is a variable that is available to every function on the page (thus the "global" part) and points to some object used by more than one of those functions (thus the "reference" part).  

Since I needed both functions to have a reference to the popup window, a global reference is exactly what I needed.  So, I made sure to define the variable outside of any functions, and that way all functions can use it if they need to.

The downside to global reference variables is that it can be easy for functions to interfere with each other (especially in larger, more complex programs), but sometimes you have no choice. :)


I hope that answers your questions!

take care,
Randy L. Taylor

P.S. Thank you for the nice comments on your review!  You're very welcome.

Javascript

All Answers

Answers by Expert:

Ask Experts

Volunteer

Randy L. Taylor

Expertise

I can answer advanced questions concerning most aspects of web programming including HTML, DHTML, DOM, JavaScript, Cookies, Internet Explorer, and CSSs. I can answer basic questions concerning XML and ActiveX. I can also answer questions concerning Regular Expressions, logical design algorithms, and Object Oriented Programming.

Experience


Past/Present clients
Upp Business Systems, LLC
Headquarters Standard Systems Group, USAF

©2012 About.com, a part of The New York Times Company. All rights reserved.