The easiest OS to use in VirtualBox is Ubuntu, this is due to the way Linux uses drivers. Windows 7 will likely blue screen if you attempt to boot from your Windows 7 physical partition.

So, how to do this.

1. Download and install the latest version of VirtualBox make sure you download the 64bit edition if you use 64bit Windows 7
2. Open and administrator command prompt, click on the start button, and in search, type ‘cmd’, right click on cmd and click on Run as Administrator
3. cd to the install directory from VirtualBox, usually c:\program files\Oracle\VirtualBox.
   cd c:\program files\Oracle\VirtualBox’ in the command prompt
4. Now you need to figure out the right partition.
   VBoxManage internalcommands listpartitions -rawdisk \\.\PhysicalDrive0
5. Figure out which partition is your Ubuntu one, then you can use that partition to boot from. Mine was partition 5
6. Execute the command to make your virtual hard disk
   VBoxManage internalcommands createrawvmdk -filename c:\path\to\file.vmdk -rawdisk \\.\PhysicalDisk0 -partitions 5 
7. You can then use that hard drive in VirtualBox.
8. Start VirtualBox, You must always start VirtualBox as Administrator for this to work.
9. Create a new machine with Ubuntu, and make sure you select 64bit if you’re using 64bit, use your newly created hard drive as your machine’s drive. Set up your machine with a bridged network adapter and at least 16Mb virtual video RAM and 2Gb of Physical RAM. Select 3D Acceleration to make OpenGL work in Unity.
10. You can now boot up your virtual machine with Ubuntu.

Gosh darn it, it works!

Click here to go to my apps list.

1. Is your [technology name] on? If yes, go to 3.
2. Switch your [technology name] on.
3. Is it working? If yes, go to 5.
4. Turn it off. Then go to item 2.
5. Don’t fiddle with it. Enjoy your working [technology name].

Warning: Infinite loops may occur using this checklist.

You run a small business, you have a website, you advertise, you do all the usual things you should to promote your business, you can take that to the next level with a blog.

Ideally you should have a blog as part of your website, off a URL on your site such as http://www.example.com/blog/ or as a subdomain such as http://blog.example.com/ you can easily set up blogs on sites such as wordpress.com and blogger.com to use your domain, so you don’t even have to host it on your web server.

Blogging is a great way to connect with your customers/clients, it lets you showcase your expertise in your area, and give the latest information out to your customers. It doesn’t take long, if you do start a blog, you need to update it regularly, but just half an hour a day to do a post is just fine. Make sure when you do post a blog entry, it’s relevant to your site, and keep it brief. You want to talk to your customers on your blog as if you’re talking to a friend. Answer comments if you get any, and promote your blog. Most of all you can engage your customers in a conversation, this will give you more of an idea what your customers actually want.

• Get good relevant content on your site – good for getting high a rank in search engines.
• Get people linking to your site – good for getting high ranks in search engines.
• It showcases your expertise – if you can demonstrate your expertise, people trust you.
• It shows how passionate you are about your business – you are in business, you have to be passionate about your chosen business, or you wouldn’t be doing it.

How to start a blog:

• Contact me – I can help you set up a blog for your business.
• Use a free blog provider such as wordpress.com or blogger.com.
• Install blog software on your web host, you usually need PHP and MySQL on your hosting.

usage: processImage($file,$dest,$size)

$file – the name of the file, use full directory name
$dest – the name of the file to output
$size – WIDTH of the file.

	function processImage($file,$dest,$size)
	{
		$src = imagecreatefromjpeg($file);
		/* create thumbnail */
		$thumb = imagecreatetruecolor($size,$size);
		$red = 255;	$green = 255;	$blue = 255;
		$color = imagecolorallocate( $thumb, $red, $green, $blue ); 

		/* fill with white */
		$x = 1;
		$y = 1;
		imagefill($thumb, $x, $y, $color);

		/* get image original width and height */
		$src_x = imagesx($src);
		$src_y = imagesy($src);

                /* scale to fit width of $size if image is wider than height, align vertical center */
		if($src_x>$src_y)
		{
			$ratio=$size/$src_x;
			$new_x=$size ;
			$new_y=$src_y * $ratio;
			$new_xpos=0;
			$new_ypos=($size - $new_y) / 2;
		}
		else /* scale to fit height of $size if image is higher than wide, align vertical center */
		{
			$ratio=$size/$src_y;
			$new_x=$src_x * $ratio ;
			$new_y=$size;
			$new_ypos=0;
			$new_xpos=($size - $new_x) / 2;
		}
                /* copy to new image and save */
		imagecopyresampled($thumb,$src,$new_xpos,$new_ypos,0,0,$new_x,$new_y,$src_x,$src_y);
		imagejpeg($thumb,$dest,80);
	}

PHP Wrapper for MySQL interface

PHP Wrapper for MySQLi interface

Example usage

query("SELECT something FROM tablename"); 

      //do a query that doesn't return anything
      $db->query_forget("DELETE FROM tablename WHERE something={$somethingelse}");

      //do a query that returns a single result
      $row = $db->query_single("SELECT * FROM tablename WHERE id={$anID}");

      //get last ID of previous query
      $last_id = $db->last_id();
?>

The database wrapper will also keep a track of sql queries within a log file in PATHNAME/sql_log.txt if you turn debugging on with $debug=true;

Hope you find this useful, I found it speeds up build time by allowing me to use the usual CRUD queries without all the error wrapping you usually need to do, and aids debugging by keeping a log of queries if you need to.

PHP Wrapper for MySQL interface

PHP Wrapper for MySQLi interface

Example demo XML table with filtering

Download Files (5Kb)

This is the XML for the table we want to display. It’s standard looking XML, and you can and should have multiple items within your data tag.

	
		Griffith Gibbs
		03009 725685
		UK
	

The HTML looks like this.

 Selection:

  ALL

  UK

  USA 


Name
Telephone
Country

To simplify the code, we have the filters already built in the HTML using radio buttons, on the radio button change, we call a changeFilter function to change the table. Below the radio buttons you have the table itself with table headers hard coded. Of course you could build the filters and table headers from the xml, but I did it this way for simplicity.

The jQuery is below. We use global variables for country and data as we need to pass those into callbacks. It’s all commented, so download the example and have a look.

var $country="";	//globals as we have callbacks that need this data.
var $xmldata="";	

$(document).ready(function(){
	$.ajax({							//get the XML data
 		 	url: "xmlfiltering.xml",	//URL to get the data from
 		 	success: loadTable			//callback on success
	});
});

function changeFilter(ctry){
	$country=ctry;				//set global country variable to changed country
	$(".datarow").remove();		//clear table
	loadTable($xmldata);		//rebuild
}

function loadTable(data){
	$xmldata=data;					//set our global XML variable to the data from the callback for re-use later.
	$(data).find("item country:contains('"+$country+"')").parent().each(function(){ //find each row in the XML with the country we want to show.

		var $this=$(this);							//cache selector
		var $name=$this.find("name").text();		//get name
		var $tel=$this.find("tel").text();			//get telephone
		var $country=$this.find("country").text();	//get country

		$("#datatable").append("

"+$name+"
"+$tel+"
"+$country+"


"); //output table row
	});
	zebraStripe();
}

//function from previous tutorial with minor change to selector to zebrastripe the table.
function zebraStripe(){
	$("#datatable").each(function(){
 	var $s=0;
		$(this).find("tr").each(function(){
			var $t = $(this).children("td");
			$s++;
			if($s%2==1)
				$t.addClass("stripe");
			else
				$t.removeClass("stripe");
		});
  	});
}

Hope you found this useful. Please download the example and use it yourself if you do.

Example demo XML table with filtering

Download Files (5Kb)

Example CSS Menus with jQuery Effects

Download Files (4Kb)

There are some caveats, this code will most likely not work in IE6. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.

This uses the now standard UL and LI tags for building menus, with anchor tags for links.

First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level


First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level


First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level

Here’s the CSS it has changed slightly from the older version, we’ve eliminated the :hover as we’re using jQuery for open and close effects.

.nav {
	width: 100%;
	height: 40px;
	background-color: #999;
	display: block;
}
.bigmenu {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.bigmenu li.firstlevel {
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
	width: auto;
	margin-right: 1px;
}
.bigmenu li.firstlevel a {
	display: block;
	height: 20px;
	padding: 10px;
	background-color: #555;
	color: white;
	text-decoration: none;
}
.bigmenu li.firstlevel ul li a {
	display: block;
	height: auto;
	padding: 5px;
	background-color: #555;
	clear: both;
}
.bigmenu li.firstlevel ul li a:hover {
	background-color: #777;
}
.bigmenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}
.bigmenu li.firstlevel ul {
	position: absolute;
	display: none;
	top: 40px;
	left: 0px;
	min-width: 200px;
	background-color: #555;
}

And here’s the jQuery code.

$(document).ready(function(){
	$(".firstlevel").mouseenter(function(){
		$(this).find("ul").stop(true,true).fadeIn(200);
	});
	$(".firstlevel").mouseleave(function(){
		$(this).find("ul").stop(true,true).fadeOut(200);
	});
});

It’s very simple, when the mouse enters, we fade in, when it leaves, we fade out. The ‘stop(true,true)’ tells jQuery to clear all current transitions, otherwise you’ll end up with multiple effects one after each other, instead of jQuery running the effect from where it should have.

It’s a very small amount of code, and does a great little transition effect when opening menus, this is the beauty of jQuery, you need very little code to do some effects that, while they’re not in-your-face, they are subtle effects that add a little magic and sparkle to your site which adds to the user-experience, rather than detracting from it.

Example CSS Menus with jQuery Effects

Download Files (4Kb)

Example Pure CSS Drop Down Menus

Download Files (4Kb)

There are some caveats, this code will not work in IE6. Internet Explorer 6 does not support :hover on elements other an anchor (A) tags. It will however work in most modern browsers including IE7. The best idea is to download the code and see how it works.

This uses the now standard UL and LI tags for building menus, with anchor tags for links.

First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level


First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level


First Level

2nd Level
2nd Level
2nd Level
2nd Level
2nd Level
2nd Level

I’ll break down the CSS bit by bit.

.bigmenu {
	margin: 0px;
	padding: 0px;
	list-style: none;
}
.bigmenu li.firstlevel {
	margin: 0px;
	padding: 0px;
	float: left;
	position: relative;
	width: auto;
	margin-right: 1px;
}
.bigmenu li.firstlevel a {
	display: block;
	height: 20px;
	padding: 10px;
	background-color: #555;
	color: white;
	text-decoration: none;
}
.bigmenu ul {
	list-style: none;
	margin: 0px;
	padding: 0px;
}

The above code defines all the first level elements, and resets the styles on the UL and LI tags.

.bigmenu li.firstlevel ul li a {
	display: block;
	height: auto;
	padding: 5px;
	background-color: #555;
}
.bigmenu li.firstlevel ul li a:hover {
	display: block;
	height: auto;
	padding: 5px;
	background-color: #777;
}
.bigmenu li.firstlevel ul {
	position: absolute;
	display: none;
	top: 40px;
	left: 0px;
	min-width: 200px;
	background-color: #555;
}
.bigmenu li.firstlevel:hover ul {
	position: absolute;
	display: block;
}

The above defines the 2nd level CSS, the most important part is .bigmenu li.firstlevel ul li a:hover the display:block shows the 2nd level! This will make sure the 2nd level menu is shown when the first level is rolled over by the mouse. It’s simple, and effective. The rest is just standard styling for CSS elements, and can be changed.

Example Pure CSS Drop Down Menus

Download Files (4Kb)