CeltRuler.com - Writing code that makes stuff happen

allColorValues.html

<html>

<head>

<script type="text/javascript">

/**
*** allColorValues.html
**/


// hexadecimal values a-f
var a = 10;
var b = 11;
var c = 12;
var d = 13;
var e = 14;
var f = 15;


// other variables
var maxNumOfColors = 16777216; // 16 to the 6th power
var decimalNum = 0;
var hexNum = 0;
var num = 5000;


// loops through colors, starting from 0 and ending at 16777216
function loopThroughColors() {
        var i = 0;
        alert('Loading colors...');
        while (i < maxNumOfColors) {
        	for (var j = num - 5000; j < num; j++) {	
			convertToHex(j);
			convertToRGB();
			changeBackgroundColor();
        	}
		var confirmBox = confirm(num + ' colors so far! Continue?');
		if (confirmBox == true) {
			num += 5000;
		} else {
			i = maxNumOfColors;
		}
        }
	allDone(num);
}


// converts a decimal number to a hexadecimal number
function convertToHex(decimalNum) {
	hexNum = decimalNum.toString(16).toUpperCase();
	return hexNum;
}


// converts a hexadecimal number to RGB format
function convertToRGB() {
	var zeroes = "";

	if (hexNum.length < 6) {
		var blankDigits = 6 - hexNum.length;
		for (var i = 0; i < blankDigits; i++) {
			zeroes += "0";
		}
		hexNum = zeroes + hexNum;
	} 
        document.write("\n" + hexNum);
}


// changes the background color of the screen
function changeBackgroundColor() {
	document.bgColor = hexNum;
}


// end of script
function allDone(num) {
	document.write("<p align='center'>A whopping output here of " + num + " color values!</p>");
	document.write("<p align='center'><input type='button' value='Quit' onclick='location.href=\"allColorValues.html\"'></p>");
	alert('Done. You may need to click Back on your browser to see the final output of color values.');
}


// skips to final output of values
function skipToEnd() {
        for (var j = maxNumOfColors - 5000; j < maxNumOfColors; j++) {	
		convertToHex(j);
		convertToRGB();
		changeBackgroundColor();
        }
	alert('Showing last 5000 of ' + maxNumOfColors + ' total color values!');
	allDone(num);
}

</script>

</head>

<body>

<p>This script will write out every single color value that exists, changing the background color of the screen as it hits every 5,000th color until it reaches a grand total of 16,777,216 colors. To begin, click Start.</p>

<br />

<a href="#" onclick="loopThroughColors()">Start</a>

<br /><br />

<p>To skip to the end of the script, click Skip.</p>

<br />

<a href="#" onclick="skipToEnd()">Skip</a>

</body>

</html>

parseXML.html

<html>
<head>
<script type="text/javascript">

// basic function for loading an XML file
function loadXML(file) {
 try {
 // firefox, mozilla, opera, IE7/8 etc...     
 var req = new XMLHttpRequest();
 req.open("GET", file, false);
 req.send(null);
 return req.responseXML;
 }
 catch (e) {
 try {
 // internet explorer 4/5/6
 var xmlDoc = new ActiveXObject("Microsoft.XMLDOM");
 xmlDoc.async = false;
 xmlDoc.load(file);
 return xmlDoc;
 }
 catch (e) {
 alert(e.message);
 return null;
 }
 }
} 

</script>
</head>
<body>

<a name="A" id="A" href="#" onmouseover="showSelectedCategory(this)"
style="color: blue">List of Products in Category A</a> <br /> <br />
<a name="B" id="B" href="#" onmouseover="showSelectedCategory(this)"
style="color: red">List of Products in Category B</a> <br /> <br />
<a name="C" id="C" href="#" onmouseover="showSelectedCategory(this)"
style="color: green">List of Products in Category C</a> <br /> <br />

<br /> <br />

<!-- Following divs will display the data from the XML file.
 Dropdown boxes would work just as well -->

<div name="item0" id="item0"></div>
<div name="price0" id="price0"></div>
<div name="id0" id="id0"></div>

<br /> <br />

<div name="item1" id="item1"></div>
<div name="price1" id="price1"></div>
<div name="id1" id="id1"></div>

<br /> <br />

<div name="item2" id="item2"></div>
<div name="price2" id="price2"></div>
<div name="id2" id="id2"></div>

<br /> <br />

<div name="item3" id="item3"></div>
<div name="price3" id="price3"></div>
<div name="id3" id="id3"></div>

<script type="text/javascript">

var xmlDoc = loadXML("products.xml");

function showSelectedCategory(coloredLink) {

    var category = coloredLink.name;
    var categoryCounter = 0;
    var divNum = 4; // # of div sections. Example: 0,1,2,3 so that's 4

    for (var i = 0; i < xmlDoc.getElementsByTagName("product").length; i++) {

        var item = "item" + categoryCounter;
        var price = "price" + categoryCounter;
        var id = "id" + categoryCounter;
 
        // if the category variable matches a category in the XML file...
        if (xmlDoc.getElementsByTagName("product")
 [i].attributes.getNamedItem("category").nodeValue == category) {  

      
            // assign the XML data in the category to the divs for display
            document.getElementById(item).innerHTML =
 xmlDoc.getElementsByTagName("item")[i].childNodes[0].nodeValue;
            document.getElementById(price).innerHTML =
 xmlDoc.getElementsByTagName("price")[i].childNodes[0].nodeValue;
            document.getElementById(id).innerHTML =
 xmlDoc.getElementsByTagName("id")[i].childNodes[0].nodeValue;

            // increment by 1 each time the category matches
            categoryCounter++;


        } // end if
 
    } // end for-loop

    
    for (var straggler = categoryCounter; straggler < divNum; straggler++) {

        // these variables get assigned new values    
        item = "item" + straggler;
        price = "price" + straggler;
        id = "id" + straggler;        

	// set to blank
        document.getElementById(item).innerHTML = "";
        document.getElementById(price).innerHTML = "";
        document.getElementById(id).innerHTML = "";

    }

}
</script>
</body>
</html>

products.xml

<products>
 <product category="A">
 <item>Alligator French Roast 5 lb Bag (6.90/lb)</item>
 <price>34.50</price>
 <id>1000</id>
 </product>
 <product category="A">
 <item>Allstars Blend 5 lb Bag (6.65/lb)</item>
 <price>32.25</price>
 <id>1001</id>
 </product>
 <product category="B">
 <item>Beachcomber 10 lb Bag (7.90/lb)</item>
 <price>39.50</price>
 <id>1100</id>
 </product>
 <product category="B">
 <item>Bradford's 10 lb Bag (7.65/lb)</item>
 <price>39.25</price>
 <id>1101</id>
 </product>
 <product category="B">
 <item>Berry's 10 lb Bag (7.98/lb)</item>
 <price>41.25</price>
 <id>1102</id>
 </product>
 <product category="C">
 <item>Cherry Roast 15 lb Bag (8.90/lb)</item>
 <price>44.50</price>
 <id>1200</id>
 </product>
 <product category="C">
 <item>Carnival Blend 15 lb Bag (8.65/lb)</item>
 <price>47.25</price>
 <id>1201</id>
 </product>
 <product category="C">
 <item>Chocolate Blend 15 lb Bag (8.88/lb)</item>
 <price>57.25</price>
 <id>1202</id>
 </product>
 <product category="C">
 <item>Chai Blend 15 lb Bag (8.99/lb)</item>
 <price>62.25</price>
 <id>1203</id>
 </product>
</products>

generatedTable.html

<html>
<head>
<script type="text/javascript">

var row;
var numOfRows = 10;

function buildTable() {    

 // write out the table and table header tags
 document.write("<table border='1'><tr><th>Some Random Data</th></tr>");

 // make a loop to fill table rows with data
 for (var x = 0; x < numOfRows; x++) {

 // the id's of the table row and span tags
 var span = "randomNum_" + x;
 row = "row_" + x;

 // write out the rows
 document.write("<tr id='" + row + "'  onmouseover='changeRowColor(" + x + ")' onmouseout='changeRowColor(" + x + ")'><td><span id='" + span + "'></span></td></tr>");

 // make some random number data to put in the rows
 randomNum = Math.floor(Math.random() * 1000000);
 document.getElementById(span).innerHTML = randomNum; 

 }

 document.write("</table>");
}

function changeRowColor(rowNum) {

 row = "row_" + rowNum; // example: row_7

 // if the row color is not already white then
 // make it white, else make it #f4f4f4,
 // which in this example is the default color

 if (document.getElementById(row).style.backgroundColor != "white") {
 document.getElementById(row).style.backgroundColor = "white";
 } else {
 document.getElementById(row).style.backgroundColor = "#f4f4f4"; // default color
 }

}

</script>
</head>
<body>

<!-- the table will appear here -->
<div id="displayTable">
<script type="text/javascript">buildTable();</script>
</div>
</body>
</html>

randomColors.html

<html>
<head>
<script>
/**
*** next functions change some text color to random colors
**/

var timer = "";
var randCol = "";
var randomColorCounter = 1;
var isColorChanging = false;
var colorizedText = "CeltRuler.com";
var textColorChange = "";

function doRandomColorFunctions() {

    for (var i = 1; i < colorizedText.length + 1; i++) {
        textColorChange = "textColorChange" + i;
	 document.getElementById(textColorChange).style.color = "#000";	
        if (randomColorCounter % 2 != 0) {
            isColorChanging = true;
	     turnRandomColor(i);
        } else {
            isColorChanging = false;
	     clearTimeout(timer);
        }
    }
    randomColorCounter++;
}

function turnRandomColor(value) {

    var val = value;
    if (isColorChanging == true) {
        switch (val) {
	     case 1:
	         timer = setTimeout("turnRandomColor(1)", 100); 
                break;		
            case 2:
                timer = setTimeout("turnRandomColor(2)", 150); 
	         break;
	      case 3:
                timer = setTimeout("turnRandomColor(3)", 200); 
	         break;
	      case 4:
                timer = setTimeout("turnRandomColor(4)", 250); 
	         break;
            case 5:
                timer = setTimeout("turnRandomColor(5)", 300); 
	         break;
            case 6:
                 timer = setTimeout("turnRandomColor(6)", 350); 
	         break;
            case 7:
                timer = setTimeout("turnRandomColor(7)", 400); 
	         break;
            case 8:
                timer = setTimeout("turnRandomColor(8)", 450); 
	         break;
            case 9:
                timer = setTimeout("turnRandomColor(9)", 500); 
	         break;	
            case 10:
                timer = setTimeout("turnRandomColor(10)", 550); 
	         break;
            case 11:
                timer = setTimeout("turnRandomColor(11)", 600); 
	         break;
            case 12:
                timer = setTimeout("turnRandomColor(12)", 650); 
	         break;
            case 13:
                timer = setTimeout("turnRandomColor(13)", 700); 
	         break;
        }
	  randCol = randomColorValue();
	  textColorChange = "textColorChange" + val;
         document.getElementById(textColorChange).style.color = "#" + randCol; 
    }  
}

function randomColorValue() {

        // array to hold hexadecimal numbers
        var hexNum = ['0', '1', '2', '3', '4', '5', '6', '7', '8', '9', 'A', 'B', 'C', 'D', 'E', 'F'];

        var digit = [5]; // array to hold 6 digits
        var randomColor = "";

        // loop through array 6 times, storing each digit's value in digit[i]
        for (var i = 0; i < 6; i++) {
            digit[i] = Math.floor(Math.random() * 16); 
            randomColor = randomColor + hexNum[digit[i]];  
        }  

        return randomColor;
}
</script>
</head>
<body>
<span style="font-size:36px;" onclick="doRandomColorFunctions()">
    <span id="textColorChange1">C</span><span id="textColorChange2">e</span><span id="textColorChange3">l</span><span id="textColorChange4">t</span><span id="textColorChange5">R</span><span id="textColorChange6">u</span><span id="textColorChange7">l</span><span id="textColorChange8">e</span><span id="textColorChange9">r</span><span id="textColorChange10">.</span><span id="textColorChange11">c</span><span id="textColorChange12">o</span><span id="textColorChange13">m</span>
</span>

</body>
</html>

scrambleText.html

<html>
<head>
<script type="text/javascript">

/**
*** Scramble Text
**/

var text = "";

function scrambleText(element) {

	var elementName = element.id;

	text = document.getElementById(elementName).innerHTML;
	var elementNameLength = text.length;

	var codeArr = new Array();
	for (var x = 0; x < elementNameLength; x++) {
		codeArr[x] = document.getElementById(elementName).innerHTML.substr(x,1);
	}

	var randomNum;
	var listArr = new Array();

        for (x = 0; x < elementNameLength; x++) {
		randomNum = Math.floor(Math.random() * codeArr.length); 
		listArr[x] = codeArr.splice(randomNum,1);
		if (listArr[x] == " ") {
			listArr[x] = " "; // prevents blank member
		}
    	}

	var val = "";
  	for (x in listArr) {
		val += listArr[x];
	}

	document.getElementById(elementName).innerHTML = val;
}

function normalizeText(element) {

	var elementName = element.id;
	document.getElementById(elementName).innerHTML = text;
}

</script>
</head>
<body>

<p align="center" style="font-size: 50px">
<span name="scramble" id="scramble" onmouseover="scrambleText(this)" onmouseout="normalizeText(this)">Hello World! From tags to glitches.</span>
</p>


</body>
</html>

uploadImage.php

(*****Comments like these must be followed to run PHP!*****)

<html>
<head>
<title> Upload Image </title>
</head>
<body>
<form action="" method="post" enctype="multipart/form-data">
<br />
<input type="file" name="image">
<br />
<br />
<input name="submit" type="submit" value="Upload Image">
</form>

< ? php /***** remove the 2 spaces between the '< ? php' first! *****/

// Create a random number to add later to image so it wont
// cache when displayed.
$randomNumber = rand();

// if form has been submitted, proceed
if (isset($_POST['submit'])) {

 // get name of image file from form and assign it to $imageName
 $imageName = $_FILES['image']['name'];

 // Find out what the file extension is to
 // make sure it is an image.
 $fileExtension = substr($imageName, -3);
 $fileExtension2 = substr($imageName, -4);
 if ($fileExtension != "gif" && $fileExtension != "png" && $fileExtension
!= "jpg" && $fileExtension2 != "jpeg") {
 $imageName = "";
 echo "That is not an image file.";
 }

 // if $imageName has a value, proceed
 if ($imageName != "") {

 // Change the name of image to a set name
 // so the script can only upload 1 image
 // to the current directory.
 // Comment out next line to upload many images (not recommended!)
 $imageName = "myImage." . $fileExtension;

 // Assign to $imageFullPathName the name of the image
 // appended to the directory path.
 $imageFullPathName = "./" . $imageName;

 // If the image is to be stored in another folder, which
 // is already created, uncomment the line down below
 // and replace 'imagelocation' with name of folder.
 // $imageFullPathName = "imagelocation/" . $imageName;

 // Get the size of file, referring to its
 // temporary storage name.
 $imageSize = filesize($_FILES['image']['tmp_name']);

 // Copy the image to the location if it
 // is not more than 100 KB (or 100,000 bytes).
 // The $imageSize, 100000, may be changed to a
 // higher or lower number.
 if ($imageSize <= 100000) {

 // delete previous image if exists
 // preface 'myImage.*' with image directory if necessary
 foreach (glob("myImage.*") as $filename) {
 unlink($filename);
 }

 copy($_FILES['image']['tmp_name'], $imageFullPathName);
 echo "Image has been uploaded.<br />"; 

 echo "<a href='" . $imageFullPathName . "?" . $randomNumber . "'><img src='"
. $imageFullPathName . "?" . $randomNumber . "' height='50' width='50'
border='0' title='thumbnail' /></a>";

 } else {
 echo "Image has not been uploaded. The file is over 100 kilobytes.";
 }

 }

} 

/***** remove the space between the '?' and '>' first! *****/
? >

</body>
</html>