The process for the current project is to pull a *.csv file from an email account, parse it into a database query/queries, generate html code and then store the html in a directory structure while also storing the report information in the database.

Unfortunately during testing I have had some typo’s and the generated report stored in the directory structure did not display as intended. The changes needed really didn’t warrant processing the script again and adding more useless entries into the database, so I decided to change the script and then update the html in the report.

Having over 100 reports generated, I needed a simple script to do this. I had done this with bash before, but I thought there had to be an easier way then looping through a for statement, saving the changes to a new file and then moving the new file to replace the old.

In comes Perl. Looking through some posts, I found that you can edit text in the file with Perl. The command goes something like this:

perl -pi -w -e 's/search/replace/g;' *.html

Here is a further explanation of what is going on.

-p assume loop (like -n) but print line also, like sed
-i edit <> files in place (makes backup if extension supplied)
-w enable many useful warnings (RECOMMENDED)
-e execute the follwing line of code

The code referred to after the -e is just a search and replace regular expression.

The ‘s/’ means to search and start your regular expression to search for.

You then enter your expression that you want to search for. You need to make sure you escape out special characters with the back-slash [\]. The forward slash is used to separate what you are searching for and what you want to replace. The replace section is an expression as well and you need to treat special characters the same way.

Finally you have the last forward slash indicates the end of your replace expression and the ‘g’ indicates global.

Here is an example of how I would change the directory used for images from ‘/image/’ to ‘images/’ for all the files in a directory with the extension of .html.

perl -pi -w -e 's/\/image\//images\//g;' *.html

That is how you do it. If you have to go through multiple directories, you could use a bash or perl command to loop through those directories. Hope it didn’t confuse you too much.

Download the latest version 2.1 of the plugin at http://showMessage.dingobytes.com/download/

Please see the site, as the information below is for previous versions. This has been updated!

This is my first attempt at a jQuery Plugin, so although it works fine for my liking, I am sure there are many things that can be done more effectively.

• Message displayed at the top of page (no scrolling to view error)
• Multiple messages can be displayed
• Options to automatically close the message after set delay
• Message closes with blur/’esc’ key/’close’ link

• Download
• Install
• Options
• Examples

<script type="text/javascript" src="/path/to/jquery.showMessage.min.js"
charset="utf-8"><\/script>

#showMessage li
{
font-family: Arial, Helvetica, clean, sans-serif;
font-size: large;
font-weight: bold;
color: red;
}

thisMessage:		[''],
backgroundColor:	'#F7F7F7',
color:			'#000000',
opacity:		90,
displayNavigation:	true,
autoClose:		false,
delayTime:		5000

If you are not familiar with how JavaScript uses a generic XMLHttpRequest function, we would strongly suggest you read one of the many tutorials out there. Once you understand how it works and the different methods employed to do it, you will appreciate the ease of jQuery even that much more.

The first step is to download a current version of jQuery. We prefer to use the minified version. Another option is to load jQuery into your page is to use the Google AJAX Libraries API. We don’t use the other AJAX libraries enough to prefer this method, but we have used it in the past for client sites.

Of course we like things to be pretty, so we would also suggest some good images/icons to represent a valid and invalid username. You can create your own image or simply use Google Images to find a nice free icon set that has something to represent this. We have attached two simple icons that we prefer to use.

To get the document started, we assume that you have jQuery loading somewhere in the head of the document (using which ever method you prefer). We are going to make this simple so we just need to create a form to enter a username. The rules for a username are as follows:

1. Username can not have whitespace
2. Username must be at least 3 characters long
3. Username must be no longer then 24 characters long

Simple Registration Form

</p><br /><br />
<p><form id="registrationForm" action="/test/registrationForm.php" method="post"><br /><br /><br />
<fieldset><br /><br /><br />
<legend>Use form below to register</legend><br /><br /><br />
</fieldset><br /><br /><br />
<dl><br /><br /><br />
<dt><label for="username">Username</label></dt><br /><br /><br />
<dd><br /><br /><br />
<input type="text" id="username" name="username" /><br /><br /><br />
<em>Your username must be alphanumeric, 3-24 characters long, can contain underscores, but no spaces. We recommend that you don't change this unless you really have to.</em><br /><br /><br />
</dd><br /><br /><br />
<dt><label for="passwd">Password</label></dt><br /><br /><br />
<dd><input type="password" id="passwd" name="passwd" /></dd><br /><br /><br />
<dt><label for="passwd-confirm">Confirm Password</label></dt><br /><br /><br />
<dd><input type="password" id="passwd-confirm" name="passwd-confirm" /><br /><br /><br />
<dt></dt><br /><br /><br />
<dd><br /><br /><br />
<input type="submit" id="submitRegistration" value="Register" /><br /><br /><br />
</dd><br /><br /><br />
</dl><br /><br /><br />
</form><br /><br /><br />

Now that we have our form setup, we need to do a few things. Obviously we want to check the username when it is entered (or being entered). Second we will want to have some sort of client side validation to save us from processing an incomplete form. Lastly we will want to submit the form and process the response from the server. Whether you use PHP, ASP, ColdFusion or any other method, it is a good practice to validate the form server side as well. We won’t go into that to much, but is a point worth mentioning.

We prefer to insert the following BEFORE the form. You can put this in a *.js file or you can simply insert it into the page, either works for us. We will need to break the JavaScript into three parts. One function that checks the username, a second function that reads the username input element and initiates username check and a third function to validate and process the form.

Check Username Function

</p><br /><br />
<p><script type="text/javascript" charset="utf-8"><br /><br /><br />
//<![CDATA[<br /><br /><br />
function usernameCheck(username)<br /><br /><br />
{<br /><br /><br />
$.get('/test/usernameCheck.php', { 'username':username }, function(xml) {<br /><br /><br />
$(xml).find('response').each( function() {<br /><br /><br />
var error = $(this).find('error').text();<br /><br /><br />
if ( error == 'false' )<br /><br /><br />
{<br /><br /><br />
var successCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-ok.png" alt="successful" />Username is available.');<br /><br /><br />
$('input[name=username]').after(successCheck);<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
var errorCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-error-small.png" alt="error" />Username is already registered.');<br /><br /><br />
$('input[name=username]').after(errorCheck);<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />
});<br /><br /><br />
}<br /><br /><br />

The code might look overwhelming right now, but it is actually pretty simple. If we break it down, you will see that the first thing we do inside the  usernameCheck() function is call the jQuery AJAX function $.get. This jQuery function will load a remote page using an HTTP GET request. It only has one requirement (the URL), but also allows for [data], [callback], [type] to be included. We are using both [data] and[callback], with [data] = { ‘username’:username } and [callback] = function(xml). The callback is the function that we want to be executed whenever the data is loaded successfully.

Looking into the function you will see that we are finding each <response> tag in the XML repsponse and inside of that we are looking for the text inside the <error></error> node/element of the XML and setting it to the variable “error”.

If the XML responds that error is “false” we use jQuery to create a <span></span> element with image and text response inside of it indicating the username is available. We then insert the new element we have just created after the form input element for username.

The “else” is doing the same thing, only it is showing the username is not available.

We will add some more components to this later, but for now lets move to the next functions.  These two functions should be triggered after the page loads, so we will be placing them inside the $(function() {}); element which tells jQuery to load them after the page loads. There are other methods to do this same thing (such as $(document).ready(function(){}); so if you are familiar with jQuery you can use the element you feel most comfortable with.

Initiate Username Check

</p><br /><br />
<p>$(function() {<br /><br /><br />
var t;<br /><br /><br />
$('input[name=username]').keyup( function() {<br /><br /><br />
// REMOVE WHITESPACE FROM USERNAME<br /><br /><br />
var username = $('input[name=username]').val();<br /><br /><br />
username = username.replace(/\s/g,'');<br /><br /><br />
$('input[name=username]').val(username);<br /><br /><br />
// IF THE USERNAME VALIDATES, CHECK THE DB<br /><br /><br />
if ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; ( username.length >= 3 &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; username.length <= 24 ) )<br /><br /><br />
{<br /><br /><br />
if ( typeof(t) != 'undefined' )<br /><br /><br />
{<br /><br /><br />
clearTimeout(t);<br /><br /><br />
}<br /><br /><br />
t = setTimeout( function() { usernameCheck(username) }, 750 );<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />

You will notice the first variable we define is t. This is going to be used for the setTimeout() function later.

After that declaration you will see we are asking jQuery to watch the keyup event associated with the “username” input field and do “stuff” after each keystroke. We start  by simply asking for the value of the input field. Then we use the javascript replace() function to strip out any whitespace values followed by reinserting the “new” username back into the field.

We don’t want to even check for the username unless it meets the criteria we mentioned earlier, so we use the if() statement to help us validate that part. If the username is blank or if the username is greater then or equal to 3 characters and the username is less then or equal to 24 characters, then we continue to process the username.

We don’t want to bombard our server with a request every time a keystroke is made so we use the setTimeout function to  delay the request by a certain amount of time. In order to do this correctly though, we also need to clear the timeout if another keystroke is made within the delay, in effect starting the timeout over again.

Knowing this, we need to give the setTimeout a variable (t) when we call it. Because we know t may or may not exist, we use the if () statement to check for it. If it is defined, we use clearTimeout() function to remove the setTimeout. We can then set the variable t to a fresh setTimeout delay.

Validate and Submit Form

When the end user submits the form, we want to validate it and if it passes validation, submit the form. I am not going to go into a lot of detail about this as I have already done similar tutorials (see here). In a nutshell, we are just making sure the form is filled out and using AJAX to tell us if we were successful/unsuccessful when submitting form.

</p><br /><br />
<p>$('#submitRegistration').click( function() {<br /><br /><br />
//validate the form and submit<br /><br /><br />
var username = $('input[name=username]').val();<br /><br /><br />
var passwd = $('input[name=passwd]').val();<br /><br /><br />
var passwd-confirm = $('input[name=passwd-confirm]').val();<br /><br /><br />
var registrationData = $('#registrationForm).serializeArray();</p><br /><br />
<p>if ( username === ''  || ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; ( username.length < 3 || username.length > 24 ) ) )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Username must have between 3 and 24 characters.");<br /><br /><br />
}<br /><br /><br />
if ( username !== '' &amp;amp;amp;amp;amp;amp;amp;&amp;amp;amp;amp;amp;amp;amp; /\s/.test( username ) )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Username can not have any spaces.");<br /><br /><br />
}<br /><br /><br />
if ( passwd != passwd-confirm )<br /><br /><br />
{<br /><br /><br />
errorMessage.push("Password and Password confirmation do not match.");<br /><br /><br />
}</p><br /><br />
<p>if ( errorMessage.length > 0 )<br /><br /><br />
{<br /><br /><br />
showMessage( errorMessage, "error", "alert" );<br /><br /><br />
return false;<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
$.post('/test/registrationForm.php', registrationData, function(xml) {<br /><br /><br />
$(xml).find('response').each( function() {<br /><br /><br />
var error = $(this).find('error').text();<br /><br /><br />
var returnMessageString = $(this).find('returnMessage').text();<br /><br /><br />
var returnMessage = [];<br /><br /><br />
if ( error == 'false' )<br /><br /><br />
{<br /><br /><br />
returnMessage.push(returnMessageString);<br /><br /><br />
showMessage( returnMessage, "highlight", "info" );<br /><br /><br />
}<br /><br /><br />
else<br /><br /><br />
{<br /><br /><br />
returnMessage.push(returnMessageString);<br /><br /><br />
showMessage( returnMessage, "error", "alert" );<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />
});<br /><br /><br />
return false;<br /><br /><br />
}<br /><br /><br />
});<br /><br /><br />

So that is our start. You will notice if you run this code that it fails to work properly. What we don’t have is a way to clear out the “response” if it already exists on the page. Because we know where the response should be, we can create a simple check for the response and if it is found, remove it.  You will need to do this in both the usernameCheck function and also the function that sets the timeout.

</p><br /><br />
<p>if ( $('input[name=username]').next('span').length )<br /><br /><br />
{<br /><br /><br />
$('input[name=username]').next('span').remove();<br /><br /><br />
}<br /><br /><br />

Using the length of an element is how we check for the elements existence when using jQuery. Once we find that it does exist, we remove the entire element using the jQuery remove() function.

Lastly, jQuery has some features built in that make our forms prettier. I like to use animation to soften the effect of having elements just appearing BLAM! on the page. We can add a slow fade in effect to the username check to ease the message on the page . We add a diplay=none style to the span and then trigger the jQuery fadeIn() effect to achieve this.

</p><br /><br />
<p>var successCheck = $('<span></span>')<br /><br /><br />
.css({<br /><br /><br />
'display':'none',<br /><br /><br />
'padding-left':'1em'<br /><br /><br />
})<br /><br /><br />
.html('<img src="/test/images/dialog-ok.png" alt="successful" />Username is available.');<br /><br /><br />
$('input[name=username]').after(successCheck);<br /><br /><br />
$(successCheck).fadeIn('slow');<br /><br /><br />

There you have it, a nice jQuery username check.  You can test this out here or you can download the files (all zipped up) and give it a try yourself.

usernameCheck.zip (124KB)
usernameCheck.rar (117KB)

I decided to try to combine some css with some javascript to make a nice reusable piece to display my form messages. Here is the fruit of that labor.

The function is going to take three arguments. The first argument is a message and or list of messages. The second is the id of the node you would like to stick the message before. The last argument is a classname.

/*global document */
function showMessage(thismessage, location_id, classname) {
//first clear showmessage div
if (document.getElementById("showmessage")) {
var clearerror = document.getElementById("showmessage");
clearerror.parentNode.removeChild(clearerror);
}

The first part of the function will check to see if the div “showmessage” exists. If it does then it will remove it from the document.

// create an showmessage div
var location = document.getElementById(location_id);

We define the location so it can be used later. Below we create a new div and set the id attribute to showmessage. We then can style the div for each instance using the className. After that we create an unordered list.

With the list ready, the messages can then be put into an array. We will split the messages up in this example with a pipe “|”.  You can substitute your own delimiter.

var showmessagediv = document.createElement("div");
showmessagediv.setAttribute("id", "showmessage");
showmessagediv.className = classname;
var showmessageul = document.createElement("ul");
showmessageul.setAttribute("id", classname + "list");
var showmessage = [];
showmessage = thismessage.split("|");
var i;
for (i = 0; i < showmessage.length; i++) {
var showmessageli = document.createElement("li");
var showmessagelitxt = document.createTextNode(showmessage[i]);
showmessageli.appendChild(showmessagelitxt);
showmessageul.appendChild(showmessageli);
}
showmessagediv.appendChild(showmessageul);
location.parentNode.insertBefore(showmessagediv, location);
// have to add this to display error until css corrected
}

Looping through the array, we create a new list element and insert the message. We append the message to the new list element and then append the list element to the unordered list element. When it is all done then we append the unordered list to the showmessage div. The last step of the function is to insert the new showmessage div right before the location_id.

Attached is the style I used with both the successful messages and the unsuccessfull images.

.errormsg {
clear: both;
display: block;
width: 90%;
color: #FFFFFF;
font-weight: bold;
background-color: #FF9D9D;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #FF0000;
}

.successmsg {
clear: both;
display: block;
width: 90%;
color: #333333;
font-weight: bold;
background-color: #9bc19b;
padding: 9px 10px 6px 40px;
margin: 10px 0;
border: 2px solid #039b03;
}

#errormsglist, #successmsglist {
margin-left: 0;
padding-left: 0;
list-style: none;
}

#errormsglist li, #successmsglist li{
padding-left: 20px;
background-repeat: no-repeat;
background-position: 0;
}

#errormsglist li { background-image: url(/icon/exclamation.png); }

#successmsglist li { background-image: url(/icon/accept.png); }

You can modify the CSS and change the class name to what ever you wish. The only think to remember is if you style the list, to append “list” to the style.

showMessage.js

showMessage.css

exclamation.png

accept.png

By no means is this a guide for all new linux user, but just a compilation of things learned while setting up web services on a Linux box in the past.

The first step, but not always a necessary step is setting up a new user. This is the preferred way to start as the /etc/skel has been preloaded with all the necessary directories and files to get new users started. If you are going to be a system administrator and you are not familiar with the /etc/skel/, please take some time learn more information about placing files in the /etc/skel/ directory to save time setting up new users. You can put default web directory such as www or public_html plus any other files and or directories you want to give to all new users.

To setup a new user you can simply use the following command (replace username with the username you want to use)

adduser -m username

Now that you have created the account, it is best to setup a password for the account. You can assign a password to the account using the following command

passwd username

You should be prompted to enter in the new password and then confirm the password. Assume a new account needs to be setup with the username of ditto. When you run the passwd ditto command you should be prompted for the password as follows.

Changing password for user ditto.
New UNIX password:
Retype new UNIX password:

Your new account is almost ready to start putting files up for the web. One thing to pass along to new system administrators is that you have to make sure you setup the right permissions on this new account so it is strongly suggested that you do this now.

Now the path to the new account may differ depending on your server. Assume for now that new users are setup in the /home/ directory. Assuming your new user “ditto” was created successfully, the new account for ditto should be /home/ditto/. Any files in your /etc/skel/ directory would be there as well. You can check this by using the following command to change directories and list the contents of the directory

cd /home/ditto && ls

In this example we have two folders for our user ditto and they are the public_html and wwwconf directories.

To change the permissions on the users ditto directory so it can be viewed by visitors, the permissions on the ditto directory must be changed to something like 755. This can be done to just ditto directory using following command:

chmod 755 /home/ditto

If you don’t know what 755 is as far as permissions, pause this tutorial and take the time to learn about chmod and what the different permissions will do for you.

Now comes the part where many configurations likely differ depending on what you have installed to run on your server. This tutorial opts to save a core httpd related .conf file in one httpd directory (conf.d) and then from there look for more .conf files in the user directory called wwwconf/. This setup is not the only one possibility in the universe and if you have an older setup or wish to do it differently that is your choice.

You can start your .conf file by copying a current one or creating a new one in your httpd/conf.d/ directory. This tutorial will assume that directory is located at /etc/httpd/conf.d/. Creat your new .conf file in vi or vim by using the following command.

sudo vim web.ditto.com.conf

This is going to be the core configuration file for your virtualhost. You will need to start the virtualhost using the tag:

<VirtualHost *:80>

The VirutalHost directive is used to enclose a group of directives which will apply only to a particular virtual host. Inside this directive you will put all the information pertaining to your site. You can put the email address to your ServerAdmin, the absolute path to the Document Root, the ServerName and any ServerAlias

ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com

Now it is necessary to give Apache some directives that will apply to our public_html directory. To do this you will create another node inside the VirtualHost node named Directory. The Directory node here is used to enclose a group of directives which will apply only to the named directory and sub-directories of that directory (in this case the public_html directory).

<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>

This tells Apache that the execution of CGI scripts is permitted, the server will follow symbolic links in this directory, and that server-side includes are permitted.

You will also like to have some type of error log as is very useful when troubleshooting an issue on the box, so be sure to include the following code for error logging. You can access the logs in your httpd/logs directory

ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined

Now for the customized part. In order to let the user create their own Directory options another Directory directive is created that will point to a folder where other options/modifications can be made by the account user.

<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>

What this does is allows ditto to ftp or ssh into the box and create a .conf file with their own directives and options in the wwwconf/ directory. The directive inside the above tag says any directive which has the .htaccess context is allowed in .htaccess files. After this tag is closed, it can be followed up with

Include /home/ditto/wwwconf/*.conf

which tells Apache to grab any file with .conf in the wwwconf/ directory of ditto (if you didn’t know it already, the “*” is a wildcard here).

That should do it. You can now put an end to your VirtualHost node (if you have not already) and your end result should look something like

<VirtualHost *:80>
ServerAdmin webmaster@localhost
Documentroot /home/ditto/public_html/
ServerName www.ditto.com
ServerAlias ditto.com
<Directory /home/ditto/public_html>
Options ExecCGI FollowSymLinks +Includes
</Directory>
ErrorLog logs/ditto.error
CustomLog logs/ditto.log combined
<Directory /home/ditto/wwwconf>
AllowOverride All
</Directory>
Include /home/ditto/wwwconf/*.conf
</VirtualHost>

You can now save this in the httpd/conf.d/ folder. Now if you want to add a mod re-wite or make a password protected directory in public_html, you can add a .conf file to the wwwconf directory and save my changes there. There is still one more command to use in order for all of this to work and that is the command to restart the httpd service. This can be done very easily using the following command.

service httpd restart

If you are running on an older system, this command may not be recognized. In those cases you should be able to use

/etc/init.d/httpd restart

Assuming you didn’t get any errors when you restarted the httpd service your web service should now be working. If you get an error, be sure to address it right away. Most common issues are invalid paths in the <Directory> tags or missing directories that the <Directory> tags are directed too.

Hopefully this tutorial was helpful to at least one user out there. This tutorial will be followed up next by a tutorial that will help you setup subdomains, create password protected directories and create mod rewrites.

To save some time, I will explain the javascript and how to call it. You can grab the css from the example page.

<script type="text/javascript">
//<![CDATA[
var listing = {

g:function(id) {
    return document.getElementById(id);
},

// function to change the background and border of listing on mouse over
highlight:function(id) {
    listing_el = listing.g("listing" + id);
    if(id != 1) { //this is what to do for all divs other then first one
        id_above = id - 1;
        listing_above_el = listing.g("listing" + id_above);
        listing_above_el.style.border = "#fff 2px solid"; //removes border on result above highlighted
        listing_el.style.backgroundColor = "#fffae7";
        listing_el.style.border = "#837b97";
    }
    else {
        listing_el.className = "highlight_el";
        listing_el.style.backgroundColor = "#fffae7";
        listing_el.style.border = "#837b97";
    }
},

normal:function(id) {
    listing_el = listing.g("listing" + id);
    if(id != 1) {
        id_above = id - 1;
        listing_above_el = listing.g("listing" + id_above);
        listing_above_el.style.borderBottom = "#cccccc 2px dotted"; //restores border to result above highlighted
	listing_el.style.backgroundColor = "#ffffff";
	listing_el.style.border = "#ffffff 2px solid";
        listing_el.style.borderBottom = "#cccccc 2px dotted";
    }
    else {
        listing_el.className = "normal_el";
        listing_el.style.backgroundColor = "#ffffff";
	listing_el.style.border = "#ffffff 2px solid";
        listing_el.style.borderBottom = "#cccccc 2px dotted";
    }
}
//]]>
</script>

The HTML can be spit through some query or loop and is straight forward.

<div id="listing1" class="listing" onmouseover="listing.highlight('1');" onmouseout="listing.normal('1');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin. He lay on his armour-like back, and if he lifted his head a little he could see his brown belly, slightly domed and divided by arches into stiff sections. The bedding was hardly able to cover it and seemed ready to slide off any moment. His many legs, pitifully thin compared with the size of the rest of him, waved about helplessly as he looked. "What's happened to me? " he thought. It wasn't a dream.</div>
<div class="clear"></div>
</div></code></code>

<code><div id="listing2" class="listing" onmouseover="listing.highlight('2');" onmouseout="listing.normal('2');">
<div id="listing_top">
<span class="left">
<a href="javascript:void(0);" title="121 Initech Rd">121 Initech Rd</a>
</span>
</div>
<div id="listing_left">
<a href="javascript:void(0);" title="121 Initech Rd"><img src="images/inventory/thumbs/0/0/0/000976.jpg" alt="121 Initech Rd" class="displayed" width="151" /></a>
2.00 bed 3.00 bath 1296 sqft<br />
Lake Home<br />
Listing: 08-1979
</div>
<div id="listing_right"><span class="large_price">$198699</span> His room, a proper human room although a little too small, lay peacefully between its four familiar walls. A collection of textile samples lay spread out on the table - Samsa was a travelling salesman - and above it there hung a picture that he had recently cut out of an illustrated magazine and housed in a nice, gilded frame. It showed a lady fitted out with a fur hat and fur boa who sat upright, raising a heavy fur muff that covered the whole of her lower arm towards the viewer.</div>
<div class="clear"></div>
</div>