Wordpress 3.0 jQuery phần 7 doc

jQuery Animation within WordPress [ 178 ] 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 oating 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 oating pointer with it. Again, this is easily done using Inkscape: Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 5 [ 179 ] We'll take an extra step here and rotate the ship, and since it's going to be a transparent PNG le, 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: #shipSlide{ position: absolute; margin-top: 12px; margin-left: -7px; width: 37px; height: 20px; background: url(images/spaceship-icon.png) no-repeat; } Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com jQuery Animation within WordPress [ 180 ] 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 exible 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 le 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 rst 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: Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 5 [ 181 ] 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 rst 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}, {duration: 600, easing: 'easeOutBack', queue: false}); Here, we've set up a variable we named position and also used a function called .position() to be able to pull an array of information from the li.page_item objects. Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com jQuery Animation within WordPress [ 182 ] 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 nal 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 ow below the product features. Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 5 [ 183 ] 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 nd 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;} • • • Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com jQuery Animation within WordPress [ 184 ] 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: Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 5 [ 185 ] 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 rst sticky post, and then proceed to fade in the remaining posts over the rst 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 le 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 overow is hidden like so: jQuery(function(){ jQuery(".sticky") .css({ position: 'absolute', top: '0', margin: '0', width: '650px', height: '320px', overflow: 'hidden' }); Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com jQuery Animation within WordPress [ 186 ] Next up, we'll move the h2 header up a bit and most importantly, as our actual posts are under the positioned absolute .sticky posts, we'll move those down so they show up under our soon-to-be-animated sticky posts. We'll also adjust the image's right-hand side margin a bit for placement. //move the header back over if it's affected by the css //you could also do this in the CSS directly jQuery('.sticky h2').css({margin: '0', padding: '0'}); //move the margin over a bit //you could also do this in the CSS directly jQuery('.sticky img').css('marginRight','30px'); //this pushes the other posts down out of the way jQuery('.post:not(.sticky):first').css('margin-top','360px'); Pay special attention to the bold jQuery selector in the previous code snippet. You can refer to Chapter 3, Digging Deeper: Understanding jQuery and WordPress Together for more on using selectors if you need to refresh your knowledge. Essentially, we're targeting the rst .post div that does not have the .sticky class assigned to it. Nice! The result looks like this: Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 5 [ 187 ] OK! jQuery has that really nice function we've looked at previously called .each, which will run additional functions on every object in a wrapper set. If all we wanted to do was run through each item one time, we could use this bit of code: jQuery('.sticky') .hide()/*hide each post*/ .each( function (i){ /*i = numeric value that will increase with each loop*/ jQuery(this) /*make sure each div is on it's own z-index*/ .css('z-index','i+10') //using the animate function to fade in each div //3 seconds apart*/ .animate({'backgroundColor': '#000000'}, i*3000, function(){ /*actual div fade in*/ jQuery(this).fadeIn('slow'); } );//end animate });//end each This looks good! However, once the last div has faded in, it stops and doesn't continue. Nope, there's no super slick jQuery way to keep the .each() function going. Yet, an .each function is so easy to set up, it's a shame not to leverage them, even for "innite loops". Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com [...]... wp_enqueue_script( "jquery- ui-dialog", array( 'jquery' , 'jquery- ui-core')); }//end of is_admin() ?> [ 200 ] Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com Chapter 6 Just repeat the above code for additional widgets The widget js file names are as follows: jquery- ui-tabs jquery- ui-sortable jquery- ui-draggable jquery- ui-droppable jquery- ui-selectable jquery- ui-resizable jquery- ui-dialog... defined as second argument, using an optional transition jQuery UI plugin versions bundled in WordPress Most of the jQuery UI plugin's main widget and interaction cores are available bundled into your WordPress installation If you're using WordPress 2.9.2, you've got jQuery 1.3.2 bundled in and the UI plugin core is 1 .7. 1 and you've also got the following jQuery UI widgets and interactions available: Dialog,... addition to registering and/or including the necessary jQuery and jQuery UI plugin files in our WordPress project, you should have also included a custom -jquery. js file to your theme to work with Once you've done that, include the following code: jQuery( function(){ jQuery( ".post h2").hover(function(){ jQuery( this).effect('shake', 200); }, function(){ jQuery( this).effect('shake', 200); }); }); You can (sort... apply jQuery UI widgets to our WordPress site, make it more intuitive, easier to understand content, and encourage users to take action • Learn how to implement popular UI features and widgets with common WordPress features Let's get started Simpo PDF Merge and Split Unregistered Version - http://www.simpopdf.com WordPress and jQuery s UI Getting to know jQuery' s UI plugin You can take a tour of the jQuery. .. WordPress site By now, you should be pretty comfortable including jQuery plugins into your WordPress sites Because specific components of the UI plugins are available bundled in WordPress, we'll review getting them into your project in a few different ways Including jQuery' s UI from WordPress' bundle The jQuery' s UI plugin bundled into WordPress is separated out into individual js files You'll have to... your WordPress theme: . .css('z-index','i+ 10& apos;) //using the animate function to fade in each div / /3 seconds apart*/ .animate({'backgroundColor': ' #00 000 0'}, i * 30 00, function(){ /*actual div fade in*/ jQuery( this).fadeIn('slow'); . inside the jQuery document ready function: jQuery( '.sticky:last') .after('<div id="stickyNav" style="position: absolute; padding: 10px 0 0 0; margin-top: 280px; . .css('z-index','i+ 10& apos;) /*using the animate function for timing*/ .animate({'backgroundColor': ' #00 000 0'}, i*duration, function(){ jQuery( this).fadeIn('slow');