Advertisement
HTML/CSS

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

by

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.

foundation-tooltip
<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.

foundation-progress

<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.

foundation-success-alert

<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.

foundation-megadrop

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.

foundation-charts

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!

Related Posts
  • Web Design
    UX
    Walk Users Through Your Website With Bootstrap TourTour retina
    When you have a web application which requires some getting used to from your users, a walkthrough of the interface is in order. Creating a walkthrough directly on top of the interface makes things very clear, so that's what we're going to build, using Bootstrap Tour.Read More…
  • Code
    JavaScript & AJAX
    Ember Components: A Deep DiveEmber components retina preview
    Ember.js is a JavaScript MVC framework that allows developers to create ambitious web applications. Although pure MVC allows a developer to separate concerns, it does not provide you with all the tools and your application will need other constructs. Today, I'm going to talk about one of those constructs. Ember components are essentially sandboxed re-usable chunks of UI. If you are not familiar with Ember, please check out Getting Started With Ember.js or the Let's Learn Ember Course. In this tutorial, we will cover the Web Components specification, learn how to write a component in Ember, talk about composition, explain the difference between an Ember view and an Ember component, and practice integrating plugins with Ember components.Read More…
  • Web Design
    UX
    Implementing the Float Label Form PatternForm float input retina
    Using Matt Smith’s mobile form interaction design as a guide, we will create a stunning form interaction for the web that’s both beautiful and accessible using HTML, CSS and JavaScript.Read More…
  • Code
    JavaScript & AJAX
    Working With IndexedDB - Part 2Indexeddb retina preview
    Welcome to the second part of my IndexedDB article. I strongly recommend reading the first article in this series, as I'll be assuming you are familiar with all the concepts covered so far. In this article, we're going to wrap up the CRUD aspects we didn't finish before (specifically updating and deleting content), and then demonstrate a real world application that we will use to demonstrate other concepts in the final article.Read More…
  • Web Design
    HTML/CSS
    Foundation for Beginners: Custom Forms and SwitchesFoundation form retina
    Following on from our look at buttons in Zurb's Foundation, let's now take a look at custom forms and switches. During this tutorial we're going to work on an exercise; a contact form which you can add to your projects or just play around with. Once we've built that, we'll move onto other form elements.Read More…
  • Code
    JavaScript & AJAX
    Combining Laravel 4 and BackboneLaravel plus backbone 400
    For this tutorial, we're going to be building a single page app using Laravel 4 and Backbone.js. Both frameworks make it very easy to use a different templating engine other than their respective default, so we're going to use Mustache, which is an engine that is common to both. By using the same templating language on both sides of our application, we'll be able to share our views betweem them, saving us from having to repeat our work multiple times.Read More…