Project Adding a dialog box to a download button with icons

Dialog boxes are great ways to alert and direct people's attention to really important information, making sure they understand the next steps that they need to take, as well as confirming an action.

Our client is very happy with the tabbed information on the home page and the condensed accordion side bar. They just need one more enhancement. The first tab on the home page offers a PDF download of a white paper that contains information about their methodology, products, and their various uses. As you can see by the next screenshot, the client wants users to understand they're downloading copyrighted information and that the document can not be freely distributed.

As you can see in the following screenshot, they've placed some disclaimer language right before the download link to the PDF file:

In general, that's all their legal department claims they need, but they'd like it to be a little more clear. We can enhance this download process further by making the download link more prominent using the button widget, and turning the previous Disclaimer text into a dialog box. The user will then have to select I Agree on the dialog box to get the PDF download to continue and the client can rest assured that the majority of the people downloading their white paper through a JavaScript-enabled browser are definitely aware of the disclaimer.

First, let's set up that Disclaimer text to go inside our dialog box. We'll target the paragraph and apply the dialog widget as follows:

//select p that contains the disclaimer text jQuery("#post-98 p:contains(Disclaimer:)") .wrapAll("<div id=' disclaimer '></div>");

//create the disclaimer dialog widget jQuery("#disclaimer").dialog();

If you reload your page, you'll see that the Disclaimer text now appears in a dialog box as follows:

m t Download Agreement

Disclaimer: The white paper provided is copyrighted material, riot for general distribution, Downloading our -1 white paper means you agree to our terms and a conditions. Dolor in reprehenderit in voluptate velit esse cilliim dolore eu fugiat nulla pariatur. Excepteur sint oceaecat eupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

The dialog box's default is to align the text "center". This is great for one line of text, but our paragraph looked a little strange so we've added a style to our .wrapAll HTML as follows:

...wrapAll("<div id='disclaimer' style=,text-align:justifyl ></ div>");...

Next, we really don't want the dialog box to appear immediately, so we'll set its option of autoOpen to false. We also want confirmation buttons to appear, as well as a title in the dailog's top bar. The dialog widget can also accommodate buttons, so we'll add them in, along with their functionality as follows:

//create the disclaimer dialog widget jQuery("#disclaimer").dialog({ //set the dialog to close autoOpen: false,

//set the title title: 'Download Agreement',

//activates the URL placed in the a href "I Agree": function() {

//get the URL of the PDF var pdfFile = jQuery("#post-98 a").attr('href'); //direct the browser to that URL

window.location.href = pdfFile;

//close the dialog box

jQuery(this).dialog("close"); }

The above works great—or at least we think it does. Now that the dialog's autoOpen option is set to false, we can't tell! We'll need the Download PDF link to kick-off the dialog box and while we're at it, we'll need to make sure that the link's href doesn't kick-off the PDF download.

If you've been paying attention, you're probably ready to use the . removeAttr () function to remove the href attribute from the link and render it powerless. That's a good idea; however, in the previous code snippet, we reference the href attribute of the link. That reference doesn't kick-off until after the box has appeared, which would be after we removed it from the object, which means our window. location. href JavaScript won't have a clue where to go.

Our best bet is to use another great function called preventDefault(), which will leave all the attributes of the link intact, but prevent it from acting like a clicked link. Let's add in this new link functionality:

jQuery("#post-98 a")

//set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open"); //ensures that the link to the href is disabled event.preventDefault();

Last, before we refresh our page and take a peek, let's go ahead and make the PDF download link look a little more "clickable". Because we're using jQuery version 1.4.2 from the Google CDN, and the 1.8 version of the jQuery UI plugin, we can do this by selecting the link and adding button widget to it.

I ' If you're not using version 1.8 of the UI plugin, this step is optional. I

You can simply use CSS styles or the .css() function to style the I link to your liking.

We'll simply chain the .button() widget function on to our existing link selection, after the .click() function as follows:

jQuery("#post-98 a")

//set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open"); //ensures that the link to the href is disabled event.preventDefault(); })

You can refresh your page and check out the new button, as shown in the next screenshot:

Home Events About Contact

Home Events About Contact

As great as the button-ized link looks, it doesn't take much to go one step further and add a few icons so it's clear what clicking on the button will get people, and encourage them to take action.

The jQuery UI plugin themes come with a host of framework icons. If you included the image directory relative to your jQuery UI stylesheet, you have access to them.

The button widget allows for icons to be placed in a "primary" and "secondary" position. The primary position is to the left of the button, and the secondary is to the right, after any button text. Let's add the "circle-arrow-s" icon and the "document" icon to our button as follows:

jQuery("#post-98 a")

//set up a click function on the link .click(function(event){ //open the dialog box jQuery("#disclaimer").dialog("open");

//ensures that the link to the href is disabled event.preventDefault();

//add the button widget .button({

//add the icons icons: {primary:'ui-icon-circle-arrow-s secondary:'ui-icon-document'}

Here's our "iconic" button and dialog box once people hit the button:

Want to find out what icons are available for widgets? Check out the theme roller: http://jqueryui.com/themeroller/. At the bottom of the page you'll see all the framework icons. Rolling over them will display their title tag info which contains the name you want to place in your jQuery statements to reference them.

The last thing to test with this enhancement, is that clicking on I Agree kicks-off the download, which as you can see by the following screenshot, works!

What we dr

Opening whlte-paper.pdf

What \n

You have chosen to open

| white-paper.pdf which is a: Portable Document Format from: http:i/localhost

What should Firefox do with this file?

Lorem ipsu eiusmod te OOpenwith Preview (default) Save File

1. Ut enim

2. quis nos

3. laboris r

Lorem ipsu eiusmod temper incididunt ut

O Download the PDF b

Do this automatically for files like this from now on.

Close

I Agree

This is actually an impressive amount of interactivity to add to a site, and yet at the same time, it degrades and works just fine the way it was without JavaScript. It's a really great use of jQuery and the jQuery UI plugin.

Blogging For Business

Blogging For Business

Download this Guide And Discover How Start And Run Your Very Own Successful Business Blog. Always Wanted To Start Your Own Blog?

Get My Free Ebook


Post a comment