The core idea of the effect is:

1. bind each section, sprite and background to the window scroll event
2. record the original offset of the element
3. divide the scroll position by the desired speed of the element and discount the original offset value
4. apply varying speeds to elements as desired to create the parallax effect
5. for the nikebetterworld specific effect where the background image overlaps that's done with background-attachment: fixed

Here's what we came up with.

N.B. Sorry about the Angry bird theme for those who try to run the script. That's quite a big hit over here for Kongers of all age groups!

DomReady:

CoffeeScript

jQuery ($) ->
  # your code here!

JavaScript

jQuery(function($) {
  // your code here!
});

DomReady v2:

CoffeeScript

$(document).ready ->
  # your code here!

JavaScript

$(document).ready(function() {
  // your code here!
});

Passing jQuery into a closure:

CoffeeScript

(($) ->
  # your code here!
) jQuery

JavaScript

(function($) {
  // your code here!
})(jQuery);

Do you have a recipe for this too? What is it?

Source code on github at
https://github.com/caphun/jquery.stickysidebar

Enjoy!

However there is an itch to scratch when it comes to fullscreen sliding. The Cycle plugin doesn't quite support this well enough. Fortunately the Transition Effects architecture allows us to write custom transitions to overcome this problem.

/* Ca-Phun Ung < caphun at tofugear dot com>
 * Support for fullscreen horizontal scroll transitions.
 */
$.fn.cycle.transitions.scrollMaxHoriz = function($cont, $slides, opts) {
    var w = $(window).width();
    if (opts.minWidth && w < opts.minWidth) w = opts.minWidth;
	opts.before.push(function(curr, next, opts, fwd) {
		if (opts.rev)
			fwd = !fwd;
        curr.cycleW = next.cycleW = w;
		$.fn.cycle.commonReset(curr,next,opts);
		opts.cssBefore.left = fwd ? (next.cycleW-1) : (1-next.cycleW);
		opts.animOut.left = fwd ? -curr.cycleW : curr.cycleW;
	});
	opts.cssFirst.left = 0;
	opts.cssBefore.top = 0;
	opts.animIn.left = 0;
	opts.animOut.top = 0;
};

As you may notice in the above transition I'm only dealing with screen width hence I call this the scrollMaxHoriz transition. Now how to use this code? First load it as part of your javascript library stack then in your cycle call you can:

$('.my-slides').cycle({
  fx: 'scrollMaxHoriz', // use custom scrollMax transition plugin
  minWidth: 1057 // optional
});

That's it!

However I was looking also at a way of removing the Plugin Editor menu and noticed you can't remove it like you do with the Theme Editor menu because it's not added via an action. So I added this to my theme's functions.php:

add_action('_admin_menu', 'remove_plugin_editor_menu', 1);

if ( ! function_exists( 'remove_plugin_editor_menu') ):

function remove_plugin_editor_menu() {
  global $submenu;
  unset($submenu['plugins.php'][15]);
}

endif;

It's very hacky because I'm targetting the index value of the $submenu array. If anyone knows a better way then I'd love to here it!

If you want to revert changes made to your working copy, do this:

git checkout .

If you want to revert changes made to the index (i.e., that you have added), do this:

git reset

If you want to revert a change that you have committed, do this:

git revert ...

Source: How to revert all local changes in a GIT managed project to previous state ?

Luckily the fix is actually pretty simple with the following steps:

1. Get a copy of the source code - jquery.fancybox-1.3.1.zip

2. Do a in-code-search

Open jquery.fancybox-1.3.1.js and look for the fancybox_get_viewport function (should be around line 56), the function should look like this:

fancybox_get_viewport = function() {
  return [ $(window).width(), $(window).height(), $(document).scrollLeft(), $(document).scrollTop() ];
},

3. Change it to look like this:

fancybox_get_viewport = function() {
  var isFixed = wrap.css('position') === 'fixed'; // add support for fixed positioning
  return [ $(window).width(), $(window).height(), isFixed ? 0 : $(document).scrollLeft(), isFixed ? 0 : $(document).scrollTop() ];
},

4. Add some CSS

Add the following clauses to your CSS files (ensure these clauses load after the jquery.fancybox-1.3.1.css file):

#fancybox-wrap {
  position: fixed;
}
* html #fancybox-wrap {	/* IE6 */
  position: absolute;
}

That's it!

Basically what the fix does is detect whether the wrapper is a fixed position element, if so it would return 0 for the scrollLeft and scrollTop values of the viewport. So even if you're not using a fixed position element you can add this fix in as it's non-destructive.

HTML

<input type="text" placeholder="click me!">

So now we have a problem. Some browsers support it and others don't!? Foresee client issues? Not to worry, here's a workaround using the latest jQuery 1.4 features!

JavaScript

jQuery(document).ready(function($) {

  // first check if placeholder attribute is supported
  if ($('<input/>')
        .attr('placeholder','')[0]
        .placeholder === undefined) {

    // text input placeholder
    $('input[placeholder]')
      .each(function() {
        this.value === ''
          ? this.value = $(this).attr('placeholder')
          : false;
      })
      .live('focusin focusout', function(event) {
        event.type == 'focusout' && this.value === ''
          ? this.value = $(this).attr('placeholder')
          : this.value === $(this).attr('placeholder')
            ? this.value = ''
            : false;
      });

  }

});

This is not a complete solution as there are other things to consider such as visual style and what happens when you submit the form. But I'll let you mull over those.

Demo and code sample: http://jsbin.com/ujosa/edit

Naturally many have used JavaScript to rectify this problem and I'd be doing the same here. The difference is we won't be putting anything special in the markup but will simply use the maxlength attribute within our textarea as if it's native — like so:

HTML

<textarea cols="30" rows="5" maxlength="10"></textarea>

This is looking good for HTML5 compatibility. And here's the magic:

jQuery

jQuery(function($) {

  // ignore these keys
  var ignore = [8,9,13,33,34,35,36,37,38,39,40,46];

  // use keypress instead of keydown as that's the only
  // place keystrokes could be canceled in Opera
  var eventName = 'keypress';

  // handle textareas with maxlength attribute
  $('textarea[maxlength]')

    // this is where the magic happens
    .live(eventName, function(event) {
      var self = $(this),
          maxlength = self.attr('maxlength'),
          code = $.data(this, 'keycode');

      // check if maxlength has a value.
      // The value must be greater than 0
      if (maxlength && maxlength > 0) {

        // continue with this keystroke if maxlength
        // not reached or one of the ignored keys were pressed.
        return ( self.val().length < maxlength
                 || $.inArray(code, ignore) !== -1 );

      }
    })

    // store keyCode from keydown event for later use
    .live('keydown', function(event) {
      $.data(this, 'keycode', event.keyCode || event.which);
    });

});

See live example.

This code could probably be enhanced further by triggering custom events when the maximum length is reached or include a character counter of some sort within the keypress handler. Your imagination is the limit!