Javascript open new window

To open a new window by using javascript we need to use window.open method. We can customize the window.open method as per the requirement.

Syntax:

window.open([URL], [Window Name], [Feature List], [Replace]);

Simple Example:

<a href="javascript:%20void(0)" onclick="window.open('popup.html', 'windowname1', 'width=200, height=77'); return false;">Click here for simple popup window</a>

This is a simple window.open method with minimum features included.

The features supported by the window.open method is:

Width --- Auto --- specifies width of the new window in pixels
height --- Auto --- height of the window in pixels
top --- Auto --- specifies window position
left --- Auto --- specifies window position
directories --- no--- should the directories bar be shown? (Links bar)
location --- no--- specifies the presence of the location bar
resizable --- no--- specifies whether the window can be resized.
menubar --- no--- specifies the presence of the menu bar
toolbar --- no--- specifies the presence of the toolbar
scrollbars --- no--- specifies the presence of the scrollbars
status --- no--- specifies the presence of the statusbar

Example when added the above features is:

<a href="javascript: void(0)"
onclick="window.open('popup.html',
'windowname2',
'width=200, \
height=77, \
directories=no, \
location=no, \
menubar=no, \
resizable=no, \
scrollbars=1, \
status=no, \
toolbar=no');
return false;">Click here for specific popup window</a>

Check the Date

The below script provides to how to check the entered date is the correct date or not like by selecting the april if we select 31 days it has to prompt the entered date is the invalid date. Such type of scenarios can be tested with the below javascript.

var mth = new Array(' ','january','february','march','april','may','june','july','august','september','october','november','december');
var day = new Array(31,28,31,30,31,30,31,31,30,31,30,31);

function validateDate(fld,fmt,rng) {
var dd, mm, yy;var today = new Date;var t = new Date;fld = stripBlanks(fld);
if (fld == '') return false;var d1 = fld.split('\/');
if (d1.length != 3) d1 = fld.split(' ');
if (d1.length != 3) return false;
if (fmt == 'u' || fmt == 'U') {
dd = d1[1]; mm = d1[0]; yy = d1[2];
}
else if (fmt == 'j' || fmt == 'J') {
dd = d1[2]; mm = d1[1]; yy = d1[0];
}
else if (fmt == 'w' || fmt == 'W'){
dd = d1[0]; mm = d1[1]; yy = d1[2];
}
else return false;
var n = dd.lastIndexOf('st');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('nd');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('rd');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf('th');
if (n > -1) dd = dd.substr(0,n);
n = dd.lastIndexOf(',');
if (n > -1) dd = dd.substr(0,n);
n = mm.lastIndexOf(',');
if (n > -1) mm = mm.substr(0,n);
if (!isNumber(dd)) return false;
if (!isNumber(yy)) return false;
if (!isNumber(mm)) {
var nn = mm.toLowerCase();
for (var i=1; i < 13; i++) {
if (nn == mth[i] ||
nn == mth[i].substr(0,3)) {
mm = i; i = 13;
}
}
}
if (!isNumber(mm)) return false;
dd = parseFloat(dd); mm = parseFloat(mm); yy = parseFloat(yy);
if (yy < 100) yy += 2000;
if (yy < 1582 || yy > 4881) return false;
if (mm == 2 && (yy%400 == 0 || (yy%4 == 0 && yy%100 != 0))) day[mm-1]++;
if (mm < 1 || mm > 12) return false;
if (dd < 1 || dd > day[mm-1]) return false;
t.setDate(dd); t.setMonth(mm-1); t.setFullYear(yy);
if (rng == 'p' || rng == 'P') {
if (t > today) return false;
}
else if (rng == 'f' || rng == 'F') {
if (t < today) return false;
}
else if (rng != 'a' && rng != 'A') return false;
return true;

Compare two dates

When working with the date of birth we need to check the date. We can check the date by writing the server side script. But when writing the server side script it takes so much time for the user which may not be usefull in some scenarios.

Below is the sample javascript method which compares the two date and proivdes the result whether the entered date is greater than the current date.

function comparedates()
{
var userdate=Date.parse("06/19/2008");

var currentdate=new Date;
if(userdate>Date.parse(currentdate))
{
alert("User Entered Date is greater then Current Date.");
}
else
{
alert("User Entered Date is less than the Current Date");
}
}

Validating the image

In the Forms the mostly common task we use is uploading the image. When uploading the image we are in need of certain condition like we need only images to be uploaded or only the documents files to be uploaded.
For such type of requirements we need to provide the javascript code for restricting the users from uploading. This script will be validated at the client side so there is not burden on the server side. Hence makes the server work more easier.

Below is the javascript code for checking the uploaded image is image format or not and intern check whether the uploaded image format is jpg,gif or png format.

function validate()
{
var extensions = new Array("jpg","jpeg","gif","png","bmp");

/*
// Alternative way to create the array

var extensions = new Array();

extensions[1] = "jpg";
extensions[0] = "jpeg";
extensions[2] = "gif";
extensions[3] = "png";
extensions[4] = "bmp";
*/

var image_file = document.form.image_file.value;

var image_length = document.form.image_file.value.length;

var pos = image_file.lastIndexOf('.') + 1;

var ext = image_file.substring(pos, image_length);

var final_ext = ext.toLowerCase();

for (i = 0; i < extensions.length; i++)
{
if(extensions[i] == final_ext)
{
return true;
}
}

alert("You must upload an image file with one of the following extensions: "+ extensions.join(', ') +".");
return false;
}


When ever you want to validate the file uploading control just copy this script and paste wherever you want to validate.If you want more formats you can add on the ext array.

The form is

<form name="form" action="http://test.com/test" enctype="multipart/form-data" method="post" onSubmit="return validate();">
<h2>Validate image on upload</h2>



Upload an image: <INPUT type="file" name="image_file"> <input type="submit" name="submit" value="Submit">

</form>

Fixed Header and footer

I have gone through so many websites for the fixed header and footer and i found the below code as the best suitable for any type of browser.
IN the below downloaded code you will view only the CSS file which will make your work so easier. Everything is maintained in the CSS fiie. You need to just download the files and copy the selected CSS and use where ever you need to keep the header and the footer styles.

In this we have used the DIV tags to maintain the Header and the footer styles. The main advantage of this code is that it works best for all type of browsers(mozilla, internet explorer......)