AllExperts > Javascript 
Search      
Javascript
Volunteer
Answers to thousands of questions
 Home · More Javascript Questions · Answer Library  · Encyclopedia ·
More Javascript Answers
Question Library

Ask a question about Javascript
Volunteer
Experts of the Month
Expert Login

Awards

About Us
Tell friends
Link to Us
Disclaimer

 
 
 
 
About 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

 
   

You are here:  Experts > Computing/Technology > Focus on JavaScript > Javascript > Pop up window

Javascript - Pop up window


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

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-->
<a href="javascript:" onmouseover="showScripture('John 3:16')" onmouseout="hideScripture()">John 3:16</a>
<a href="javascript:" onmouseover="showScripture('John 3:17')" onmouseout="hideScripture()">John 3:17</a>
<a href="javascript:" onmouseover="showScripture('John 3:18')" onmouseout="hideScripture()">John 3:18</a>
</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>


Add to this Answer   Ask a Question


 
User Agreement | Privacy Policy | Kids' Privacy Policy | Help
Copyright  © 2008 About, Inc. AllExperts, AllExperts.com, and About.com are registered trademarks of About, Inc. All rights reserved.