Archive

Posts Tagged ‘javascript’

Simple Calendar Control for Web Application

March 19th, 2010 Eric Silva No comments

I originally did this back in 2007, but did not want to lose the content, so I decided to put it up here.

I found a robust and relatively simple calendar control to use for web UIs. It can use a pop-up window or a floating <div> tag. I prefer the latter as it makes the page look good and avoids a pop-up.

To use the control simply put the CalendarPopup.js file in your application’s “scripts” directory and be sure to include it in your JSP. (I used this in a Java app, but you can apply it to any language.)

Download the and put it in your images directory.

Add the following lines to your application’s JavaScript file (or include on the same page if you don’t have an external JS file):

// Set up Calendar control
var calObj = new CalendarPopup("calDiv");
calObj.showNavigationDropdowns();
calObj.setMonthNames('JAN','FEB','MAR','APR','MAY','JUN','JUL','AUG','SEP','OCT','NOV','DEC');

// Handle the Calendar control
function doCalendar(destObjId, srcObj) {
    calObj.select(document.getElementById(destObjId),srcObj.id,'dd-MMM-yyyy');
}

Then add the following lines to your JSP:

<script>document.write(getCalendarStyles());</script>

In your JSP, add the following HTML code where you want your date field and calendar control:

<input id="dateField" style="width: auto;" maxlength="11" name="actualDate" size="25" type="text" />
<img id="imgCal" onclick="doCalendar('dateField',this);return false;" src="cal.gif" border="0" alt="" />

That’s it!

In order to workaround IE 6′s inability to recognize the z-index attribute on the tag, I made some modifications to the original JavaScript code. You will need to pass the an ID value to be used for the hidden that will overlay the box.

var calObj = new CalendarPopup("calDiv", "calFrame");

You will also need to specify the following styles in a stylesheet. The ID values in the stylesheet must match the names of your DIV and IFRAME IDs on your page.

div#calDiv {
    position:absolute; visibility:hidden;
    background-color:white;
    layer-background-color:white;
}
.select-free {
    position:absolute; z-index:10;/*any value*/
    overflow:hidden;/*must have*/
    width:152px;/*do not change value for calendar control */;
}
.select-free iframe#calFrame {
    display:none;/*sorry for IE5*/
    display:block;/*sorry for IE5*/
    position:absolute;/*must have*/
    top:0;/*must have*/
    left:0;/*must have*/
    z-index:-1;/*must have*/
    filter:mask();/*must have*/
    width:3000px;/*must have for any big value*/
    height:3000px/*must have for any big value*/;
}

Your JSP now needs the following line:

<div id="calDiv" class="select-free"></div>

Google Chrome Frame

November 25th, 2009 Eric Silva No comments

I installed Google Chrome Frame about a month ago, and I am very impressed with how responsive and quick Internet Explorer is with JavaScript intensive web pages now.  If you use a lot of JavaScript intensive websites, e.g., Facebook, Gmail, Google Maps, Google Calendar, etc., you will notice a significant improvement in performance when using IE with the Chome plug-in.

I was also interested to find out that the new Google Wave application only works with IE if you have the plug-in installed.

The plug-in works in Internet Explorer 6, 7, and 8, and requires you to have Windows XP, Vista, or Windows 7.

Windows Bulk File Move Script

October 13th, 2009 Eric Silva 1 comment

We have some applications that leave files sitting in a folder location out on some file server.  Eventually the disk space gets used up, or Windows starts choking because there are too many files in a directory, etc.  To delete the ‘old’ files, a support technician will try to connect to the file share, sort the files by date, and delete the files within a date range, e.g., older than a year.

What can happen, especially on a Window server, is that the operating system will attempt to load all the file information into memory, so that you can see it, and then tell it to sort all those files by date, which in turn, increases the time and memory needed by the OS to accomplish this.  If the file size/quantity is too great, the problem that caused you to want to clean up the disk space will reappear and choke Windows once more.

After going through this more than twice, I decided to write a JavaScript and execute it using the Windows Scripting Host (WSH).  The script performs very well and was able to iterate through a directory of 700,000+ files in a matter of an hour.  This was including the log statements from being enabled.  Disabling the ‘Echo’ statements may increase performance.

Here is the script:

var fso = new ActiveXObject('Scripting.FileSystemObject');
var argArray = new Array(WScript.Arguments.Named("src"), WScript.Arguments.Named("s"), ".");
var inSrcDirName = coalesceArray(argArray);

argArray = new Array(WScript.Arguments.Named("dest"), WScript.Arguments.Named("d"));
var archiveDir = coalesceArray(argArray);

argArray = new Array(WScript.Arguments.Named("year"), WScript.Arguments.Named("y"));
var beforeYear = coalesceArray(argArray);

if (archiveDir != null) {
	if (!fso.FolderExists(archiveDir)) {
		fso.CreateFolder(archiveDir);
	} else {
		fso.CreateFolder(archiveDir + "1");
	}
}

var gfldr = fso.GetFolder(inSrcDirName);

ArchiveFiles(gfldr);

function ArchiveFiles(fldr) {
	var i, bias;

	WScript.Echo("Loading all files...");
	for (files = new Enumerator(fldr.files); !files.atEnd(); files.moveNext()) {
		f = files.item();
		dt = new Date(f.DateCreated);
		bias = dt.getTimezoneOffset();

		dt.setMinutes(dt.getMinutes() - bias);

		fileYear = dt.getFullYear();
		//WScript.Echo(f.Name + ":" + fileYear);
		if (beforeYear > fileYear) {
			WScript.Echo("Moving \"" + f.Name + "\" with year " + fileYear + " to " + archiveDir);
			f.Move(archiveDir+"\\" + f.Name)
		} else {
			WScript.Echo("Skipping \"" + f.Name + "\" with year " + fileYear);
		}
	}
	WScript.Echo("Done loading files.");

}

function coalesceArray(arr) {
	var i;
	for (i = 0; i < arr.length; i++) {
		if (arr[i] != null) {
			return arr[i];
		}
	}
	return null;
}

Executing the script is performed by passing a source directory, destination directory (to move the files to), and a year to mark the year that all files must be equal to or younger than to not be moved as parameters.

Example:

cscript movefiles.js /s:c:\myapp\data /d:c:\backup\archive_2006 /y:2007

This will move all files from the c:\myapp\data folder that were created before January 1, 2007 to the c:\backup\archive_2006 folder.  The script can be easily modified to use the ‘modified’ or ‘accessed’ date instead.

Hope this helps someone else as much as it helped me.