Check out the showText, no images ma! (i.e. I use numerical entities for the arrows).

/*
 *
 * @author C Maynard
 *
 */

var pageTest = (function(){
    var that = {};

    that.init_hideDisplayGroup = function() {

        // choose text for the show/hide link
        var showText='▶';    // ▶
        var hideText='close me';

        // initialize the visibility check
        var is_visible = false;

        // append show/hide links to the thead's
        $('.control thead tr th').append(' '+showText+'');
        $('.toggleLink').css({
            'float': 'right',
            'margin-right' : '10px',
            'color' : '#999999',
            'font' : '14pt/1.5 sans-serif !important',
            'text-decoration' : 'none'
        });

        // add the toogle class and hide them
        $('.control tbody').addClass('toggle');
        $('.toggle').hide();

        $('a.toggleLink').click(function() {
            // switch visibility
            is_visible = !is_visible;

            $(this).html ($(this).html().toLowerCase()==hideText.toLowerCase() ? showText : hideText);
            $(this).parent().parent().parent().next('.toggle').toggle('fast');         

            return false;
        });

    };

    return that;

})();

<script type=”text/javascript” src=”http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js”></script>
<script type=”text/javascript”>
$(document).ready(function() {
// Let the good times roll.
});
</script>

Gradients are presently only supported in Safari 4 and Chrome (webkit) and Firefox 3.6. In webkit they can be used anywhere an image can be - for example background-image, list-style-image, border-image or with generated content. In Firefox they can only be used as background images.

My first in browser gradient

background: -moz-linear-gradient(left top, #999999, #fefefe);

Nice.

See http://hacks.mozilla.org/2009/11/css-gradients-firefox-36/ for more information.

$(document).ready(function(){

    jQuery.fx.off = true;

    var nav1 = $('#item1');
    var nav2 = $('#item2');
    var nav3 = $('#item3'); 

    var pan1 = $('#panel1');
    var pan2 = $('#panel2');
    var pan3 = $('#panel3');
    var close = $('.close-me');

    //initialize panels
	pan1.hide();
	pan2.hide();
	pan3.hide();

    nav1.hover(function(){
        //nav
        nav1.css('background-color', '#ccc');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        //panels
        pan1.show();
        pan2.hide();
        pan3.hide();
    });

    nav2.hover(function(){
        //nav
        nav2.css('background-color', '#ccc');
        nav1.css('background-color', '');
        nav3.css('background-color', '');
        //panels
        pan1.hide();
        pan2.show();
        pan3.hide();
    });

   nav3.hover(function(){
        //nav
        nav3.css('background-color', '#ccc');
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        //panels
        pan1.hide();
        pan2.hide();
        pan3.show();
    });

    close.click(function(){
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        pan1.hide();
        pan2.hide();
        pan3.hide();
    });

    $('body').dblclick(function(target){
        nav1.css('background-color', '');
        nav2.css('background-color', '');
        nav3.css('background-color', '');
        pan1.hide();
        pan2.hide();
        pan3.hide();
    });

});

Web forms are boring. When is the last time you really enjoyed filling out a form, I’m going to guess never. Nevertheless, they stand as one of the most important layers on your landing page or website. They are at the center of customer interaction, so even if your content is king and your designs are captivating, the form stands out as the only place your customer will engage. The experience this engagement produces is often times the predictor of another sale or a page abandonment. If you at all doubt the importance of web forms look into the infamous story about the $300 Million Button.

I have broken down some guidelines to help you improve your web forms and divided them into three categories: structure, elements and interaction.

Structure

The way we design web forms is often backwards. Generally we define some required fields, we have a programmer create or modify a database, and we plop some input fields on our page. Without taking the time to evaluate the design of your web forms, you could potentially be turning the unpleasant action of filling out a web form into a lost opportunity. So here are some tips to guide you in designing web forms:

• Always evaluate your form’s questions, and remove anything that is not necessary to you or your customers.

• Consider asking optional questions after a web form has been submitted, you don’t need to inquire about your customers demographic prior to the sale.

• Strive for simplicity, web forms are not the best place to experiment, the forms should feel familiar, so that the transaction is over as soon as possible.

• If your form stretches across multiple web pages, use a progress indicator so the customer can gauge his/her progress. If the amount of pages the customer will see changes depending on answers use general progress indicators rather than specific ones to avoid confusion.

Elements

Web forms have three basic elements, a label, an input field and an action. Labels ask questions, input fields accept answers and actions submit the form.

Label alignment plays an important part in the way a customer will interact with your web forms. There are four basic ways to align labels in a form, and each serves a specific purpose.

Left-aligned labels take longer for the eye to process, and are best used on forms with unfamiliar question. The distance between the label and the input slows down the user when completing the form, making it perfect for forms in which users must think before answering.

Top-aligned labels offer the fastest form completion time, the proximity of the label to the input field requires the least effort from the user to connect the two in their mind. One disadvantage of top-aligned forms is the amount of vertical real estate they take up in a page.

Right-aligned labels are also a quick to complete layout option, but because there is no hard edge on the left side of the labels so there is a reduction in the amount of time it takes a user to scan the requirements of a form. Using right-aligned forms is a great way to have the short completion times a top-aligned form offers, but also save on vertical real estate, just make sure the for questions are familiar to the user.

Labels within inputs are a great way to reduce the space a form takes up, but there are many considerations that should be taken. There must be an interaction that takes place when the user clicks or tabs to the input, i.e. the label must disappear so that the user can type. Because the labels disappear when the user engages the input, you better hope they do not forget what the question was. You must also make sure that the labels reappear after the form validation occurs, so that the user can correct their mistakes.

Which should I use? Well it all depends on what type of data you are collecting, I would not suggest mixing alignment types within one form, but you could use different types if you have multiple forms. More often than not a landing page will have some sort of simple form, which could benefit from a quick label to input alignment.

Other considerations for form elements:

• Always use the correct input type for a question, for example when asking a user for his/her state use a select box what includes all of the states, rather than making the user type this information in.

• Consider format within input types, if asking for a phone number either limit the input by using three input boxes, which accepts 3/3/4 numbers, or provide an example on how the user should type out the phone number. Your validation should never return an error because you failed to not specify the format. Flexibility is important.

• Inputs fields should tip off the user in the amount of data they need to enter, for example the zip code input should not be the same length as their email input element.

• If there is only one optional question, do not mark all of the other fields required, and rather label the solo optional field, as optional. Be wise in the way you label and define required/optional fields.

• Know that form elements render differently across all browsers and systems, so test, test, and test again.

Interaction

Once your labels are in place correctly, it’s time for some action. Interaction takes place within web forms in many ways. Moving from one input field to the next, receiving an error from the validation, or pressing the submit button at the end of a form are all examples of interaction. Improving the way your web forms interact with the user will make the experience less painful.

• When using multiple pages for your forms, allow the user a way to go back and change his/her answers without losing data.

• Always allow the user to use the tab key to get from input to input in the correct order, developers can use the “tabindex” HTML attribute if necessary.

• When validating form data be as unobtrusive as possible, and never route users to a new page when giving them validation errors and then expect them to find their way back.

• Inline validation offers the user immediate feedback on both errors and confirmation of correct values, jQuery.validate is a great option

• If you must use only server side validation make error messages as clear and relevant as possible, and provide what the user must do to fix the error.

• Use a help icon and help boxes next to unfamiliar content, for example if asking for a CVV2/CCID make sure there is a way for the user to find out what a CVV2/CCID actually is.

Laying a good foundation may be an extra step, but it will continually reward you by cutting down on the time and stress of common cross-browser inconsistencies. Everyone does this different, but here is how I like to lay it down.

html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, font, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td {
	margin: 0;
	padding: 0;
	border: 0;
	outline: 0;
	font-weight: inherit;
	font-style: inherit;
	font-size: 100%;
	font-family: inherit;
	vertical-align: baseline;
}
/* The :focus pseudo-class is supported in all major browsers, except the fabulous Internet
Explorer. The :focus pseudo-class adds special style to an element that has keyboard
input focus*/
a:focus {
        outline: none;
}
:focus {
	outline: 0;
}
body {
	line-height: 1;
	color: black;
	background: white;
        /*overflow: scroll; Optional - good for a page with alot of collapsing or moving elements*/
}
ol, ul {
	list-style: none;
}
/* tables still need 'cellspacing="0"' in the markup */
table {
	border-collapse: separate;
	border-spacing: 0;
}
caption, th, td {
	text-align: left;
	font-weight: normal;
}
blockquote:before, blockquote:after,
q:before, q:after {
	content: "";
}
blockquote, q {
	quotes: "" "";
}

The secret to this is the load() function. It allows you to load portions, defined with CSS selectors, of any remote location. Top off this function with a smooth animation, and enjoy. Here is the code I used:

jQuery(document).ready(function(){

    $('#loadlink').click(function(){

        $(this).text('loading...');
        $('#container')
            .append('<div id="content"></div>')
            .children('#content')
            .hide()
            .load('http://www.chrismaynard.net/header.php #header #navcontainer a',
            function() {
                // This is the callback function
                $('#loadlink').hide();
                $('#content').slideDown();
            });
        return false;

    });

});

1. Download and extract tomcat 6.0 binary distribution. Get the URL of the tar.gz file from http://tomcat.apache.org/download-60.cgi. From your ssh console download using wget.

wget http://apache.deathculture.net/tomcat/tomcat-6/v6.0.14/bin/apache-tomcat-6.0.14.tar.gz

Now use the following commands to extract the files.
gunzip -d apache-tomcat-6.0.14.tar.gz
tar -xvf apache-tomcat-6.0.14.tar

2. Login as root and set the JAVA_HOME variable to point to your Java installation. From your ssh console run this line, but make sure to edit the path to your Java install.

export JAVA_HOME=/usr/java/jdk1.6.0_04

3. Start tomcat from bin folder. Login again to SSH using your non root user id. The start up script for tomcat is in [tomcatdir]/bin.

Change to the bin directory (cd bin) and then execute, ./startup.sh

Your all set, you should see the tomcat server running at www.yoursite.com:8080/

To shutdown you can navigate back to bin and execute ./shutdown.sh

I ran into a permission issue while trying to then upload a file via ftp to <catalina-home>/webapps/ROOT/

My temporary work around was to login as a regular user via SSH, then change to root via su root, then wget my jsp files from another location. That got old fast, Even though I changed permissions via FTP icould not upload to /ROOT Then after investigating it further I was able to chmod 777 ROOT via SSH as root user, and Voila!

I then uploaded the simple hello_world.jsp code written below to

<catalina-home>/webapps/ROOT/

and was able to ping it at http://www.mysite.com:8080/hello_world.jsp

<code><HTML>
<HEAD>
<META HTTP-EQUIV=”Content-Type” CONTENT=”text/html; charset=WINDOWS-1252″>
<TITLE>JSP - Hello World</TITLE>
</HEAD>
<BODY>
<P><% out.println(” Hello Java World”); %> !</P>
</BODY>
</HTML>

So here goes the directions to install  the latest JDK (1.6) on the VPS server.

Log in to your site through a secure shell, my app of choice is PuTTY. Your going to need to log in as the root user, so make sure to enable root access and set a root password within the account center.

Now check your CentOS installation. You can check that by running the following command on your SSH terminal. Its no doubt your DV has this OS, but check it anyways.

cat /etc/redhat-release

Now the tricky part is to download the Java binaries onto your server. One option is to download the JDK on to your machine and then upload it to server using ftp. Unfortunately, the file size is 70-something MB’s so a better method is to use the wget command.

For this you will need the direct link for the binary download. Using FireFox goto http://developers.sun.com/downloads/ select Java SE, the Java SE (JDK 6), then hit download.

Sun uses a hidden redirect to the actual download. You need to find this URL. The name of your file will be some thing like “jdk-6u4-linux-i586-rpm.bin”

Immediately pause the download and then right click on the “resume” link and copy the large link name to your clipboard.

Now from the SSH terminal, type the following…

wget “PASTE URL HERE” -O java.bin

To paste in PuTTY use Shift-Ins, and make sure to surround the URL with double quotations.

This will download the Java binary as j.bin in the current folder.

Execute it the file by using the following command ./java.bin.

Accept the exceptionally long license terms and continue. You will get the Java installed on the MediaTemple DV server.

Next tell CentOS what you have done by creating a link to your install with the following command

/usr/sbin/alternatives –install /usr/bin/java java /usr/java/jdk1.6.0_04/bin/java 1

If  jdk1.6.0_04 is not the version you downloaded then replace that text with your version

Finally, run java -version on the command prompt to verify the install.

Now the next step is to install Tomcat App server.