Commit
This commit does not belong to any branch on this repository, and may belong to a fork outside of the repository.
- Loading branch information
Brandon Satrom
committed
Feb 2, 2012
1 parent
a4a22da
commit dde190c
Showing
16 changed files
with
803 additions
and
0 deletions.
There are no files selected for viewing
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
Sorry, something went wrong. Reload?
Sorry, we cannot display this file.
Sorry, this file is invalid so it cannot be displayed.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,236 @@ | ||
* { | ||
margin: 0px; padding: 0px; | ||
} | ||
|
||
/* Font Family and Sizes */ | ||
|
||
.pinify-teaser { | ||
font-family: "Helvetica Neue Light", "HelveticaNeue-Light", "Helvetica Neue", Calibri, Helvetica, Arial; | ||
font-size: 0.93em; | ||
} | ||
|
||
/* Shared */ | ||
.pinify-closePin { | ||
top: 5px; | ||
width: 18px; | ||
height: 18px; | ||
right: 5px; | ||
display: inline; | ||
position: absolute; | ||
cursor: pointer; | ||
background-image: url("../images/close.png"); | ||
} | ||
.pinify-mainText { | ||
padding-top: 6px; | ||
padding-left: 150px; | ||
font-size: 19px; | ||
vertical-align: middle; | ||
display: block; | ||
} | ||
.pinify-mainText a { | ||
color: rgb(255, 255, 255); | ||
} | ||
|
||
/* Add Site Mode Link */ | ||
.pinify-addSiteLnk { | ||
text-decoration: none; | ||
} | ||
|
||
/* Hanging Chad */ | ||
.pinify-hanging-container { | ||
padding: 5px; | ||
width: 350px; | ||
height: 20px; | ||
position: fixed; | ||
z-index: 100000; | ||
top: 0px; | ||
left: 80px; | ||
border-radius: 0px 0px 10px 10px; | ||
} | ||
.pinify-hanging-content { | ||
width: 280px; | ||
height: 15px; | ||
position: fixed; | ||
top: 30px; | ||
left: 80px; | ||
padding: 5px; | ||
-webkit-border-radius: 10px; | ||
-moz-border-radius: 10px; | ||
border-radius: 10px 10px 10px 10px; | ||
} | ||
.pinify-hanging-container > img.msPinSite { | ||
height: 20px; | ||
width: 20px; | ||
vertical-align: top; | ||
float: left; | ||
margin-right: 5px; | ||
} | ||
|
||
/* TopHat */ | ||
.pinify-topHat-container { | ||
width: 110%; | ||
height: 37px; | ||
text-align: center; | ||
color: rgb(0, 0, 0); | ||
font-family: "Arial"; | ||
font-size: 15px; | ||
font-weight: bold; | ||
margin-top: -8px; | ||
margin-left: -8px; | ||
vertical-align: middle; | ||
display: block; | ||
background-image: url("../images/toolbar-bg.png"); | ||
background-repeat: repeat-x; | ||
} | ||
.pinify-topHat-alignment { | ||
width: 945px; | ||
padding-top: 8px; | ||
margin-right: auto; | ||
margin-left: auto; | ||
display: block; | ||
} | ||
.pinify-topHat-content { | ||
height: 30px; | ||
margin-top: 5px; | ||
vertical-align: middle; | ||
} | ||
.pinify-topHat-content #pinify-topHat-logo { | ||
margin-right: 5px; | ||
margin-left: 150px; | ||
float: left; | ||
} | ||
.pinify-topHat-content .pinify-topHat-text { | ||
padding-top: 2px; | ||
vertical-align: middle; | ||
float: left; | ||
} | ||
#pinify-topHat-logo { | ||
width: 20px; | ||
height: 20px; | ||
} | ||
|
||
/* Branded TopHat */ | ||
.pinify-brandedTopHat-container { | ||
top: 0px; | ||
width: 100%; | ||
height: 43px; | ||
text-align: left; | ||
color: rgb(255, 255, 255); | ||
font-family: "Segoe UI Light"; | ||
display: block; | ||
background-image: url("../images/bg_repeat_left.png"); | ||
background-repeat: repeat-x; | ||
} | ||
.pinify-brandedTopHat-content { | ||
width: 953px; | ||
height: 43px; | ||
margin-right: auto; | ||
margin-left: auto; | ||
background-image: url("../images/branding_bar_custom_bg.png"); | ||
background-repeat: no-repeat; | ||
} | ||
.pinify-brandedTopHat-secondaryText { | ||
width: 100px; | ||
text-align: left; | ||
font-size: 14px; | ||
margin-top: -30px; | ||
margin-right: 10px; | ||
float: right; | ||
display: inline; | ||
} | ||
#pinify-brandedTopHat-firstLogo { | ||
left: 8px; | ||
top: 22px; | ||
width: 18px; | ||
height: 18px; | ||
float: left; | ||
display: inline; | ||
position: relative; | ||
cursor: pointer; | ||
} | ||
#pinify-brandedTopHat-secondLogo { | ||
left: 64px; | ||
top: 25px; | ||
width: 12px; | ||
height: 12px; | ||
float: left; | ||
display: block; | ||
position: relative; | ||
cursor: pointer; | ||
} | ||
#pinify-brandedTopHat-thirdLogo { | ||
top: 5px; | ||
width: 18px; | ||
height: 18px; | ||
right: 133px; | ||
float: right; | ||
display: inline; | ||
position: relative; | ||
cursor: pointer; | ||
} | ||
|
||
/* Double TopHat */ | ||
.pinify-doubleTopHat-container { | ||
width: 100%; | ||
height: 100px; | ||
color: rgb(255, 255, 255); | ||
font-family: "Segoe UI Light"; | ||
display: block; | ||
} | ||
.pinify-doubleTopHat-left { | ||
width: 50%; | ||
height: 100px; | ||
float: left; | ||
background-image: url("../images/bg_left.png"); | ||
background-repeat: repeat-x; | ||
} | ||
#pinify-doubleTopHat-leftBar { | ||
width: 293px; | ||
height: inherit; | ||
float: right; | ||
background-image: url("../images/left_image.png"); | ||
background-repeat: no-repeat; | ||
} | ||
#pinify-doubleTopHat-logo { | ||
left: 134px; | ||
top: 13px; | ||
width: 32px; | ||
height: 32px; | ||
display: inline; | ||
position: relative; | ||
cursor: pointer; | ||
} | ||
.pinify-doubleTopHat-right { | ||
width: 50%; | ||
height: 100px; | ||
color: rgb(255, 255, 255); | ||
float: left; | ||
background-image: url("../images/bg_right.png"); | ||
background-repeat: repeat-x; | ||
} | ||
#pinify-doubleTopHat-rightBar { | ||
width: 40px; | ||
height: inherit; | ||
float: left; | ||
background-image: url("../images/right_image.png"); | ||
background-repeat: no-repeat; | ||
} | ||
#pinify-doubleTopHat-rightBarMainContent { | ||
width: 450px; | ||
display: block !important; | ||
} | ||
.pinify-doubleTopHat-lighterText { | ||
color: rgb(140, 207, 240) !important; | ||
} | ||
#pinify-doubleTopHat-logo { | ||
left: 134px; | ||
top: 13px; | ||
width: 32px; | ||
height: 32px; | ||
display: inline; | ||
position: relative; | ||
cursor: pointer; | ||
} | ||
.pinify-doubleTopHat-container .pinify-mainText { | ||
padding-left: 0px; | ||
} |
Some generated files are not rendered by default. Learn more about how customized files appear on GitHub.
Oops, something went wrong.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Original file line number | Diff line number | Diff line change |
---|---|---|
@@ -0,0 +1,74 @@ | ||
=== jQuery.pinify === | ||
Contributors: Brandon Satrom, Clark Sell | ||
Tags: jquery, ie9, pinning | ||
Requires: jQuery 1.5.1+, Internet Explorer 9 | ||
|
||
A jQuery Plugin for adding IE9 features (site pinning, site mode, etc.) to your websites. | ||
|
||
== Description == | ||
|
||
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 pinify, 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). Note: NuGet package will be changed from jquery.ie9ify to jquery.pinify in the near future. | ||
|
||
To view a screencast covering ALL aspects of the pinify Plugin, click here (http://channel9.msdn.com/posts/ASPNET-MVC-With-Community-Tools-Part-7-ie9ify). | ||
|
||
== Installation == | ||
|
||
This section describes how to install the plugin and get it working. | ||
|
||
Vanilla Install | ||
1) Place jquery.pinify.js (or jquery.pinify.min.js) in your scripts folder | ||
2) Place jquery.pinify.css (or jquery.pinify.min.css) in your CSS folder | ||
3) Add references to the JS and CSS file in your page, similar to: | ||
|
||
<link rel="stylesheet" type="text/css" media="screen" href="/css/jquery.pinify.min.css" /> | ||
<script type="text/javascript" src="/js/jquery-1.6.min.js"></script> | ||
<script type="text/javascript" src="/js/jquery.pinify.js"></script> | ||
|
||
4) In a script block call: | ||
|
||
$('head').pinify(); | ||
|
||
5) Run your site in IE9, drag it to the taskbar and watch it pin! | ||
|
||
For more information and additonal documentation, see http://ie9ify.codeplex.com | ||
|
||
Using NuGet in Visual Studio | ||
|
||
1) In the Package Manager Console, type: | ||
|
||
install-package jquery.ie9ify | ||
|
||
2) In a script block call: | ||
|
||
$('head').pinify(); | ||
|
||
3) Run your site in IE9, drag it to the taskbar and watch it pin! | ||
|
||
For more information and additonal documentation, see ie9ify.codeplex.com | ||
|
||
== Changelog == | ||
|
||
= 1.2 = | ||
* [MAJOR BREAKING CHANGE] Changed name of plugin from ie9ify to pinify. Script/Style references and calls to the plugin should be updated accordingly: | ||
jquery.ie9ify.js ==> jquery.pinify.js | ||
jquery.ie9ify.css ==> jquery.pinify.css | ||
$(*).ie9ify(); ==> $(*).pinify(); | ||
Also, users upgrading from 1.1 to 1.2 via NuGet should know that the old jquery.ie9ify.* files will remain and should be removed | ||
|
||
= 1.1 = | ||
* [BREAKING CHANGE] Added .css stylesheet for calls to pinTeaser() and removed inline styles from that method. | ||
* Modified all for loops to use jquery $.each | ||
* Modified Site Mode feature detection to be more reliable and not browser-version specific | ||
* Modified ready handler in sample and qunit tests | ||
* Upgraded to jQuery 1.5.2 | ||
* Created build PowerShell script to auto-minify jquery.ie9ify.js (using yuicompressor) and move to the sample/js and root js folders. | ||
* Completed build, package and push scripts to: 1)auto-version and timestamp the ie9ify js file, 2) minify .js and .css, 3) create a zip archive for Codeplex releases, 4) create a NuGet package and 5) deploy the package to NuGet.org | ||
* Added fadeIn for pinTeaser element, and created options to hide the teaser after an interval, and set the timeout length | ||
* 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 | ||
* [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. |
Oops, something went wrong.