Run Buzz - Training Schedule Generator

This is Tab 1 Content Header

Want to build a printable training schedule? Create your schedule >>>

Create Your Own Training Plan

Want to create your own training schedule for a 5k, 10k, half marathon, or marathon?

Tabs

Navigation and content done! What about those Accordions >>>

And You're Done

Form

Thanks for stopping by. Play around with the form and click on the icon to see how to use jQueryUI to recreate these effects.

What's you're favourite colour?

Autocomplete

Autocomplete has made forms easier for all of us out at some stage. jQuery "Autocomplete" can be added with the following lines of code. List your items as below for "availableTags" then specify the "ID" to which the Autocomplete applies. For example:

$(function() {
 var availableTags = [
  "Alpha",
  "Beta"
 ];
$( "#myinput" ).autocomplete({
source: availableTags
 });
});

Then in your form you will need an <input...> with the "ID" you specified above (do not include a "type" for the input):

<input id="myinput" />

When is your birthday?

Date Pickers

"Datepickers" make the act of adding a date easier for users and can allow you to control how a date is submitted in a form. All you need are the following lines of jQuery and a corresponding "input" with the "ID" of "datepicker":

$(function() {
$( "#datepicker" ).datepicker();
...

As with all jQuery UI widgets there are many options to allow you to further define the interaction of the user. For example, by adding a minimum and maxiumum date we've been able to ensure the user is between 18-100 years of age:

$(function() {
$( "#datepicker" ).datepicker({ 
	minDate: "-100Y", maxDate: "-18Y" ,
});
});

<input type="text" id="datepicker" />

Do you love jQuery?

Great! Then you'll know you can keep up with the latest at the the jQuery Blog!

Great! Be sure to check out their Getting Started guide.

Effects

The jQuery UI effects are another great feature. Here is an example of the "show", "hide" and "removeClass" and "addClass" effects.

A message will display below the <select>... tag here depending on the option you choose. The <div> with the message is hidden to begin with:


$("#myanswer").hide();

Next we check whether the value of the <select>... has changed and if it has changed to "myoption" then we "show" the appropriate message (a <div> with the "ID" 'myanswer'):


$("#myselect").change(function() {
	if ( $("#myselect").val() == "myoption"){
		$("#myanswer").show();
    }
});

The above code will be added with your jQuery files while the select below goes in your form.


<select id="myselect">
	<option value="myoption">I'm lovin it!</option>
</select>
<div id="myanswer">The answer</div>

There's no need for any css here as jQuery does all the work for you.

Click to submit:

You hit the submit button!

Dialog Boxes

$( "#mydialog" ).dialog();

For your HTML:

<div id="mydialog" title="My Title">
<p>My Text</p>
</div>

We've used a dialog box here which reacts to clicking the submit button. Click the button to see!


$('#mydialog').dialog({
	autoOpen: false
});
$('#mysubmit').click(function() {
	$('#mydialog').dialog('open');
});
});

Buttons

To complement the style of the rest of you form the jQuery UI theme will style your buttons up for you, too. Add the following lines to your code:

$( "input:submit, a, button", "#editable" ).button();