The purpose of this page is to summarize notable changes in ie9ify from one version to the next, in particular breaking changes and new features developers may wish to take advantage of.

To update ie9ify via nuget, just type

update-package jquery.ie9iy

In the package manager console window. Be sure to see the release notes below and the README for a complete listing of breaking changes.


What’s New in 1.1?

(Released Apr 15, 2011)

ie9ify 1.1 introduces some minor bug fixes, changes and new functionality that you should be aware of. Here’s a general list of what’s fixed, changed or is new in ie9idy 1.1. For a more complete list of all check-ins, see the Source tab.

  1. [BREAKING CHANGE] Added .css stylesheet for calls to pinTeaser() and removed inline styles from that method. Add a reference to jquery.ie9ify.css in your markup to fix.
  2. Upgraded to jQuery 1.5.2.
  3. Added fadeIn for pinTeaser element, and created options to hide the teaser after an interval, and set the timeout length. (add ‘sticky: false’ in calls to pinTeaser to use)
  4. Implemented Thumbbar buttons style support in $.ie9ify.createThumbbarButtons() through a new property called alternateStyle. Modified sample to include example of thumbbar buttons with alternate styling.
  5. [BREAKING CHANGE] Deprecated the mainContentSelector option in pinTeaser. Use the topHat teaser type if you need to move your page down to fit in a teaser. (remove mainContentSelector option in existing calls to pinTeaser)
  6. [BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
  7. Added 3 additional pinTeaser type options 'topHat,' 'brandedTopHat,' and 'doubleTopHat.' Default is 'hangingChad' and is accesible via the 'type' option in the call to pinTeaser. These new types require the .css stylesheet introduced in this version and images contained in the 'images' directory.

The sample project provided in the download has been changed to take advantage of all of these new features, but a quick overview of #4 and #7 will be covered here:

ThumbBar Button Styles

Version 1.0 introduced partial support for ThumbBar buttons, enabling the creation of buttons and the wiring of click events. 1.1 completes ThumbBar support by providing the option to provide an alternate button style for a primary ThumbBar button with the alternateStyle property. Consider the following:

  1: $.ie9ify.createThumbbarButtons({
  2:    buttons: [{   
  3:       icon: 'images/play.ico',
  4:       name: 'Play Slideshow',
  5:       alternateStyle: {
  6:          icon: 'images/pause.ico',
  7:          name: 'Pause Slideshow'
  8:       },
  9:       click: function () {
 10:          var slideshow = $('#slideshow');
 11:          var text = 'Playing...';
 13:          if ('state') == 'paused') {
 14:   'state', 'playing');
 15:          } else {
 16:             text = 'Pausing...';
 17:   'state', 'paused');
 18:          }
 20:          slideshow.hide().text(text).fadeIn('slow');
 21:       }      
 22:    }]
 23:  });

the ‘alternateStyle’ option passes in a name and icon to use then the main button is clicked (play and pause buttons in this example). ie9ify will manage the internal state of both buttons to ensure that a subsequent clicks places the main button back on the ThumbBar, and so on. The images below illustrate how the ‘alternateStyle’ properties enables richer button state:



Note in the example click function that you are responsible for maintaining click state for any client processing on the page itself.

Additional Teaser Options

Version 1.0 introduced a single teaser option, what we’re now calling the hangingChad, as seen below:


In 1.1, we’ve enhanced this option by providing a ‘sticky’ property that is set to true' by default. Changing this to false will hide the hangingChad after 10 seconds (you can also control the duration with the new ‘timeout’ property. If the hangingChad is set to sticky, a close button is placed over the teaser, as shown above.

We’ve also added three additional teaser options, all which display directly under the address bar.

type: ‘topHat’


  1: $('#topHatContainer').ie9ify('pinTeaser', {
  2:    type: 'topHat',
  3:    pinText: 'Unlock the hidden powers of this site with a click and a drag.',
  4:    style: {
  5:       backgroundImage: 'images/toolbar-bg.png',
  6:       closeButtonImage: 'images/toolbar-bg.png'
  7:    }
  8: });

type: ‘brandedTopHat’


  1: $('#brandedTopHatContainer').ie9ify('pinTeaser', {
  2:    type: 'brandedTopHat',
  3:    pinText: 'Unlock the hidden powers of this site with a click and a drag.',
  4:    secondaryText: 'Drag the icon to your taskbar.',
  5:    style: {
  6:       backgroundImage: 'images/branding_bar_custom_bg.png',
  7:       closeButtonImage: 'images/toolbar-bg.png'
  8:    }
  9: });

type: ‘doubleTopHat’


  1:  $('#doubleTopHatContainer').ie9ify('pinTeaser', {
  2:    type: 'doubleTopHat',
  3:    pinText: 'Unlock the hidden powers of this site with a click and a drag.',
  4:    style: {
  5:       rightBackgroundImage: 'images/left_image.png',
  6:       leftBackgroundImage: 'images/right_image.png'
  7:    }
  8: });


‘hangingChad’ remains the default type and will be the type used if the ‘type’ property is not provided on a call to pinTeaser. All four of these types require the jquery.ie9ify.css stylesheet and images in the ‘images’ folder, so both should be included in your application if you plan to use pinTeaser.

Last edited Apr 15, 2011 at 9:51 PM by bsatrom, version 6


No comments yet.