Update default example

Update and destroy doesn't work for the time being, as it is in the form of new APIs.
zoomsphere · Sep 30, 2017 · 5cfd4b1 · 5cfd4b1
1 parent 3c5196f
commit 5cfd4b1
Show file tree

Hide file tree

Showing 2 changed files with 31 additions and 19 deletions.
diff --git a/examples/azusa.jpg → examples/assets/azusa.jpg b/examples/azusa.jpg → examples/assets/azusa.jpg
diff --git a/examples/options-default.html b/examples/options-default.html
@@ -3,16 +3,26 @@
   <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>
-      .contentHolder { position:relative; margin:0px auto; padding:0px; width: 600px; height: 400px; overflow: auto; }
-      .contentHolder .content { background-image: url('./azusa.jpg'); width: 1280px; height: 720px; }
-      .spacer { text-align:center }
+    #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>
   </head>
   <body>
-    <div id="Default" class="contentHolder">
+    <div id="container">
       <div class="content">
       </div>
     </div>
@@ -22,19 +32,21 @@
       <button onclick='updateSize()'>Change!</button>
     </p>
     <script>
-      var $ = document.querySelector.bind(document);
-      window.onload = function () {
-        Ps.initialize($('#Default'));
-      };
-      var updateSize = function () {
-        var width = parseInt($('#width').value, 10);
-        var height = parseInt($('#height').value, 10);
-        var container = $('#Default');
-        container.style.width = width + 'px';
-        container.style.height = height + 'px';
-        Ps.update(document.querySelector('#Default'));
-      };
+    var $ = document.querySelector.bind(document);
+
+    var container = $('#container');
+
+    var ps = PerfectScrollbar.initialize(container);
+
+    function updateSize() {
+      var width = parseInt($('#width').value, 10);
+      var height = parseInt($('#height').value, 10);
+
+      container.style.width = width + 'px';
+      container.style.height = height + 'px';
+
+      ps.update();
+    }
     </script>
   </body>
 </html>
-