CornEmpire Software

Archive for the ‘Programming’ Category

I’ve been recently doing some Javascript coding and ran across an error in IE that I wasn’t noticing in Firefox (well…there are hundreds of these, but this one is a show stopper).

It is a small validation script for a form to do some checking before submitting.  It’s pretty simple, take a look:

function validateForm(){
	/*
	 * First, get the fields.
	 */
	var name = document.getElementById('name').value;
	var title = document.getElementById('title').value;
	var phone = document.getElementById('phone').value;
	var email = document.getElementById('email').value;
	var description = document.getElementById('description').value;
	var cost = document.getElementById('cost').value;
	//pic1 = document.getElementById('pic1').value;
	//pic2 = document.getElementById('pic2').value;
	if(name == ""){
		alert('You must enter your name.');
	}
	else if(title == ""){
		alert('You must enter give your ad a title.');
	}
	else if(phone == "" && email == ""){
		alert('You must enter a phone number or email address.');
	}
	else if(description == ""){
		alert('You must enter a description of the item you want to buy, sell or trade.');
	}
	else if(isNaN(cost)){
		alert('You must enter a numeric cost, without the $ symbol.');
	}
	else{
		document.getElementById('submit').style.display = 'block';
		alert('Please press the submit button below.');
	}
}

Executing the script on a blank form in FF would give the correct response, Enter in a name. In IE, I would get an error on Line 15 about Object Expected (in the script, line 15 is actually a commented out line, so that error isn’t very helpful).

I then remembered something about IE automatically creating variables from a form by the name/id of the form field on the page. Since my variable name, and field name were the same, it would try to compare its self created object against my test, instead of the variable that I was assigning, thus creating an error.

To work around this, I had to rename all of my variables (I could have also renamed all of my fields):

function validateForm(){
	/*
	 * First, get the fields.
	 */
	var bsname = document.getElementById('name').value;
	var bstitle = document.getElementById('title').value;
	var bsphone = document.getElementById('phone').value;
	var bsemail = document.getElementById('email').value;
	var bsdescription = document.getElementById('description').value;
	var bscost = document.getElementById('cost').value;
	//pic1 = document.getElementById('pic1').value;
	//pic2 = document.getElementById('pic2').value;
	if(bsname == ""){
		alert('You must enter your name.');
	}
	else if(bstitle == ""){
		alert('You must enter give your ad a title.');
	}
	else if(bsphone == "" && bsemail == ""){
		alert('You must enter a phone number or email address.');
	}
	else if(bsdescription == ""){
		alert('You must enter a description of the item you want to buy, sell or trade.');
	}
	else if(isNaN(bscost)){
		alert('You must enter a numeric cost, without the $ symbol.');
	}
	else{
		document.getElementById('submit').style.display = 'block';
		alert('Please press the submit button below.');
	}
}

After this, it runs fine in both browsers. I remember hitting my head off the wall for a LONG time when I originally encountered this error, so hopefully this will save someone else some time.

Introduction

The picture library built into Desire2Learn doesn’t allow for instructors to create their own libraries. Rather, all images are shared across all courses. I wrote this bit of javascript to simulate and extend the idea of a picture library in D2L (this code can also be used for any HTML page). There are two parts to the library:

The Widget Code (or HTML code for any page)

This code is the skeleton of the library. The javascript code modifies this code in order to display the images.

The Javascript Code

This is the brain of the library. It must be installed somewhere locally and linked to the widget/HTML page. There is a configuration section at the top of the file where you can configure the library.

Here is the widget/HTML code that must be displayed on the pages.
You should not edit this code as it will cause the library to malfunction.

<html>
<head>
	<script src="picturelibrary.js" type="text/javascript"></script>
</head>
<body>

	<div id="imgwdgt">
		<img src="piclibimages/test.png" id="imghldr" />
		<p id="imgcptn"></p>
	</div>
	<script type="text/javascript">
		startLibrary();
	</script>

</body>
</html>

Here is the javascript code: picturelibrary.js
You will need to right click this link and save the file to your computer before you can upload it to your D2L shell/website.

Notes About The Code

Not all the variables need to be set a certain way in order for the code to function. However, it is a good idea to set up any variables that you don’t want to use to be false. Some variables require others, so read the comments in the code carefully. I’ve also included them below:

/**
	This script presents a picture library to the user.  It has several configurable
	options which are outlined below.
	With this script, you can:
		1) Present a slide show to users
		2) Present a navigatable interface for users to scroll through the library
		3) Release an image to them based on a set date/time
		4) Release a random image from the library
**/
/**
	=== CONFIG START ===
	Here you need to specify the path to this script.  To do this you must go to the
	Edit Course section of the site, and go to Manage Files.  Then, copy the URL for
	this javascript file.  Paste the URL into the variable below.  Then remove the
	filename at the end of the URL "picturelibrary.js".  Replace the file name with
	"piclibimages/" (no quotes)
*/
var path = "http://online.mun.ca/content/Sandbox/TT/Sp07/piclibimages/";

/**
	List your images here.  By default, it will look under the piclibimages folder
	in your course files.  Change the path above if you want to load from a different
	location.

	Place the file names in the array below.  A comma must be placed after each entry
	except for the last entry in the list.
*/

var images = new Array(
	"dataspace-code.gif",
	"MedSchoolCrestSmall.gif",
	"crest-toothpaste.png"
);

/**
	List your captions here.  

	If you enable captions below, you must have at least as many captions as you have images
	above or you will probably get a javascript error when the script scrolls through the
	images.  You can have blank captions, denoted with "" in the array below.
*/
var captions = new Array(
	"The icon I created for the phpLive -> Dataspace integration.",
	"Medicine School Crest",
	"Crest Toothpaste"
);

/**
	This array contains dates for the date release function of this script.  If you do not
	want to use date release, you can leave this blank.

	Each entry goes with an entry in the images array and should be formatted with
	the startdate-enddate for the image.  Only one image can be displayed at a time
	with this method.
	A sample entry is: 200809190000-200809222359
		This will allow the	image to be viewed on Friday the 19th until Monday the 22nd.

	If you want your images	to rotate through a day, you can place a * for the date and
	just include the time.
	A sample entry is: *0000-*1200
		This will allow your image to appear on the site between midnight and noon every
		day.
*/

var releasedates = new Array(
	"*0000-*1230",
	"*1231-*1300",
	"*1301-*2359"
);
//var releasedates = new Array(
//	"200809170000-200809182359",
//	"200809190000-200809202359",
//	"200809210000-200809222359"
//);

/**
	Here you can set your options for the script.
	resize = controls if images are automatically resized.  If true, width and
			 height must be set.  These are measured in pixels.  Be careful using this
			 as it will likely distort your pictures horribly.  It is much better to
			 resize your pictures before uploading them to the system.
	navigation = controls if users can navigate through images, or if they see
				 a loop of images.
	imagepause = the amount of time in milliseconds that an image appears before
				 changing.  Only used if navigation is false. 4000 = 4 seconds
	captionsdisplay = if this is set to true, the caption is pulled from the above array
			   		  and displayed with the picture.
	daterelease = Shows an image on a specific date/for a specific time.  The datearray
			      must store the dates in the format yearmonthday-yearmonthday or *time-*time.
			      the first date/time being when the image is displayed, and the second
			      when it ends.
	imagestyle = This is a CSS style tag that will be added to the image tag.
	captionstyle = This is a CSS style take that will be added to the caption.
	widgetsytle = This is a CSS style tag that well be added to the div around the image
				  and caption.
	randomstart = This variable controls whether or not the script begins on a random image.
	singlerandom = If true, this displays a single random image when the page is loaded.
*/			      

var resize = false;
var width = "";
var height = "";
var navigation = true;
var imagepause = "5000";
var captionsdisplay = true;
var daterelease = true;
var imagestyle = "margin: 0 auto; display: block; padding: 2px;";
var captionstyle = "margin: 1px; text-size: 10px; text-align: center; border: 1px dashed gray;";
var widgetstyle = "border: 2px solid black;";
var randomstart = true;
var singlerandom = false;

/**
	=== CONFIG END ===
	This is the end of configurable items for this script.  Do not edit the code below.
*/

Also of note is the use of CSS styles. I cannot figure out how to apply an arbitrary CSS style string to an HTML element. I can change specific things, but I cannot allow any style tags. If anyone knows how, please contact me.

Because of this limitation, the CSS code will only recognize:

• border
• text-align
• font-size
• margin
• display
• padding

You can add in your own code to the bottom by editing the doStyle function, or you can apply your own styles to the raw widget/HTML code. You must leave the style variables blank in this script.

Final Thoughts

I hope you find this useful, either for your D2L course, or for your personal homepage. I’ll probably post updates from time to time on this script depending on the feedback I receive. If you have any comments, you can leave them below. Take a look at some of the variable configurations below to see examples of how the code can be used.

Examples

If you are doing any PHP command line scripting, you may have wondered how you can add a bit of simple colouring to your scripts so it is easier for you, or your clients to view the output.

Using some Bash codes, you can colour the output to the terminal (assuming you are running the scripts in Bash or some other compatible terminal). Depending on the font colours and effects you want, you can use any of this code in your script. Just place it at the top, and include the variables in your output:

/*
 * Font Colours
 */
$BLACK="33[0;30m"; //Can not be used on backgrounds
$DARKGRAY="33[1;30m"; //Can be used on backgrounds
$RED="33[0;31m"; //Can not be used on backgrounds
$LIGHTRED="33[1;31m"; //Can be used on backgrounds
$GREEN="33[0;32m"; //Can not be used on backgrounds
$LIGHTGREEN="33[1;32m"; //Can be used on backgrounds
$BROWN="33[0;33m"; //Can not be used on backgrounds
$YELLOW="33[1;33m"; //Can be used on backgrounds
$BLUE="33[0;34m"; //Can not be used on backgrounds
$LIGHTBLUE="33[1;34m"; //Can be used on backgrounds
$PURPLE="33[0;35m"; //Can not be used on backgrounds
$LIGHTPURPLE="33[1;35m"; //Can be used on backgrounds
$CYAN="33[0;36m"; //Can not be used on backgrounds
$LIGHTCYAN="33[1;36m"; //Can be used on backgrounds
$LIGHTGRAY="33[0;37m"; //Can not be used on backgrounds
$WHITE="33[1;37m"; //Can be used on backgrounds
/*
 * Bolded colours that can be used on backgrounds
 * Duplicates of the colours above with BOLD in the name
 */
$BOLDBLACK="33[1;30m";
$BOLDRED="33[1;31m";
$BOLDGREEN="33[1;32m";
$BOLDBROWN="33[1;33m";
$BOLDBLUE="33[1;34m";
$BOLDPURPLE="33[1;35m";
$BOLDCYAN="33[1;36m";
$BOLDGRAY="33[1;37m";
/*
 * Background Colours
 */
$BLACKBG="33[0;40m";
$REDBG="33[0;41m";
$GREENBG="33[0;42m";
$BROWNBG="33[0;43m";
$BLUEBG="33[0;44m";
$PURPLEBG="33[0;45m";
$CYANBG="33[0;46m";
$LIGHTGRAYBG="33[0;47m";
/*
 * Font Effects
 */
$UNDERLINE="33[4;30m";
$BLINK="33[5;30m"; //Doesn't seem to work.
$INVERSE="33[7;30m";
$INVISIBLE="33[8;30m"; //Pretty pointless
/*
 * Turn it back to the default
 */
$DEFAULT="33[0m";

To test this out, you can place this in a php script and execute it:

echo "<-- Font Colours -->
";
echo "$BLACK This is BLACK
";
echo "$DARKGRAY This is DARKGRAY
";
echo "$RED This is RED
";
echo "$LIGHTRED This is LIGHTRED
";
echo "$GREEN This is GREEN
";
echo "$LIGHTGREEN This is LIGHTGREEN
";
echo "$BROWN This is BROWN
";
echo "$YELLOW This is YELLOW
";
echo "$BLUE This is BLUE
";
echo "$LIGHTBLUE This is LIGHTBLUE
";
echo "$PURPLE This is PURPLE
";
echo "$LIGHTPURPLE This is LIGHTPURPLE
";
echo "$CYAN This is CYAN
";
echo "$LIGHTCYAN This is LIGHTCYAN
";
echo "$LIGHTGRAY This is LIGHTGRAY
";
echo "$WHITE This is WHITE
";

echo "<-- Backgrounds -->
";
echo "$BLACKBG This is BLACKBG
";
echo "$REDBG This is REDBG
";
echo "$GREENBG This is GREENBG
";
echo "$BROWNBG This is BROWNBG
";
echo "$BLUEBG This is BLUEBG
";
echo "$PURPLEBG This is PURPLEBG
";
echo "$CYANBG This is CYANBG
";
echo "$LIGHTGRAYBG This is LIGHTGRAYBG
";

echo "<-- Font Effects -->
";
echo "$UNDERLINE This is UNDERLINE{$DEFAULT}
";
echo "$BLINK This is BLINK //Doesn't seem to work.
";
echo "$INVERSE This is INVERSE{$DEFAULT}
";
echo "$INVISIBLE This is INVISIBLE {$DEFAULT}//Invisible - Pretty pointless
";
echo "$DEFAULT Back to the default.
";

echo "<-- A Few Examples -->
";
echo "{$REDBG}{$YELLOW}This is a red background, with yellow font that {$UNDERLINE}{$YELLOW}is underlined{$DEFAULT}{$REDBG}{$YELLOW} for a portion. {$DEFAULT}
";
echo "{$CYANBG}{$LIGHTRED}This is red text on a cyan background. {$DEFAULT}
";

And practical example would be:

//Check to see if courses.txt exists
if(!file_exists($courses)){
	echo "$RED The courses.txt file doesn't exist. $DEFAULT
";
	exit();
}