Dynamic Menus and Interactive Elements
[ 164 ]
Again, if the user is browsing with IE6, then they will have to click to activate. The
good news is the swapobject.js Javascript that we implemented above for your
theme's headers can be leveraged anywhere on your site including these posts.
Yes, of course there's a plug-in: This won't help you too much if you're
planning on Flash in your theme, but for Flash in your WordPress posts
and pages, Jim Penaloza has written a great little plug-in using the
SWFObject method detailed above. You can find out more about it here:
http://wordpress.org/extend/plugins/wp-swfobject/
Chapter 7
[ 165 ]
Want more Flash? Despite my warnings at the beginning of this chapter,
if you still want to add more interesting Flash to your site, there's a host
of Flash-based WordPress plug-ins that allow you to easily embed Flash
content and features into your WordPress posts and pages. Check out the
plug-ins directory at http://wordpress.org/extend/plugins/
search.php?q=Flash.
Summary
In this chapter, we've looked at getting drop-down Suckerfish menus and
Flash content quickly and painlessly into your WordPress theme and content. Next
up—getting AJAX with dynamic interactive forms into your WordPress project.
AJAX / Dynamic Content and
Interactive Forms
AJAX—it's the buzzword that hit the Web with a bullet in 2005, thanks to Jesse
James Garrett, a user-experience expert who founded AdaptivePath.com. If you're
totally new to AJAX, I'll just point out that; at its core, AJAX is nothing that scary or
horrendous. AJAX isn't even a new technology or language!
Essentially, AJAX is an acronym for Asynchronous JavaScript and XML, and it is
the technique of using JavaScript and XML to send and receive data between a web
browser and a web server. The biggest advantage this technique has is that you can
dynamically update a piece of content on your web page or web form with data from
the server (preferably formatted in XML), without forcing the entire page to reload.
The implementation of this technique has made it obvious to many web developers
that they can start making advanced web applications (sometimes called RIAs—Rich
Interface Applications) that work and feel more like software applications, instead of
like web pages.
Keep in mind that the word AJAX is starting to have its own meaning (as you'll also
note its occasional use here as well as all over the web as a proper noun, rather than
an all-cap acronym). For example, a Microsoft web developer may use VBScript
instead of JavaScript to serve up Access Database data that is transformed into JSON
(not XML) using a .NET server-side script. Today, that guy's site would still be
considered an AJAX site, rather than an AVAJ site (yep, AJAX just sounds cooler).
In fact, it's getting to the point where just about anything on a website (that isn't
in Flash) that slides, moves, fades, or pops up without rendering a new browser
window is considered an 'Ajaxy' site. In truth, a large portion of these sites don't
truly qualify as using AJAX, they're just using straight-up JavaScripting. Generally,
if you use cool JavaScripts in your WordPress site, it will probably be considered
'Ajaxy', despite not being asynchronous or using any XML.
AJAX / Dynamic Content and Interactive Forms
[ 168 ]
We're going to take a look at the most popular methods to get you going with AJAX
in WordPress using plug-ins and widgets to help you include dynamic self-updating
content and create interactive forms in your WordPress site. While we're at it, we'll
also look at some cool JavaScript toolkits, libraries, and scripts you can use to
appear 'Ajaxy'.
Want more info on this AJAX business? The w3schools site has an
excellent introduction to AJAX, explaining it in straight-forward, simple
terms. They even have a couple of great tutorials that are fun and easy
to accomplish, even if you only have a little HTML, JavaScript, and
server-side script (PHP or ASP) experience (no XML experience required)
(http://w3schools.com/ajax/).
Preparing for Dynamic Content and
Interactive Forms
Gone are the days of clicking, submitting, and waiting for the next page to load, or
manually compiling your own content from all your various online identities to post
into your site.
A web page using AJAX techniques (if applied properly) will give the user a
smoother and leaner experience. Click on a drop-down option and the checkbox
menus underneath are updated immediately with the relevant choices—no
submitting, no waiting. Complicated forms that, in the past, took two or three
screens to process can be reduced into one convenient screen by implementing the
form with AJAX.
As wonderful as this all sounds, I must again offer a quick disclaimer. I understand
that, as with drop-down menus and Flash, you may want or your clients are
demanding that AJAX be in their sites. Just keep in mind, AJAX techniques are
best used in situations where they truly benefit the user's experience of the page,
for example, being able to add relevant content via a widget painlessly or cutting
a lengthy web process from three pages down to one. In a nutshell, using an AJAX
technique simply to say your site is an AJAX site is probably not a good idea.
You should be aware that, if not implemented properly, some uses of AJAX can
compromise the security of your site. You may inadvertently end up disabling key
web browser features (like back buttons or the history manager). Then there are all
the basic usability and accessibility issues that JavaScript, in general, can bring to
a site.