Fix examples

The RTL example is not working though.
zoomsphere · Oct 6, 2017 · 46d5f8e · 46d5f8e
1 parent 1098210
commit 46d5f8e
Show file tree

Hide file tree

Showing 22 changed files with 553 additions and 593 deletions.
diff --git a/examples/always-visible.html b/examples/always-visible.html
@@ -1,41 +1,37 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>perfect-scrollbar example</title>
-    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
-    <script src="../dist/js/perfect-scrollbar.js"></script>
+    <link href="../css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/perfect-scrollbar.js"></script>
     <style>
-      h1 { text-align: center; }
-      .container { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
-      .container .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
+    #container {
+      position: relative;
+      margin: 0px auto;
+      padding: 0px;
+      width: 600px;
+      height: 400px;
+      overflow: auto;
+    }
+    #container .content {
+      background-image: url('./assets/azusa.jpg');
+      width: 1280px;
+      height: 720px;
+    }
     </style>
     <style>
-      /* to make scrollbars always visible */
-      .always-visible.ps.container > .ps__scrollbar-x-rail,
-      .always-visible.ps.container > .ps__scrollbar-y-rail {
-        opacity: 0.6;
-      }
+    .ps__rail-x,
+    .ps__rail-y {
+      opacity: 0.6;
+    }
     </style>
   </head>
   <body>
-    <h1>Default</h1>
-    <div class="container">
-      <div class="content">
-      </div>
-    </div>
-
-    <h1>Always visible</h1>
-    <div class="container always-visible">
+    <div id="container">
       <div class="content">
       </div>
     </div>
     <script>
-      window.onload = function () {
-        [].forEach.call(document.querySelectorAll('.container'), function (el) {
-          Ps.initialize(el);
-        });
-      };
+    new PerfectScrollbar('#container');
     </script>
   </body>
 </html>
diff --git a/examples/options-default.html → examples/basic.html b/examples/options-default.html → examples/basic.html
@@ -1,8 +1,6 @@
 <!DOCTYPE html>
 <html>
   <head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>perfect-scrollbar example</title>
     <link href="../css/perfect-scrollbar.css" rel="stylesheet">
     <script src="../dist/perfect-scrollbar.js"></script>
     <style>
@@ -26,11 +24,13 @@
       <div class="content">
       </div>
     </div>
+
     <p style='text-align: center'>
       Width <input type='text' id='width' value='600'>
       Height <input type='text' id='height' value='400'>
       <button onclick='updateSize()'>Change!</button>
     </p>
+
     <script>
     var $ = document.querySelector.bind(document);
 

diff --git a/examples/children-native-scroll.html b/examples/children-native-scroll.html
diff --git a/examples/events.html b/examples/events.html
@@ -1,89 +1,88 @@
 <!DOCTYPE html>
 <html>
-<head>
-    <meta http-equiv="content-type" content="text/html; charset=utf-8">
-    <title>perfect-scrollbar example</title>
-    <link href="../dist/css/perfect-scrollbar.css" rel="stylesheet">
-    <script src="../dist/js/perfect-scrollbar.js"></script>
+  <head>
+    <link href="../css/perfect-scrollbar.css" rel="stylesheet">
+    <script src="../dist/perfect-scrollbar.js"></script>
     <style>
-        p {
-            text-align: center;
-        }
-
-        .container {
-            position: relative;
-            margin: 0px auto;
-            padding: 0px;
-            width: 600px;
-            height: 400px;
-            overflow: auto;
-        }
-
-        .container .content {
-            background-image: url('./azusa.jpg');
-            width: 1280px;
-            height: 720px;
-        }
+    #container {
+      position: relative;
+      margin: 0px auto;
+      padding: 0px;
+      width: 600px;
+      height: 400px;
+      overflow: auto;
+    }
+    #container .content {
+      background-image: url('./assets/azusa.jpg');
+      width: 1280px;
+      height: 720px;
+    }
+    p {
+      text-align: center;
+    }
     </style>
-</head>
-<body>
-<div class="container">
-    <div class="content">
+  </head>
+  <body>
+    <div id="container">
+      <div class="content">
+      </div>
     </div>
-</div>
 
-<p><strong>Axis</strong> <span id="axis">&hellip;</span></p>
+    <p><b>Axis:</b> <span id="axis">&hellip;</span></p>
+    <p><b>Direction:</b> <span id="direction">&hellip;</span></p>
+    <p><b>Reached:</b> <span id="reached">(scroll to the start or end of an axis)</span></p>
 
-<p><strong>Direction</strong> <span id="direction">&hellip;</span></p>
+    <script>
+    var $ = document.querySelector.bind(document);
 
-<p><strong>Start / End</strong> <span id="start-end">(scroll to the start or end of an axis)</span></p>
-<script>
-    var container = document.querySelector('.container');
-    var axis = document.getElementById('axis');
-    var direction = document.getElementById('direction');
-    var startEnd = document.getElementById('start-end');
+    var container = $('#container');
+    var axis = $('#axis');
+    var direction = $('#direction');
+    var reached = $('#reached');
 
-    Ps.initialize(container);
+    new PerfectScrollbar(container);
 
-    document.addEventListener('ps-scroll-y', function () {
-        axis.innerHTML = 'Y Axis';
+    container.addEventListener('ps-scroll-y', function () {
+      axis.textContent = 'y';
+      reached.textContent = 'none';
     });
 
-    document.addEventListener('ps-scroll-x', function () {
-        axis.innerHTML = 'X Axis';
+    container.addEventListener('ps-scroll-x', function () {
+      axis.textContent = 'x';
+      reached.textContent = 'none';
     });
 
-    document.addEventListener('ps-scroll-up', function () {
-        direction.innerHTML = 'up';
+    container.addEventListener('ps-scroll-up', function () {
+      direction.textContent = 'up';
     });
 
-    document.addEventListener('ps-scroll-down', function () {
-        direction.innerHTML = 'down';
+    container.addEventListener('ps-scroll-down', function () {
+      direction.textContent = 'down';
     });
 
-    document.addEventListener('ps-scroll-left', function () {
-        direction.innerHTML = 'left';
+    container.addEventListener('ps-scroll-left', function () {
+      direction.textContent = 'left';
     });
 
-    document.addEventListener('ps-scroll-right', function () {
-        direction.innerHTML = 'right';
+    container.addEventListener('ps-scroll-right', function () {
+      direction.textContent = 'right';
     });
 
-    document.addEventListener('ps-y-reach-start', function () {
-        startEnd.innerHTML = 'Reached start of <em>Y-Axis</em>';
+    container.addEventListener('ps-y-reach-start', function () {
+      reached.textContent = 'y start';
     });
 
-    document.addEventListener('ps-y-reach-end', function () {
-        startEnd.innerHTML = 'Reached end of <em>Y-Axis</em>';
+    container.addEventListener('ps-y-reach-end', function () {
+      reached.textContent = 'y end';
     });
 
-    document.addEventListener('ps-x-reach-start', function () {
-        startEnd.innerHTML = 'Reached start of <em>X-Axis</em>';
+    container.addEventListener('ps-x-reach-start', function () {
+      reached.textContent = 'x start';
     });
 
-    document.addEventListener('ps-x-reach-end', function () {
-        startEnd.innerHTML = 'Reached end of <em>X-Axis</em>'
+    container.addEventListener('ps-x-reach-end', function () {
+      reached.textContent = 'x end';
     });
-</script>
-</body>
+    </script>
+  </body>
 </html>
diff --git a/examples/iframe-content.html b/examples/iframe-content.html
diff --git a/examples/iframe.html b/examples/iframe.html