With the release of the Spore Creature Creator, numerous player-created creatures have started popping up on the Sporepedia. Although most of them are original creations, some are recreations of popular video game characters. You can only imagine the effort required to recreate these characters given the quite limited options for body parts.

Here are some pretty interesting searches:

Just try searching some of your favorite game creatures from your favorite games like pokemon, digimon, and monster rancher. The results can be curiously fascinating.

It seems that this Pokemon Children’s book has made it very clear what squirtle’s true gender really is…

Ever since the days of Pokemon we have never seen what diglett looks like in it entirety. Having lived most of its life digging, we only get to see its upper half. From Pokemon Red to Pokemon Diamond, the enigma of diglett’s feet remained unexplained. Even in Pokemon Mystery Dungeon, diglett’s secret has been taunted but it only ended up in another cliffhanger.

Most people just assumed that diglett is just a regular mole pokemon with most probably mole/mouse – like feet. Some people even get as far as having digletts body as a giant monster.

However, with the release of the Pokemon Ranch for WiiWare, the mystery has been finally revealed. Be prepared to face the consequences of such secrets:
Read more »

>компютриmon Ranch has now been released for the US WiiWare service. For 1000 Wii Points, this glorified Pokemon Box will be yours for download. And the rewards are well worth it as Phione and the elusive Mew are obtainable from this game. The problem now would be finding 1000 pokemon to get your ranch to level 20. Oh well, it only means one thing: back to furious breeding.

Here is an alternate tutorial on how to create a floating dialog using the jQuery library with the jqModal plugin. Aside from providing an easy way to create you floating dialog, the jqModal extension also allows you to drag and resize your dialog. For this tutorial, I will demonstrate how to create a draggable floating dialog.

First of all, in order to use jqModal, the jQuery library is a prerequisite. And since we will add the drag functionality for our dialog, we will also need to include jqModal’s Drag and Resize plugin. Aside from jqModal’s script library, it also comes with a default CSS which will take care of the default styles. To customize this default CSS, we can simply override it later on. But for now, let’s include the required scripts and styles:

<link href="jqModal.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="jquery-1.2.6.pack.js"></script>
<script type="text/javascript" src="jqModal.js"></script>
<script type="text/javascript" src="jqDnR.js"></script>

Now the next step is creating the layer for the floating dialog itself. Before we go on any further, lets take a look at jqModal’s predefined special classes. By assigning these special classes to elements, they will automatically be configured depending on its class. You can either use the predefined classes, or you can create your own triggers. But for now, we’ll just use the predefined classes:

.jqmWindow – defines the styles for the dialog window (visibility, z-index)
.jqModal – defines a trigger for displaying the dialog window
.jqmClose – defines a trigger for closing the dialog window

For this demo we will only use the .jqmWindow and .jqmClose classes since we will add a custom event to our jqmWindow.

For this demo, we would also need some ids to identify our floating layer and its handle. We will use #previewLayer for the floating dialog and #handle for its handle. For the dialog’s content, we’ll use #previewContent. Here is how it would look like:

<div id="previewLayer" class="jqmWindow">
	<div id="handle">
		<a href="#" class="jqmClose">close window</a>
	</div>
	<div id="previewContent"></div>
</div>

Now that we have our dialog and our trigger, let’s set them up at out $.(document).ready() function:

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');
}

The following line of code simple means to make #previewLayer a modal window with #handle as its handle.

Now that we have created our own floating dialog, now its time to add some back-end logic for our window. For demonstration purposes, we’ll use it as a preview for a sample form:

First Name: <input type="text" id="fname" name="fname" /><br />
Last Name: <input type="text" id="lname" name="lname" /><br /><br />
Gender:<br/>
<input type="radio" name="gender" id="gender" value="Male"/>
 Male
<input type="radio" name="gender" id="gender" value="Female"/>
 Female<br /><br />

<input type="button" id="previewButton" value="Preview" />

What we’ll simply do is replace the contents of #previewContent with the values inside the form when the #previewButton is triggered:

function generatePreview()
{
	var fname = $('#fname').val();
	var lname = $('#lname').val();
	var gender = $('input[@id=gender][@checked]').val();

	if (!gender)
	{
		gender = '';
	}

	var preview = '<h2>Preview</h2><hr />';
	preview += '<b>First Name:</b> ' + fname + '<br />';
	preview += '<b>Last Name:</b> ' + lname + '<br />';
	preview += '<b>Gender:</b> ' + gender + '<br />';

	return preview;
}

$(document).ready(function()
{
	$('#previewLayer').jqm().jqDrag('#handle');

	$('#previewButton').click(function()
	{
		var content = generatePreview();

		$('#previewContent').empty().append(content);
		$('#previewLayer').jqmShow();
	});
});

If you want to see the demo in action, just click below
View Demo | Download Source