The Problem

Although Gravity Forms provides nice options and CSS control to make your form labels show top/left/right, there is no option to have the label display INSIDE the form field, disappear when clicked on, and then only reappear if the user leaves the field with no value in it, else, leave and process the users values.

There are a number of simple steps and prerequisites involved in this:

• A slight modification to your Gravity Forms form.
• Some updates to your style.css
• You need jQuery (1.5.1 used for this example, but this is pretty basic so should work on earlier and newer versions)
• You need to include a chunk of javascript AFTER jQuery is called. (usually done in a custom.js or include.js file in the footer.php of your theme, or in the header.php BELOW wp_head() so that jQuery is called first).

So, first things first, your Gravity Forms form

Have a look at the screenshot below, you will notice the following:

• A default value applied to the ‘default value’ field. This will of course be what is displayed inside the form field before and after focus.
• A CSS class of clear_field applied to the field. This will tell jQuery which fields to clear and which to leave alone if you wish. (This part could be modified to not include a class and target more specific fields with jQuery and the GF field IDs, but this example seemed to be the most versatile to just use on future sites).

That is it for the GF page, ..now the CSS file:

#field_1_1 label, #field_1_2 label, #field_1_3 label, #field_1_7 label, #gform_wrapper_1 .gfield_label{display: none;}

This is pretty simple, I have just hidden all of the specific labels I do not want to show. Again this could be done more effectively with a single call, however in this field there are radio buttons which require their labels to show, so simply hiding all would not be suitable in this instance.
I have a strong feeling that this will be the same case for many developers as you will not wish to hide everything, so add your overides here.

And now into the JS file:

As I said earlier, mine is a simple js file called custom.js which live in my theme folder and is included in my footer. It contains the following…

// CLEAR FORM FIELDS OF LABEL ON FOCUS THEN ADD BACK ON BLUR IF EMPTY (class of 'clear_field' must be added to form field) //
 
$(document).ready(function(){
	$(".clear_field input").focus(function () {
		var origval = $(this).val();
		$(this).val("");
		//console.log(origval);
		$(".clear_field input").blur(function () {
			if($(this).val().length === 0 ) {
				$(this).val(origval);
				origval = null;
			}else{
				origval = null;
			};
		});
	});
});

This states that any field covered by the ‘clear_input’ class (applied in fact to the parent div for the field/label) should upon focus have its original value (origval) stored, then the field cleared.

Then upon blur (leaving the field) if the field is empty, replace with the original value, else, do nothing.

Both final lines after the blur if statement in fact clear the origval var by declaring it null. This is required to prevent values being left behind and errors caused by the user jumping fields.

And that is it.

The site has a very good reputation but what is important is maximizing exposure through social media avenues such as facebook and twitter and also proving the client with a platform which can easily be managed and updated by them.

This is one of the many design success stories I have managed using off the shelf premium templates which enables a client to almost completely remove the hefty design budget associated with the look and feel of this quality.

The site incorporates a number of weather feeds, and sucessfully as a first phase migrated all of the old site content and structure over, albeit with a bit of a polish.

The next phase will be to really utilise the technology available and coax the client into that often eluded task of regularly created content.

www.airbornekitecentre.com

To call my friends fickle would be an understatement, however to call them my friends would not be and as a result over many many years we have always had an excellent working relationship spanning what is now 5 sites and a number of micro-sites.

The assure me this will be the last for a while, personally I like the challenge of working with production companies where so much emphasis is about the presentation of the content itself, which in my mind speaks much more about the company than the box you put it in.

Some clever tinkering with Vimeo and jQuery to ensure the optimum user experience and we have a final product everyone is very happy with.

www.3c-films.com

The problem is using the jQuery Tools library, specifically the ‘overlay’ functionality to load in Vimeo players onto an overlay. When the user closes the overlay the video keeps playing. Additionally to load multiple players on a single page one must load in all payers at page load which is resource heavy.

So, the solution is to only add the Vimeo code when the overlay link is clicked, and then remove it as soon as the overlay is closed.

This example is using WordPress but has been commented as such that it should be easy to adapt to a stand alone page or other CMS.

I assume you already have jQuery and the jQuery Tools library loaded into your page.

First things first, the HTML:

You will notice I use the_ID a lot, this is because I have multiple overlays on the page and it is important to be able to address them individually.
You will notice no vimeo code in the overlay div.

<a href="#" rel="#overlay-<?php the_ID(); ?>" id="overlaylink-<?php the_ID(); ?>" >
    video link
</a>
 
<div class="simple_overlay" id="overlay-<?php the_ID(); ?>"></div>

Now the JS, ..

When you click on the link is ‘prepends’ the overlay code in a div ‘video_hold’ (you need this div to be able to easily remove it afterwards).

My Vimeo code is contained in the variable $vimeo_iframe_code.

Then you insert your normal overlay code in a doc.ready.

then afterwards you utilise the onClose action to initiate a function that removes the video_hold div you had inserted with your Vimeo code. You also need to repeat the same action for the .close button as for some reason pressing the actual close button does not seem to trigger the onClose action for reasons beyond me.

<script type="text/javascript">
	$('#overlaylink-<?php the_ID(); ?>').click(function() {
		$('#overlay-<?php the_ID(); ?>').prepend('<div id="video_hold"><?=$vimeo_iframe_code?></div>');
	});
 
	$(document).ready(function() {
		$("#thumbs a[rel]").overlay(
		{ 
			mask: {
				color: '#000000',
				loadSpeed: 200,
				opacity:1
			}, 
                        onClose: function() {
				$('#video_hold').remove();
			}
		});
	});
	$(document).ready(function() {	
		$('#overlay-<?php the_ID(); ?> a.close').click(function() {
			$('#video_hold').remove();
		});
	});
 
</script>

It is worth noting that if like me you have multiple instances of this on a single page and you are using WP, then this code will need to be part The Loop so it is created for each instance.

I always start these days with BLANK Theme by Chris Coyer quite simply because it is the cleanest blank theme with no unnecessary code and these days as I am using WP for sites that are attracting a lot of traffic so code bloat and anything unnecessary causes me headache later, ..however this is not what this post is about, so I digress.

Below is my core functions.php file which I have now replaced the default one in BLANK-Theme with and it contains the following functionality:

• remove ALL head links such as generator, rss, index_rel, parent_post, feed_links etc – although these can be useful for small blogs a large site does not always require them and if it does they usually manifest themselves in relevant areas of the content, so I save a number of function calls and also server load.
• Load my own jQuery – So many plugins use jQuery and as those faithful followers of this post on loading jQuery in WordPress and its popularity will stand testament to, stopping everything else loading jQuery and taking control yourself is the way to go.
• Add is_child() function – This is a crucial function I use a lot these days especially for corporate sites that have a complex hierarchal page structure and contextual sidebar menus, it simply allows you to check if the page is a child of a specified parent. This one should really be part of WP core.
• Add Thumbnail support – This makes me raise my eyes to the ceiling every time I have to add it, I can’t believe WP has such useful technology with the ‘featured image’ and leave it turned off by default with no simple way to turn it on. To enable featured image you must edit the functions.php file!!
• Expand the categories menu – When editing posts this makes the categories menu the full length to accomodate ALL of the categories being used, which from client feedback is much much more preferable than scrolling the tiny window you have currently.

<?php
	//remove all header links (comment out each line if you want it)
		remove_action( 'wp_head', 'feed_links' );
		remove_action( 'wp_head', 'rsd_link');
		remove_action( 'wp_head', 'wlwmanifest_link');
		remove_action( 'wp_head', 'index_rel_link');
		remove_action( 'wp_head', 'parent_post_rel_link');
		remove_action( 'wp_head', 'start_post_rel_link');
		remove_action( 'wp_head', 'adjacent_posts_rel_link');
		remove_action( 'wp_head', 'wp_generator');
 
	// Load jQuery as you want
		if ( !is_admin() ) {
		   wp_deregister_script('jquery');
		   wp_register_script('jquery', ("https://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"), false, '1.5.1');
		   wp_enqueue_script('jquery');
		}
 
    // Function to check for if a page is in a specified hierachy
	    function is_child($post_id) {
			global $wp_query;
			$ancestors = $wp_query->post->ancestors;
			if(isset($ancestors)){
				if (in_array($post_id, $ancestors) ) {
					$return = true;
				} else {
					$return = false;
				} 
			} else {
				$return = false;
			}
			return $return;
		}
 
		//add thumbnails functionality
		add_theme_support( 'post-thumbnails' );
 
		//add expanding categories action and function
               add_action('admin_head', 'categories_selection_jquery');
 
					function categories_selection_jquery() {
						echo'
						<script type="text/javascript">
							jQuery(function($){
								$("#category-all.tabs-panel").height($("#categorychecklist").height());
							});
						</script>
						';
					}
 
 
    //and now back to the default wordpress sidebar registration, which although I do not use, I do not remove
    if (function_exists('register_sidebar')) {
    	register_sidebar(array(
    		'name' => 'Sidebar Widgets',
    		'id'   => 'sidebar-widgets',
    		'description'   => 'These are widgets for the sidebar.',
    		'before_widget' => '<div id="%1$s" class="widget %2$s">',
    		'after_widget'  => '</div>',
    		'before_title'  => '<h2>',
    		'after_title'   => '</h2>'
    	));
    }
 
?>

We called in our design partners Work & Play to liaise with the client and help them find a solution that better facilitated the expanding nature of the business.

A new homepage, clinics locator map and unique clinic pages were drawn up and effectively deployed onto the site with zero downtime.

We attribute this ease of update of a sites visual style both with and without the content to the nature of the WordPress tempting system which allows us to develop completely new version of the site using the live site data with no impact of the current public site but allowing ourselves and the client to use and interact with the new version.

At the time of writing we are currently creating clinic micro-sites and are also involved in facilitating a number of SEO strategies with the client.

www.portmanhealthcare.co.uk

The design aspect of this was taken on by my colleagues at Work & Play who helped the client achieve the same styling used in their printed material on the web.

The content architecture development, migration of content and management of the project was my job along with providing consultancy and training for the client in using the WordPress platform effectively.

The site does not break technological barriers but it does have some nice streaming of share prices, aggregation of blogs of the associated companies.

The client has been very pleased with the solution leading to them once again following on the tradition of passing on our praises to our future clients.

www.cellogroup.com

However as I upgrade my sites to WordPress 3.1 the code below suddenly stop working or works sporadically.

<?php
	 function is_child($pid) {      // $pid = The ID of the page we're looking for pages underneath
        global $post;         // load details about this page
        $anc = get_post_ancestors( $post->ID );
        foreach($anc as $ancestor) {
            if(is_page() && $ancestor == $pid) {
                return true;
            }
        }
        if(is_page()&&(is_page($pid))) 
                   return true;   // we're at the page or at a sub page
        else 
                   return false;  // we're elsewhere
    };
?>

So, ..after a little looking, testing, searching and head scratching I have a solution, which shows that there has been clearly a phasing out or adjustment in the way the get_post_ancestors() functions returns the parent pages, ..however, in the interests of quick fixes and not boring you with the hows, whys and whats, ..here is the new working function.

<?php
    function is_child($post_id) {
		global $wp_query;
		$ancestors = $wp_query->post->ancestors;
		if(isset($ancestors)){
			if (in_array($post_id, $ancestors) ) {
				$return = true;
			} else {
				$return = false;
			} 
		} else {
			$return = false;
		}
		return $return;
	}
?>

Now get back to work, .as I must

Although completely separate festivals a lot of the brains and driving force behind the festivals are one and the same and we have always approached the 2 projects in tandem albeit slightly biased towards the early launcher.

This years Soundwave site is actually a favourite of mine so far for 2011, something about the way the content sits together, and the seamless flow of development made it a real pleasure to develop and manage.

www.soundwavecroatia.com

We all learned a lot last year building the Outlook Festival site, the client about management and supply of content, the power of social media marketing and how nice it was to leave that to someone else to deal with.

At mogmachine we learned about server balancing and setting up WordPress to cope with massive spikes in traffic at launch and to coincide with mail-outs.

“We never realise your music festival was quite so popular” was never something we would go back to or want to have to say to the client, but many evening were spent analysing server data and balancing user experience with speed and functionality.

This year we were ready and prepared, and although again this year the traffic did surprise us (30,000 hits on launch day alone and fast approaching 1 million at time of writing) it was nothing to trouble the infrastructure in place utilising the latest cloud servers, advanced caching technology and on hand expandability to cope with spikes in traffic.

You don’t really get a better opportunity to learn from your experiences than having to build a site twice. However normally if a site requires being rebuilt from scratch a year later, then you haven’t done your job very well with the exception of, the music festival.
One of the most crucial roles we play with the site is being on hand after launch for the subsequent months to implement any further modifications and make updates as more festival information becomes available and the site becomes a regular point of reference for the festival goers.

We also recently implemented an API from mixcloud to stream submitted mixes to facilitate a competition with a voting system made possible through some snazzy form technology.

Again having learned from last year I think we can now safely say (festival is sold out and site has been live for 5 months) we really nailed this one. ..and without meaning to sound too presumptuous, look very much forward to next year.

www.outlookfestival.com