Wordpress 3.0 jQuery - part 20 docx

So, let's leave Flash for what Flash does best and use jQuery to enhance what our client's WordPress site already does best.. We'll continue to use the Default Theme with the Page Naviga

The result looks great! Here's our chart animation as it starts off:

And here it is at its completion, a fun visually clear display of the organization's shining greensters:

Delving deeper into animation

Thanks to your animated green stats chart, you're ready to take on some slightly

more complicated requests: clients insisting on Flash development As someone who

got into web development through Flash in the 90s, a request for Flash development

is no problem Complain all you want, you have to admit, Flash sure can animate However, Flash does require a plugin and despite being the most popular desktop browser plugin out there, it's not always a good way to display core content

you want to ensure everyone can see, much less essential elements such as site

navigation Plus, while it's the most popular plugin for desktop/laptop browsers,

Flash is a "no-go" in Safari Mobile for iPhone and other WebKit-based browsers for most SmartPhones

With all the advances of CSS and JavaScript support in browsers these days

(especially mobile browsers), my first question for Flash requests is always: "Sure First, tell me exactly what you'd like done, and we'll see" Sure enough, our client wants their main navigation panel animated

Flash can certainly do this, but then so can jQuery, and when JavaScript is not an option, it will elegantly degrade into nicely styled CSS elements and in the worst case, with no CSS, the page will load our WordPress theme's clean, semantic

XHTML into a text-only browser

While there are plenty of ways to serve up Flash content and applications so they

degrade elegantly into compliant HTML alternatives (and you should always offer

these alternatives when working with the Flash player), why add that extra layer

of development and complexity if it's not essential? The client doesn't need to serve

up streaming video, or have custom cartoon characters animated, much less want

an in-depth, multimedia slathered and mashed up Rich Interface Application (RIA)

So, let's leave Flash for what Flash does best and use jQuery to enhance what our client's WordPress site already does best

Luckily, the client is reasonable and willing to see what jQuery can do before we resort to Flash Let's show them what their WordPress site is made of with a little

Let's go ahead and prep the theme so that we can get started We'll continue to use

the Default Theme with the Page Navigation CSS changes that we made in Chapter 2, Working with jQuery in WordPress We'll be enhancing the navigation with a smooth

indent and release animation that triggers on hovering on and off the menu items We'll top it off with a cool floating point selector (which also happens to be the site's space ship icon)

First up, we'll need to trace the client's space ship icon used in their logo, into a basic silhouette form so that we can create a floating pointer with it Again, this is easily done using Inkscape:

We'll take an extra step here and rotate the ship, and since it's going to be a

transparent PNG file, add a nice drop shadow and afterburn gloss to give it

some depth:

We'll export this image as a 37 pixel wide transparent png Next up, we'll need

to prep our theme's stylesheet to accept this background image We'll be creating

a div called #shipSlide in jQuery to hold the image so our stylesheet needs to accommodate that id name:

Again, as with many examples in this book, to keep the process concise and easy to understand, we'll be doing things as directly as possible,

but not necessarily as optimized as possible In a real-world project you may want to create a separate stylesheet for any project like this or wrap your jQuery work into a plugin or even in a WordPress plugin using the

techniques we covered in Chapter 3, Digging Deeper: Understanding jQuery

and WordPress Together This all depends on how flexible and portable

you'd like the jQuery enhancement to be afterwards

Now, we'll get to work in jQuery As usual, for every project you'll make sure that jQuery is included into the theme, and that you have a custom-jquery.js file included and set up to work in Also, for this navigation, we'll be using the Color and Easing plugin You can register the bundled Color plugin, but you'll need to download and include the custom Easing plugin into your theme manually Get

it from: http://gsgd.co.uk/sandbox/jquery/easing/

In our particular default theme, we'll start off with some jQuery to make it a little clearer what our nav will do

Our first bit of jQuery looks like this:

//this adds our #shipSlide div

//under the twenty ten theme's menu header div

jQuery('.menu-header').prepend('<div id="shipSlide"> </div>');

//this fades the ship div to 40%

jQuery('#shipSlide').fadeTo('slow', 0.4);

Before I fade the #shipSlide div with jQuery's fadeTo() function, I did load it up into the browser to check and make sure the background image was loading in from the CSS The following screenshot shows the ship image loaded in and faded by our budding jQuery script:

OK, next up, let's set up a basic animation that pushes the navigation li.page_item objects in from the left, 35 pixels, relative to where they are We'll also then target the tags and change their background color We'll use the hover function to make sure this happens on rollover and rollout of the li.page_item objects:

jQuery('li.menu-item')

hover(function() {

//animates each menu item to the right (from the left)

jQuery(this).animate({paddingLeft: '+=25px'}, 400, 'swing');

//this over rides the style sheet's background on hover

jQuery(this).find('a').css('background','none');

//ship move code will go here

}, function(){

//returns the menu item to it's location

jQuery(this).animate({paddingLeft: '-=25px'}, 400, 'swing');

});//end hover

Finally, inside the first hover function, just below the a object's color animation, we'll

add in the following code snippet, which will move the #shipSlide object to the position of the li.item_page (note the bold code only):

//this custom moves the ship image

var p = jQuery(this);

var position = p.position();

jQuery("#shipSlide").fadeTo('slow', 1)

.animate({marginLeft: position.left-175},

The #shipSlide object's animate function moves the marginLeft of the ship left to the position.left of the page_item, minus 175 pixels

You'll also notice in the previous code snippet's animate function that we set the queue to false and that we're using the easeOutBack easing method that's only available to us because we included the Easing plugin

The very last bit of code we need, below the li.page_item.hover() code is another jQuery selection and hover() function, which will fade the #shipSlide object in and out on hover of the #mainNav object Again, just place this jQuery below all the other navigation code:

//this fades and moves the ship back to it's starting point

jQuery('.menu-header').hover(function(){

jQuery("#shipSlide").fadeIn(1000);

}, function(){

jQuery("#shipSlide").fadeTo('slow', 4)

.animate({marginLeft: '-5px'},

{duration: 600, easing: 'easeOutBack', queue: false});

});//end hover

The final result looks great, the ship and menu item animation is smooth, and the client is very happy with their new snazzy navigation

Project: Creating rotating sticky posts

Earlier we discovered that working with WordPress sticky posts is pretty easy! That's good to know because our Mr "I want Flash" client has now requested an additional enhancement solution They are using WordPress sticky posts to make site viewers aware of the products that they're featuring Making the posts sticky works great keeping their product mentions up top (usually two to four at a time), while their regular news posts and updates flow below the product features

However, when they have more than two products to feature, (especially when they have three or more products to feature) their current posts get pushed down, sometimes way below the fold They're worried that people just glancing at the site from time to time may feel it's stale if they don't take the time to scroll down and see the current posts

They've seen plenty of examples of sites that have really cool image rotators with slide or cross-fade effects up on top of featured items and they'd like to work

something like that into their site They originally thought they'd do this in Flash and give up convenience, but since the jQuery navigation panel turned out so well, they'd like to create a solution that:

Conserves space, so other posts don't get pushed "below the fold"

Looks really nice and draws attention to the sticky feature posts

Means it's still easy for their marketing administrator to implement new featured items (as easy as just creating a post and marking it "sticky"!)

This client's theme already has the sticky post's CSS changed slightly, in that

there's a simple background that makes the posts have a dark gradation as well as some font color changes You'll find these CSS rules at the bottom of their theme's style.css stylesheet:

.sticky { background: #000 url(images/sticky-background.png)

repeat-x; color: #ccc;}

.sticky small.date{display:none;}

.sticky h2 a{color: #0099ff;}

•

•

•

The result looks like this, and you can see how just three sticky posts leave NO room for checking out the current posts below those, and leave the user with quite a bit of scrolling to do:

Essentially, we'll want to collapse these stickies on top of themselves, maybe make

them a little shorter if possible, hide all of them except the first sticky post, and then proceed to fade in the remaining posts over the first one.

First up, it seems obvious, but again, make sure that you've registered and included jQuery into the theme along with the Color and Easing plugins discussed earlier You can include jQuery however you wish, but I'll be using 1.4.2 from the WordPress

3.0 bundle as discussed in Chapter 2, Working with jQuery in WordPress And per

usual, you'll also want to be sure to include a custom.js file to the theme so that you can keep your jQuery code out of the WordPress header.php template (this is also

covered in Chapter 2, Working with jQuery in WordPress).

Once jQuery and your plugins are included in the theme, we'll get to work with jQuery Because the site is functional the way it is, and the client is OK with this as

an alternative view, we'll leave the theme and style.css alone and make sure all

our enhancements are done with jQuery

Again, the following code may not be the most elegant way to achieve the client's goals, but it's written to make sure each step of what's happening

is clear

Let's start by changing the CSS properties of the sticky posts so that they all stack up

on top of each other The easiest way to do this? Make the sticky class position: absolute Let's also go ahead and make the width and the height correct and that any overflow is hidden like so:

jQuery(function(){

jQuery(".sticky")

.css({

position: 'absolute',

top: '0',

margin: '0',

width: '650px',

height: '320px',