Javascript Popup - Dev Articles

Dev Articles Community Forums Sponsor:

Free Web 2.0 Code Generator! Generate data entry and reporting .NET Web apps in minutes. Quickly create visually stunning, feature-rich apps that are easy to customize and ready to deploy. Download Now!

September 20th, 2002, 08:19 AM

wAr-AnGeL

Forum Security

Join Date: Apr 2002

Location: Behind You

Posts: 479

Time spent in forums: 6 m
Reputation Power: 7

Javascript Popup

How would I make a link popup a new window with an address I specify? I'd like to set the height, width, etc...

Thanks

__________________

"Only Linux users see the end of crashes."
- Pl4t0

September 20th, 2002, 09:02 AM

Ben Rowe

Guest

Posts: n/a
Time spent in forums:
Reputation Power:

<a href="javascript: window.open('file.html', 'window_name','yes');">link name</a>

i think thats what you mean, let me knowif you dont?

September 20th, 2002, 09:59 AM

Crowe

Junior Member

Join Date: Jul 2002

Location: Huntsille, AL

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Here's some re-usable code for you.

Code:

<script language="JavaScript">
function popWin(URL,WD,HG) {
var strOptions = "width=" + WD + ",height=" + HG +
",toolbar=no,menubar=no,status=no,resize=no,resizab  le=no,directories=no,scrollbars=yes";
aWindow = window.open(URL, "popUp", strOptions);
}
</script>

Put that in your page header. Now you can call it like this (Note, you can pass variables to it)

Code:

<a href=\"javascript:popWin('whatever.html',450,400)\">Click Here</a>


<a href=\"javascript:popWin('whatever2.html',150,100)\">Click Here</a>


<a href=\"javascript:popWin('whatever50.html',650,600)\">Click Here</a>

And so on.

Hope that helps.

September 22nd, 2002, 01:06 AM

confuxion

Junior Member

Join Date: Aug 2002

Location: Burlington, VT

Posts: 28

Time spent in forums: < 1 sec
Reputation Power: 0

best cross-browser option

I've always been frustrated w/ the lack of cross-browser compatability when using a js pop-up. So I came up w/ the following and it works in any browser all the way back to NS 4.07. Put this code in your <head> section:

Code:

function winpop (url,w,h,scroll,resize,center) {
	if (center) {
		var winPos = ',top='+((screen.height - h) / 2)+',left='+((screen.width - w) / 2);
	}
	var scrollArg = (scroll == false) ? '' : ',scrollbars=1';
	var resizeArg = (resize == false) ? '' : ',resizable=1';
	flyout = window.open (url,"newin"+scroll+resize+center,"width=" + w + ",height=" + h + scrollArg + resizeArg + winPos);
	flyout.resizeTo(w,h);
	flyout.focus();
}

Then invoke it in your html as follows:

Code:

<a href="javascript:winpop('yourpage.html',440,320,0,0,0);">your link</a>

440 and 320 represent the width and height, respectively, of the popup window.
Note that, of the 3 zeros in the above example, the first indicates whether you want scrollbars (1) or not (0), the second represents whether the window should be resizable (1) or not (0), and the third indicates whether you want the popup to be centered on the screen (1) or not (0). One last thing to note: When indicating the width and height of your popups, add an extra 10 pixels to the height to account for a slight rendering difference seen in NS browsers. Hope this helps!

September 23rd, 2002, 03:06 PM

dgibson

Contributing User

Join Date: May 2002

Location: Urbana, MD, USA

Posts: 66

Time spent in forums: < 1 sec
Reputation Power: 7

I've always been disgusted with the use of href="javascript:someFunction()". Use the onclick event handler and provide a default URL with a target="_blank". The previously stated way will not work with some [old] browsers that don't support javaScript or ANY browser with JavaScript disabled, and therefore is also entirely non-accessible to many users with disabilities (many who will have JavaScript disabled).

So try something like:

Code:

<a href="whatever.html" target="_blank" onclick="window.open('whatever.html', 'window_name','yes'); return false;">Click here to pop up a new window in a cross-browser, accessible way!</a>

__________________
Doug Gibson
http://www.dgibson.net/
http://www.metalunderground.com/

September 23rd, 2002, 03:15 PM

Crowe

Junior Member

Join Date: Jul 2002

Location: Huntsille, AL

Posts: 14

Time spent in forums: < 1 sec
Reputation Power: 0

Doug, you know, since we started getting picky I almost posted that same thing! I'm with you 100% and I should have posted it from the start.

September 23rd, 2002, 05:53 PM

confuxion

Junior Member

Join Date: Aug 2002

Location: Burlington, VT

Posts: 28

Time spent in forums: < 1 sec
Reputation Power: 0

good points

Thank you for that point of view, it's very helpful. I apologize for the misnomer in my declaring the script I offered up as "cross-browser". You're correct about it's limitations and those are very important considerations. As someone who has several disabilities, it's always nice to see instances of advocacy. The code I submitted is merely one of the options among many and 'cross-browser' probably doesn't serve as an appropriate adjective. Thanks for pointing this out.

September 24th, 2002, 01:53 PM

dgibson

Contributing User

Join Date: May 2002

Location: Urbana, MD, USA

Posts: 66

Time spent in forums: < 1 sec
Reputation Power: 7

Hey, well I'm glad to see there's some agreement. I really see no use for the javascript: psuedo protocol. Can anyone give me a good reason to use it? I have yet to hear anything that makes me believe there's a reason for it... But there's got to be something, or something innovative done with it.

Thread Tools	Search this Thread
Email this Page	Search this Thread: Advanced Search
Display Modes	Rate This Thread
Linear Mode Switch to Hybrid Mode Switch to Threaded Mode	Rate This Thread: