popup window close any where on window onclick

1) Script Title: Popup Window Generator "Wizard" Eric

2) Script URL (on DD): http://www.dynamicdrive.com/dynamicindex8/popwin.htm

3) Describe problem:


Need assistance in making Eric's popup window close.

Popup window is open by clicking on an image. I want to close the image by clicking anywhere on the popup window verse the "X" button.

Is there a way to insert a function for onclick win.close().

Thanks.



Edit/Delete Message

Code:

---

<input type="button" value="[X]" style="float:right" onclick="window.close()">

---

Hello Mike,

Here's the code to the .html:

<p><a href="r50v2_images/r50v2_collective_servo.jpg" onclick="NewWindow(this.href,'mywin','520','680','yes','center');return false" onfocus="this.blur()"> <img src="r50v2_images/r50v2_collective_servo_sml.jpg" alt="Collective Servo Rotated" width="200" height="267" border="0" class="img-R" /></a>



This opens a new window in which I want to click "ANYWHERE" on the new window.

I am not sure where to put this script at in the above code?

<input type="button" value="[X]" style="float:right" onclick="window.close()">

Oh, I thought you wanted it to be executed from a button.

This is a script that from any point on the page it will close the window.

Code:

---

<script>
document.onclick=function() {window.close()}
</script>

---

Hello Mike,

Here's Eric's JS script and its call up externally:

var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor
(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+
',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);}



Since it is a picture (jpg file) that is requested there are NO .html page to insert the below script to. So I am not sure where to insert this script to.

<script>
document.onclick=function() {window.close()}
</script>



Forgive me but I am self teaching myself and all of this html, css and JS is abit foreign.

I do appreciate any help and advice.... Thanks.

Ok the later script that mike gave works with DW8's behavoir.


Hopefully I can find a solution but if all else fail I'll have to go back to all the pages and change all the href scripst.

Thanks again for all the advice.


updated:
It still doesn't solve my problem since I can't put the script on the new window since it is not a .html page ....

Code:

---

var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor
(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+
',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open(mypage,myname,settings);}

document.onclick=function() {window.close()}

---

Mike,


I appreciate all your efforts but they all work if the popup window called out is a .html.

But for a image window .... I still have to use the "X" button to close.


I installed the code you gave and called it out using an external file but the pop up window does not close when clicked on any part of the popup window.

Not sure what I'm doing wrong....two days and still no luck ...:confused:

Something like this will work, probably need some fine tuning:

Code:

---

var win=null;
function NewWindow(mypage,myname,w,h,scroll,pos){
if(pos=="random"){LeftPosition=(screen.width)?Math.floor(Math.random()*(screen.width-w)):100;TopPosition=(screen.height)?Math.floor
(Math.random()*((screen.height-h)-75)):100;}
if(pos=="center"){LeftPosition=(screen.width)?(screen.width-w)/2:100;TopPosition=(screen.height)?(screen.height-h)/2:100;}
else if((pos!="center" && pos!="random") || pos==null){LeftPosition=0;TopPosition=20}
settings='width='+w+',height='+h+',top='+TopPosition+',left='+LeftPosition+',scrollbars='+scroll+
',location=no,directories=no,status=no,menubar=no,toolbar=no,resizable=yes';
win=window.open('',myname,settings);
win.document.write('<script type="text/javascript">onclick=function(){self.close();};<\/script>');
win.document.write('<body bgcolor="#dddddd"  text="#000000" style="margin:10px;padding:0;overflow:hidden;">');
win.document.write('<img width="'+(w-20)+'" height="'+(h-20)+'" galleryimg="no" src="'+mypage+'">');
win.document.close();
}

---

Oh. I thought Girard Ibanez was using a pop-up from a source (URL).

Thanks John ....No Tweaking necessary .... works

Now if only I can learn how to do this JS stuff. Two days of fiddling was well worth the wait.

Also, Thanks to Burt for all your efforts ... your contribution to my solution will work for the other parts of the site.



Problem solved //end//

Update .... Dang IE does not follow the script. Fire Fox ok ...


Here's the link .. Click on the image ... then click on image to close ...ie no work ... ff works

www.team-raptor.net/girard/myraptor

Thanks again for the assistance.

Enjoy my site while you're there ... construction on going.



girard

Change:

Code:

---

onclick=function(){self.close();};

---

to:

Code:

---

document.onclick=function(){self.close();};

---

Sorry about that.

John,

Don't be sorry .....

without your help I would not be this much closer to the way I want it.


Thanks again.

John,

Is there a way to set the new document window such that it can be set to the image size. Some of the images are not to proportion as called out in the html's href.

May I screw the script up since I remove the randow lines of js.

Some images are different sizes so I donot know how to address.


www.team-raptor.net/girard/myraptor

Well, the size of the window (and therefore the image in it) is set here (green):

Code:

---

NewWindow(this.href,'mywin','520','680','yes','center')

---

Width is followed by height. The idea is to set these to image width+20 and image height+20.

However, if you do not want to pass the image size in this way, you can remove the red parts from these two lines in the function I wrote, as shown below:

Code:

---

win.document.write('<body bgcolor="#dddddd"  text="#000000" style="margin:10px;padding:0;overflow:hidden;">');
win.document.write('<img width="'+(w-20)+'" height="'+(h-20)+'" galleryimg="no" src="'+mypage+'">');

---

John,

You R da man .... Thanks again.

I post this on another topic but no solution to my question. Can I achieve a left column hyper link nav to highlight/bold the text when the page is in the current view.

The look I am looking for is like this url's left nav:
http://www.w3schools.com/css/css_text.asp

Here's my URL and the left nav is also a duplicate of the top horiz nav {building tips >> raptor 50V2 >> collective servo }

http://team-raptor.net/girard/myrapt...servo_tip.html

I want to obtain a highlighted/bold text on the left column so that it show the viewer the current page. Kinda like a bread crumb effect.

Thanks again.

PS.

What site/books do you recommend to learn JS.

Since it appears that this left nav is on each page individually, why not just style the appropriate choice on each page as desired? That is how breadcrumb navs are usually done anyway.

I thought about that but each page is updated by a single nestled template.

The idea was to update the href links via the the nestle template vice going through all the pages to make a single change.

Unless I am missing what your are suggesting.

Girard

Well, you could make up a script that tests the location.href and then updates style based upon that. For example:

Code:

---

<style type="text/css">
.onthispage {
font-weight: bold;
text-decoration:underline;
}
</style>

<script type="text/javascript">

function hlightpagelink(){

var url=location.href

if(url.indexOf('home.htm')>-1)
document.getElementById('homelink').className='onthispage'
if(url.indexOf('about_us.htm')>-1)
document.getElementById('aboutlink').className='onthispage'
}

if ( typeof window.addEventListener != "undefined" )
    window.addEventListener( "load", hlightpagelink, false );
else if ( typeof window.attachEvent != "undefined" )
    window.attachEvent( "onload", hlightpagelink );
else {
    if ( window.onload != null ) {
        var oldOnload = window.onload;
        window.onload = function ( e ) {
            oldOnload( e );
            hlightpagelink();
        };
    }
    else
        window.onload = hlightpagelink;
}
</script>

---

In the above example, the page home.htm would set the class name of a link with the id of homelink to onthispage so that it would follow the styles set out for that class. If the page was about_us.htm, a link with the id of aboutlink would get this treatment.

The links that would be on each page for this example could look like so:

HTML Code:

---

<a href="home.htm" id="homelink">Home</a><br>
<a href="about_us.htm" id="aboutlink">About Us</a><br>

---

You would have to make up a test for each page similar to the two red ones in the above script and coordinate those with an assigned id for that link as shown in my two examples.

I don't know what else to say ...

THANKS jscheuer1 ... and thanks for assisting all of us forum members.

It works just the way I wanted it.

updated:

Anyway to solve why I can't get the text decoration to underline for the class "on this page" ... I may have conflicting css " a: " command:

URL http://team-raptor.net/girard/myrapt...servo_tip.html



CSS

#wrapperL{
width: 9em;
background: #e8e8e8;
color: #000000;
margin: 0;
float: left;
clear: left;
padding: 1.5em .5em;
}

#content1{
background: #e8e8e8;
color: #000000;
}

#content1 a:visited{
text-decoration: none;
}

#content1 a:link {
text-decoration: none;
color: #000000;
background: #e8e8e8;
}

#content1 a:hover {
font-weight: bold;
color: #C02020;
text-decoration: underline;
background: #e8e8e8;
}

#content1 a:active {
font-weight: bold;
color: #000000;
text-decoration: none;
background: #e8e8e8;
}

.onthispage {
font-weight: bold;
text-decoration: underline;
font-size: .75em;
color: #000000;
}