Swipe will take care of adding the class you need.

dmbaird · Feb 14, 2012 · 85fb34b · 85fb34b
1 parent 5fe56be
commit 85fb34b
Show file tree

Hide file tree

Showing 3 changed files with 43 additions and 26 deletions.
diff --git a/index.html b/index.html
@@ -4,42 +4,29 @@
 <meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
 <link href='style.css' rel='stylesheet'/>
 <style>
+
 /* Swipe 2 required styles */
-.swipe {
-  /*overflow: hidden;*/
-  position: relative;
+.swipe-active {
+  overflow:hidden;
+  position:relative;
 }
-.swipe div {
+.swipe-active div {
   display:block;
   visibility:hidden;
   position:absolute;
   top:0;
   left:0;
 }
+/* END required styles */
 
-/* optional */
-#mySwipe div b {
-  display:block;
-  background:#fff;
-  font-weight:bold;
-  color:#14ADE5;
-  font-size:20px;
-  text-align:center;
-  margin:10px;
-  padding:100px 10px;
-  border:1px solid;
-  border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
-  /*border-radius:2px;*/
-  /*box-shadow:0 1px 1px rgba(0,0,0,.08);*/
-}
 </style>
 
 </head>
 <body style='max-width:320px; margin:0 auto'>
 
 <h1>Swipe 2</h1>
 
-<div id='mySwipe' class='swipe' style='height:245px'>
+<div id='mySwipe' style='height:245px'>
   <div><b>0</b></div>
   <div><b>1</b></div>
   <div><b>2</b></div>
@@ -69,7 +56,7 @@ <h1>Swipe 2</h1>
 
   <button onclick='mySwipe.prev()'>prev</button> 
   <button onclick='mySwipe.next()'>next</button>
-  <button id='hide'>show overflow</button>
+  <button id='hide'>hide overflow</button>
 
   <div id='console'></div>
 
@@ -81,11 +68,6 @@ <h1>Swipe 2</h1>
 
 <script src='swipe.js'></script>
 <script>
-var elem = document.getElementById('console');
-function log(msg) {
-  console.log(msg);
-  /*elem.innerHTML = msg + '<br>' + elem.innerHTML;*/
-}
 
 var mySwipe = new Swipe(document.getElementById('mySwipe'), {
   auto: 3000,
@@ -97,6 +79,18 @@ <h1>Swipe 2</h1>
   }
 });
 
+
+
+
+
+/* other crap for the page */
+
+var elem = document.getElementById('console');
+function log(msg) {
+  console.log(msg);
+  elem.innerHTML = msg + '<br>' + elem.innerHTML;
+}
+
 document.getElementById('hide').onclick = function() {
   var button = mySwipe.element, overflow = button.style.overflow;
   if (overflow == 'hidden') {

diff --git a/style.css b/style.css
@@ -43,4 +43,23 @@ a {
   margin-top: 20px;
   max-height: 150px;
   overflow: auto;
+}
+
+
+#mySwipe {
+  overflow: visible;
+}
+#mySwipe div b {
+  display:block;
+  background:#fff;
+  font-weight:bold;
+  color:#14ADE5;
+  font-size:20px;
+  text-align:center;
+  margin:10px;
+  padding:100px 10px;
+  border:1px solid;
+  border-color:#CDD2D6 #BFC6CB #B3BBC1 #BFC6CB;
+  /*border-radius:2px;*/
+  /*box-shadow:0 1px 1px rgba(0,0,0,.08);*/
 }
diff --git a/swipe.js b/swipe.js
@@ -14,6 +14,10 @@ window.Swipe = function(element, options) {
   // reference dom elements
   this.element = element;
 
+  // add .swipe-active class
+  element.setAttribute('class', 'swipe-active'); 
+  element.setAttribute('className', 'swipe-active'); // IE
+
   // simple feature detection
   this.browser = {
     touch: (function() {