PDA

View Full Version : popup window close any where on window onclick



Girard Ibanez
07-31-2006, 01:15 AM
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

mburt
07-31-2006, 01:28 AM
<input type="button" value="[X]" style="float:right" onclick="window.close()">

Girard Ibanez
07-31-2006, 01:35 AM
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()">

mburt
07-31-2006, 01:38 AM
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.


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

Girard Ibanez
07-31-2006, 02:00 AM
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.

Girard Ibanez
07-31-2006, 02:21 AM
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 ....

mburt
07-31-2006, 02:34 AM
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()}

Girard Ibanez
07-31-2006, 05:34 AM
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:

jscheuer1
07-31-2006, 09:01 PM
Something like this will work, probably need some fine tuning:


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();
}

mburt
07-31-2006, 09:08 PM
Oh. I thought Girard Ibanez was using a pop-up from a source (URL).

Girard Ibanez
07-31-2006, 11:36 PM
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//

Girard Ibanez
07-31-2006, 11:58 PM
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

jscheuer1
08-01-2006, 03:25 AM
Change:


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

to:


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

Sorry about that.

Girard Ibanez
08-01-2006, 04:11 AM
John,

Don't be sorry .....

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


Thanks again.

Girard Ibanez
08-01-2006, 07:08 PM
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

jscheuer1
08-01-2006, 10:27 PM
Well, the size of the window (and therefore the image in it) is set here (green):


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:


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+'">');

Girard Ibanez
08-02-2006, 04:38 AM
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/myraptor/r50v2/r50v2_collective_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.

jscheuer1
08-02-2006, 08:05 PM
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.

Girard Ibanez
08-02-2006, 11:30 PM
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

jscheuer1
08-03-2006, 07:28 AM
Well, you could make up a script that tests the location.href and then updates style based upon that. For example:


<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:


<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.

Girard Ibanez
08-04-2006, 04:09 AM
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/myraptor/r50v2/r50v2_collective_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;
}