Wordpress 3.0 jQuery - part 24 potx

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 understa

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:

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:justify'></ 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',

// set up two buttons

buttons: {

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

"Close" : function() {

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

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

You can simply use CSS styles or the css() function to style the 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();

})

//add the button widget

button();

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

next screenshot:

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

})

//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!

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

Summary

That's our look at the jQuery UI plugin and just a few of the ways it can really benefit a WordPress site There are dozens, possibly hundreds of them and more,

it just depends on your site or project and its needs

Remember, jQuery runs on the client-side, in the browser, and WordPress serves up the finished HTML pages to the browser This means that you have the power to not only enhance WordPress content, but also most WordPress plugins, such as cforms

II, and most sidebar widgets should be easy to enhance with jQuery and the jQuery

UI plugin

In this chapter, we had a look at:

The UI plugin and various ways to include it and get started with it

in WordPress

Understanding how applying UI elements to our WordPress site makes it more intuitive, easier to understand, and encourages users to take action Common ways to implement popular UI features with common

WordPress features

Let's now move on to the next chapter and see about using jQuery to help us create AJAX interactions

•

•

•

AJAX with jQuery and

WordPress

AJAX is an acronym that Jesse James Garrett, a user-experience expert who founded

www.AdaptivePath.com, coined back in 2005 It quickly morphed into a buzzword who's descriptiveness (and verby-ness) as we'll see, goes way beyond its actual

acronym definition We'll take a quick look at what AJAX really is and how easy

it is to implement, not to mention cook up a few more cool solutions for our

"hypothetical" clients

In this chapter, we're going to take a look at:

The basics of using jQuery's AJAX load() function and the more robust

.ajax() function

Working with JSON and hooking into other site's APIs

Creating a custom AJAX enhanced home page and comment form

Refining that functionality using animation and events

Let's get started by taking a look at what jQuery does for AJAX

What AJAX is and isn't: A quick primer

To start, if you're new to AJAX, I'll just point out that AJAX is actually not a

technology or language! The acronym stands for Asynchronous JavaScript and

XML It's the technique of using JavaScript and XML to send and receive data

between a web browser and a web server The most obvious (and cool) use of this technique means you can dynamically update a piece of content on your web page with a call to the server, without forcing the entire page to reload

•

•

•

•