Skip to content

HTTPS clone URL

Subversion checkout URL

You can clone with
or
.
Download ZIP
Browse files

oh snap

  • Loading branch information...
commit 112a04b32dd020e59f4af4631c136acbaab76af7 0 parents
@nickcottrell authored
Showing with 26,757 additions and 0 deletions.
  1. +78 −0 css/easeup.css
  2. +439 −0 css/normalize.css
  3. +698 −0 css/screen.css
  4. +94 −0 css/screen_600_plus.css
  5. +228 −0 index.html
  6. +1,058 −0 js/iscroll.js
  7. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-af.js
  8. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ar-DZ.js
  9. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ar.js
  10. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-az.js
  11. +24 −0 js/jq-ui/i18n/jquery.ui.datepicker-bg.js
  12. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-bs.js
  13. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ca.js
  14. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-cs.js
  15. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-da.js
  16. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-de.js
  17. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-el.js
  18. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-en-AU.js
  19. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-en-GB.js
  20. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-en-NZ.js
  21. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-eo.js
  22. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-es.js
  23. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-et.js
  24. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-eu.js
  25. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-fa.js
  26. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-fi.js
  27. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-fo.js
  28. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-fr-CH.js
  29. +25 −0 js/jq-ui/i18n/jquery.ui.datepicker-fr.js
  30. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-gl.js
  31. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-he.js
  32. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-hr.js
  33. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-hu.js
  34. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-hy.js
  35. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-id.js
  36. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-is.js
  37. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-it.js
  38. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ja.js
  39. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ko.js
  40. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-kz.js
  41. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-lt.js
  42. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-lv.js
  43. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ml.js
  44. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ms.js
  45. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-nl.js
  46. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-no.js
  47. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-pl.js
  48. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-pt-BR.js
  49. +22 −0 js/jq-ui/i18n/jquery.ui.datepicker-pt.js
  50. +21 −0 js/jq-ui/i18n/jquery.ui.datepicker-rm.js
  51. +26 −0 js/jq-ui/i18n/jquery.ui.datepicker-ro.js
  52. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ru.js
  53. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-sk.js
  54. +24 −0 js/jq-ui/i18n/jquery.ui.datepicker-sl.js
  55. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-sq.js
  56. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-sr-SR.js
  57. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-sr.js
  58. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-sv.js
  59. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-ta.js
  60. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-th.js
  61. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-tj.js
  62. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-tr.js
  63. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-uk.js
  64. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-vi.js
  65. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-zh-CN.js
  66. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-zh-HK.js
  67. +23 −0 js/jq-ui/i18n/jquery.ui.datepicker-zh-TW.js
  68. +79 −0 js/jq-ui/jquery.effects.blind.js
  69. +112 −0 js/jq-ui/jquery.effects.bounce.js
  70. +66 −0 js/jq-ui/jquery.effects.clip.js
  71. +873 −0 js/jq-ui/jquery.effects.core.js
  72. +63 −0 js/jq-ui/jquery.effects.drop.js
  73. +96 −0 js/jq-ui/jquery.effects.explode.js
  74. +36 −0 js/jq-ui/jquery.effects.fade.js
  75. +74 −0 js/jq-ui/jquery.effects.fold.js
  76. +49 −0 js/jq-ui/jquery.effects.highlight.js
  77. +62 −0 js/jq-ui/jquery.effects.pulsate.js
  78. +302 −0 js/jq-ui/jquery.effects.scale.js
  79. +74 −0 js/jq-ui/jquery.effects.shake.js
  80. +67 −0 js/jq-ui/jquery.effects.slide.js
  81. +46 −0 js/jq-ui/jquery.effects.transfer.js
  82. +680 −0 js/jq-ui/jquery.ui.accordion.js
  83. +490 −0 js/jq-ui/jquery.ui.autocomplete.js
  84. +416 −0 js/jq-ui/jquery.ui.button.js
  85. +307 −0 js/jq-ui/jquery.ui.core.js
  86. +1,839 −0 js/jq-ui/jquery.ui.datepicker.js
  87. +834 −0 js/jq-ui/jquery.ui.dialog.js
  88. +820 −0 js/jq-ui/jquery.ui.draggable.js
  89. +293 −0 js/jq-ui/jquery.ui.droppable.js
  90. +461 −0 js/jq-ui/jquery.ui.menu.js
  91. +278 −0 js/jq-ui/jquery.ui.menubar.js
  92. +161 −0 js/jq-ui/jquery.ui.mouse.js
  93. +209 −0 js/jq-ui/jquery.ui.popup.js
  94. +353 −0 js/jq-ui/jquery.ui.position.js
  95. +104 −0 js/jq-ui/jquery.ui.progressbar.js
  96. +839 −0 js/jq-ui/jquery.ui.resizable.js
  97. +263 −0 js/jq-ui/jquery.ui.selectable.js
  98. +662 −0 js/jq-ui/jquery.ui.slider.js
  99. +1,073 −0 js/jq-ui/jquery.ui.sortable.js
  100. +384 −0 js/jq-ui/jquery.ui.spinner.js
  101. +1,021 −0 js/jq-ui/jquery.ui.tabs.js
  102. +216 −0 js/jq-ui/jquery.ui.tooltip.js
  103. +423 −0 js/jq-ui/jquery.ui.widget.js
  104. +8,316 −0 js/jquery-1.5.1.js
  105. +2 −0  js/respond.min.js
  106. +280 −0 js/respond.src.js
  107. +32 −0 readme.txt
78 css/easeup.css
@@ -0,0 +1,78 @@
+/*
+ ,
+___ _____ _ _ _ _ __ _
+// (_(_)/ (__(/_ _(/_(_(_/_)__(_/ (_(_/_ o o o
+ .-/
+ (_/
+*/
+
+/* I turned off this stylesheet but kept it to
+show the easing. while it provided a really cool
+transition effect, it did not want to play nice
+with the slideshow. The result was a slideshow
+that was out of sync with the rest of the layout
+in terms of width as it transitioned to the next
+slide... fixes are welcome!*/
+
+
+/*styles for 480px and up!*/
+@media only screen and (min-width: 480px), only screen and (max-width: 620px) {
+ body {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+
+}
+
+/*styles for 620px and up!*/
+@media screen and (min-width: 620px),only print,projector{
+ body{
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+
+/*styles for 800px and up!*/
+@media screen and (min-width: 800px){
+ body {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+
+ #maintext_nav {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+
+}
+
+/*styles for 1000px and up!*/
+@media screen and (min-width: 1000px){
+ body {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+
+}
+
+/*styles for 1300px and up!*/
+@media screen and (min-width: 1300px){
+ body {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+}
+
+/*styles for 1600px and up!*/
+@media screen and (min-width: 1600px){
+ body {
+ -webkit-transition: all 1s ease-in-out;
+ -moz-transition: all 1s ease-in-out;
+ -o-transition: all 1s ease-in-out;
+ }
+}
439 css/normalize.css
@@ -0,0 +1,439 @@
+/*! normalize.css 2011-08-31T22:02 UTC · http://github.com/necolas/normalize.css */
+
+/* =============================================================================
+ HTML5 display definitions
+ ========================================================================== */
+
+/*
+ * Corrects block display not defined in IE6/7/8/9 & FF3
+ */
+
+article,
+aside,
+details,
+figcaption,
+figure,
+footer,
+header,
+hgroup,
+nav,
+section {
+ display: block;
+}
+
+/*
+ * Corrects inline-block display not defined in IE6/7/8/9 & FF3
+ */
+
+audio,
+canvas,
+video {
+ display: inline-block;
+ *display: inline;
+ *zoom: 1;
+}
+
+/*
+ * Prevents modern browsers from displaying 'audio' without controls
+ */
+
+audio:not([controls]) {
+ display: none;
+}
+
+/*
+ * Addresses styling for 'hidden' attribute not present in IE7/8/9, FF3, S4
+ * Known issue: no IE6 support
+ */
+
+[hidden] {
+ display: none;
+}
+
+
+/* =============================================================================
+ Base
+ ========================================================================== */
+
+/*
+ * 1. Corrects text resizing oddly in IE6/7 when body font-size is set using em units
+ * http://clagnut.com/blog/348/#c790
+ * 2. Keeps page centred in all browsers regardless of content height
+ * 3. Prevents iOS text size adjust after orientation change, without disabling user zoom
+ * www.456bereastreet.com/archive/201012/controlling_text_size_in_safari_for_ios_without_disabling_user_zoom/
+ */
+
+html {
+ font-size: 100%; /* 1 */
+ overflow-y: scroll; /* 2 */
+ -webkit-text-size-adjust: 100%; /* 3 */
+ -ms-text-size-adjust: 100%; /* 3 */
+}
+
+/*
+ * Addresses margins handled incorrectly in IE6/7
+ */
+
+body {
+ margin: 0;
+}
+
+/*
+ * Addresses font-family inconsistency between 'textarea' and other form elements.
+ */
+
+body,
+button,
+input,
+select,
+textarea {
+ font-family: sans-serif;
+}
+
+
+/* =============================================================================
+ Links
+ ========================================================================== */
+
+a {
+ color: #00e;
+}
+
+a:visited {
+ color: #551a8b;
+}
+
+/*
+ * Addresses outline displayed oddly in Chrome
+ */
+
+a:focus {
+ outline: thin dotted;
+}
+
+/*
+ * Improves readability when focused and also mouse hovered in all browsers
+ * people.opera.com/patrickl/experiments/keyboard/test
+ */
+
+a:hover,
+a:active {
+ outline: 0;
+}
+
+
+/* =============================================================================
+ Typography
+ ========================================================================== */
+
+/*
+ * Addresses styling not present in IE7/8/9, S5, Chrome
+ */
+
+abbr[title] {
+ border-bottom: 1px dotted;
+}
+
+/*
+ * Addresses style set to 'bolder' in FF3/4, S4/5, Chrome
+*/
+
+b,
+strong {
+ font-weight: bold;
+}
+
+blockquote {
+ margin: 1em 40px;
+}
+
+/*
+ * Addresses styling not present in S5, Chrome
+ */
+
+dfn {
+ font-style: italic;
+}
+
+/*
+ * Addresses styling not present in IE6/7/8/9
+ */
+
+mark {
+ background: #ff0;
+ color: #000;
+}
+
+/*
+ * Corrects font family set oddly in IE6, S4/5, Chrome
+ * en.wikipedia.org/wiki/User:Davidgothberg/Test59
+ */
+
+pre,
+code,
+kbd,
+samp {
+ font-family: monospace, serif;
+ _font-family: 'courier new', monospace;
+ font-size: 1em;
+}
+
+/*
+ * Improves readability of pre-formatted text in all browsers
+ */
+
+pre {
+ white-space: pre;
+ white-space: pre-wrap;
+ word-wrap: break-word;
+}
+
+/*
+ * 1. Addresses CSS quotes not supported in IE6/7
+ * 2. Addresses quote property not supported in S4
+ */
+
+/* 1 */
+
+q {
+ quotes: none;
+}
+
+/* 2 */
+
+q:before,
+q:after {
+ content: '';
+ content: none;
+}
+
+small {
+ font-size: 75%;
+}
+
+/*
+ * Prevents sub and sup affecting line-height in all browsers
+ * gist.github.com/413930
+ */
+
+sub,
+sup {
+ font-size: 75%;
+ line-height: 0;
+ position: relative;
+ vertical-align: baseline;
+}
+
+sup {
+ top: -0.5em;
+}
+
+sub {
+ bottom: -0.25em;
+}
+
+
+/* =============================================================================
+ Lists
+ ========================================================================== */
+
+ul,
+ol {
+ margin: 1em 0;
+ padding: 0 0 0 40px;
+}
+
+dd {
+ margin: 0 0 0 40px;
+}
+
+nav ul,
+nav ol {
+ list-style: none;
+ list-style-image: none;
+}
+
+
+/* =============================================================================
+ Embedded content
+ ========================================================================== */
+
+/*
+ * 1. Removes border when inside 'a' element in IE6/7/8/9, F3
+ * 2. Improves image quality when scaled in IE7
+ * code.flickr.com/blog/2008/11/12/on-ui-quality-the-little-things-client-side-image-resizing/
+ */
+
+img {
+ border: 0; /* 1 */
+ -ms-interpolation-mode: bicubic; /* 2 */
+}
+
+/*
+ * Corrects overflow displayed oddly in IE9
+ */
+
+svg:not(:root) {
+ overflow: hidden;
+}
+
+
+/* =============================================================================
+ Figures
+ ========================================================================== */
+
+/*
+ * Addresses margin not present in IE6/7/8/9, S5, O11
+ */
+
+figure {
+ margin: 0;
+}
+
+
+/* =============================================================================
+ Forms
+ ========================================================================== */
+
+/*
+ * Corrects margin displayed oddly in IE6/7
+ */
+
+form {
+ margin: 0;
+}
+
+/*
+ * Define consistent margin and padding
+ */
+
+fieldset {
+ margin: 0 2px;
+ padding: 0.35em 0.625em 0.75em;
+}
+
+/*
+ * 1. Corrects color not being inherited in IE6/7/8/9
+ * 2. Corrects alignment displayed oddly in IE6/7
+ */
+
+legend {
+ border: 0; /* 1 */
+ *margin-left: -7px; /* 2 */
+}
+
+/*
+ * 1. Corrects font size not being inherited in all browsers
+ * 2. Addresses margins set differently in IE6/7, F3/4, S5, Chrome
+ * 3. Improves appearance and consistency in all browsers
+ */
+
+button,
+input,
+select,
+textarea {
+ font-size: 100%; /* 1 */
+ margin: 0; /* 2 */
+ vertical-align: baseline; /* 3 */
+ *vertical-align: middle; /* 3 */
+}
+
+/*
+ * 1. Addresses FF3/4 setting line-height using !important in the UA stylesheet
+ * 2. Corrects inner spacing displayed oddly in IE6/7
+ */
+
+button,
+input {
+ line-height: normal; /* 1 */
+ *overflow: visible; /* 2 */
+}
+
+/*
+ * Corrects overlap and whitespace issue for buttons and inputs in IE6/7
+ * Known issue: reintroduces inner spacing
+ */
+
+table button,
+table input {
+ *overflow: auto;
+}
+
+/*
+ * 1. Improves usability and consistency of cursor style between image-type 'input' and others
+ * 2. Corrects inability to style clickable 'input' types in iOS
+ */
+
+button,
+html input[type="button"],
+input[type="reset"],
+input[type="submit"] {
+ cursor: pointer; /* 1 */
+ -webkit-appearance: button; /* 2 */
+}
+
+/*
+ * 1. Addresses box sizing set to content-box in IE8/9
+ * 2. Addresses excess padding in IE8/9
+ */
+
+input[type="checkbox"],
+input[type="radio"] {
+ box-sizing: border-box; /* 1 */
+ padding: 0; /* 2 */
+}
+
+/*
+ * 1. Addresses appearance set to searchfield in S5, Chrome
+ * 2. Addresses box sizing set to border-box in S5, Chrome (include -moz to future-proof)
+ */
+
+input[type="search"] {
+ -webkit-appearance: textfield; /* 1 */
+ -moz-box-sizing: content-box;
+ -webkit-box-sizing: content-box; /* 2 */
+ box-sizing: content-box;
+}
+
+/*
+ * Corrects inner padding displayed oddly in S5, Chrome on OSX
+ */
+
+input[type="search"]::-webkit-search-decoration {
+ -webkit-appearance: none;
+}
+
+/*
+ * Corrects inner padding and border displayed oddly in FF3/4
+ * www.sitepen.com/blog/2008/05/14/the-devils-in-the-details-fixing-dojos-toolbar-buttons/
+ */
+
+button::-moz-focus-inner,
+input::-moz-focus-inner {
+ border: 0;
+ padding: 0;
+}
+
+/*
+ * 1. Removes default vertical scrollbar in IE6/7/8/9
+ * 2. Improves readability and alignment in all browsers
+ */
+
+textarea {
+ overflow: auto; /* 1 */
+ vertical-align: top; /* 2 */
+}
+
+
+/* =============================================================================
+ Tables
+ ========================================================================== */
+
+/*
+ * Remove most spacing between table cells
+ */
+
+table {
+ border-collapse: collapse;
+ border-spacing: 0;
+}
698 css/screen.css
@@ -0,0 +1,698 @@
+/*
+
+ /)
+ _ _/_ // _
+/_)_(__(_/_(/__(/_
+ .-/
+ (_/
+
+*/
+
+/*basics
+---------------------------------------------*/
+
+body {
+ color: #666666;
+ font-family: Helvetica, sans-serif;
+ overflow-x:hidden;
+ margin: 0 auto;
+ -webkit-user-select:none;
+ -webkit-text-size-adjust:none;
+}
+
+p {
+ font-size:16px;
+ font-family: Helvetica, sans-serif;
+ line-height:24px;
+ padding-left:36px;
+ padding-right:36px;
+}
+
+h1 {
+ font-size:46px;
+ color:#000;
+ font-family: Helvetica, sans-serif;
+ padding-left:36px;
+ padding-right:36px;
+ margin-top:10px;
+ margin-bottom:10px;
+}
+
+h2 {
+ color:#000;
+ font-family: Helvetica, sans-serif;
+ padding-left:36px;
+ padding-right:36px;
+ margin-top:10px;
+ margin-bottom:10px;
+}
+
+h3 {
+ color:#000;
+ padding-left:36px;
+ padding-right:36px;
+}
+
+
+header, footer, #main_content {
+ background-color:#fff;
+ margin:0;
+ padding:0;
+ -moz-box-shadow: 0 0 4px #333;
+ -webkit-box-shadow: 0 0 4px#333;
+ box-shadow: 0 0 4px #333;
+ }
+
+header, footer {
+ padding:10px 0 10px 0;
+ margin:10px 0 10px 0;
+ }
+
+a:link {
+ color: #999;
+ text-decoration:none;
+ }
+
+a:visited {
+ color: #999;
+}
+
+a:hover {
+ color: #000;
+ }
+
+a:active {
+ color: #999;
+}
+
+/*main content area
+---------------------------------------------*/
+
+#maintext {
+ overflow: hidden;
+ padding-top:36px;
+ height:100%;
+ }
+
+#maintext_content {
+ float:left;
+ width:100%;
+ height:100%;
+ padding-bottom:36px;
+ overflow: auto;
+ }
+
+#maintext_nav {
+ float:left;
+ width:100%;
+ height:100%;
+ padding-top:36px;
+ padding-bottom:36px;
+ overflow: auto;
+ background-color:#cccccc;
+ -moz-box-shadow: inset 0 0 8px #888;
+ -webkit-box-shadow: inset 0 0 8px #888;
+ box-shadow: inner 0 0 8px #888;
+ }
+
+/*navigation
+---------------------------------------------*/
+
+#maintext_nav p {
+ padding-top:10px;
+ padding-right:48px;
+}
+
+#maintext_nav a:link {
+ display:block;
+ width:100%;
+ height:100%;
+ margin:0 0 -18px -36px;
+ padding:10px 36px 10px 36px;
+ -webkit-transition: all .3s ease-in-out;
+ -moz-transition: all .3s ease-in-out;
+ -o-transition: all .3s ease-in-out;
+ }
+
+#maintext_nav a:visited {
+ background-color:transparent;
+ }
+
+#maintext_nav a:hover {
+ background-color:#000000;
+ color:#ffffff;
+ -webkit-transition: all .1s ease-in-out;
+ -moz-transition: all .1s ease-in-out;
+ -o-transition: all .1s ease-in-out;
+ }
+
+#maintext_nav a:active {
+ background-color:#000000;
+ color:#ffffff;
+ }
+
+.ui-accordion-content-active {
+ background-color:#eeeeee;
+ margin:0;
+ padding:20px 0 20px 0;
+ -moz-box-shadow: inset 0 0 16px #888;
+ -webkit-box-shadow: inset 0 0 16px #888;
+ box-shadow: inner 0 0 16px #888;
+ }
+
+#maintext_nav .ui-state-active .ui-accordion-heading {
+ background-color:#000000;
+ color:#ffffff;
+}
+
+#maintext_nav p a:link {
+ color: #999;
+ text-decoration:none;
+ display:inline;
+ width:auto;
+ height:auto;
+ margin:0;
+ padding:0;
+ -webkit-transition: all 0s ease-in-out;
+ -moz-transition: all 0s ease-in-out;
+ -o-transition: all 0s ease-in-out;
+ }
+
+#maintext_nav p a:visited {
+ color: #999;
+}
+
+#maintext_nav p a:hover {
+ background-color:transparent;
+ color:#333;
+
+ }
+
+#maintext_nav p a:active {
+ color: #999;
+}
+
+#maintext_nav ul {
+ margin-left:14px;
+ padding-right:36px;
+ }
+
+
+#maintext_nav ul a:link {
+ color: #999;
+ text-decoration:none;
+ display:inline;
+ width:auto;
+ height:auto;
+ margin:0;
+ padding:0;
+ -webkit-transition: all 0s ease-in-out;
+ -moz-transition: all 0s ease-in-out;
+ -o-transition: all 0s ease-in-out;
+ }
+
+#maintext_nav ul a:visited {
+ color: #999;
+}
+
+#maintext_nav ul a:hover {
+ background-color:transparent;
+ color:#333;
+
+ }
+
+#maintext_nav ul a:active {
+ color: #999;
+}
+
+
+/*scrollbox slideshow
+---------------------------------------------*/
+
+#slider p {
+ color:#000;
+ font-family: Helvetica, sans-serif;
+ line-height:24px;
+ padding-left:36px;
+ padding-right:36px;
+}
+
+#slider h3 {
+ color:#333;
+ font-size:24px;
+ font-family: Helvetica, sans-serif;
+ line-height:48px;
+ padding-left:36px;
+ padding-right:20%;
+}
+
+
+#wrapper {
+ width:100%;
+ height:334px;
+ float:left;
+ position:relative; /* On older OS versions "position" and "z-index" must be defined, */
+ z-index:1; /* it seems that recent webkit is less picky and works anyway. */
+ overflow:hidden;
+ -moz-box-shadow: 0 2px 6px #888;
+ -webkit-box-shadow: 0 2px 6px #888;
+ box-shadow: 0 2px 6px #888;
+ background-color:#333333;
+
+}
+
+#scroller ul {
+ width:100%;
+ height:100%;
+ display:block;
+ list-style:none;
+ padding:0;
+ margin:0;
+}
+
+#slider_nav {
+ width:100%;
+ height:100%;
+}
+
+a#prev:hover , a#next:hover {
+ background-color:#000000;
+ -webkit-transition: all .2s ease-in-out;
+ -moz-transition: all .2s ease-in-out;
+ -o-transition: all .2s ease-in-out;
+}
+
+
+#prev {
+ text-decoration:none;
+ float:left;
+ color:#ffffff;
+ text-align:center;
+ cursor:pointer;
+ background-color:#666666;
+ width:80px;
+ display:block;
+ margin-top:20px;
+ margin-left:35px;
+ padding:5px 0 5px 0;
+ -webkit-border-radius:4px;
+ -moz-border-radius:4px;
+ -o-border-radius:4px;
+ border-radius:4px;
+ -moz-box-shadow: 0 0 5px #222;
+ -webkit-box-shadow: 0 0 5px#222;
+ box-shadow: 0 0 5px #222;
+ }
+
+#next {
+ text-decoration:none;
+ background-color:#666666;
+ color:#ffffff;
+ float:right;
+ text-align:center;
+ cursor:pointer;
+ width:80px;
+ display:block;
+ margin-top:20px;
+ margin-right:35px;
+ padding:5px 0 5px 0;
+ -webkit-border-radius:4px;
+ -moz-border-radius:4px;
+ -o-border-radius:4px;
+ border-radius:4px;
+ -moz-box-shadow: 0 0 5px #222;
+ -webkit-box-shadow: 0 0 5px#222;
+ box-shadow: 0 0 5px #222;
+}
+
+#indicator, #indicator > li {
+ display:block;
+ float:left;
+ list-style:none;
+ padding:0; margin:0;
+}
+
+#indicator {
+ width:110px;
+ padding:12px 0 0 0;
+ text-align:center;
+ padding-left: 50%;
+ margin-left:-160px;
+}
+
+#indicator > li {
+ text-indent:-9999em;
+ width:8px; height:8px;
+ -webkit-border-radius:4px;
+ -moz-border-radius:4px;
+ -o-border-radius:4px;
+ border-radius:4px;
+ background:#666666;
+ overflow:hidden;
+ margin-right:4px;
+}
+
+#indicator > li.active {
+ background:#000000;
+ -webkit-transition: all .5s ease-in-out;
+ -moz-transition: all .5s ease-in-out;
+ -o-transition: all .5s ease-in-out;
+}
+
+#indicator > li:last-child {
+ margin:0;
+}
+
+#thelist {
+ -moz-box-shadow: 0 0 12px #222;
+ -webkit-box-shadow: 0 0 12px #222;
+ box-shadow: 0 0 12px #222;
+}
+
+#scroller {
+ height:100%; /* Removing this 100% height will allow each li module to appear with its own vertical slider for overflow */
+ float:left;
+ padding:0;
+}
+
+#scroller li {
+ height:100%;
+ display:block;
+ float:left;
+ margin-left:0;
+ margin-right:0;
+ text-align:left;
+ font-family:georgia;
+ font-size:18px;
+ line-height:24px;
+ background-color:#666;
+}
+
+
+/*
+
+ _
+ / ) /) ,
+/ () ___ _ _(/ _
+\____/ // (__(/_(_(__(_(_(_
+
+/*Read up on Responsive Web Design:
+http://www.alistapart.com/articles/responsive-web-design/
+*/
+
+
+
+/* hidden elements
+(screen_600_plus.css will show them)
+---------------------------------------------*/
+#not-small-screen {
+ display:none;
+}
+
+#slider {
+ display:none;
+}
+
+/*
+ __ __
+ |__| (__) / \
+ | (__) \__/
+
+styles for 480px and up!
+---------------------------------------------*/
+@media only screen and (min-width: 480px), only screen and (max-width: 620px) {
+ body {
+ background: #C8E5CE; /*seafoam (light green)*/
+ }
+
+}
+
+/*
+ __ __ __
+ /__ _) / \
+ \__) /__ \__/
+
+styles for 620px and up!
+---------------------------------------------*/
+@media screen and (min-width: 620px),only print,projector{
+ body{
+ background:#D69C7B; /*clay (redish brown)*/
+ width:620px;
+ }
+
+ header, footer, #main_content {
+ -webkit-border-top-left-radius:8px;
+ -webkit-border-top-right-radius:8px;
+ -webkit-border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:8px;
+
+ -khtml-border-top-left-radius:8px;
+ -khtml-border-top-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -khtml-border-bottom-left-radius:8px;
+
+ -moz-border-top-left-radius:8px;
+ -moz-border-top-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ -moz-border-bottom-left-radius:8px;
+
+ border-top-left-radius:8px;
+ border-top-right-radius:8px;
+ border-bottom-right-radius:8px;
+ border-bottom-left-radius:8px;
+ }
+
+ #scroller li {
+ width:620px;
+ }
+
+
+ #thelist {
+ width:4340px; /* body-width (620px) * number of list items (7)) */
+ }
+
+ #scroller {
+ width:4340px;
+ }
+
+ #slider {
+ -webkit-border-bottom-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:8px;
+ -khtml-border-bottom-left-radius:8px;
+ -moz-border-bottom-left-radius:8px;
+ border-bottom-left-radius:8px;
+ }
+
+ #slider_nav {
+ width:100%;
+ height:100%;
+ background-color:#cccccc;
+ -webkit-border-bottom-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:8px;
+ -khtml-border-bottom-left-radius:8px;
+ -moz-border-bottom-left-radius:8px;
+ border-bottom-left-radius:8px;
+ }
+
+}
+
+
+/*
+ __ __ __
+ (__) / \ / \
+ (__) \__/ \__/
+
+styles for 800px and up!
+---------------------------------------------*/
+@media screen and (min-width: 800px){
+ body {
+ background: #C1E8FB; /*baby blue*/
+ width:700px;
+ float:left;
+
+ }
+
+ header, footer, #main_content {
+ -webkit-border-top-left-radius:0;
+ -webkit-border-top-right-radius:8px;
+ -webkit-border-bottom-right-radius:8px;
+ -webkit-border-top-left-radius:0;
+
+ -khtml-border-top-left-radius:0;
+ -khtml-border-top-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -khtml-border-bottom-left-radius:0;
+
+ -moz-border-top-left-radius:0;
+ -moz-border-top-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ -moz-border-bottom-left-radius:0;
+
+ border-top-left-radius:0;
+ border-top-right-radius:8px;
+ border-bottom-right-radius:8px;
+ border-bottom-left-radius:0;
+ }
+
+
+ #maintext_content {
+ -webkit-border-top-right-radius:8px;
+ -khtml-border-top-right-radius:8px;
+ -moz-border-top-right-radius:8px;
+ border-top-right-radius:8px;
+ -webkit-border-bottom-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ border-bottom-right-radius:8px;
+ float:left;
+ width:70%;
+ }
+
+ #maintext_nav {
+ margin-top:-36px;
+ -webkit-border-top-right-radius:8px;
+ -khtml-border-top-right-radius:8px;
+ -moz-border-top-right-radius:8px;
+ border-top-right-radius:8px;
+ float:right;
+ width:30%;
+ height:100%;
+ overflow-y:auto;
+ padding-bottom:2000px; /*this is a hack for the 2 cols*/
+ margin-bottom:-2000px; /*this is a hack for the 2 cols*/
+ -moz-box-shadow: inset 4px -2px 6px #888;
+ -webkit-box-shadow: inset 4px -2px 6px #888;
+ box-shadow: inner 4px -2px 6px #888;
+ }
+
+ #scroller li {
+ width:700px;
+ }
+
+
+ #thelist {
+ width:4900px; /* body-width (700px) * number of list items (7)) */
+ }
+
+ #scroller {
+ width:4900px;
+ }
+
+ #slider {
+ -webkit-border-bottom-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ border-bottom-right-radius:8px;
+ -webkit-border-top-left-radius:0;
+ -khtml-border-bottom-left-radius:0;
+ -moz-border-bottom-left-radius:0;
+ border-bottom-left-radius:0;
+ }
+
+ #slider_nav {
+ width:100%;
+ height:100%;
+ background-color:#cccccc;
+ -webkit-border-bottom-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:0;
+ -khtml-border-bottom-left-radius:0;
+ -moz-border-bottom-left-radius:0;
+ border-bottom-left-radius:0;
+ }
+
+}
+
+/*
+ __ __ __
+ /| / \ / \ / \
+ | \__/ \__/ \__/
+
+styles for 1000px and up!
+---------------------------------------------*/
+@media screen and (min-width: 1000px){
+ body {
+ background: #FFF9B6; /*beige (light yellow)*/
+ width:900px;
+ float:left;
+ }
+
+
+ #scroller li {
+ width:900px;
+ }
+
+ #thelist {
+ width:6300px; /* body-width (900px) * number of list items (7)) */
+ }
+
+ #scroller {
+ width:6300px;
+ }
+
+
+}
+
+/*
+ __ __ __
+ /| _) / \ / \
+ | __) \__/ \__/
+
+styles for 1300px and up!
+---------------------------------------------*/
+@media screen and (min-width: 1300px){
+ body {
+ background: #DBDAC5; /*olive*/
+ width:1200px;
+ float:left;
+ }
+
+
+ #scroller li {
+ width:1200px;
+ }
+
+ #thelist {
+ width:8400px; /* body-width (1200px) * number of list items (7)) */
+ }
+
+ #scroller {
+ width:8400px;
+ }
+}
+
+/*
+ __ __ __
+ /| /__ / \ / \
+ | \__) \__/ \__/
+
+styles for 1600px and up!
+---------------------------------------------*/
+@media screen and (min-width: 1600px){
+ body {
+ background: #A3A9BD; /*lavender (light purple)*/
+ width:1400px;
+ float:left;
+ }
+
+ #scroller li {
+ width:1400px;
+ }
+
+ #thelist {
+ width:9800px; /* body-width (1400px) * number of list items (7)) */
+ }
+
+ #scroller {
+ width:9800px;
+ }
+
+}
94 css/screen_600_plus.css
@@ -0,0 +1,94 @@
+/*
+.__ __. ______ .___________. _______ ______ .______
+| \ | | / __ \ | | | ____| / __ \ | _ \
+| \| | | | | | `---| |----` | |__ | | | | | |_) |
+| . ` | | | | | | | | __| | | | | | /
+| |\ | | `--' | | | | | | `--' | | |\ \----.
+|__| \__| \______/ |__| |__| \______/ | _| `._____|
+
+.___________. __ __ _______
+| || | | | | ____|
+`---| |----`| |__| | | |__
+ | | | __ | | __|
+ | | | | | | | |____
+ |__| |__| |__| |_______|
+
+ _______..___ ___. ___ __ __
+ / || \/ | / \ | | | |
+ | (----`| \ / | / ^ \ | | | |
+ \ \ | |\/| | / /_\ \ | | | |
+.----) | | | | | / _____ \ | `----.| `----.
+|_______/ |__| |__| /__/ \__\ |_______||_______|
+
+ _______. ______ .______ _______ _______ .__ __.
+ / | / || _ \ | ____|| ____|| \ | |
+ | (----`| ,----'| |_) | | |__ | |__ | \| |
+ \ \ | | | / | __| | __| | . ` |
+.----) | | `----.| |\ \----.| |____ | |____ | |\ |
+|_______/ \______|| _| `._____||_______||_______||__| \__|
+
+
+this stylesheet was referenced via a link that had a media attr defined
+it should only apply on screen > 600px */
+
+#slider {
+ display: block;
+ height:400px;
+}
+
+
+#not-small-screen {
+ display: block;
+ color: #ffffff;
+ background: #000000;
+ margin-bottom:10px;
+ padding:10px 0 10px 0;
+
+ -webkit-border-top-left-radius:8px;
+ -webkit-border-top-right-radius:8px;
+ -webkit-border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:8px;
+
+ -khtml-border-top-left-radius:8px;
+ -khtml-border-top-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -khtml-border-bottom-left-radius:8px;
+
+ -moz-border-top-left-radius:8px;
+ -moz-border-top-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ -moz-border-bottom-left-radius:8px;
+
+ border-top-left-radius:8px;
+ border-top-right-radius:8px;
+ border-bottom-right-radius:8px;
+ border-bottom-left-radius:8px;
+
+}
+
+/*styles for 800px and up!
+---------------------------------------------*/
+@media screen and (min-width: 800px){
+
+#not-small-screen {
+ -webkit-border-top-left-radius:0;
+ -webkit-border-top-right-radius:8px;
+ -webkit-border-bottom-right-radius:8px;
+ -webkit-border-bottom-left-radius:0;
+
+ -khtml-border-top-left-radius:0;
+ -khtml-border-top-right-radius:8px;
+ -khtml-border-bottom-right-radius:8px;
+ -khtml-border-bottom-left-radius:0;
+
+ -moz-border-top-left-radius:0;
+ -moz-border-top-right-radius:8px;
+ -moz-border-bottom-right-radius:8px;
+ -moz-border-bottom-left-radius:0;
+
+ border-top-left-radius:0;
+ border-top-right-radius:8px;
+ border-bottom-right-radius:8px;
+ border-bottom-left-radius:0;
+ }
+}
228 index.html
@@ -0,0 +1,228 @@
+<!DOCTYPE html>
+<html>
+<head>
+<meta charset="utf-8">
+<!--
+
+ ____ __ __ ______ ____ __
+/\ _`\ /\ \/\ \/\ _ \/\ _`\ /\ \
+\ \,\L\_\ \ `\\ \ \ \L\ \ \ \L\ \ \ \
+ \/_\__ \\ \ , ` \ \ __ \ \ ,__/\ \ \
+ /\ \L\ \ \ \`\ \ \ \/\ \ \ \/ \ \_\
+ \ `\____\ \_\ \_\ \_\ \_\ \_\ \/\_\
+ \/_____/\/_/\/_/\/_/\/_/\/_/ \/_/
+
+ , /)
+ _ __ _ _ __ _____ _ _ _ _ // _ ___ _/_
+(_(_ / (__(/_/_)_/_)_(_) / (_/_)__(_(/___(/_ (/_(_(_(_/_(_)(_(_(__
+ .-/ .-/
+ (_/ (_/
+-->
+
+ <title>Snap! A rich, responsive and modern web template</title>
+
+<!--
+ , /)
+ __ _ _/_ _ __ // ___
+// (__(/_(__(_(_ _(_/ (_/(_(_)
+ /)
+ (/
+-->
+
+ <meta name="description" content="Snap! is an html5 layout demo that combines many of the features contained in modern web design... for now at least (cerca Sep 2011). Source is available on Github." />
+ <meta name="keywords" content="html5, css3, jquery, snap, design, user, experience, layout, web, templates, nick cottrell, cottrell" />
+ <meta name="author" content="Nick Cottrell, Brand Experience Designer" />
+ <meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=0, minimum-scale=1.0, maximum-scale=1.0" />
+ <meta name="apple-mobile-web-app-capable" content="yes"/>
+ <meta name="apple-mobile-web-app-status-bar-style" content="black" />
+
+<!--
+ , /) /)
+ _ _ __ __ _/_ _ __ _(/ _ _/_ // _
+/_)_(__/ (__(_/_)_(__ (_(_/ (_(_(_ /_)_(__(_/_(/__(/_
+ .-/ .-/
+ (_/ (_/
+-->
+
+ <link href="css/normalize.css" rel="stylesheet"/>
+ <link href="css/screen.css" rel="stylesheet"/>
+ <link href="css/screen_600_plus.css" media="screen and (min-width: 600px)" rel="stylesheet"/>
+ <!--<link href="css/easeup.css" rel="stylesheet"/> removed easing because of buggy shit-->
+
+ <!--[if lt IE 9]>
+ <script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
+ <![endif]-->
+ <script src="js/respond.src.js"></script>
+ <script src="js/jquery-1.5.1.js"></script>
+ <script src="js/jq-ui/jquery.ui.core.js"></script>
+ <script src="js/jq-ui/jquery.ui.widget.js"></script>
+ <script src="js/jq-ui/jquery.ui.accordion.js"></script>
+ <script type="text/javascript" src="js/iscroll.js"></script>
+
+ <script>
+ $(function() {
+ $( "#accordion" ).accordion({
+ collapsible: true,
+ autoHeight: false,
+ active: false
+ });
+ });
+ </script>
+
+ <script type="text/javascript">
+ var myScroll;
+
+ function loaded() {
+ myScroll = new iScroll('wrapper', {
+ snap: true,
+ momentum: false,
+ hScrollbar: false,
+ onScrollEnd: function () {
+ document.querySelector('#indicator > li.active').className = '';
+ document.querySelector('#indicator > li:nth-child(' + (this.currPageX+1) + ')').className = 'active';
+ }
+ });
+ }
+ document.addEventListener('DOMContentLoaded', loaded, false);
+ </script>
+
+</head>
+<body>
+
+
+<!--
+
+ /) /)
+(/ _ _ _(/ _ __
+/ )__(/_(_(_(_(__(/_/ (_
+
+-->
+
+<header>
+ <h1>Snap!</h1>
+ <h2>A rich, responsive and modern web template</h2>
+</header>
+
+<div id="not-small-screen"><p>Speaking of responsive layout, this box won't appear in the mobile context (beyond 600px wide).</p></div>
+
+<!--
+ ,
+___ _ __ _ _____ _/_ _ __ _/_
+// (_(_(__(_/ (_ (__(_) / (_(___(/_/ (_(__
+
+-->
+
+<div id="main_content">
+ <div id="maintext">
+ <div id="maintext_content">
+ <p>Good design is supposed to be flexible. You can't force-fit a single design into a variety of formats. For too long, web design has been an extension of print design, hence antiquated terms we use every day such as 'web page.' At this point, the web is ready for a better design. Something that snaps into place depending on its context.</p>
+ <p>Until now, many designs started off with constrained proportions... with a designer laying out a <em>page</em>, as though it was going to be printed and cut to a particular size. For the web, that's the wrong approach. Designs should be gooey forms that melt into whichever format they are viewed. They should be thought of as a moldable cluster of information, with variables and tolerances built to mesh with different formats and devices.</p>
+ <p>This layout is an example of such a form. Snap! is a template, designed to demonstrate how layouts can transform depending on the format, size and device type. Hopefully you can imagine how this type of layout can work its way into many different applications. Please take look. Re-size it. Stretch it. View the source. Kick the tires...</p>
+ </div><!--end #maintext_content-->
+
+<!--
+ , ,
+ __ _ _ _ _ _ _/_ _____
+/ (_(_(_(/___(_(_/_(_(_(___(_(_) / (_
+ .-/
+ (_/
+-->
+
+ <div id="maintext_nav">
+ <div id="accordion">
+ <h3><a href="#">Snap to size</a></h3>
+ <div>
+ <p>This layout is designed to snap to different window sizes, which ultimately provides context for different devices. The snap points are at:</p>
+ <ul>
+ <li>480px</li>
+ <li>620px</li>
+ <li>800px</li>
+ <li>1000px</li>
+ <li>1300px</li>
+ <li>1600px</li>
+ </ul>
+ <p>Although the snap points are specifically meant to provide context for specific mobile devices and tablets, you can experience the various views by re-sizing your browser window. No need to be diverted to a separate 'mobile site.'</p>
+ <p>This layout is based this <a href="https://github.com/scottjehl/Respond">demo</a>.</p>
+ </div>
+ <h3><a href="#">Exclude elements</a></h3>
+ <div>
+ <p>If you are viewing this page in a screen context larger than 600px, you'll see a black bar toward the top of the screen, below the header. If you're viewing this with a device that's below 600px, fugedaboudit...</p>
+ </div>
+ <h3><a href="#">Touch and slide</a></h3>
+ <div>
+ <p>This layout also features JavaScript called iscroll.js that mimics iOS style behaviors, powering the slide show below, and is compatible with iOS touch devices and even the multi-touch features on the MacBook track pad. I didn't write the script. <a href="https://github.com/cubiq">This guy</a> did. Awesome work.</p>
+ <p>The sidebar menu is powered by <a href="https://github.com/jquery/jquery-ui/blob/master/demos/accordion/index.html">jQuery-ui</a>.</p>
+ </div>
+ <h3><a href="#">Ease up</a></h3>
+ <div>
+ <p>In the spirit of HTML5 and CSS3, this layout uses features such as round corners, shadows, and animated transitional easing, all independent of the structural markup... and images. I also used '<a href="https://github.com/jonathantneal/normalize.css">normalize.css</a>' as a reset.</p>
+ </div>
+ <h3><a href="#">Learn more</a></h3>
+ <div>
+ <p>Like I mentioned before, this piece started off with a lot of great individual elements. I just stitched it together. In many ways, that's what web design is these days. A front-end developer must scour the internet for scripts and engines used to power the features they want to use to enhance the design. Here's some info that I found useful during this project:</p>
+ <ul>
+ <li><a href="http://www.alistapart.com/articles/responsive-web-design/">Original "Responsive Web Design" Article</a></li>
+ <li><a href="https://github.com/scottjehl/Respond">Responsive script</a></li>
+ <li><a href="https://github.com/jonathantneal/normalize.css">CSS reset</a></li>
+ <li><a href="https://github.com/cubiq">iOS style behaviors</a></li>
+ <li><a href="http://www.css3.info/">CSS3 goodies</a></li>
+ <li><a href="https://github.com/nickcottrell/nickcottrell.github.com/tree/master/lab/templates/snap">Source for this layout</a></li>
+ </div>
+ </div><!--end #accordion-->
+ </div><!--end #maintext_nav-->
+ </div><!--end #maintext-->
+
+<!--
+ /) , /)
+ _ // _(/ _ __
+/_)_(/__(_(_(__(/_/ (_
+
+-->
+
+ <div id="slider">
+ <div id="wrapper">
+ <div id="scroller">
+ <ul id="thelist">
+ <li><h3>&#8220;For too long, web design has been an extension of print design, hence antiquated terms such as 'web page.'&#8221;</h3></li>
+ <li><h3>&#8220;Designs should be gooey forms that melt into whichever format they are viewed.&#8221;</h3></li>
+ <li><h3>&#8220;At this point, the web is ready for a better design. Something that snaps into place depending on its context.&#8221;</h3></li>
+ <li><h3>&#8220;Snap! is a template, designed to demonstrate how layouts can transform depending on the format, size and device type.&#8221;</h3></li>
+ <li><h3>&#8220;Although the snap points are specifically meant to provide context for specific mobile devices and tablets, you can experience the various views by re-sizing your browser window.&#8221;</h3></li>
+ <li><h3>&#8220;In the spirit of HTML5 and CSS3, this layout uses features such as round corners, shadows, and animated transitional easing, all independent of the structural markup... and images.&#8221;</h3></li>
+ <li><h3>&#8220;Please take look. Re-size it. Stretch it. View the source. Kick the tires...&#8221;</h3></li>
+ </ul>
+ </div><!--end #scroller-->
+ </div><!--end #wrapper-->
+
+ <div id="slider_nav">
+ <a href id="prev" onclick="myScroll.scrollToPage('prev', 0);return false">prev</a>
+ <a href id="next" onclick="myScroll.scrollToPage('next', 0);return false">next</a>
+ <ul id="indicator">
+ <li class="active">1</li>
+ <li>2</li>
+ <li>3</li>
+ <li>4</li>
+ <li>5</li>
+ <li>6</li>
+ <li>7</li>
+ </ul>
+ </div><!--end #slider_nav-->
+ </div><!--end #slider-->
+
+</div><!--end #main_content-->
+
+<!--
+ /)
+ // _______/_ _ __
+ /(_(_)(_) (___(/_/ (_
+ /)
+(/
+
+-->
+
+<footer>
+ <p>For more on responsive layouts and media queries, read <a href="http://www.alistapart.com/articles/responsive-web-design/">Responsive Web Design</a>. Check this out on <a href="https://github.com/nickcottrell/nickcottrell.github.com/tree/master/lab/templates/snap">Github</a>.</p>
+</footer>
+
+</body>
+</html>
1,058 js/iscroll.js
@@ -0,0 +1,1058 @@
+/*!
+ * iScroll v4.1.9 ~ Copyright (c) 2011 Matteo Spinelli, http://cubiq.org
+ * Released under MIT license, http://cubiq.org/license
+ */
+
+(function(){
+var m = Math,
+ vendor = (/webkit/i).test(navigator.appVersion) ? 'webkit' :
+ (/firefox/i).test(navigator.userAgent) ? 'Moz' :
+ 'opera' in window ? 'O' : '',
+
+ // Browser capabilities
+ has3d = 'WebKitCSSMatrix' in window && 'm11' in new WebKitCSSMatrix(),
+ hasTouch = 'ontouchstart' in window,
+ hasTransform = vendor + 'Transform' in document.documentElement.style,
+ isAndroid = (/android/gi).test(navigator.appVersion),
+ isIDevice = (/iphone|ipad/gi).test(navigator.appVersion),
+ isPlaybook = (/playbook/gi).test(navigator.appVersion),
+ hasTransitionEnd = isIDevice || isPlaybook,
+ nextFrame = (function() {
+ return window.requestAnimationFrame
+ || window.webkitRequestAnimationFrame
+ || window.mozRequestAnimationFrame
+ || window.oRequestAnimationFrame
+ || window.msRequestAnimationFrame
+ || function(callback) { return setTimeout(callback, 1); }
+ })(),
+ cancelFrame = (function () {
+ return window.cancelRequestAnimationFrame
+ || window.webkitCancelRequestAnimationFrame
+ || window.mozCancelRequestAnimationFrame
+ || window.oCancelRequestAnimationFrame
+ || window.msCancelRequestAnimationFrame
+ || clearTimeout
+ })(),
+
+ // Events
+ RESIZE_EV = 'onorientationchange' in window ? 'orientationchange' : 'resize',
+ START_EV = hasTouch ? 'touchstart' : 'mousedown',
+ MOVE_EV = hasTouch ? 'touchmove' : 'mousemove',
+ END_EV = hasTouch ? 'touchend' : 'mouseup',
+ CANCEL_EV = hasTouch ? 'touchcancel' : 'mouseup',
+ WHEEL_EV = vendor == 'Moz' ? 'DOMMouseScroll' : 'mousewheel',
+
+ // Helpers
+ trnOpen = 'translate' + (has3d ? '3d(' : '('),
+ trnClose = has3d ? ',0)' : ')',
+
+ // Constructor
+ iScroll = function (el, options) {
+ var that = this,
+ doc = document,
+ i;
+
+ that.wrapper = typeof el == 'object' ? el : doc.getElementById(el);
+ that.wrapper.style.overflow = 'hidden';
+ that.scroller = that.wrapper.children[0];
+
+ // Default options
+ that.options = {
+ hScroll: true,
+ vScroll: true,
+ x: 0,
+ y: 0,
+ bounce: true,
+ bounceLock: false,
+ momentum: true,
+ lockDirection: true,
+ useTransform: true,
+ useTransition: false,
+ topOffset: 0,
+ checkDOMChanges: false, // Experimental
+
+ // Scrollbar
+ hScrollbar: true,
+ vScrollbar: true,
+ fixedScrollbar: isAndroid,
+ hideScrollbar: isIDevice,
+ fadeScrollbar: isIDevice && has3d,
+ scrollbarClass: '',
+
+ // Zoom
+ zoom: false,
+ zoomMin: 1,
+ zoomMax: 4,
+ doubleTapZoom: 2,
+ wheelAction: 'scroll',
+
+ // Snap
+ snap: false,
+ snapThreshold: 1,
+
+ // Events
+ onRefresh: null,
+ onBeforeScrollStart: function (e) { e.preventDefault(); },
+ onScrollStart: null,
+ onBeforeScrollMove: null,
+ onScrollMove: null,
+ onBeforeScrollEnd: null,
+ onScrollEnd: null,
+ onTouchEnd: null,
+ onDestroy: null,
+ onZoomStart: null,
+ onZoom: null,
+ onZoomEnd: null
+ };
+
+ // User defined options
+ for (i in options) that.options[i] = options[i];
+
+ // Set starting position
+ that.x = that.options.x;
+ that.y = that.options.y;
+
+ // Normalize options
+ that.options.useTransform = hasTransform ? that.options.useTransform : false;
+ that.options.hScrollbar = that.options.hScroll && that.options.hScrollbar;
+ that.options.vScrollbar = that.options.vScroll && that.options.vScrollbar;
+ that.options.zoom = that.options.useTransform && that.options.zoom;
+ that.options.useTransition = hasTransitionEnd && that.options.useTransition;
+
+ // Set some default styles
+ that.scroller.style[vendor + 'TransitionProperty'] = that.options.useTransform ? '-' + vendor.toLowerCase() + '-transform' : 'top left';
+ that.scroller.style[vendor + 'TransitionDuration'] = '0';
+ that.scroller.style[vendor + 'TransformOrigin'] = '0 0';
+ if (that.options.useTransition) that.scroller.style[vendor + 'TransitionTimingFunction'] = 'cubic-bezier(0.33,0.66,0.66,1)';
+
+ if (that.options.useTransform) that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose;
+ else that.scroller.style.cssText += ';position:absolute;top:' + that.y + 'px;left:' + that.x + 'px';
+
+ if (that.options.useTransition) that.options.fixedScrollbar = true;
+
+ that.refresh();
+
+ that._bind(RESIZE_EV, window);
+ that._bind(START_EV);
+ if (!hasTouch) {
+ that._bind('mouseout', that.wrapper);
+ that._bind(WHEEL_EV);
+ }
+
+ if (that.options.checkDOMChanges) that.checkDOMTime = setInterval(function () {
+ that._checkDOMChanges();
+ }, 500);
+ };
+
+// Prototype
+iScroll.prototype = {
+ enabled: true,
+ x: 0,
+ y: 0,
+ steps: [],
+ scale: 1,
+ currPageX: 0, currPageY: 0,
+ pagesX: [], pagesY: [],
+ aniTime: null,
+ wheelZoomCount: 0,
+
+ handleEvent: function (e) {
+ var that = this;
+ switch(e.type) {
+ case START_EV:
+ if (!hasTouch && e.button !== 0) return;
+ that._start(e);
+ break;
+ case MOVE_EV: that._move(e); break;
+ case END_EV:
+ case CANCEL_EV: that._end(e); break;
+ case RESIZE_EV: that._resize(); break;
+ case WHEEL_EV: that._wheel(e); break;
+ case 'mouseout': that._mouseout(e); break;
+ case 'webkitTransitionEnd': that._transitionEnd(e); break;
+ }
+ },
+
+ _checkDOMChanges: function () {
+ if (this.moved || this.zoomed || this.animating ||
+ (this.scrollerW == this.scroller.offsetWidth * this.scale && this.scrollerH == this.scroller.offsetHeight * this.scale)) return;
+
+ this.refresh();
+ },
+
+ _scrollbar: function (dir) {
+ var that = this,
+ doc = document,
+ bar;
+
+ if (!that[dir + 'Scrollbar']) {
+ if (that[dir + 'ScrollbarWrapper']) {
+ if (hasTransform) that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = '';
+ that[dir + 'ScrollbarWrapper'].parentNode.removeChild(that[dir + 'ScrollbarWrapper']);
+ that[dir + 'ScrollbarWrapper'] = null;
+ that[dir + 'ScrollbarIndicator'] = null;
+ }
+
+ return;
+ }
+
+ if (!that[dir + 'ScrollbarWrapper']) {
+ // Create the scrollbar wrapper
+ bar = doc.createElement('div');
+
+ if (that.options.scrollbarClass) bar.className = that.options.scrollbarClass + dir.toUpperCase();
+ else bar.style.cssText = 'position:absolute;z-index:100;' + (dir == 'h' ? 'height:7px;bottom:1px;left:2px;right:' + (that.vScrollbar ? '7' : '2') + 'px' : 'width:7px;bottom:' + (that.hScrollbar ? '7' : '2') + 'px;top:2px;right:1px');
+
+ bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:opacity;-' + vendor + '-transition-duration:' + (that.options.fadeScrollbar ? '350ms' : '0') + ';overflow:hidden;opacity:' + (that.options.hideScrollbar ? '0' : '1');
+
+ that.wrapper.appendChild(bar);
+ that[dir + 'ScrollbarWrapper'] = bar;
+
+ // Create the scrollbar indicator
+ bar = doc.createElement('div');
+ if (!that.options.scrollbarClass) {
+ bar.style.cssText = 'position:absolute;z-index:100;background:rgba(0,0,0,0.5);border:1px solid rgba(255,255,255,0.9);-' + vendor + '-background-clip:padding-box;-' + vendor + '-box-sizing:border-box;' + (dir == 'h' ? 'height:100%' : 'width:100%') + ';-' + vendor + '-border-radius:3px;border-radius:3px';
+ }
+ bar.style.cssText += ';pointer-events:none;-' + vendor + '-transition-property:-' + vendor + '-transform;-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1);-' + vendor + '-transition-duration:0;-' + vendor + '-transform:' + trnOpen + '0,0' + trnClose;
+ if (that.options.useTransition) bar.style.cssText += ';-' + vendor + '-transition-timing-function:cubic-bezier(0.33,0.66,0.66,1)';
+
+ that[dir + 'ScrollbarWrapper'].appendChild(bar);
+ that[dir + 'ScrollbarIndicator'] = bar;
+ }
+
+ if (dir == 'h') {
+ that.hScrollbarSize = that.hScrollbarWrapper.clientWidth;
+ that.hScrollbarIndicatorSize = m.max(m.round(that.hScrollbarSize * that.hScrollbarSize / that.scrollerW), 8);
+ that.hScrollbarIndicator.style.width = that.hScrollbarIndicatorSize + 'px';
+ that.hScrollbarMaxScroll = that.hScrollbarSize - that.hScrollbarIndicatorSize;
+ that.hScrollbarProp = that.hScrollbarMaxScroll / that.maxScrollX;
+ } else {
+ that.vScrollbarSize = that.vScrollbarWrapper.clientHeight;
+ that.vScrollbarIndicatorSize = m.max(m.round(that.vScrollbarSize * that.vScrollbarSize / that.scrollerH), 8);
+ that.vScrollbarIndicator.style.height = that.vScrollbarIndicatorSize + 'px';
+ that.vScrollbarMaxScroll = that.vScrollbarSize - that.vScrollbarIndicatorSize;
+ that.vScrollbarProp = that.vScrollbarMaxScroll / that.maxScrollY;
+ }
+
+ // Reset position
+ that._scrollbarPos(dir, true);
+ },
+
+ _resize: function () {
+ var that = this;
+ setTimeout(function () { that.refresh(); }, isAndroid ? 200 : 0);
+ },
+
+ _pos: function (x, y) {
+ x = this.hScroll ? x : 0;
+ y = this.vScroll ? y : 0;
+
+ if (this.options.useTransform) {
+ this.scroller.style[vendor + 'Transform'] = trnOpen + x + 'px,' + y + 'px' + trnClose + ' scale(' + this.scale + ')';
+ } else {
+ x = m.round(x);
+ y = m.round(y);
+ this.scroller.style.left = x + 'px';
+ this.scroller.style.top = y + 'px';
+ }
+
+ this.x = x;
+ this.y = y;
+
+ this._scrollbarPos('h');
+ this._scrollbarPos('v');
+ },
+
+ _scrollbarPos: function (dir, hidden) {
+ var that = this,
+ pos = dir == 'h' ? that.x : that.y,
+ size;
+
+ if (!that[dir + 'Scrollbar']) return;
+
+ pos = that[dir + 'ScrollbarProp'] * pos;
+
+ if (pos < 0) {
+ if (!that.options.fixedScrollbar) {
+ size = that[dir + 'ScrollbarIndicatorSize'] + m.round(pos * 3);
+ if (size < 8) size = 8;
+ that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
+ }
+ pos = 0;
+ } else if (pos > that[dir + 'ScrollbarMaxScroll']) {
+ if (!that.options.fixedScrollbar) {
+ size = that[dir + 'ScrollbarIndicatorSize'] - m.round((pos - that[dir + 'ScrollbarMaxScroll']) * 3);
+ if (size < 8) size = 8;
+ that[dir + 'ScrollbarIndicator'].style[dir == 'h' ? 'width' : 'height'] = size + 'px';
+ pos = that[dir + 'ScrollbarMaxScroll'] + (that[dir + 'ScrollbarIndicatorSize'] - size);
+ } else {
+ pos = that[dir + 'ScrollbarMaxScroll'];
+ }
+ }
+
+ that[dir + 'ScrollbarWrapper'].style[vendor + 'TransitionDelay'] = '0';
+ that[dir + 'ScrollbarWrapper'].style.opacity = hidden && that.options.hideScrollbar ? '0' : '1';
+ that[dir + 'ScrollbarIndicator'].style[vendor + 'Transform'] = trnOpen + (dir == 'h' ? pos + 'px,0' : '0,' + pos + 'px') + trnClose;
+ },
+
+ _start: function (e) {
+ var that = this,
+ point = hasTouch ? e.touches[0] : e,
+ matrix, x, y,
+ c1, c2;
+
+ if (!that.enabled) return;
+
+ if (that.options.onBeforeScrollStart) that.options.onBeforeScrollStart.call(that, e);
+
+ if (that.options.useTransition || that.options.zoom) that._transitionTime(0);
+
+ that.moved = false;
+ that.animating = false;
+ that.zoomed = false;
+ that.distX = 0;
+ that.distY = 0;
+ that.absDistX = 0;
+ that.absDistY = 0;
+ that.dirX = 0;
+ that.dirY = 0;
+
+ // Gesture start
+ if (that.options.zoom && hasTouch && e.touches.length > 1) {
+ c1 = m.abs(e.touches[0].pageX-e.touches[1].pageX);
+ c2 = m.abs(e.touches[0].pageY-e.touches[1].pageY);
+ that.touchesDistStart = m.sqrt(c1 * c1 + c2 * c2);
+
+ that.originX = m.abs(e.touches[0].pageX + e.touches[1].pageX - that.wrapperOffsetLeft * 2) / 2 - that.x;
+ that.originY = m.abs(e.touches[0].pageY + e.touches[1].pageY - that.wrapperOffsetTop * 2) / 2 - that.y;
+
+ if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
+ }
+
+ if (that.options.momentum) {
+ if (that.options.useTransform) {
+ // Very lame general purpose alternative to CSSMatrix
+ matrix = getComputedStyle(that.scroller, null)[vendor + 'Transform'].replace(/[^0-9-.,]/g, '').split(',');
+ x = matrix[4] * 1;
+ y = matrix[5] * 1;
+ } else {
+ x = getComputedStyle(that.scroller, null).left.replace(/[^0-9-]/g, '') * 1;
+ y = getComputedStyle(that.scroller, null).top.replace(/[^0-9-]/g, '') * 1;
+ }
+
+ if (x != that.x || y != that.y) {
+ if (that.options.useTransition) that._unbind('webkitTransitionEnd');
+ else cancelFrame(that.aniTime);
+ that.steps = [];
+ that._pos(x, y);
+ }
+ }
+
+ that.absStartX = that.x; // Needed by snap threshold
+ that.absStartY = that.y;
+
+ that.startX = that.x;
+ that.startY = that.y;
+ that.pointX = point.pageX;
+ that.pointY = point.pageY;
+
+ that.startTime = e.timeStamp || Date.now();
+
+ if (that.options.onScrollStart) that.options.onScrollStart.call(that, e);
+
+ that._bind(MOVE_EV);
+ that._bind(END_EV);
+ that._bind(CANCEL_EV);
+ },
+
+ _move: function (e) {
+ var that = this,
+ point = hasTouch ? e.touches[0] : e,
+ deltaX = point.pageX - that.pointX,
+ deltaY = point.pageY - that.pointY,
+ newX = that.x + deltaX,
+ newY = that.y + deltaY,
+ c1, c2, scale,
+ timestamp = e.timeStamp || Date.now();
+
+ if (that.options.onBeforeScrollMove) that.options.onBeforeScrollMove.call(that, e);
+
+ // Zoom
+ if (that.options.zoom && hasTouch && e.touches.length > 1) {
+ c1 = m.abs(e.touches[0].pageX - e.touches[1].pageX);
+ c2 = m.abs(e.touches[0].pageY - e.touches[1].pageY);
+ that.touchesDist = m.sqrt(c1*c1+c2*c2);
+
+ that.zoomed = true;
+
+ scale = 1 / that.touchesDistStart * that.touchesDist * this.scale;
+
+ if (scale < that.options.zoomMin) scale = 0.5 * that.options.zoomMin * Math.pow(2.0, scale / that.options.zoomMin);
+ else if (scale > that.options.zoomMax) scale = 2.0 * that.options.zoomMax * Math.pow(0.5, that.options.zoomMax / scale);
+
+ that.lastScale = scale / this.scale;
+
+ newX = this.originX - this.originX * that.lastScale + this.x,
+ newY = this.originY - this.originY * that.lastScale + this.y;
+
+ this.scroller.style[vendor + 'Transform'] = trnOpen + newX + 'px,' + newY + 'px' + trnClose + ' scale(' + scale + ')';
+
+ if (that.options.onZoom) that.options.onZoom.call(that, e);
+ return;
+ }
+
+ that.pointX = point.pageX;
+ that.pointY = point.pageY;
+
+ // Slow down if outside of the boundaries
+ if (newX > 0 || newX < that.maxScrollX) {
+ newX = that.options.bounce ? that.x + (deltaX / 2) : newX >= 0 || that.maxScrollX >= 0 ? 0 : that.maxScrollX;
+ }
+ if (newY > that.minScrollY || newY < that.maxScrollY) {
+ newY = that.options.bounce ? that.y + (deltaY / 2) : newY >= that.minScrollY || that.maxScrollY >= 0 ? that.minScrollY : that.maxScrollY;
+ }
+
+ if (that.absDistX < 6 && that.absDistY < 6) {
+ that.distX += deltaX;
+ that.distY += deltaY;
+ that.absDistX = m.abs(that.distX);
+ that.absDistY = m.abs(that.distY);
+
+ return;
+ }
+
+ // Lock direction
+ if (that.options.lockDirection) {
+ if (that.absDistX > that.absDistY + 5) {
+ newY = that.y;
+ deltaY = 0;
+ } else if (that.absDistY > that.absDistX + 5) {
+ newX = that.x;
+ deltaX = 0;
+ }
+ }
+
+ that.moved = true;
+ that._pos(newX, newY);
+ that.dirX = deltaX > 0 ? -1 : deltaX < 0 ? 1 : 0;
+ that.dirY = deltaY > 0 ? -1 : deltaY < 0 ? 1 : 0;
+
+ if (timestamp - that.startTime > 300) {
+ that.startTime = timestamp;
+ that.startX = that.x;
+ that.startY = that.y;
+ }
+
+ if (that.options.onScrollMove) that.options.onScrollMove.call(that, e);
+ },
+
+ _end: function (e) {
+ if (hasTouch && e.touches.length != 0) return;
+
+ var that = this,
+ point = hasTouch ? e.changedTouches[0] : e,
+ target, ev,
+ momentumX = { dist:0, time:0 },
+ momentumY = { dist:0, time:0 },
+ duration = (e.timeStamp || Date.now()) - that.startTime,
+ newPosX = that.x,
+ newPosY = that.y,
+ distX, distY,
+ newDuration,
+ snap,
+ scale;
+
+ that._unbind(MOVE_EV);
+ that._unbind(END_EV);
+ that._unbind(CANCEL_EV);
+
+ if (that.options.onBeforeScrollEnd) that.options.onBeforeScrollEnd.call(that, e);
+
+ if (that.zoomed) {
+ scale = that.scale * that.lastScale;
+ scale = Math.max(that.options.zoomMin, scale);
+ scale = Math.min(that.options.zoomMax, scale);
+ that.lastScale = scale / that.scale;
+ that.scale = scale;
+
+ that.x = that.originX - that.originX * that.lastScale + that.x;
+ that.y = that.originY - that.originY * that.lastScale + that.y;
+
+ that.scroller.style[vendor + 'TransitionDuration'] = '200ms';
+ that.scroller.style[vendor + 'Transform'] = trnOpen + that.x + 'px,' + that.y + 'px' + trnClose + ' scale(' + that.scale + ')';
+
+ that.zoomed = false;
+ that.refresh();
+
+ if (that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
+ return;
+ }
+
+ if (!that.moved) {
+ if (hasTouch) {
+ if (that.doubleTapTimer && that.options.zoom) {
+ // Double tapped
+ clearTimeout(that.doubleTapTimer);
+ that.doubleTapTimer = null;
+ if (that.options.onZoomStart) that.options.onZoomStart.call(that, e);
+ that.zoom(that.pointX, that.pointY, that.scale == 1 ? that.options.doubleTapZoom : 1);
+ if (that.options.onZoomEnd) {
+ setTimeout(function() {
+ that.options.onZoomEnd.call(that, e);
+ }, 200); // 200 is default zoom duration
+ }
+ } else {
+ that.doubleTapTimer = setTimeout(function () {
+ that.doubleTapTimer = null;
+
+ // Find the last touched element
+ target = point.target;
+ while (target.nodeType != 1) target = target.parentNode;
+
+ if (target.tagName != 'SELECT' && target.tagName != 'INPUT' && target.tagName != 'TEXTAREA') {
+ ev = document.createEvent('MouseEvents');
+ ev.initMouseEvent('click', true, true, e.view, 1,
+ point.screenX, point.screenY, point.clientX, point.clientY,
+ e.ctrlKey, e.altKey, e.shiftKey, e.metaKey,
+ 0, null);
+ ev._fake = true;
+ target.dispatchEvent(ev);
+ }
+ }, that.options.zoom ? 250 : 0);
+ }
+ }
+
+ that._resetPos(200);
+
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ return;
+ }
+
+ if (duration < 300 && that.options.momentum) {
+ momentumX = newPosX ? that._momentum(newPosX - that.startX, duration, -that.x, that.scrollerW - that.wrapperW + that.x, that.options.bounce ? that.wrapperW : 0) : momentumX;
+ momentumY = newPosY ? that._momentum(newPosY - that.startY, duration, -that.y, (that.maxScrollY < 0 ? that.scrollerH - that.wrapperH + that.y - that.minScrollY : 0), that.options.bounce ? that.wrapperH : 0) : momentumY;
+
+ newPosX = that.x + momentumX.dist;
+ newPosY = that.y + momentumY.dist;
+
+ if ((that.x > 0 && newPosX > 0) || (that.x < that.maxScrollX && newPosX < that.maxScrollX)) momentumX = { dist:0, time:0 };
+ if ((that.y > that.minScrollY && newPosY > that.minScrollY) || (that.y < that.maxScrollY && newPosY < that.maxScrollY)) momentumY = { dist:0, time:0 };
+ }
+
+ if (momentumX.dist || momentumY.dist) {
+ newDuration = m.max(m.max(momentumX.time, momentumY.time), 10);
+
+ // Do we need to snap?
+ if (that.options.snap) {
+ distX = newPosX - that.absStartX;
+ distY = newPosY - that.absStartY;
+ if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) { that.scrollTo(that.absStartX, that.absStartY, 200); }
+ else {
+ snap = that._snap(newPosX, newPosY);
+ newPosX = snap.x;
+ newPosY = snap.y;
+ newDuration = m.max(snap.time, newDuration);
+ }
+ }
+
+ that.scrollTo(m.round(newPosX), m.round(newPosY), newDuration);
+
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ return;
+ }
+
+ // Do we need to snap?
+ if (that.options.snap) {
+ distX = newPosX - that.absStartX;
+ distY = newPosY - that.absStartY;
+ if (m.abs(distX) < that.options.snapThreshold && m.abs(distY) < that.options.snapThreshold) that.scrollTo(that.absStartX, that.absStartY, 200);
+ else {
+ snap = that._snap(that.x, that.y);
+ if (snap.x != that.x || snap.y != that.y) that.scrollTo(snap.x, snap.y, snap.time);
+ }
+
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ return;
+ }
+
+ that._resetPos(200);
+ if (that.options.onTouchEnd) that.options.onTouchEnd.call(that, e);
+ },
+
+ _resetPos: function (time) {
+ var that = this,
+ resetX = that.x >= 0 ? 0 : that.x < that.maxScrollX ? that.maxScrollX : that.x,
+ resetY = that.y >= that.minScrollY || that.maxScrollY > 0 ? that.minScrollY : that.y < that.maxScrollY ? that.maxScrollY : that.y;
+
+ if (resetX == that.x && resetY == that.y) {
+ if (that.moved) {
+ that.moved = false;
+ if (that.options.onScrollEnd) that.options.onScrollEnd.call(that); // Execute custom code on scroll end
+ }
+
+ if (that.hScrollbar && that.options.hideScrollbar) {
+ if (vendor == 'webkit') that.hScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms';
+ that.hScrollbarWrapper.style.opacity = '0';
+ }
+ if (that.vScrollbar && that.options.hideScrollbar) {
+ if (vendor == 'webkit') that.vScrollbarWrapper.style[vendor + 'TransitionDelay'] = '300ms';
+ that.vScrollbarWrapper.style.opacity = '0';
+ }
+
+ return;
+ }
+
+ that.scrollTo(resetX, resetY, time || 0);
+ },
+
+ _wheel: function (e) {
+ var that = this,
+ wheelDeltaX, wheelDeltaY,
+ deltaX, deltaY,
+ deltaScale;
+
+ if ('wheelDeltaX' in e) {
+ wheelDeltaX = e.wheelDeltaX / 12;
+ wheelDeltaY = e.wheelDeltaY / 12;
+ } else if ('detail' in e) {
+ wheelDeltaX = wheelDeltaY = -e.detail * 3;
+ } else {
+ wheelDeltaX = wheelDeltaY = -e.wheelDelta;
+ }
+
+ if (that.options.wheelAction == 'zoom') {
+ deltaScale = that.scale * Math.pow(2, 1/3 * (wheelDeltaY ? wheelDeltaY / Math.abs(wheelDeltaY) : 0));
+ if (deltaScale < that.options.zoomMin) deltaScale = that.options.zoomMin;
+ if (deltaScale > that.options.zoomMax) deltaScale = that.options.zoomMax;
+
+ if (deltaScale != that.scale) {
+ if (!that.wheelZoomCount && that.options.onZoomStart) that.options.onZoomStart.call(that, e);
+ that.wheelZoomCount++;
+
+ that.zoom(e.pageX, e.pageY, deltaScale, 400);
+
+ setTimeout(function() {
+ that.wheelZoomCount--;
+ if (!that.wheelZoomCount && that.options.onZoomEnd) that.options.onZoomEnd.call(that, e);
+ }, 400);
+ }
+
+ return;
+ }
+
+ deltaX = that.x + wheelDeltaX;
+ deltaY = that.y + wheelDeltaY;
+
+ if (deltaX > 0) deltaX = 0;
+ else if (deltaX < that.maxScrollX) deltaX = that.maxScrollX;
+
+ if (deltaY > that.minScrollY) deltaY = that.minScrollY;
+ else if (deltaY < that.maxScrollY) deltaY = that.maxScrollY;
+
+ that.scrollTo(deltaX, deltaY, 0);
+ },
+
+ _mouseout: function (e) {
+ var t = e.relatedTarget;
+
+ if (!t) {
+ this._end(e);
+ return;
+ }
+
+ while (t = t.parentNode) if (t == this.wrapper) return;
+
+