Chances are, if you are frustrated about it, others are as well. We are typically told as Entrepreneurs that a key to success is solving a common problem. The more common the problem the more potential revenue the idea can generate. As technology grows so do new opportunities for solving these frustrations. As a developer myself I am constantly looking for things that frustrate me and then begin brainstorming on ways to resolve the issue. This doesnt mean that every item that frustrates you is marketable, or hasn’t already been resolved by someone before you. But, chances are, if it frustrates you its worth investigating to the point of determining the worth of investing time in solving the issue.

There was a story about a woman who was frustrated trying to get a dust ruffle back onto her bed after cleaning it. As we all know, lifting a mattress while attempting to do anything else is far from simple. So she got the kids involved and the ensuing story was simply ludicrous. She thought to herself, “There’s got to be a better way” and proceeded to create the Zip-a-ruffle that’s now sold on QVC.

So I leave you with this – Are you frustrated about something? Instead of just being frustrated and going on, stop and take another look and see if you’re missing a solution. Chances are, if you’re frustrated, millions of other people are, too. And that my friend is an opportunity.

If you aren’t familiar with Zaarly then you probably have no idea what the hell I’m talking about, but you will in a little bit. Zaarly is a new commerce platform allowing people to sell anything. Services, stuff etc… We are actually working on a similar platform called helpocity.com. With that said, we needed to come up with a similar form component that allowed a user to select what time-frame they were looking to sell or needed their post done by. So lets say I am looking to Rent a Bike for the weekend and I’m willing to pay 50 bucks to whoever will rent me their bike. On the Zaarly posting form they have a great little popup/hover window that lets you select when you need this by (ex. 1 hour, 2 hours, 6 hours, 1 day, 2 days etc…). Well I need it by saturday, which is 6 days away, so I click 6 days and it automatically puts that selection into the field. Sure you could use a regular dropdown combo box, but wheres the fun in that?!

Feel free to check out the demonstration to make sure this is something you’re interested in before reading this lengthy post.

View the Demo

1. Make sure you have imported or loaded the latest jquery
2. Create a form with at least 1 text input field
3. add some custom css
4. write some awesome jquery code
5. TADA!

So we are going to assume you already know how to make sure you have jquery included in your site. After that we need to create a form with a text input element. Please note that we are not including all of the form attributes so that the code will be readable inside the code block below.

<form id="demoform" name="demoform">
     <input id="needed_by" type="text" name="needed_by" />
</form>

This is the start. Next we need to create an un-ordered list. This list will hold the values of what our user can select in terms of available time frames.
We are only going to include two list items here in the sample to keep it easy to read.

<ul id="time_wrapper" class="timer">
	<li class="time" data-value="1 Hour">1 <br /> <small>hr</small></li>
	<li class="time" data-value="2 Hours">2 <br /> <small>hrs</small></li>
</ul>

Now that you have these two crucial elements for your selector lets put them together so you know what it should look like. You will note that we are using the data-value attribute in our li’s. This will be what is written to the input text box “needed_by”

<form id="demoform" name="demoform"><input id="needed_by" type="text" name="needed_by" />
     <ul id="time_wrapper" class="timer">
          <li class="time" data-value="1 Hour">1 <small>hr</small></li>
	  <li class="time" data-value="2 Hours">2 <small>hrs</small></li>
     </ul>
</form>

VERY NICE! But we aren’t done yet. Next lets add some basic CSS. We are going to assume you understand the CSS commands here. If you have any questions just ask below in the comments.

/* The Main Form */
#demoform { position:relative;}

/* The Input box */
#needed_by { position:relative; margin-bottom:0px; }
		
/* Our Unordered List, the time wrapper */
.timer{
	width:auto;
	list-style:none;
	padding:0;
	margin:0;
	position:absolute;
	zindex:1000;
}
		
/* The List Items */
.timer li {
	//Positioning
	position:relative;
	width:20px;
	float:left;
	padding:5px;
	margin:0;
	text-align:center;	
	//Font and background
	font-size:12px;
	font-weight:bold;
	color:#333;
	cursor:pointer;	
	background-color:#fff;
	top:0;	
	//Make it pretty
	outline:none;
	transition: all 0.25s ease-in-out;
	-webkit-transition: all 0.25s ease-in-out;
	-moz-transition: all 0.25s ease-in-out;	
	//Add some borders
	border-right:solid 1px #CCC;        
	border-radius:1px;
	-webkit-border-radius:1px;
	-moz-border-radius:1px;	
	border-top:solid 1px #ccc;
	border-bottom:solid 1px #ccc;	
	border-right:solid 1px #ccc;
}
		
/* 
Some Hover effects
We want to add some glow and make the currently hovered 
item appear a bit larger than the others.
*/
.timer li:hover {
	top:-3px;
	box-shadow: 0 0 5px #c09853;
	-webkit-box-shadow: 0 0 5px #c09853; 
	-moz-box-shadow: 0 0 5px #c09853;
	border:1px solid #c09853; 
	font-size:15px;
	-webkit-border-radius: 3px;
	-moz-border-radius: 3px;
	border-radius: 3px;
	padding:10px;
	margin-bottom:2px;
}  
/* Some tidy up so we look nice and the first and last LI items look right. */
.timer li:first-child {
	border-left:solid 1px #ccc;
	-moz-border-radius-bottomleft: 5px;
	-webkit-border-bottom-left-radius: 5px;
	-khtml-border-radius-bottomleft: 5px;
	border-bottom-left-radius: 5px;	
}
.timer li:last-child {
	border-bottom-right-radius: 5px;
	-moz-border-radius-bottomright:  5px;
	-webkit-border-bottom-right-radius: 5px;
	-khtml-border-radius-bottomright: 5px;
}
.timer li small {
	font-weight:normal;
	font-size:xx-small;
}
.timer li:hover small {
	font-weight:normal;
	font-size:small;
}

WOW, so that was a lot of CSS for such a small bit of html code.. BUT believe me, its totally worth it! And now the fun part! The jQuery code! (Did I mention that I LOVE jquery!)

The following should all be put inside the $(document).ready command, I have included specific notes as to what they are doing inside the code. just FYI.

/* Make sure we have the Time Wrapper set to be positioned correctly
so it appears under our needed_by field.
*/
$('#time_wrapper').position({
     my: "left top",
     at: "left bottom",
     of: $('#needed_by'),
     collision: "fit"
});

/*
Whenever our needed_by input field receives focus, pop open our selector.
*/
$('#needed_by').focus(function(){
     $("#time_wrapper").show();
});

/*
Update the input box value with the selected data.
And then hide the list of options
*/
$('.time').click(function(){
     $('#needed_by').val($(this).data('value'));
     $('#time_wrapper').hide();
});

/*
Hide the time_wrapper list when the page loads
*/
$('#time_wrapper').hide();

Now, if you’ve followed along correctly, you should have a neat little time selector that will update your input nicely. Of course it could be improved, but hey! What do you want for free?

Here is the code all together for ease of copy

Installation Instruction

1. Unzip the uLaunch.zip
2. Open the following file
1. /config/launcher.php
3. Follow the instructions inside the launcher.php file and edit to suit the needs of your new website.
4. Save the changes to launcher.php
5. Upload all of the files to the root of your web server

ENJOY YOUR NEW LAUNCHING PAGE!

What could be easier than that? I mean really?!