Foundation for Beginners: Progress, Alerts, Tooltips and the Elusive Mega Drop

Let’s add to our Foundation skill set by learning how to make use of progress bars, alerts, tooltips and the mega drop which Zurb make use of on their site, but isn’t actually in Foundation. We’ll look at adding all of these components into the contact form from the previous tutorial, using a touch of custom jQuery so you can get an idea of how these elements could work in your own projects. Let’s get started.

Tooltips

First of all we’ll add a tooltip to the “Send me spam” checkbox, telling users a bit more about the spam we’ll send them if they check the box.

<label class="has-tip"><span class="has-tip" title="Don't worry we won't really send you any spam this is just to display a checkbox." data-tooltip="" data-width="300">Send me spam</span><input style="display: none;" type="checkbox" checked="checked" /></label>

As in every previous code snippet adding functionality such as a tooltip to an element relies on a class to kick things off, in this instance it’s ‘has-tip’.

You may also have noticed that we have wrapped the text within the label in a span tag. This span tag needs one of Foundation’s custom element attributes, ‘data-tooltip’. That will give you a working tooltip, but you’ll want some text in the tip and perhaps to set the width. Both of these can be achieved with yet more attributes, ‘title’ and ‘data-width’. Without data-width the tip will just fill the space of the element’s parent container.

Adding the ‘has-tip’ class and wrapping your element of choice in the span with these attributes means you can easily stick a tooltip to any element.

Adding Interactivity

In the previous tutorial we built a simple responsive contact form, which demonstrated how Foundation’s form elements could be used. Now let’s implement some more elements to add a new layer to the form. We’ll do this by adding stages to the submit button; we’ll take the standard click of the send message button, add a progress indicator, a success message and clear the inputs once the email is sent.

As I am purely showcasing Foundation features this is not a functional form, although you could add a php based send script and use ajax to make the form post without navigating away from the page. Take a look at Submit A Form Without Page Refresh using jQuery for further instructions.

Directly underneath our submit input element we can add our progress bar. This will make use of the same classes as buttons, using the rounded class this time.

<div class="progress round" id="progress" style="display: none;"></div>

Using a div with the “progress” class sets things up and acts as the container, whilst the span inside (making use of the “meter” class) acts as the color which progressively fills the container.

Note: The span uses a style tag with the starting width of the progress bar. We’ll use jQuery to animate this later.

Let’s add a success message so users know that the message has been sent. In this example we’ll just focus on a success alert, but in a real world scenario you’ll perhaps need an error alert as well. You could implement this using the submit handler and the jQuery validate plugin.

<div class="alert-box success" style="display: none;" data-alert="">Success! Your message has been sent.<a class="close" href="#">×</a></div>

Take a div and add the “data-alert” attribute along with a couple of classes, namely “alert-box” and “success”. If we add a close button too then users can close the success message after they’ve read it. If you’re looking at what we have put together so far it will look a bit messy, but that’s okay as we’ll add some jQuery now to create the layers of interaction we need.

var submitButton = $('#submitme'); 				// Variable to cache button element
var progressBar = $('#progress'); 				// Variable to cache progress bar element
var progressBarMeter = $('#progress .meter'); 	// Variable to cache meter element
var alertBox = $('.alert-box'); 				// Variable to cache meter element
var closeButton = $('.close'); 					// Variable to cache close button element
$(submitButton).click(function() { // Initiates the send interaction
	$(this).fadeOut(500); // Fades out submit button when it's clicked
	setTimeout(function() { // Delays the next effect
	    $(progressBar).fadeIn(500); // Fades in the progress bar
	    $(progressBarMeter).animate({width : '100%'},2000); // Animates the progress bar
	    setTimeout(function() { // Delays the next effect
	    	$(progressBar).fadeOut(500); // Fades out progress bar when animation completes
	    	setTimeout(function() { // Delays the next effect
				 $(alertBox).fadeIn(500); // Fades in success alert
			}, 500);
	    }, 2500);
	}, 500);
});

To better explain this code I have commented each line. It’s a simple queue of effects that creates the desired interaction. Although this is purely visual but could easily be adjusted to add real feedback and validation. It would also be useful for us to add a close alert function which resets the form for future use.

Note: We’ve cached all the elements used within the function by storing them in variables. You can read more about why we do this by reading Quick Tip – jQuery Newbs: Stop Jumping in the Pool

Resetting The Form

$(closeButton).click(function() { // Initiates the reset function
	$(alertBox).fadeOut(500); // Fades out success message
	$(progressBarMeter).css({width : '0%'}); // Resets progress bar
	setTimeout(function() { // Delays the next effect
		$('input, textarea').not('input[type=submit]').val(''); // Resets the input fields
		$(submitButton).fadeIn(500); // Fades back in the submit button
	}, 500);
        return false; // This stops the success alert from being removed as we just want to hide it
});

Again here I’ve commented each line to explain what each line is doing. That pretty much covers our upgrade to the contact form. These features are very flexible and can be used anywhere in your projects, customization is a snap using CSS.

The Elusive Mega Drop

I’ve spent a lot of time on Foundation’s Google group and a lot of people ask about the Mega Drop feature on Zurb’s websites. I thought I’d cover this here, as it seems no-one really covers what is a strsight-forward bit of jQuery.

Take a section tag and fill it with the content you want inside the drop, add a style attribute using “display:none” and then the following jQuery code:

var megaDrop = $('#megaDrop'); 				// Variable to cache megaDrop element
var megaContainer = $('#megaContainer'); 				// Variable to cache megaContainer element
$(megaDrop).click(function() {
	$(megaContainer).slideToggle(300,function(){
		if ($(this).is(":hidden")) $(megaDrop).html("+");
		else $(megaDrop).html("×");
	});
});

All Mega Drop really is, is a slideToggle effect which shows and hides a container with a sliding animation. There are a lot of practical uses for the Mega Drop, whether it be extended navigation, or a hidden gallery, or perhaps even a promotional video.

Useful Tool

A lot of projects, especially dashboard interfaces, require charts and chartjs.org is a great way to add them into your Foundation based projects. Why not try it out, visualize your data in different ways, animate and customize? These charts look great in the Foundation framework, even on retina displays.

Chartjs uses the HTML5 canvas element, supported by all modern browsers, and polyfills provide support for IE7/8. The plugin is dependency free, lightweight and offers loads of customization options.

Coming Next

In the next tutorial we’ll cover the Joyride plugin (which gives users a tour of your site), panels, pricing tables, regular tables and interchange; which gives you the option of setting different images for different screen sizes. Plenty still to cover!