Talking about Javascript.
Opening popups in JS is simple, but sometimes in the same page we need to open popups with different features. There are several scripts in the net doing this task but, as usual, none of them seemed to fit my needs
I decided to code a complete javascript popup opener in order to have one function that I can use in any situation.
These are the customizable parameters of your popup:
url: the string representing the url of the page you want to open in the popup. Default value: this page.
width: popup width, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen width. For example, if you enter 0.5, it will be parsed as 50% of screen width. Default value: half of the screen width.
height: popup height, in pixels. If you enter a value between 0 and 1, it will be parsed as a % of screen height. For example, if you enter 0.5, it will be parsed as 50% of screen height. Default value: half of the screen height.
xpos: x position of the upper left corner of the popup. It can be an integer or “left” or “right”. If you enter “left” your popup will appear in the leftmost part of the screen, if you enter “right” your popup will appear in the rightmost part of the screen. Default value: the one that will center the popup horizontally
ypos: y position of the upper left corner of the popup. It can be an integer or “top” or “bottom”. If you enter “top” your popup will appear in the topmost part of the screen, if you enter “bottm” your popup will appear in the bottommost part of the screen. Default value: the one that will center the popup vertically
xoffset: an integer representing amount of pixels, positive or negative, that will place the popup respectively to the left or to the right from its horizontal position. Default value: 0
yoffset: an integer representing the amount of pixels, positive or negative, that will place the popup respectively up or to the down from its vertical position. Default value: 0
name: window name, passed as a string. Default value: “propup”
scrollbars: can be “yes” or “no”, defining if the popup window will have scrollbars. Default value: no
resizable: can be “yes” or “no”, defining if the popup window can be resized. Default value: no
status: can be “yes” or “no”, defining if the popup window will show the status bar. Default value: no
locat: can be “yes” or “no”, defining if the popup window will have the location bar. Default value: no
toolbar: can be “yes” or “no”, defining if the popup window will have the toolbar. Default value: no
Let’s examine the script:
var propup = function(o) {
o.url = (typeof o.url == 'undefined') ? 'http://emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/': o.url;
o.width = (typeof o.width == 'undefined') ? screen.width/2 : o.width;
o.height = (typeof o.height == 'undefined') ? screen.height/2 : o.height;
if((o.width<=1)&&(o.width>0)){o.width*=screen.width}
if((o.height<=1)&&(o.height>0)){o.height*=screen.height}
o.xpos = (typeof o.xpos == 'undefined') ? (screen.width/2)-(o.width/2) : o.xpos;
o.ypos = (typeof o.ypos == 'undefined') ? (screen.height/2)-(o.height/2) : o.ypos;
o.xoffset = (typeof o.xoffset == 'undefined') ? 0 : o.xoffset;
o.yoffset = (typeof o.yoffset == 'undefined') ? 0 : o.yoffset;
o.name = (typeof o.name == 'undefined') ? 'propup' : o.name;
o.scrollbars = (typeof o.scrollbars == 'undefined') ? 'no' : o.scrollbars;
o.resizable = (typeof o.resizable == 'undefined') ? 'no' : o.resizable;
o.status = (typeof o.status == 'undefined') ? 'no' : o.status;
o.locat = (typeof o.locat == 'undefined') ? 'no' : o.locat;
o.toolbar = (typeof o.toolbar == 'undefined') ? 'no' : o.toolbar;
if(o.xpos == "left"){o.xpos=0;}
if(o.xpos == "right"){o.xpos = screen.width-o.width;}
if(o.ypos == "top"){o.ypos=0;}
if(o.ypos == "bottom"){o.ypos = screen.height-o.height;}
o.xpos += o.xoffset
o.ypos += o.yoffset
var scrollbarstext = 'scrollbars = '+o.scrollbars+",";
var resizabletext = 'resizable = '+o.resizable+",";
var statustext = 'status = '+o.status+",";
var locationtext = 'location = '+o.locat+",";
var toolbartext = 'toolbar = '+o.toolbar+",";
features = scrollbarstext+resizabletext+statustext;
features = features + locationtext+toolbartext;
features = features + 'width = '+o.width+',height = '+o.height;
features = features + ',top = ' + o.ypos;
features = features + ',left = ' + o.xpos;
var win = null;
win = window.open(o.url, o.name, features);
}
Line 1: Function declaration, with only one parameter. That’s possible because I am passing a Javascript object structure into a function as an argument. It’s a very good technique mostly because it allows flexibility in the order you will pass the arguments, and provides flexibility on optional arguments too. You will understand this technique later, when I will explain how to call the function.
Line 2: I am using a ternary operator to set a default value of “url” if the user did not specify it when called the function. Basically this line can be translated into:
if(typeof o.url == 'undefined'){
o.url = 'http://emanueleferonato.com/2007/09/21/complete-javascript-popup-opener/';
}
else {
o.url = o.url
}
Where the “else” statement is pretty useless. We can say that line 2 assigns a default value to “url” if not provided by the user
Line 3: Assigns a default value to “width” if not provided by the user. In this case the default width is half of the screen width.
Line 4: Same thing with the height
Line 5: If width is a number between 0 and 1, then I assign to width the (width*100)% of the screen width.
Line 6: Same thing with the height
Line 7: Assigns a default value to “xpos” if not provided by the user
Line 8: Same thing with “ypos”
Line 9: Same thing with “xoffset”
Line 10: Same thing with “yoffset”
Line 11: Same thing with “name”
Line 12: Same thing with “scrollbars”
Line 13: Same thing with “resizable”
Line 14: Same thing with “status”
Line 15: Same thing with “locat”
Line 16: Same thing with “toolbar”
Line 18: Assigning 0 to xpos if xpos was “left”. In this way the popup is at the leftmost of the screen
Line 19: Same concept with the right
Lines 21-22: Same concept with “ypos”
Lines 24-25: Adding the x and y offset to x and y positions
Lines 27-31: Declaring strings according to passed arguments
Lines 33-37: Constructing the string with popup attributes
Lines 39-40: Calling the javascript classic window.open with all arguments. You can find more information about HTML DOM open() Method at this page.
Now let’s see how to use this function. As I said, you can pass arguments in the order you prefer and if you even decide if passing arguments or letting the function use its default values.
This is the source code of a typical page using propup
And this is the result:
As you can see, there is not limit about the number of arguments you can pass or the order you are passing arguments in.
Simply copy the code, use it and enjoy! Should you use this function in your site, please let me know! I would be so proud (almost…)
Never miss an update! Subscribe, and I will bother you by email only when a new game or full source code comes out.