The only thing better than a Bootstrap-styled user interface is a wizard written using Bootstrap.js, and Vincent Gabriel’s oh-so-capable Twitter Bootstrap Wizard Plugin lets create one quickly and easily. What I wanted was a step-by-step wizard with a lot of features:

  • Customizable Previous and Next buttons
  • A Customizable Finish button
  • Support for an arbitrary number of steps
  • A progress bar

Here’s what the sequence should look like visually:

Twitter Bootstrap Wizard Example Step 1.

Twitter Bootstrap Tutorial Screen Shot 1

 

Note how in Step 1 the First and Previous buttons are disabled, as they should be. You can use class and style  attributes to modify default behavior.

Twitter Bootstrap Wizard Example Step 2.

Twitter Bootstrap Tutorial Screen Shot 2

In Step 2 the First and Previous buttons have automatically become active.

Twitter Bootstrap Wizard Example Step 3.

Twitter Bootstrap Tutorial Screen Shot 3

In Step 3 the Finish button has automatically been replaced with a Done button. The default behavior for the Done button is to appear as disabled, but that behavior is easily modified using a bit of jQuery.

I think Bootstrap has changed in such a way that Vince’s code no longer works as written with the current version. At least I couldn’t get it to work, but I’m pretty sure that’s more a reflection on me than Vince. Not being a Bootstrap expert I had to go back to first principles and understand their tab markup, then add Vince’s good work on top of that.

By the way, I try to include running code here through the use of CDNs, but the Twitter Bootstrap Wizard Plugin isn’t available on cdnjs, even though it appears to be.

Here’s the complete running program.

Assumptions for the Twitter Bootstrap Wizard tutorial:

Since I don’t have a demo, here’s the complete code listing before I get into the explanation.

 

Step by step Markup Tutorial for a Bootstrap Wizard With Progress Bar

 

0. Create a surrounding div

The whole thing must be surrounded by a simple div with an ID you assign the name of the wizard, rootwizard in this example:

 

1. Tab markup: Unordered list

      • The markup for the tabs themselves is an unordered list with class="nav nav-tabs" role="tablist" in the ul
      • Each tab is in an li tag with a unique named anchor on the same page, for example, a href="#step2"
      • The li tag must use data-toggle="tab" attributes. FWIW I was able to omit the role="tab" but that seems like a bad thing for forward compatibility.

2. Progress bar markup: div of class “progress” and nested div of class “progress-bar”

  • Create a div of class “progress”. It doesn’t need an ID
  • Inside it nest a div of class “progress-bar”. It requires an ID, in this case, I used progressBar. jQuery will be used to update the div dynamically as the user clicks Previous and Next buttons and it needs the ID to know which div to work on.

The “progress-bar-striped” attribute is optional. It looks more dynamic and gives the user a feeling of real progress while filling out a form.

I put the progress bar just below the tabs but it can go anywhere. For example, it looks just as good if you switch steps 2 and 3.

3. Tab pane markup: div of class “tab-content” with nested divs of class “tab-pane”

The tab panes are where content goes. You can only see one at a time, even though they’re all in a single piece of markup.

      • Create a div of class “tab-content” to enclose all tab pane divs. It doesn’t need an ID.
      • The tab panes are separate divs of class “tab-pane” nested inside the class “tab-content” div. Each tab pane has a separate ID, which must match the named anchors in the li declarations in Step 1.
      • The first tab tab pane has “active” in its class attribute. That selects the tab on page load.

4. Previous/Next Buttons: Unordered list of class “page wizard”

The First, Next, Previous, and Done buttons make clever use of the unordered list markup.

  • The ul must include the attribute class="pager wizard"

They do not need to be named First, Next, Previous, and Done because their function and position are both determined by a class attribute:

  • Each li tag contains an a link as the target.

As a bonus I’ve included access key attributes on the a links, which have nothing to do with the wizard. I just like keyboard shortcuts. Access keys let you use a letter key in conjunction with a system-defined key or key set to activate a control. For example, the Next button uses a href="#" accesskey="n". On a PC you’d press Alt+N key as the equivalent of the Next button, and on a Mac it would be Control+Option+N

5. Load the jquery.bootstrap.wizard.min.js in a script tag

The jquery.bootstrap.wizard.min.js file should be included as far down in the body as as possible, because sometimes Javascript files can page rendering.

6. Add Javascript code in a script tag

The magic in Vince’s progress bar code is in using jQuery to redraw the Bootstrap-provided progress bar div according to which tab is selected:

I added a few lines of optional code. For example, this section makes sure the Done button appears only when at the last tab, and that it’s active:

In Vince’s code, the Next button appears on the last tab, although it’s disabled. In my version, it’s removed on the last tab only:

Here’s what all the Javascript looks like.

Here’s a step by step recipe with all the code you need to see how to create a tabbed interface in Twitter Bootstrap in a single HTML file.

The result will look something like this:

Bootstrap.js tab tutorial

Try it out and grab the source for yourself here

Markup for the tabs

Bootstrap Tabs use an unordered list in conjunction with tab-content divs that contain a nested tab-pane for each div‘s content.

In this example the tab’s text is Sell. It could be any text but the most important attribute is the #sell attribute. It must match a div ID in the upcoming tab-pane div:

One of the tabs should appear as selected. Use the active attribute:

Here’s the full declaration for the tabs.

Next are the tab panes. The ID of each pane must match the href attribute but without the pound sign:

Here’s all the code in context. Save this as an HTML file and it will create the same kind of interface shown in the screen shot

This minimal HTML5 app template shows Bootstrap and JQuery working together. It’s big enough to show off features of both Bootstrap and JQuery but small enough to hollow out and use for your own purposes.

A lot of the Bootstrap examples I’ve seen are far more complicated than they need to be. Copy and paste this code to knock together an attractive, feature-packed website as prototypes or as a starting point for production apps.

It has a little behavior built in:

Your Copy-and-paste Bootstrap HTML app using JQuery to toggle a div

A preformatted area called a “well” in bootstrap terminology is hidden using a standard CSS

display: none;attribute until you click the Show button.

bootstrap-starter-cdn-2-second

At the same time the well is displayed (using JQuery’s toggle() feature, the button’s text gets changed to Hide:

Here’s what it looks like after you click.

bootstrap-starter-cdn-2-second

Try it live here.

The full, commented copy-and-paste code is here:

Here is a copy-and-paste HTML5 app template that will no doubt evolve. Because it uses CDNs to load jQuery and Bootstrap you can copy and paste it as is. You don’t need to create local directories with them. (Updated to include charset declaraction May 3, 2015)

Copy and paste this HTML5 app template using Bootstrap and jQuery

If you want to bang out a quick HTML5 app that uses Bootstrap and/or jQuery
just copy and paste this code. Normally you’d have to copy several files
to local directories, but that problem is eliminated through the use of
CDNS (cloud services) to fetch the files.

Features

  • Uses Bootstrap for clean styling across browsers
  • Uses jQuery for consistent behavior across browsers
  • Automatically finds latest version of jQuery
  • Robust: Includes checks to ensure jQuery and Bootstrap are present

What to be careful of

  • Because only the latest jQuery is specified, behavior could change subtly
  • Watch for newer versions of Bootstrap and change source accordingly
  • It is possible that either CDN could go out of business, in which case
    you’d have to store jQuery or Bootstrap locally
  • It’s probably better to use local versions of both libraries in production
    so that test results remain consistent

 

 
Download source to HTML5 App Template with Bootstrap and jQuery loaded from CDNs v1.01

 

This Program Clones Itself

 

Here’s a page using Bootstrap and JQuery that clones its own source code, starting with the <head> tag

It uses Bootstrap for cosmetic purposes. Obviously the core code is here:

$('#sourceListing').text( $("html").clone().html() ) ;

Screen shot of the program in action:

This Program Clones Itself

Reveal.js lets you create dynamic presentations in an HTML file using simple markup based on the HTML5 section element (tutorial here). Reveal presentations look spiffy and have an intuitive navigation interface, even on touch devices. After publishing a presentation I created using Reveal.js (see production version at this Learn More) page, it was pointed out it lacked the webcomic feature of using a click anywhere in the background to move to the next page. A teachable moment! Enter the Reveal.js API and its addEventListener method.

Using the Reveal.js API to advance to the next page

All the Reveal.js commands are available through its simple and logicalAPI. A few typical examples:

The API we’d like called when a key is pressed is the Reveal.next(). The question is, how do we use it? An obvious answer is to hijack the jQuery .click() handler somehow, or perhaps the newer .on() handler. But no.

Using addEventListener in Reveal.js

A quick refresher on where UI constructs you may think of as Javascript come from–things like keyboard handling, user input, even the alert() method. They’re not built into Javascript. They come from the implicitly declared window object, which is provided by the browser’s runtime environment; you won’t see alert() mentioned in the Javascript language standard. Remember that code like alert('hello, world') is actually a shortcut for window.alert('hello, world').

My first instinct was to attach a click handler using the window object’s addEventListener() method, so I searched the Reveal.js source code to see how it was used, and discovered that Reveal has its own wrapper for addEventListener(). Perfect. Here’s a first shot at it.

Not quite. This prevented other keyboard functions from working, such as clicks on URLs. The key is knowing about event bubbling. Event bubbling is the process by which the user interface manager moves events higher up into the hierarchy; click on piece of text in a button and it’s ignored, for example, so it bubbles up to the button handler and gets consumed there.

We just want clicks on the background to run the Reveal.next() function, so add the false parameter to the end of the Reaveal.addEventListener() handler. It prevents the keystroke from being consumed, so that Reveal.js still has access to it for other purposes. Thus:

Here’s all the code in context. Run the demo and see what happens when you click the background. Run an earlier version) which lacks the background click handler and try the click thing.

Here is the entire program with the addEventListenter() handler in all its glory. The new code is highlighted.

You can dash out an HTML page quickly using a hosted version (also known as a CDN) of  JQuery, which means you don’t have to copy JQuery to a local directory. Here’s an example.

Start with a minimal HTML5 file:

Somewhere betwheen the <head> tags, link to the latest version of JQuery from jquery.com:

Add your Javascript somewhere between the <body> tags. It’s best to put your code close to the closing <body> tag at the bottom so the rest of the page’s assets can load.

Here is the div that contains the online help. Note that its style is initially set to style="display: none;", meaning it’s invisible until the (More) link is clicked. If anyone clicks on the link with the anchor text (More) It reveals a div that is otherwise hidden. This is where you’d put the help text. Because it’s a toggle function, the customer makes it disappear simply by clicking again.

This code simulates online help. Here’s what happens:

  • The code between $(document).ready(function() { and its closing } bracket is the JQuery document ready function, which does not execute until the full HTML document has been loaded.
  • The code between ("#showhelp").click(function(){ and its closing } bracket executes when anything with an ID of “showhelp” is clicked. It doesn’t have to be a link as shown. It could be a button
  • There is a link going nowhere (target of "#" with the ID "showhelp"
  • There is a div with the ID "helpmessage". Its visibility gets reversed when the "showhelp" link is clicked, using the code $("#helpmessage").toggle();

Here’s the whole program. Click here to try it:

 

Addy Osmani’s blog is a must-read for Javascript developers. His books are a pleasure to read, and some of them are free. Am rereading his Writing Modular JavaScript With AMD, CommonJS & ES Harmony because I’m interested in high-performance Javascript. Like the look of the blog itself, this free resource is elegant in both appearance and substance. The blog is so good I inaugurated the Recommended Reading section just to talk about.

Here at HTMLCheats.com Central, we love creating useful tutorials in 1 page or less with code you can plug right into your own projects, and CDNs (content deliver networks) are a marvelous shortcut. They can also pose a danger to production code. This article tells you what a CDN is, when you should use it, and when you might wish to avoid it.

What’s a CDN and why do I want one?

A content delivery network means that someone else hosts assets used by your website, typically images, videos, fonts, or script libraries. YouTube is a common example: when you embed a YouTube video in your site, you’re using a CDN.

I get a little more antsy when I think about using a CDN for a code asset, though it’s fantastic for tutorials. Our popular Fabric.js Tutorial is an excellent example. Look at these two script tags:

This code works on any HTML page and requires no explanation.  Contrast it with this (simplified) passage from our even more popular Reveal.js Tutorial:

  • Visit the Reveal.js home page at https://github.com/hakimel/reveal.js.
  • Find the Download as Zip icon and click it
  • The zipped archive file downloads as reveal.js-master.zip.
  • Extract the file to a working directory
  • A directory called reveal.js master is created containing dozens of files. You don’t need them all to create a presentation. The other files are required by developers to change the source code for Reveal.js, which is definitely not necessary for normal usage.
  • Copy the files you need to your working directory
  • Copy the directories css, js, plugin, and lib into the directory you’ll use to write the HTML file that makes up the presentation.

Man, I got tired just copying and pasting that deathless prose. Now that you’ve seen what a CDN is and how it works, let’s see the pluses and minuses.

Advantages to using a CDN

  • Speed, part 1: Sites like Google usually have better servers than you do
  • Speed, part 2: Browsers can download a certain number of assets per web site concurrently. Since the CDN is on another site it’s not included in that limit.
  • Great for trying experiments quickly because you don’t have to download anything or create separate asset directories
  • Someone else maintains these files for you and often can automatically upgrade to the latest version
  • Good for free web hosting sites like Weebly that don’t let you create script or asset directories
  • Speed, part 3: There’s a good chance your user’s ISP has already cached files from popular CDNs such as Google

Disadvantages to using a CDN

  • It can be a disaster for automated testing.  If the CDN makes silent changes to the hosted file, or turns out to be unreliable, tracking down the problem may be more difficult
  • If the CDN goes out of business, you have to re-host on your own website
  • If the CDN performance is bad, it reflects badly on your website
  • If you use something like jquery_latest (shown below) to obtain the most recent version, it’s possible that new, incompatible code in the library may break your existing code.
  • It doesn’t work offline, so you can’t develop without a net connection.
  • You can’t edit the CSS or Javascript on the CDN (big security risk, and of course it would change every one else’s copy)
  • It’s easy to forget to upgrade a library if versions change. The JQuery CDN avoids this neatly by using  jquery-latest.js and that’s pretty cool, but it could also break tests if the behavior of a jquery feature in a new version was not backwards compatible

When to use a CDN, when not to

At my day job, we have good luck using a paid CDN for some items such as style sheets and logo images. They speed performance but their absence would not affect core site operations. We also use YouTube to host videos because videos aren’t mission critical and it’s awesome SEO. Our site requires real time performance and has no margin for error, and we pay a lot of money for everyday hosting. When should you use a CDN?

  • If your site gets relatively low traffic (such as a brochure advertising your service business, a vanity site, or a specialty niche) and uses an inexpensive host a CDN is probably all win. It will improve performance and add reliability, in the case of low-end web hosts
  • If you’re using a top tier CDN such as Google or Microsoft CDNs, you’ll be fine.
  • If your site gets a lot of traffic and the assets are mission critical, it’s a tossup. For reliability’s sake it may be that you trust your own dedicated host more. On the other hand if your site serves complicated web pages with many assets on one page, the performance may outweigh the slight risk of the CDN going down.
Posted in CDN.