ie9ify Wiki Rss Feed

Updated Wiki: Home

BSatrom — Tue, 23 Aug 2011 13:31:15 GMT

Pinify has moved to GitHub! Check it out and get involved at http://bsatrom.github.com/pinify/

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

A jQuery Plugin for adding IE9 features (site pinning, site mode, etc.) to your websites. Several new features of Internet Explorer 9 are designed to enhance the browsing experience of consumers by enabling sites that leverage certain features to behave like applications on the desktop when those sites are ‘pinned’ to the taskbar in Windows 7. A user pins a site by dragging the site’s tab (or favicon in the address bar) to the taskbar. For all sites, IE9 will create a default experience (called ‘site mode’) that will use information about the site to create an instance of the browser customized to look specific to that site. Developers can also add specific meta tags and script commands to extend these features to further customize user’s pinned experience of the site.

The purpose of the pinify jQuery plugin is to enable developers to safely leverage IE9 side mode features with simple commands and no need for additional browser checks. To view the full documentation, click here, or on the Documentation tab above. For more information about site pinning, and for a whirlwind walkthrough of ie9ify, check out Brandon Satrom's blog post "Applify Your Sites with Pinned SIte and ie9ify, the IE9 jQuery Plugin."

To install the pinify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Home

BSatrom — Tue, 23 Aug 2011 13:31:03 GMT

Pinify has moved to GitHub! Check it out and get involved at http://bsatrom.github.com/pinify/

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

To install the pinify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Home

BSatrom — Tue, 21 Jun 2011 14:24:38 GMT

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

To install the pinify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Sites Using ie9ify

BSatrom — Tue, 21 Jun 2011 14:24:08 GMT

Sites Using pinify

The following is a list of sites using pinify (that we know of):

DeveloperSmackdown.com

If you're using pinify, or you know of a site that is, leave us a comment below so we can add it to the list!

Updated Wiki: Utility Functions

bsatrom — Wed, 11 May 2011 17:35:33 GMT

Utility Functions

Once a user has pinned your site, you’ll can make use of several new features in IE9 that allow your site to behave more like a full desktop application. These include the ability to:

Determine if the user has pinned the site (isPinned()) or if a pinned site is being launched for the first time (firstRunState())
Create Dynamic Jump Lists (addJumpList, clearJumpList)
Create Thumbnail Toolbars and respond to click events (addOverlay, clearOverlay)
Create overlay (icon) on the taskbar (createThumbbarButtons)
Flash the taskbar (flashTaskbar)

All of these functions are accessible via the pinify namespace:

$.pinify.functionName

In some cases, these methods merely wrap what appears to be single-line call to a window.external function (firstRunState and isPinned), but, in fact, these methods perform browser-specific

checks and exception handling to ensure that calls to IE9-specific functionality does not result in errors in other browsers. As such, you are safe to use all of these utility functions in your own sites

without adding your own browser-checking and error handling.

$.pinify.firstRunState()

Determines whether a pinned site has been launched for the first time. Return values are:

0 – The pinned site is not in a first-run state, or is not pinned
1 – Pinned site is in a first-run from a drag-and-drop operation
2 – Pinned site is in first-run from a shortcut added to the user’s Start menu

$.pinify.isPinned()

Determines whether the site in question has been pinned. Returns true or false

$.pinify.addJumpList(options) (and $.pinify.clearJumpList())

Adds dynamic jump-list items to a pinned window. For example, consider a photo gallery application. When the user pins the site, we want to retrieve a list of popular galleries and create a jump-list that

enables the user to navigate directly to each gallery. We would do so with the following call to jQuery.getJSON and our addJumpList function, as below:

$.getJSON('Gallery/List', function (data) {
   var itemList = [];

   $.each(data, function (key, val) {
      var item = {
         'name': data[key].name,
         'url': 'Gallery/View/' + data[key].id,
         'icon': '/Content/Images/icon-gallery.ico'
      };

      itemList.push(item);
  });

  $.pinify.addJumpList({
        title: 'Photo Galleries',
      items: itemList
  });
});

In our photo gallery, this code will result in the creation of a new jump-list that displays when the user right-clicks on the pinned site in the taskbar:

To clear the current jump lists, $.pinify.clearJumpList() can be called.

$.pinify.addOverlay(options) (and $.pinify.clearOverlay())

Adds a custom icon over the taskbar button in the lower right corner. Intended to notify the user of some external event that they might be interested in (i.e. new messages or chats in Facebook, new email in

Outlook Web Access, etc.). Considering the same photo gallery application, for pinned users, our application will poll our server every several seconds to determine if any new comments have been posted

on the user’s photos. If a new comment is retrieved, we’ll instruct pinify to add a comment icon overlay on the taskbar, as below:

setInterval(function () {
      $.getJSON('Photo/CommentsForUser/' + new Date().getTime() , function (data) {
         $.pinify.clearOverlay();

         var itemList = [];
         var commentCount = parseInt($('#commentCount').val());

         if (data.length > commentCount) {
            $('#commentCount').val(data.length);

            $.pinify.addOverlay({
               title: 'New comment: ' + data[0].text + ' (' + data[0].date + ')',
               icon: '/Content/Images/comment.ico'
            });
      }
   });
}, 5000);

When a new comment is received, the taskbar will be changed to include our custom icon:

To clear the overlay icon, $.pinify.clearJumpList() can be called, as in the example above, which clears any existing overlays at the start of each check for new comments.

$.pinify.flashTaskbar()

Flashes the taskbar button. Intended to notify the user of some external event that they might be interested in. In the previous code sample, we can add another level of user notification by adding

$.pinify.flashTaskbar() before we set the overlay icon.

if (data.length > commentCount) {
   $.pinify.flashTaskbar();
   $('#commentCount').val(data.length);

   $.pinify.addOverlay({
      title: 'New comment: ' + data[0].text + ' (' + data[0].date + ')',
      icon: '/Content/Images/comment.ico'
   });
}

Note that calling this function will cause the taskbar to continue flashing until the user re-activates the site.

$.pinify.createThumbbarButtons(options)

Creates buttons on the pinned site preview window thumbbar, and wires events to respond to button clicks. For example, Slacker Radio (www.slacker.com) uses this feature to place Play/Pause, Forward, Favorite and Ban buttons when the user pins the radio player. The end-result is a set of controls that enable the user to interact with the site without activating the browser window. Continuing with our Photo Gallery example, say I want to provide buttons that enable users to quickly navigate to the download or tags pages. I can add the following script to my page:

$.pinify.createThumbbarButtons({
   buttons: [{
      icon: '/Content/Images/download.ico',
      name: 'Download Images',
      click: function () {
         // Do all kinds of awesome, interactive stuff here
         document.location = 'Gallery';
      }
   },
   {
      icon: '/Content/Images/icon-tags.ico',
      name: 'Tag Images',
      click: function () {
         // Do all kinds of awesome, interactive stuff here
         document.location = 'Tag';
      }
   }]
});

The function expects an array of button objects, each defining the location for an icon file, the name of a button and a callback function to execute when the button is clicked. The result is a couple of quick-access thumb bar buttons that the user can click to trigger all kinds of awesomeness. These buttons are more than just hyperlinks (unlike jump-list items), so you’re free to script away inside the callbacks!

Updated Wiki: Site Pinning Functions

bsatrom — Wed, 11 May 2011 17:31:32 GMT

Site Pinning Functions

Site pinning functions make it simple to add site-pinning features to your markup. All of these are accessible via the first parameter of the main

pinify() function (if you’ve worked with jqueryUI widgets in the past, this format will be familiar to you):

$(selector).pinify(functionName, options);

If the functionName parameter is omitted, the main pinify init function will be called.

$(‘head’).pinify(options) [or $(‘head’).pinify(‘init’, options)]

The most commonly-used method is the main pinify method (or the init method), which will add several meta tags to the <head> of your page.

Given the following:

   $('head').pinify({   
         applicationName: 'mySite',
         favIcon: 'favicon.ico',
         navColor: 'Green',
         startUrl: '/Home',
         tooltip: 'mySite,
         window: 'width=800;height=600',
         tasks: [{
               'name': 'Twitter',
               'action': 'http://twitter.com/brandonsatrom',
               'icon': 'http://twitter.com/favicon.ico'
            },
            {
               'name': 'User InExperience',
               'action': 'http://www.userinexperience.com',
               'icon': 'http://www.userinexperience.com/favicon.ico'
            }]
   });

The following meta tags will be automatically added to your page:

<link rel="shortcut icon" type="image/ico" href="http://localhost/favicon.ico">
<meta name="application-name" content="mySite">
<meta name="msapplication-tooltip" content="mySite">
<meta name="msapplication-starturl" content="http://mysite/Home">
<meta name="msapplication-navbutton-color" content="Green">
<meta name="msapplication-window" content="width=800;height=600">
<meta name="msapplication-task" 
content="name=Twitter;action-uri=http://twitter.com/brandonsatrom;icon-uri=http://twitter.com/favicon.ico">
<meta name="msapplication-task" 
content="name=User InExperience;action-uri=http://www.userinexperience.com;icon-uri=http://www.userinexperience.com/favicon.ico">

Note that it’s not necessary to pass in any of the default options above. If $(‘head’).pinify() is called with no parameters, the plugin will use current information

available to the browser to set the needed values.

$(selector).pinify(‘enablePinning’, title);

Enables any content item (for instance, an image) to be enabled for ‘pinning’ (dragging to the taskbar). The title parameter, which specifies the tooltip value

when the user hovers over the content item, is optional.

ex. $('img').pinify(‘enablePinning’);

$(selector).pinify(‘enableIESiteMode’, eventName);

Given an eventName (‘click’, ‘blur’, etc.), creates a binding that triggers site mode when the event fires. The result is a dialog from IE that asks the user if they wish

to pin the site to the Start Menu. If the eventName is omitted, the ‘click’ event will be bound by default.

ex. $('a').pinify(‘enableIESiteMode’);

$(selector).pinify(‘pinTeaser’, options);

Adds a teaser element to your page underneath the address bar, requesting that the user pin this site to enable added functionality. Given the options:

$('#header').pinify('pinTeaser', {
               icon: '/favicon.ico',
               pinText: 'Drag this image or the tab to the taskbar to pin this site',
               addStartLink: true,
               linkText: 'Click here to add this site to the start menu',
               linkColor: 'rgb(0, 108, 172)',
               backgroundColor: 'rgb(0, 108, 172)',
               textColor: 'white',
               mainContentSelector: '#body'
            });

The following teaser will be added to the page:

Note that it’s not necessary to pass in any of the default options above. If $(selector).pinify(‘pinTeaser’) is called with no options, the plugin will use current

information available to the browser to set the needed values.

Updated Wiki: Home

bsatrom — Wed, 11 May 2011 17:28:45 GMT

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

To install the pinify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Sites Using ie9ify

bsatrom — Wed, 11 May 2011 17:27:51 GMT

Sites Using pinify

The following is a list of sites using pinify (that we know of):

crWebCamps.ms

UserInExperience.com

BrianDMoore.net

DeveloperSmackdown.com

If you're using pinify, or you know of a site that is, leave us a comment below so we can add it to the list!

Updated Wiki: Documentation

BSatrom — Wed, 11 May 2011 17:25:45 GMT

pinify provides several functions for working with pinned-site capabilities in Internet Explorer 9 (many of which are detailed in the MSDN article “Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9”) . Plugin functions are broken into two categories:

Functions that enable or encourage Site Pinning (operate on a jQuery wrapped set and modify markup)
Utility functions that make it easier to add rich, desktop-like experiences to pinned sites (work with the new, IE9-specific window.external methods)

The sections below list the functions available for each type. Click on the heading link to view the complete documentation for that grouping of functions.

Note: In addition to this documentation, there is a full working sample of this plugin in the sample folder of the zip download.

Site Pinning Functions

init(): Adds meta tags and startup tasks to a page
enablePinning(): Enables a content item to be enabled for pinning (meaning that it can be dragged to the taskbar to pin a site)
enableSiteMode(): Enables binding of an event that triggers a site mode dialog (asking if the user wants to pin the site to the *start* menu)
pinTeaser(): Adds a teaser bar to the site, directly underneath the address bar. Teaser bar encourages the user to pin the site.

Utility Functions

firstRunState(): determines whether a pinned site has been launched for the first time.
isPinned(): Returns true if the site is pinned to the taskbar, false if not.
addJumpList(): Given options, adds jumplist items to a pinned window
clearJumpList(): Clears all dynamic jumplist items from the pinned window
addOverlay(): Given options, adds an overlay icon to the taskbar for the pinned site
clearOverlay(): Clears the current overlay icon
flashTaskbar(): Flashes the taskbar box of a pinned site
createThumbbarButtons(): creates buttons on the pinned site preview window thumb bar, and wires events to respond to button clicks

Updated Wiki: Home

BSatrom — Wed, 11 May 2011 17:24:33 GMT

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

To install the pinify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Home

BSatrom — Wed, 11 May 2011 17:22:49 GMT

Project Description

ie9ify has a new name! Starting with the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

The purpose of the ie9ify jQuery plugin is to enable developers to safely leverage IE9 side mode features with simple commands and no need for additional browser checks. To view the full documentation, click here, or on the Documentation tab above. For more information about site pinning, and for a whirlwind walkthrough of ie9ify, check out Brandon Satrom's blog post "Applify Your Sites with Pinned SIte and ie9ify, the IE9 jQuery Plugin."

To install the ie9ify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: Home

BSatrom — Wed, 11 May 2011 17:22:31 GMT

Project Description

ie9ify has a new name! For the 1.2 release ie9ify is now called pinify Check out the downloads tab to get the latest version.

Using ie9ify 1.0? Check out what's new in 1.1.

To install the ie9ify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/pinify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using pinify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).pinify();
Run and Pin!

Note: The NuGet package for pinify is still jQuery.ie9ify for the time being.

Updated Wiki: What's New ie9ify 1.1?

bsatrom — Fri, 15 Apr 2011 20:51:12 GMT

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.

[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.
Upgraded to jQuery 1.5.2.
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)
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.
[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)
[BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
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...';
 12:     
 13:          if (slideshow.data('state') == 'paused') {
 14:             slideshow.data('state', 'playing');
 15:          } else {
 16:             text = 'Pausing...';
 17:             slideshow.data('state', 'paused');
 18:          }
 19:     
 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.

Updated Wiki: What's New ie9ify 1.1?

bsatrom — Fri, 15 Apr 2011 20:50:51 GMT

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)

[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.
Upgraded to jQuery 1.5.2.
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)
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.
[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)
[BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
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

  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...';
 12:     
 13:          if (slideshow.data('state') == 'paused') {
 14:             slideshow.data('state', 'playing');
 15:          } else {
 16:             text = 'Pausing...';
 17:             slideshow.data('state', 'paused');
 18:          }
 19:     
 20:          slideshow.hide().text(text).fadeIn('slow');
 21:       }      
 22:    }]
 23:  });

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:

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: });

Updated Wiki: What's New ie9ify 1.1?

bsatrom — Fri, 15 Apr 2011 20:50:07 GMT

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)

[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.
Upgraded to jQuery 1.5.2.
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)
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.
[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)
[BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
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

  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...';
 12:     
 13:          if (slideshow.data('state') == 'paused') {
 14:             slideshow.data('state', 'playing');
 15:          } else {
 16:             text = 'Pausing...';
 17:             slideshow.data('state', 'paused');
 18:          }
 19:     
 20:          slideshow.hide().text(text).fadeIn('slow');
 21:       }      
 22:    }]
 23:  });

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:

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: });

Updated Wiki: What's New ie9ify 1.1?

bsatrom — Fri, 15 Apr 2011 20:48:09 GMT

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)

[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.
Upgraded to jQuery 1.5.2.
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)
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.
[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)
[BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
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

  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...';
 12:     
 13:          if (slideshow.data('state') == 'paused') {
 14:             slideshow.data('state', 'playing');
 15:          } else {
 16:             text = 'Pausing...';
 17:             slideshow.data('state', 'paused');
 18:          }
 19:     
 20:          slideshow.hide().text(text).fadeIn('slow');
 21:       }      
 22:    }]
 23:  });

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:

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

type: ‘topHat’

type: ‘brandedTopHat’

type: ‘doubleTopHat’

Updated Wiki: Documentation

BSatrom — Fri, 15 Apr 2011 20:42:47 GMT

Using ie9ify 1.0? Check out what's new in 1.1.

ie9ify provides several functions for working with pinned-site capabilities in Internet Explorer 9 (many of which are detailed in the MSDN article “Pinned Sites: Windows 7 Desktop Integration with Internet Explorer 9”) . Plugin functions are broken into two categories:

Functions that enable or encourage Site Pinning (operate on a jQuery wrapped set and modify markup)
Utility functions that make it easier to add rich, desktop-like experiences to pinned sites (work with the new, IE9-specific window.external methods)

The sections below list the functions available for each type. Click on the heading link to view the complete documentation for that grouping of functions.

Note: In addition to this documentation, there is a full working sample of this plugin in the sample folder of the zip download.

Site Pinning Functions

init(): Adds meta tags and startup tasks to a page
enablePinning(): Enables a content item to be enabled for pinning (meaning that it can be dragged to the taskbar to pin a site)
enableSiteMode(): Enables binding of an event that triggers a site mode dialog (asking if the user wants to pin the site to the *start* menu)
pinTeaser(): Adds a teaser bar to the site, directly underneath the address bar. Teaser bar encourages the user to pin the site.

Utility Functions

firstRunState(): determines whether a pinned site has been launched for the first time.
isPinned(): Returns true if the site is pinned to the taskbar, false if not.
addJumpList(): Given options, adds jumplist items to a pinned window
clearJumpList(): Clears all dynamic jumplist items from the pinned window
addOverlay(): Given options, adds an overlay icon to the taskbar for the pinned site
clearOverlay(): Clears the current overlay icon
flashTaskbar(): Flashes the taskbar box of a pinned site
createThumbbarButtons(): creates buttons on the pinned site preview window thumb bar, and wires events to respond to button clicks

Updated Wiki: Home

BSatrom — Fri, 15 Apr 2011 20:42:34 GMT

Project Description

Using ie9ify 1.0? Check out what's new in 1.1.

To install the ie9ify plugin, use NuGet (http://nuget.org/List/Packages/jQuery.ie9ify) or download the source directly from here or the plugins.jquery.com (http://plugins.jquery.com/project/ie9ify).

To view a screencast covering ALL aspects of the ie9ify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify).

For a list of sites using ie9ify to Applify their experiences today, check out sites using ie9ify.

Your site, from zero-to-pinned in less than 5 minutes:

install-package jquery.ie9ify
$(‘head’).ie9ify();
Run and Pin!

Updated Wiki: What's New ie9ify 1.1?

bsatrom — Fri, 15 Apr 2011 20:35:53 GMT

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)

[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.
Upgraded to jQuery 1.5.2.
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)
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.
[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)
[BREAKING CHANGE] Moved pinTeaser options linkText, linkColor, backgroundColor and textColor into a container "style" option. (You can now use style: { linkText: ... } )
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

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:

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