Wufoo Style jQuery form Tutorial with focus / active state

So you like how Wufoo looks do you? Well you can make your form look just like their’s. I have a DEMO you can check out to test the functionality of what the hell I’m talking about in this tutorial. But I would much rather show you in code than ramble about something that doesn’t need much explaining. SO, here is the breakdown of this tutorial on how to focus a form field state with jQuery . GO!

jQuery

This is the jQuery, which is a javascript framework that makes coding this crap SO much easier. and it must be included on the page for this to work. You can view the source of the DEMO and get an idea about exactly what is going on. Its commented for your understanding.

	//Wesified.
		$(document).ready(function() {
	//On input focus (tabbed or clicked)..it will..
			$("input,textarea,select").focus(function () {
	//grab the parent nested LI of that input and add the bg color
		        	$(this).parents('li').css('background-color','#FFFFDD');
				}).blur(function() {
	//Then get rid of it
			$(this).parents('li').css('background-color','#FFFFFF');
	});
});

HTML

So this is the structure of the form. nuff’ said

<form id="contact_form" class="contact_form">
  <div>
    <ul>
      <li> <span class="left_half">
        <label for="first_name">First Name <span class="required"> *</span></label>
        <input class="required" type='text' name='first_name' value=''>
        </span> <span class="right_half">
        <label for="last_name">Last Name <span class="required"> *</span></label>
        <input class="required" type='text' name='last_name' value=''>
        </span> </li>
      <li> <span class="left_half">
        <label for="other_stuff">Other Stuff<span class="required"> *</span></label>
        <input class="required" type='text' name='other_stuff' value=''>
        </span> <span class="right_half">
        <label for="expand_more">Expand More <span class="required"> *</span></label>
        <input class="required" type='text' name='expand_mores' value=''>
        </span> </li>
      <li> <span class="full">
        <label for="company">Company <span class="required"> *</span></label>
        <input class="required" type='text' name='company' value=''>
        </span> </li>
      <li class="button">
        <button type="submit">Submit Form</button>
      </li>
    </ul>
  </div>
</form>

CSS

This is what makes it look badass.

form ul {
	list-style-type:none;
	width: 450px;
}
form li {
	clear:both;
	display:block;
	margin:0;
	padding:6px 9px 9px 9px;
	font-size: small;
	width:500px;
	overflow: hidden;
}
form li input, textarea {
	border-color:#7C7C7C #C3C3C3 #DDDDDD;
	border-style:solid;
	border-width:1px;
	color:#333333;
	margin:0;
	padding:2px 0;
	font-family:Tahoma, Arial, sans-serif;
	width:100%;
}
form li label {
	border:medium none;
	color:#222222;
	display:block;
	font-size:95%;
	font-weight:bold;
	line-height:150%;
	margin:0;
	padding:0 0 3px;
	font-family:Tahoma, Arial, sans-serif;
}
form li span label.sub {
	padding-bottom:0px;
	font-weight:normal;
}
form li label, form li span label {
	clear:both;
	color:#444444;
	display:block;
	font-size:85%;
	margin:0;
	padding-top:6px;
}
.left_half {
	float:left;
	width:250px;
}
.right_half {
	float:right;
	width:230px;
}
.full {
	width:460px;
}
li.left_half {
	clear:left !important;
	float:left;
}
form li:hover {
	background-color:#FFFFDD;
}
form li.section {
	border-top:1px dotted #CCCCCC;
}
form li.button:hover {
	background-color:#FFFFFF;
}
label.error, span.required {
	color:#DF0000;
}
h2.form_title {
	border-bottom:1px dotted #CCCCCC;
	width:460px;
	margin-bottom:10px;
}

All in all, this is a pretty easy concept and I hope it helps a few of you out there. If you have any questions just leave a comment and I’ll do my best to help you out.

Cheers,

Wes

Google Analytics Asynchronous Tracking, Finally!

Unlike the regular tracking code google analytics has, this snippet directly from google, this optimizes the way the page loads…SO if some of you have noticed on sites they get hung up and won’t load because its waiting on analytics loading in the header..Well fuck that.

here is the snipper

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-XXXXX-X']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    (document.getElementsByTagName('head')[0] || document.getElementsByTagName('body')[0]).appendChild(ga);
  })();

</script>

It inserts the ga.js into the page, it specified the page’s web property ID and then calls _trackPageview to send the data back. Just Replace the UA-XXXXX-X with your web property ID. Visit this page from google for more details!

jQuery Accordion for Wordpress

So I was working on a site with a vertical navigation today and the previous developer working on it made the entire navigation static….Well thats pretty much worthless for a CMS like Wordpress. So I took it upon myself to create an accordion script for Wordpress (it can be used wtihout Wordpress just as easily). I commented the code nicely and you can essentially paste this directly into wordpress and it will work.

The File Structure is as follows

<ul>
   <li><a href="http://link"></a>
        <ul>
            <li><a href="http://subnavlink">LINK</a></li>
        </ul>
   </li>
</ul>

The CSS You will need

#navigation ul li ul { display:none; }
#navigation .displayMe { display:block; }

Now for the Javascript. This one is for all your Wordpress Developers who need a custom jQuery Accordion

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>
<script type="text/javascript">

$(document).ready(function() {	

//If its a page parent (based off wordpress), add the class "displayMe"
//This way the accordion will be opened up on the page you are on.
if ($('#navigation ul li').hasClass("current_page_parent")) {
	$('#navigation .current_page_parent ul').addClass("displayMe"); }

//Hide the submenus
$('#navigation ul li ul').hide();

//Add a class to the parent li IF it has sub UL's
$("#navigation ul li:has(ul)").addClass("theDon");

//Da henchman
$("#navigation ul li ul li:has(a)").addClass("henchmen");

//Remove the link if it has a submenu
$('#navigation .theDon > a').attr('href', '#');

//When you click it, toggle bitch.
$('#navigation ul li a').click(
function() {

//Onclick Remove the class dipslay me which is only display:block;
//This way they can close it if they click it or it will glitch
$(this).next().slideToggle('slow').removeClass("displayMe");

//return false so the # doenst move view to the top of the page
if ($(this).attr('href') == '#') { return false; }

//Close it all out
	});
 });

</script>

<div id="navigation">
<ul>
<?php wp_list_pages('title_li='); ?>
</ul>
</div>

Hope this jQuery Accordion with an emphasis for Wordpress helps!

Cheers,
-Wes