API tools faq
paste
Advertisement
Guest User

Untitled

a guest
Apr 24th, 2014
37
0
Never
Add comment
Not a member of Pastebin yet? Sign Up, it unlocks many cool features!
text 12.01 KB | None | 0 0
raw download clone embed print report
  1. <body class="ios7" onload="onBodyLoad()"> <!-- native | ios7 -->
  2. <section id="view-home" class="active">
  3. <header>
  4. <button class="left info" data-vin="view-about" data-sd="popin"> </button>
  5. <h1>My app</h1>
  6. <button class="right map" data-vin="view-walks-map" data-sd="popin" onclick="onMapLoad('map_canvas')">
  7. </button>
  8.  
  9. </header>
  10. <div class="scrollMask"></div>
  11. <div class="scrollWrap">
  12. <div class="scroll">
  13. <ul class="content">
  14. <div class="homeTile">
  15. <div class="tile" data-vin="view-walk1" data-sd="sl" onclick="galleryWalk1()">
  16. <img src="images/walk-cover.png">
  17. <div class="tileContent">
  18. <h2>Walk title</h2>
  19. <p>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</p>
  20. <div class="transform-border-hairline"></div>
  21. <ul class="metadata">
  22. <li class="fromLocation">Forio</li>
  23. <li class="toLocation">Lacco Ameno</li>
  24. <li class="lenght">3 km</li>
  25. <li class="difficulty1"></li>
  26. </ul>
  27. </div>
  28. </div>
  29.  
  30. </div>
  31.  
  32.  
  33. </ul>
  34. </div>
  35. </div>
  36. </section>
  37.  
  38. <!--Walk 1 page-->
  39.  
  40. <section class="hidden" id="view-walk1">
  41. <header style="height: 81px;">
  42.  
  43. <button class="left arrow" data-vin="view-home" data-sd="sr">
  44. </button>
  45. <h1>Walk name</h1>
  46. <button class="right compass-btn" data-vin="view-compass" data-sd="popin" onclick="loadCompass()">
  47. </button>
  48. <button class="right map" data-vin="view-walk1-map" data-sd="popin" onclick="onMapLoad('map_canvas_walk1')">
  49. </button>
  50. <div class="nav">
  51. <button id="btn1" class="active" data-vin="view-tab1Container">
  52. <div class="label">Description</div>
  53. </button>
  54. <button id="btn2" data-vin="view-tab2Container">
  55. <div class="label">Directions</div>
  56. </button>
  57. </div>
  58. </header>
  59. <div class="scrollMask"></div>
  60. <div class="scrollWrap">
  61. <div class="scroll">
  62. <ul class="content" style="margin-top: 85px;">
  63.  
  64. <div class="active" id="view-tab1Container">
  65. <div class="tile walkTile">
  66. <img src="images/walk-cover.png" alt="walk image">
  67. <div class="tileContent">
  68. <p class="paddingT">This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</p>
  69. <p class="fromLocation fromLocationB">Forio</p>
  70. <p class="toLocation toLocationB">Lacco Ameno</p>
  71. <div class="transform-border-hairline"></div>
  72. <ul class="metadata">
  73. <li class="duration">3 ore</li>
  74. <li class="slope">200 m</li>
  75. <li class="lenght">3 km</li>
  76. <li class="difficulty1"></li>
  77. </ul>
  78. </div>
  79. </div>
  80. <div class="placeInterest">
  81. <h2>Luoghi di interesse</h2>
  82. <ul class="arrowed">
  83. <div class="transform-border-hairline grey"></div>
  84. <li data-vin="view-place1" data-sd="sl" onclick="galleryWalk2()">
  85. <div class="innerLi" >
  86. <div class="museum"> <span> Site of interest 1</span></div>
  87. </div>
  88. </li>
  89. <li class="no-border" data-sd="sl">
  90. <div class="innerLi">
  91. <div class="museum"> <span>Site of interest 1</span></div>
  92. </div>
  93. </li>
  94. <div class="transform-border-hairline grey"></div>
  95. </ul>
  96. <div class="gallery">
  97. <figure><a href="images/big/A-15.jpg"><img class="ml" src="images/thumbs/A-15.jpg" alt="Giullari senza Frontiere"></a></figure>
  98. <figure><a href="images/big/A-18.jpg"><img src="images/thumbs/A-18.jpg" alt="Giullari senza Frontiere"></a></figure>
  99. <figure><a href="images/big/B-21.jpg"><img class="ml" src="images/thumbs/B-21.jpg" alt="Giullari senza Frontiere"></a></figure>
  100. <figure><a href="images/big/B-24.jpg"><img src="images/thumbs/B-24.jpg" alt="Giullari senza Frontiere"></a></figure>
  101. <figure><a href="images/big/C-72.jpg"><img class="ml" src="images/thumbs/C-72.jpg" alt="Il Conte Schippa"></a></figure>
  102. <figure><a href="images/big/C-12.jpg"><img src="images/thumbs/C-12.jpg" alt="Il Conte Schippa"></a></figure>
  103. <figure><a href="images/big/C-53.jpg"><img class="ml" src="images/thumbs/C-53.jpg" alt="Il Conte Schippa"></a></figure>
  104. <figure><a href="images/big/C-33.jpg"><img src="images/thumbs/C-33.jpg" alt="Il Conte Schippa"></a></figure>
  105. <figure><a href="images/big/G-16.jpg"><img class="ml" src="images/thumbs/G-16.jpg" alt="I Giullari di Nessuno"></a></figure>
  106. <figure><a href="images/big/G-87.jpg"><img src="images/thumbs/G-87.jpg" alt="I Giullari di Nessuno"></a></figure>
  107. <figure><a href="images/big/G-59.jpg"><img class="ml" src="images/thumbs/G-59.jpg" alt="I Giullari di Nessuno"></a></figure>
  108. <figure><a href="images/big/G-65.jpg"><img src="images/thumbs/G-65.jpg" alt="I Giullari di Nessuno"></a></figure>
  109.  
  110. </div>
  111. </div>
  112.  
  113. </div>
  114. <div class=" hidden" id="view-tab2Container">
  115. <ol>
  116. <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
  117. <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
  118. <li>This is a walk description! Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato. Una passeggiata indimenticabile alla scoperta del passato greco di Ischia unito alla visione di panorami mozzafiato.</li>
  119. </ol>
  120. </div>
  121.  
  122. </ul>
  123. </div>
  124. </div>
  125. </section>
  126.  
  127. scrollWrap {
  128. height: 100%;*/
  129. position: relative;
  130. width: 100%;
  131. /* Prevent native touch events on Windows */
  132. -ms-touch-action: none;
  133.  
  134. /* Prevent the callout on tap-hold and text selection */
  135. -webkit-touch-callout: none;
  136. -webkit-user-select: none;
  137. -moz-user-select: none;
  138. -ms-user-select: none;
  139. user-select: none;
  140.  
  141. /* Prevent text resize on orientation change, useful for web-apps */
  142. -webkit-text-size-adjust: none;
  143. -moz-text-size-adjust: none;
  144. -ms-text-size-adjust: none;
  145. -o-text-size-adjust: none;
  146. text-size-adjust: none;
  147.  
  148. }
  149.  
  150. .scroll {
  151.  
  152. position: absolute;
  153. z-index: 1;
  154. top:0;
  155.  
  156. /* Prevent elements to be highlighted on tap */
  157. -webkit-tap-highlight-color: rgba(0,0,0,0);
  158. background-color: rgb(229, 230, 224);
  159. /* Put the scroller into the HW Compositing layer right from the start */
  160. -webkit-transform: translateZ(0);
  161. -moz-transform: translateZ(0);
  162. -ms-transform: translateZ(0);
  163. -o-transform: translateZ(0);
  164. transform: translateZ(0);
  165. }
  166. .scrollMask {
  167. width: 100%;
  168. position: absolute;
  169. top: 44px;
  170. bottom: 0;
  171. background-color: rgb(229, 230, 224);
  172. -webkit-box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1);
  173. box-shadow: -10px 0 10px -5px rgba(0, 0, 0, 0.1);
  174. }
  175.  
  176. section {
  177. position: fixed;
  178. width: 100%;
  179. height: 100%;
  180. }
  181.  
  182. function onBodyLoad()
  183. {
  184. console.log("subscribing to the deviceready event");
  185. document.addEventListener("deviceready", onDeviceReady, false);
  186. App.init();
  187. loadIscroll();
  188. console.log('firing iScroll');
  189. var screenHeight = screen.height;
  190. console.log(screenHeight);
  191. var scrollWrapArray = $$('.scrollWrap');
  192. for (var i = 0; i<scrollWrapArray.length; i++) scrollWrapArray[i].style.height = screenHeight
  193. + 'px';
  194.  
  195. }
  196.  
  197. function loadIscroll (){
  198. var wrapper = document.querySelector('section.active .scrollWrap');
  199. console.log (wrapper);
  200. myScroll = new IScroll(wrapper, {
  201. });
  202.  
  203. }
  204. var App = {
  205. init: function () {
  206. FastClick.attach(document.body);
  207.  
  208. var tabbtns = $$('.nav button');
  209. for (var i = 0; i<tabbtns.length; i++) tabbtns[i].addEventListener('click', SwitchTabs, false);
  210.  
  211. var navbtns = $$('header button.right, header button.left');
  212. for (var i = 0; i<navbtns.length; i++) navbtns[i].addEventListener('click', Slide, false);
  213.  
  214. var listitems = $$('.homeTile div.tile');
  215. for (var i = 0; i<listitems.length; i++) listitems[i].addEventListener('click', Slide, false);
  216.  
  217. var listitems2 = $$('.arrowed li');
  218. for (var i = 0; i<listitems2.length; i++) listitems2[i].addEventListener('click', Slide, false);
  219.  
  220. }
  221. };
  222.  
  223. function refreshIscroll () {
  224. myScroll.refresh();
  225. console.log('refreshed iscroll');
  226. }
  227.  
  228.  
  229. function onDeviceReady () {
  230. console.log("device ready event received");
  231. }
  232.  
  233. var Slide = function (callback) {
  234.  
  235. var vIn = $('#'+this.dataset.vin),
  236. vOut = $('section.active'),
  237. slideType = this.dataset.sd,
  238. onAnimationEnd = function () {
  239. vOut.classList.add('hidden');
  240. vIn.classList.add('active');
  241. vIn.classList.remove(slideOpts[slideType][0]);
  242. vOut.classList.remove(slideOpts[slideType][1]);
  243. vOut.removeEventListener('webkitAnimationEnd', onAnimationEnd, false);
  244. vOut.removeEventListener('animationend', onAnimationEnd);
  245. console.log('animation ending');
  246. };
  247. console.log(slideType);
  248. console.log(vIn, vOut);
  249. vOut.addEventListener('webkitAnimationEnd', onAnimationEnd, false);
  250. vOut.addEventListener('animationend', onAnimationEnd);
  251. if (callback && typeof(callback) === 'function') {
  252. callback();
  253. }
  254. vOut.classList.remove('active');
  255. vIn.classList.remove('hidden');
  256. vIn.classList.add(slideOpts[slideType][0]);
  257. vOut.classList.add(slideOpts[slideType][1]);
  258. setTimeout(function () {
  259. refreshIscroll()
  260. }, 600);
  261. myScroll.destroy();
  262. myScroll = null;
  263. console.log('destroying', myScroll);
  264. setTimeout(function () {
  265. loadIscroll()
  266. }, 1000);
  267. refreshIscroll();
  268. };
Advertisement
Add Comment
Please, Sign In to add comment
Advertisement
Public Pastes
Advertisement
We use cookies for various purposes including analytics. By continuing to use Pastebin, you agree to our use of cookies as described in the Cookies Policy.  OK, I Understand
Not a member of Pastebin yet?
Sign Up, it unlocks many cool features!