pinify - The jQuery Site Pinning Plugin (Formerly ie9ify)

Edited Issue: SCRIPT438: Object doesn't support property or method 'delay' [17]

evb — Fri, 04 May 2012 11:12:48 GMT

SCRIPT438: Object doesn't support property or method 'delay'
jquery.pinify.js, line 180 character 21

This error appears when using the pinTeaser with 'sticky:false'

jQuery pinify Plugin v1.2
Jquery 1.7.2

Changing the line 180 from

this.delay(options.timeout).fadeOut('slow');
to
teaser.delay(options.timeout).fadeOut('slow');

corrects the problem.
(teaser is a variable declared on line 99 : var teaser = $(this);)

If you want to correct the minimised version, change from
this.delay(o.timeout).fadeOut("slow")
to
j.delay(o.timeout).fadeOut("slow")

Edited Issue: SCRIPT438: Object doesn't support property or method 'delay' [17]

evb — Fri, 04 May 2012 11:09:30 GMT

Edited Issue: SCRIPT438: Object doesn't support property or method 'delay' [17]

evb — Fri, 04 May 2012 11:09:13 GMT

SCRIPT438: Object doesn't support property or method 'delay'
jquery.pinify.js, line 180 character 21

This error appears when using the pinTeaser with 'sticky:false'

jQuery pinify Plugin v1.2
Jquery 1.7.2

Changing the line 180 from

this.delay(options.timeout).fadeOut('slow');
to
teaser.delay(options.timeout).fadeOut('slow');

corrects the problem.
(teaser is a variable declared on line 99 : var teaser = $(this);)

If you wan't to correct the minimised version, change from
this.delay(o.timeout).fadeOut("slow")
to
j.delay(o.timeout).fadeOut("slow")

Edited Issue: SCRIPT438: Object doesn't support property or method 'delay' [17]

evb — Fri, 04 May 2012 11:02:16 GMT

Created Issue: SCRIPT438: Object doesn't support property or method 'delay' [17]

evb — Fri, 04 May 2012 11:00:09 GMT

SCRIPT438: Object doesn't support property or method 'delay'
jquery.pinify.js, line 180 character 21

jQuery pinify Plugin v1.2
Jquery 1.7.2

Changing the line 180 from

this.delay(options.timeout).fadeOut('slow');
to
teaser.delay(options.timeout).fadeOut('slow');

corrects the problem.
(teaser is a variable declared on line 99 : var teaser = $(this);)

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!

Source code checked in, #85e42341c0b7

bsatrom — Wed, 01 Jun 2011 23:18:52 GMT

Figured out how to mock window.external for qunit tests, which means we can add tests for the rest of pinify. Removed jsMock and jqMock and added a custom windowMocks.js library which will contain mocks for common window.external objects.

Commented Issue: Cannot mock window.external [9]

BSatrom — Wed, 01 Jun 2011 23:16:26 GMT

Current suite of unit tests does not fully cover the existing plugin because I wasn't able to mock any of the commands on window.external (ms*). Need to look into this and determine if it is truly not possible to do this.
Comments: Figured out a basic way to mock window.external functionality. Will flesh out this functionality with addditional tests prior to the next release of pinify.

Edited Issue: Cannot mock window.external [9]

BSatrom — Wed, 01 Jun 2011 23:16:26 GMT

Commented Issue: If jQuery 1.6.1 is installed, it will install 1.5.2 [16]

BSatrom — Wed, 01 Jun 2011 20:29:44 GMT

Though the denpendecy says jQuery >= 1.5.2, the thing is that, if you have updated jQuery already to 1.6.1 (current the latest), when installing this package, it will install jQuery 1.5.2 ...

it shouldn't

http://www.balexandre.com/temp/2011-05-23_2340.png

Comments: Thanks for the issue! I've modified the nuspec file to support jQuery 1.5.2 and above, and this will be fixed officially with the next release of pinify. Thanks again!

Edited Issue: If jQuery 1.6.1 is installed, it will install 1.5.2 [16]

BSatrom — Wed, 01 Jun 2011 20:29:44 GMT

Source code checked in, #45d5b26b2723

bsatrom — Wed, 01 Jun 2011 20:28:22 GMT

Modified nuspec to be inclusive of versions of jQuery from 1.5.2 to 1.6.1 (Fixing issues #16)

Edited Issue: If jQuery 1.6.1 is installed, it will install 1.5.2 [16]

balexandre77 — Mon, 23 May 2011 21:41:51 GMT

Edited Issue: If jQuery 1.6.1 is installed, it will install 1.5.2 [16]

balexandre77 — Mon, 23 May 2011 21:41:28 GMT

Created Issue: If jQuery 1.6.1 is installed, it will install 1.5.2 [16]

balexandre77 — Mon, 23 May 2011 21:40:57 GMT

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.