Open New Browser Window with jQuery (Custom Size)
Posted by robert | Filed under jQuery
I sure this is nothing special but I thought I would share. I’ve been play around with jQuery and wanted to build an easy way to open a new browser window with a certain size for multiple links. Below is what I came up with. Click on the links below to see a simple demo.
click me 1 (fixed size)
click me 2 (fixed size w/ scrollbar)
Everything Together
First take a look at what the whole thing and later I will break it out.
<html>
<head>
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
<script type="text/javascript">
var windowSizeArray = [ "width=200,height=200",
"width=300,height=400,scrollbars=yes" ];
$(document).ready(function(){
$('.newWindow').click(function (event){
var url = $(this).attr("href");
var windowName = "popUp";//$(this).attr("name");
var windowSize = windowSizeArray[$(this).attr("rel")];
window.open(url, windowName, windowSize);
event.preventDefault();
});
});
</script>
</head>
<body>
<a href="http://www.flashmn.com/" rel="0" class="newWindow" >click me</a>
<a href="http://www.mnswf.com/" rel="1" class="newWindow" >click me</a>
</body>
</html>
Add the HTML Links
Lets start with our links in the of our html. Notice I used the “rel” attribute to determine the array slot I would like to use. I will be using an array to hold on the link information.
<a href="http://www.flashmn.com/" rel="0" class="newWindow" >click me</a> <a href="http://www.mnswf.com/" rel="1" class="newWindow" >click me</a>
Include the jQuery JavaScript library
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.js"></script>
Include the jQuery Script
Place this script below the include of the jQuery library. Below I explain what each line does.
<script type="text/javascript">
var windowSizeArray = [ "width=200,height=200",
"width=300,height=400,scrollbars=yes" ];
$(document).ready(function(){
$('.newWindow').click(function (event){
var url = $(this).attr("href");
var windowName = "popUp";//$(this).attr("name");
var windowSize = windowSizeArray[ $(this).attr("rel") ];
window.open(url, windowName, windowSize);
event.preventDefault();
});
});
</script>
The jQuery Script Explained
<script type="text/javascript">
//Created an array to hold onto the desired info.
var windowSizeArray = [ "width=200,height=200",
"width=300,height=400,scrollbars=yes" ];
$(document).ready(function(){
//Links that has the ".newWindow" class will call this script.
$('.newWindow').click(function (event){
// Gets the URL from the clicked link.
var url = $(this).attr("href");
/*Gets the name from the clicked link. Currently I commented out the
jquery script and just put "popUp" for a default name because I didn't
include the name in the links.*/
var windowName = "popUp";//$(this).attr("name");
/*Places the string from the array into the windowSize variable.
The array slot is determined by the "rel" number on the link.*/
var windowSize = windowSizeArray[ $(this).attr("rel") ];
//This method opens a new browser window.
window.open(url, windowName, windowSize);
/*Prevents the browser from executing the default action and
allows us to use the "window.open" within our script.*/
event.preventDefault();
});
});
</script>
New and Improved Version
Below I use the data attributes to set the size of the popup window. This way is more dynamic because you do not need to have extra logic in the JavaScript.
<html>
<head>
<title></title>
<script type="text/javascript" src="https://code.jquery.com/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$('.js-newWindow').click(function (event) {
event.preventDefault();
var $this = $(this);
var url = $this.attr("href");
var windowName = "popUp";
var windowSize = $this.data("popup");
window.open(url, windowName, windowSize);
});
});
</script>
</head>
<body>
<a href="http://www.typescriptlang.org/" class="js-newWindow" data-popup="width=200,height=200">click me</a>
<a href="http://nodejs.org/" class="js-newWindow" data-popup="width=300,height=500,scrollbars=yes">click me</a>
</body>
</html>
Hello, my name is Robert and I am an interactive developer at
October 24, 2010 at 9:36 pm
Your code is just what I was looking for!
Many thanks,
Vanessa
March 19, 2011 at 6:10 pm
Is there a way to position the window in the center of the screen?
March 19, 2011 at 9:21 pm
I would have to change the code a little but to get you started you could do something like this:
var windowWidth = 200;
var windowHeight = 200;
var windowLeft = parseInt((screen.availWidth/2) - (windowWidth/2));
var windowTop = parseInt((screen.availHeight/2) - (windowHeight/2));
var windowSize = "width=" + windowWidth + ",height=" + windowHeight + "left=" + windowLeft + ",top=" + windowTop + "screenX=" + windowLeft + ",screenY=" + windowTop;
March 20, 2011 at 3:03 pm
Thanks!
December 4, 2013 at 12:20 pm
robert nice one… except your missing 1 comma:
var windowSize = “width=” + windowWidth + “,height=” + windowHeight + “,left=” + windowLeft + “,top=” + windowTop;
July 10, 2011 at 3:36 am
Very useful, thanks!
August 24, 2011 at 6:48 am
It works like a charm …
I was having trouble using javaScript window.open which was not working properly in IE (I could not use spaces in link name). Someone suggested using jQuery
September 7, 2011 at 9:32 pm
That is what i am looking for !
Thank!
October 6, 2011 at 3:42 pm
Great script
Is there any way I could pass values to the new window?
eg. I’d get… var job_id = $(this).attr(“id”); ….and would like to pass the job_id value to the new window using this script.
Many thanks
October 10, 2011 at 8:09 pm
Many thanks for this extremely useful code!
October 17, 2011 at 8:18 pm
well explained! thanks bro!
October 19, 2011 at 12:47 pm
thanks very much, this code is very useful, simple, and easy to understand
November 18, 2011 at 11:26 am
Awesome thank you.
November 30, 2011 at 4:51 am
It’s working. Thanks!!! I was sarching this for an hour.
December 3, 2011 at 4:47 pm
This is a fantastic improvement on the current JS code I am using. I will also definitely be using the centre-screen code you replied to Veronica with.
Is there a way of removing the address bar in the new window?
Many Thanks
December 21, 2011 at 1:27 pm
Ei man thanks for share! :D
January 12, 2012 at 8:53 am
Thank you! Saved me time from trial and error!
January 13, 2012 at 1:52 am
Thank u Man !!!!!
January 31, 2012 at 12:03 am
Hi,
Jquery has undoubtedly provided solutions where javascript complex knowledge was required, I faced a similar problem with window.open functionality, tried to place a simple onClick function on a button to open a child popup, but in some IE it worked (at least for me) and some users faced a lot of problems in the same. (crazy stuff) . Still jquery managed to rescue me out of the situations and worked even with lof of bad stuffed cookies in careless users machines.
There is also one more behavior that I think jquery can improve is with the IE compatibility view settings, in this area IE disables the default behavior of jquery, if anybody has any idea, do lemme know…cheers…
February 29, 2012 at 4:31 am
Thanks a lot bro :)
March 13, 2012 at 1:51 am
thanks bro…great.
March 22, 2012 at 10:14 pm
Thanks for share this info!!!
April 11, 2012 at 3:29 am
Great! Thank Robert.
I was trying for window center
code:-
$(document).ready(function(){
$(‘.newWindow’).click(function (event){
var windowWidth = 700;
var windowHeight = 600;
var windowLeft = parseInt((screen.availWidth/2) – (windowWidth/2));
var windowTop = parseInt((screen.availHeight/2) – (windowHeight/2));
var windowSizeArray = [ “width=700,height=600”, “width=windowWidth,height=windowHeight,scrollbars=yes,top=’ + windowTop + ‘,screenX=’ + windowLeft + ‘,screenY=’+ windowTop’ “];
var url = $(this).attr(“href”);
var windowName = “popUp”;//$(this).attr(“name”);
var windowSize = windowSizeArray[$(this).attr(“rel”)];
window.open(url, windowName, windowSize);
event.preventDefault();
});
});
What have I wroing?
April 12, 2012 at 1:32 am
Hi,
This is what i want, I need one change to hide the address bar.
I put the following code:
var windowSizeArray = [ “width=1000,height=700,scrollbars=yes,status=no,toolbar=no,menubar=no,fullscreen=yes,location=no”]
Is there any parameter to hide the address bar with this script?
April 18, 2012 at 3:56 am
thanks for sharing this awesome script….
April 23, 2012 at 3:27 pm
Many, many thanks!
May 17, 2012 at 7:11 am
Thank you so much, this is exactly what I needed.
July 5, 2012 at 12:26 pm
Thanks!
July 10, 2012 at 3:42 am
can we have some alternate jquery to open a new window without using window.open().I asking becoz wndow.open will work properly in IE but it wont work in Firefox.
So can u share any code for that.
July 31, 2012 at 1:01 am
Thank you, It is a very good tutorial :)
November 7, 2012 at 9:14 am
THANK YOU!!! This helped me so much. :)
December 7, 2012 at 4:21 am
Thank for sharing….
December 30, 2012 at 12:48 pm
it is great! thank you very much and best regards.
March 21, 2013 at 9:00 am
First of all thank you for making this script available! It works perfectly. Three questions…
In an attempt to position the new window I use the syntax ‘window.moveTo(20,20);’
and the parent window moves not the new window. How can I correct this? Also is there a way to assign a background color to the new window? Lastly is it possible to assign the class .newWindow to the div containing the links instead of each link?
Once again, thanks for making this available!
July 26, 2013 at 3:58 am
this cool, thanks
August 27, 2013 at 2:21 pm
What if I want to use a form button to open a new window instead of a link, I think I need to Google some more. ;-)
September 22, 2013 at 10:18 pm
Thank u so much! This was extremely useful… still useful in 2013!
October 24, 2013 at 11:35 am
I would like this to happen without clicking any links…
Trying to make it happen after: $(document).ready(function(){
Can anybody help?
May 20, 2014 at 3:24 am
Thank you, I’ll be using that in my next project!
November 10, 2014 at 6:37 am
Thank you very much, very neat and clean code.
No hassles, just what I was looking for.
December 4, 2014 at 3:45 am
thank!
February 7, 2015 at 3:56 am
is it possible..
if we click on the links then this link will open in another browser not in same browser window ??
March 19, 2015 at 5:34 pm
Thank you so much! almost 5 years and its working like a charm…
August 14, 2015 at 4:16 am
LOVELY! :D Works like a charm
November 19, 2015 at 3:59 pm
Thank you very much :)
November 28, 2016 at 10:34 am
This is great. Is there a way in the newer version to have a default size but then be able to change with the data parameters?