Don't like ads? PRO users don't see any ads ;-)
Public Pastes
Guest

Untitled

By: a guest on May 1st, 2012  |  syntax: None  |  size: 4.16 KB  |  hits: 26  |  expires: Never
download  |  raw  |  embed  |  report abuse  |  print
Text below is selected. Please press Ctrl+C to copy to your clipboard. (⌘+C on Mac)
  1. <!DOCTYPE html>
  2. <html><head>
  3.         <title>ScrollView With Pagination</title>
  4.         <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
  5.  
  6.         <style>
  7.             /* Avoid resource latency for these, since they hide unenhanced content */
  8.             .yui3-js-enabled .yui3-scrollview-loading {
  9.                 visibility:hidden;
  10.             }
  11.  
  12.             #additional-content {
  13.                 display:none;
  14.             }          
  15.         </style>
  16.  
  17.         <link rel="stylesheet" href="http://yui.yahooapis.com/3.3.0/build/cssreset/reset-min.css" type="text/css" charset="utf-8">
  18.                 <link rel="stylesheet" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/horizontal.css " type="text/css" charset="utf-8">
  19.         <link media="handheld, only screen and (max-device-width: 480px)" href="http://developer.yahoo.com/yui/3/examples/scrollview/assets/horizontal-smallscreen.css" type="text/css" rel="stylesheet" charset="utf-8">
  20.         <script src="http://yui.yahooapis.com/3.3.0/build/yui/yui-min.js" type="text/javascript" charset="utf-8"></script>
  21.     </head>
  22.  
  23.     <body class="yui3-skin-sam">
  24.  
  25.         <div id="scrollview-container">
  26.  
  27.             <div id="scrollview-header">
  28.                 <h1>Paged ScrollView</h1>
  29.             </div>
  30.  
  31.             <div id="scrollview-content" class="yui3-scrollview-loading">
  32.                 <ul>
  33.                     <li id="item1"><img src="http://farm5.static.flickr.com/4136/4802088086_c621e0b501.jpg" alt="Above The City II"></li>
  34.                     <li id="item2"><img src="http://farm5.static.flickr.com/4114/4801461321_1373a0ef89.jpg" alt="Walls and Canyon"></li>
  35.                     <li id="item3"><img src="http://farm5.static.flickr.com/4100/4801614015_4303e8eaea.jpg" alt="Stairs Using In Situ Stone"></li>
  36.                     <li id="item4"><img src="http://farm5.static.flickr.com/4076/4801368583_854e8c0ef3.jpg" alt="Tree Silhouette"></li>
  37.                 </ul>
  38.             </div>
  39.  
  40.             <div id="scrollview-pager">
  41.                 <button id="scrollview-prev">Prev</button>
  42.                 <button id="scrollview-next">Next</button>
  43.             </div>
  44.  
  45.         </div>
  46.  
  47.         <script type="text/javascript" charset="utf-8">
  48.         YUI().use('scrollview', 'scrollview-paginator', function(Y) {
  49.  
  50.             var scrollView = new Y.ScrollView({
  51.                 id: "scrollview",
  52.                 srcNode : '#scrollview-content',
  53.                 width : 320,
  54.                 flick: {
  55.                     minDistance:10,
  56.                     minVelocity:0.3,
  57.                     axis: "x"
  58.                 }
  59.             });
  60.  
  61.             scrollView.plug(Y.Plugin.ScrollViewPaginator, {
  62.                 selector: 'li'
  63.             });
  64.  
  65.             scrollView.render();
  66.  
  67.             var content = scrollView.get("contentBox");
  68.  
  69.             content.on("click", function(e) {
  70.                 // For mouse based devices, we need to make sure the click isn't fired
  71.                 // at the end of a drag/flick. We're use 2 as an arbitrary threshold.
  72.                 var tagName = e.target.get("tagName");
  73.                 if (tagName && tagName.toLowerCase()  === "img") {
  74.                     if (Math.abs(scrollView.lastScrolledAmt) < 2) {
  75.                         //alert(e.target.getAttribute("alt"));
  76.                     }
  77.                 }
  78.  
  79.             });
  80.  
  81.             // Prevent default image drag behavior - not needed for Chrome. Mainly for Gecko,
  82.             // but not targeted to keep the example generic (it didn't hurt the other browsers)
  83.             /*content.on("mousedown", function(e) {
  84.                 e.preventDefault();
  85.             }, "img");*/       
  86.  
  87.                         //run after user advances screen and pagination completes
  88.                         var onEnd = function(e) {
  89.                                 document.getElementById('item1').innerHTML = '<img src="http://farm5.static.flickr.com/4114/4801461321_1373a0ef89.jpg" alt="Walls and Canyon">';       
  90.                         };
  91.        
  92.                         //listen for pagination completion
  93.                         scrollView.on("scrollEnd", onEnd);
  94.  
  95.             Y.one('#scrollview-next').on('click', Y.bind(scrollView.pages.next, scrollView.pages));
  96.             Y.one('#scrollview-prev').on('click', Y.bind(scrollView.pages.prev, scrollView.pages));
  97.  
  98.         });
  99.         </script>
  100.  
  101.     </body>
  102. </html>
create a new version of this paste RAW Paste Data