I have been working on lots of projects, including the rebuild and relaunch of TextSanta.net, along with some other pretty fun projects. I am also working on rebranding idProjections, the company is going through a lot of transitions, new partners, new clients, and I think a new design should reflect that as well as the fact that my business cards were redesigned…

Keep your eyes peeled for the next month as I work on this site in my down time. You can follow me on Twitter @idPro. Lots of new things happening before the first of next year, with these changes, your company will be in great hands, you’ll be amazed at not only the product that we’ll be able to put out, but the speed and the cost will be blow your mind!

Thanks for those who care just enough to read this, and by next year I plan on putting a lot more effort into this blog!

From the brief amount of time I spent going through what Mosso has to offer and speaking with their tech support I was pretty surprised. Their Live Chat support is phenomenal. They helped right some issues with a DNN install and made a few other things clear as well. Their phone support is lacking, which is sad, because sometimes I will get a call from a client while driving down the highway that something is wrong and I’ll need to call Tech Support to fix the issue, but I don’t think I could trust their call center from the experience that I had.

Anyway, this is not a review or a rant on Mosso, this is supposed to be a quick guide on an easy way to stream your Flash videos from their Cloud Files CDN hosting package. Hit the jump fo some mo… sso… HA! See what I did there?

Step 1:

You are going to want to setup your Cloud Files account with Mosso. From there you will need to follow all of the internal information on how to get your files uploaded, etc… I use Cyberduck for Mac and it’s extremely easy to get the ball rolling on this.

Step II:

In your Mosso admin panel, go to Hosting and then Cloud Files. Select the container you are wanting to use that has your videos in it and at the bottom make sure you have the container set to Public. Once set to public, it will provide you a link to that container. The link itself will no provide you a listing of files, so it’s relatively private in that sense. You will need to keep that link handy.

Step Three:

Open up your Adobe Flash and you should be presented with a Welcome Screen. If not, then click File > New.

I chose Flash File (ActionScript 3.0), but if you have an older version, 2.0 might work just as well.

Step Quatro:

Once you have a new Flash file opened up, head back and select File > Import > Import Video.

There you will be presented with two options, the first one is to select a local file, the second is to use a link for a file already on the web. We’ll be using the second link.

Paste in the link you remembered earlier and then add your movie name and extension, so you should have something like http://cdn.cloudfiles.mosso.com/c1234/movie.flv

Click the Continue button.

Another Step:

You will now be presented with the skin you’d like to use on your streaming video. You can change colors and there are lots of options as to how you would like for the skin to be presented.

Click Continue and then click Finish.

It will ask you to save your FLA, choose a location and hit OK. It will save both the FLA file as well as a SWF file that carries the skin information for your player. You will probably want to change some of the Parameters, such as autoPlay. You will also want to make sure the white background matches up with the same size as your video in the Properties tab to make sure you don’t have any overhang as you try to place your video on your website.

Final Step:

After you have the background lined up behind your video you will want to once more click File > Export > Export Video

You will choose where you want to save your SWF file. Simply upload your SWF file and the SWF file that generates your video player skin and then you can call the SWF file however you feel best suites your needs. I like SWFObject.

If you have any questions about this post or any comments or point out any mistakes, feel free to leave a comment!

CSS Naked Day

Hope it helps someone else!

Solution for WordPress 2.7 ISE Error 500 from CodeDifferent

In this post I am going to cover .load() as well as the jQuery UI Sortables plugin. I hope this is beneficial to someone!

Well, I figured since I have nothing to write about, I would post my findings in hope that maybe some day a searcher will happen across this site and will find it helpful.

First off – .load()

.load() was actually really simple to implement once I figured out exactly what it was doing. It’s just a simple GET request! Write the PHP as if it was a form running a GET to the PHP file, but it can do more. What if you need to insert a HTML document into the middle of your site when a certain criteria is met.

An easy example is if you have a radio button, which clicked will load a new part to the form so that they can fill out the rest of the required information.

Here is the sample form

<form id="itemName" enctype="multipart/form-data" method="post">
<div>
 
<label for="frmItemName">Name</label>
      <input id="frmItemName" class="required" name="frmItemName" type="text" />
 
<label for="frmItemDesc">Description</label>
      <textarea id="frmItemDesc" class="required" name="frmItemDesc"></textarea>
 
<label for="frmItemCat">Category</label>
      <input id="frmItemCat" class="required" name="frmItemCat" type="text" />
 
<input id="frmItemType1txt" name="frmItemType" type="radio" /><label for="frmItemType">1 Text Area</label>
      	 <input id="frmItemType3txt" name="frmItemType" type="radio" /><label for="frmItemType">3 Text Areas</label>
 
<label for="frmItemImg">Image</label>
      <input id="frmItemImg" class="required" name="frmItemImg" type="file" />
 
<input id="frmItemAdd" name="frmItemAdd" type="submit" value="Add Item" /></div>
</form>

And then you could do a bit of JavaScript like this

$("#frmItemType1txt").click(function () {
		$("#frmItemTypeInput").show("slow", function() {
			$("#frmItemTypeInput").load("item1Txt.html")
		});
	});

This will wait for your to click on the first radio button and then it will make sure the #frmItemTypeInput div is visible in case your CSS or any other JavaScript hides it and then it will load the item1Txt.html file into that div.

That HTML document can be as simple as

<p><label for="frmItemType1txtInput">Message</label>
<textarea name="frmItemType1txtInput" id="frmItemType1txtInput" class="required"></textarea></p>

Nothing more to it!

Now, let’s say you want to get fancy and you are using the jQuery UI Sortables plugin and you want your order to write itself to a database as soon as you change the placement. No need for a submit button (unless JS is disabled of course). Here is what I came up with to make the Sortables work as you’d hope!

I had a bunch of categories that needed to be able to be arranged and rearranged as necessary. So, lets say you already have the categories in your database and you just need to pull them out of the database, show them, and then have them sortable and rewrite back to the database of their new position.

<div id="info"></div>
<ul id="catList">
  	<?php 
  		$result = mysql_query('SELECT * FROM Category ORDER BY Placement'); // I have a column called Placement with nothing in it to start out with set to INT (11)
 			while ($row = mysql_fetch_array($result)) {
				print '<li id="catItem_' . $row{'id'} . '" class="sortitem">
								<img src="img/arrow.png" alt="Arrange Category" title="Arrange Category" class="handle" />
								<span class="catName">' . $row{'CategoryName'} . "</span>
							</li>n";
  		}
		?>
  </ul>

This will run through the while statement pulling out all the categories within the database. I would recommend keeping the #info div hidden or display: none, but during testing purposes, keep it visible. Any MySQL errors will appear there.

The JavaScript is pretty simple for this. Associate the image to be the grabbing point to sort everything and then call the load function to write the placement back to the database.

$(document).ready(function() {
	$("#catList").sortable({
		handle : '.handle',
		update : function () {
			var order = $('#catList').sortable('serialize');
			$("#info").load("sortCategory.php?"+order);
		}
	});
});

Pretty simple so far, right? So, the sortCategory.php has got to be where all the hard stuff happens, right? Wrong. Just another quick MySQL query.

<?php
require_once('../../dbConfig.php');
foreach ($_GET['catItem'] as $position => $item) :
	mysql_query("UPDATE Category SET Placement = $position WHERE id = $item") or die(mysql_error());
endforeach;
?>

It’s seriously that easy to have the Sortables write back to the database.

Feel free to comment if you have any questions about what I did here or if you have any way to make what I did better/easier/faster!

And I am sure there are tons others, but it would helpful to get these for a start…

Anyway, he had a picture of his parent’s farm that would change according to not only the time of day, but the current weather. He didn’t want to share his code with the public as I am sure it took quit a while to produce so I can understand, but I liked the concept and wanted to use it.

I was soon given a project where I could use a technique like that – Charlies Farm and Home – so I began working on it.

Now, there are many different ways to have done this, but I decided I wanted it to work on the user’s end, so that the user would get an image depicting the time of day it currently was at their house. Obviously, since it was going to be a client side appication, I am going to use JavaScript to accomplish the task.

First off, we are going to create the XHTML document that we are going to use. Now, I am a big fan of writing my XHTML semantically, so I am going to be using the <h1> tag for my header and then doing a quick image replacement technique, so that the header is not only SEO friendly, but usable by those with disabilities and users will even have a fall back in case JavaScript is disabled on their browser.

Let’s start with a really basic XHTML document.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Title</title>
</head>
 
<body>
<h1>Site or Page Title</h1>
</body>
</html>

After we get the basics done, we can throw in a little CSS. We will wrap the text inside the <h1> tag with a span and then we will use CSS to hide the text from browsers with CSS enabled and we will show them an image in it’s place. This will be the default image that users with JavaScript disabled will see.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Title</title>
<style type="text/css">
h1 {
  background: #000 url(../image/directory/1.jpg) no-repeat left top;
  width: 801px;
  height: 241px;
}
h1 span {
  display: none;
}
</style>
</head>
 
<body>
<h1><span>Site or Page Title</span></h1>
</body>
</html>

Now, let’s take a look at the the JavaScript we are going to use to grab the images…

function getIMG()
{
 datetoday = new Date();
 timenow=datetoday.getTime();
 datetoday.setTime(timenow);
 thehour = datetoday.getHours();
 
 if (thehour > 22)
  display = "../image/directory/1.jpg";
 else if (thehour > 18)
  display = "../image/directory/2.jpg";
 else if (thehour > 8)
  display = "../image/directory/3.jpg";
 else if (thehour > 5)
  display = "../image/directory/4.jpg";
 else if (thehour > 1)
  display = "../image/directory/1.jpg";
 else
  display = "../image/directory/1.jpg";
 
 var image = '<';  image+='img alt="" src=../image/directory/' + display + ' /';  image+='>';
 
 document.write(image);
}

We will add a call to the JavaScript in the HTML and then add the call to grab the image that the JavaScript chooses.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Site Title</title>
<script src="rotator.js" type="text/javascript"></script>
<style type="text/css">
h1 {
  background: #000 url(../image/directory/1.jpg) no-repeat left top;
  width: 801px;
  height: 241px;
}
h1 span {
  display: none;
}
</style>
</head>
 
<body>
<h1><span>Site or Page Title</span><script type="text/javascript">getIMG();</script></h1>
</body>
</html>

That’s pretty much it. You’ll need to edit the size of the image in the CSS for the <h1> tag and you will need to specify the path to your image directory in the JavaScript and of course make sure all the images are named correctly.

Feel free to comment if you have any suggestions or questions, I will work on a jQuery version of this one of these days and post it.

So, I was working on a recent project and needed an easy way to track referral URL uses. They weren’t going to really be affiliates, but they got a small commission off of every sale they drove to the site… so ya, I guess it was like an affiliate tracker… but I just needed something quick and easy so I came up with this little script.

$urlParts = explode('.', $_SERVER['HTTP_HOST']);
$referralID = $urlParts[0];
setcookie("site_referral", "" . $referralID . "", time()+7200, "/", "example.com");
header("Location: https://www.example.com/");

Basically, I gave each referrer a subdomain (http://referrer.example.com/) and then when the user goes to this subdomain your site will grab the URL and break it into three parts via the explode function. It will then grab the first part, which is obviously the referral’s ID you gave them.

It will then write that to a cookie, or if you wanted a database, and then it redirects the user to the homepage of your site like nothing ever happened.

I set the cookie so that I could pass it around a few times, but you could replace the setcookie function with something like this.

$referralSet = mysql_query("SELECT referral FROM referralLogs WHERE referral="$referralID"");
if($referralSet != $referralID {
mysql_query("INSERT INTO referralLogs SET referral="$referralID"") or die(mysql_error());
}
$referralCounter = mysql_query("SELECT counter FROM referralLogs WHERE referral="$referralID" LIMIT 1");
$referralCounter++;
$referralUpdate = mysql_query("UPDATE referralLogs WHERE referral="$referral" SET count="$referralCounter"");

I didn’t use this exact code, but I think it is valid. This should check to see if you already have the current referral code in your database and if not, add it. Then it will grab the counter from the database and increase the count by one.

If you run into any errors, with it, feel free to post a comment below and I will try and help out!

I ate too much at my family’s house and then ended up heading over to my wife’s family’s house and ate even more.

Today is the celebration of my new site going live and I have high hopes that someday people will have a reason to stop in! Until then I will sit here and talk to myself…

My name is Kyle and I fancy myself a Web Developer of sorts. I am a freelance coder out of St. Louis, MO. I plan on keeping this site up-to-date with my latest projects and my pieces of code that I might find interesting.

This is my first blog so we will see how this goes!

I enjoy coding in CSS, XHTML, PHP, MySQL, jQuery, and plan on learning Ruby on Rails here one of these days! I enjoy spending time on CSSCreator.com trying to help out other CSS coders and receiving some help there myself whenever I run into a wall.

If you have any questions about anything that I post on here please feel free to post a comment and hopefully I will be able to help out or if I happen to get two readers, someone else will be able to come along and help out.