[Last Call] Learn how to a build a cloud-first strategyRegister Now

x
?
Solved

Swipe works but not buttons PREVIOUS and NEXT

Posted on 2012-08-25
6
Medium Priority
?
6,485 Views
Last Modified: 2013-11-21
I got a swipe feature from http://swipejs.com/

The swipe works on iPhone device and iOS Simulator. But "PREV ... NEXT" buttons does not work.

I've tested it on its own of a 'test page' as below, its ok.

A test run that works as below:
<!DOCTYPE HTML> 
<html>
<head>
<meta name='viewport' content='width=device-width, initial-scale=1.0, maximum-scale=1.0'/> 
<link href='swipe.css' rel='stylesheet'/>
</head>
<body>

<h2>Full width</h2>

<div id='slider3' class='swipe'>
  <ul>
    <li style='display:block'><div>Step One</div></li>
    <li style='display:none'><div>Step Two</div></li>
    <li style='display:none'><div>Step Three</div></li>
    <li style='display:none'><div>Step Four</div></li>
    <li style='display:none'><div>Step Five</div></li>
  </ul>
</div>
<a href='#' onclick='slider3.prev();return false;'>prev</a> 
<a href='#' onclick='slider3.next();return false;'>next</a>

<script src='swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>

</body> 
</html> 

Open in new window


BUT, When I add a swipe code on the main code and the "PREV ... NEXT" buttons does not work. However, the swipe function works. I've enclosed a screen grab of the the overall layout.

I've enclosed the full code for your convenience:
<!DOCTYPE html>

<!-- *********************************************************************************************

How to Create CSS3 + jQuery Accordion Menu [Tutorial]
"How to Create CSS3 + jQuery Accordion Menu" that was specially made for DesignModo by our friend Valeriu Timbuc.

Links:
http://vtimbuc.net/
https://twitter.com/vtimbuc
http://designmodo.com/futurico
http://vladimirkudinov.com
http://rockablethemes.com

********************************************************************************************* -->

<html lang="en">

<head>
&#9;<title>jQuery Accordion Menu</title>
    <meta charset="utf-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0;" /><!-- // Removing the device width and height from the meta tag will give us the fluid layout. http://css3wizardry.com/category/iphone/ -->
&#9;<meta name="apple-mobile-web-app-capable" content="yes">
&#9;<meta name="robots" content="noindex,follow" />
&#9;<meta name="apple-mobile-web-app-status-bar-style" content="black" />
&#9;<link rel="apple-touch-startup-image" href="images/splash.png" />
&#9;<script src="js/jquery.mobile.js"></script>


&#9;
&#9;<!-- // Performance improve with accordion function improves with Phonegap scripts were added. Smooth ease in and ease out effect. It degrade gracefully with rollover effect of the content heading bars.-->
&#9;<!-- If your application is targeting iOS BEFORE 4.0 you MUST put json2.js from http://www.JSON.org/json2.js into your www directory and include it here -->
&#9;<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></script>
    <script type="text/javascript">


&#9;// If you want to prevent dragging, uncomment this section
&#9;/*
&#9;function preventBehavior(e)
&#9;{
      e.preventDefault();
    };
&#9;document.addEventListener("touchmove", preventBehavior, false);
&#9;*/
&#9;
&#9;/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
&#9;see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
&#9;for more details -jm */
&#9;/*
&#9;function handleOpenURL(url)
&#9;{
&#9;&#9;// TODO: do something with the url passed in.
&#9;}
&#9;*/
&#9;
&#9;function onBodyLoad()
&#9;{&#9;&#9;
&#9;&#9;document.addEventListener("deviceready", onDeviceReady, false);
&#9;}
&#9;
&#9;/* When this function is called, PhoneGap has been initialized and is ready to roll */
&#9;/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
&#9;see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
&#9;for more details -jm */
&#9;function onDeviceReady()
&#9;{
&#9;&#9;// do your thing!
&#9;&#9;navigator.notification.alert("PhoneGap is working")
&#9;}
   
    </script>
   
    <!-- Header and footer style start -->
    <link rel="stylesheet" href="css/generic.css" type="text/css" media="screen" />
    <!-- Header and footer style end -->
   
    <!-- Accordian Start. http://designmodo.com/jquery-accordion-menu/ -->
&#9;<link rel="stylesheet" href="css/accordionmenu.css" type="text/css" media="screen" />
&#9;<!-- <style type="text/css">body{background:url(images/bg.png) repeat;}.footer{margin-top:50px;text-align:center;color:#666;font:bold 14px Arial}.footer a{color:#999;text-decoration:none}#wrapper-250, .accordion{width:94%; margin:0 auto; max-width:500px;}</style> -->

<!-- Accordian script start -->
<!-- <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>-->
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js"></script><!-- Change it to jquery1.7.2 from 1.7.1. It still works. Source: webdesignerwall.com/demo/mobile-nav/-->
<script type="text/javascript">

&#9;&#9;$(document).ready(function() {

&#9;&#9;&#9;// Store variables
&#9;&#9;&#9;
&#9;&#9;&#9;var accordion_head = $('.accordion > li > a'),
&#9;&#9;&#9;&#9;accordion_body = $('.accordion li > .sub-menu');

&#9;&#9;&#9;// Open the first tab on load

&#9;&#9;&#9;// accordion_head.first().addClass('active').next().slideDown('normal');

&#9;&#9;&#9;// Click function

&#9;&#9;&#9;accordion_head.on('click', function(event) {

&#9;&#9;&#9;&#9;// Disable header links
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;event.preventDefault();

&#9;&#9;&#9;&#9;// Show and hide the tabs on click

&#9;&#9;&#9;&#9;if ($(this).attr('class') != 'active'){
&#9;&#9;&#9;&#9;&#9;accordion_body.slideUp('normal');
&#9;&#9;&#9;&#9;&#9;$(this).next().stop(true,true).slideDown('normal');
&#9;&#9;&#9;&#9;&#9;accordion_head.removeClass('active');
&#9;&#9;&#9;&#9;&#9;$(this).addClass('active');
&#9;&#9;&#9;&#9;}else{
                                        $(this).next('.sub-menu').slideUp('normal');
                                        $(this).removeClass('active');
                                        }
&#9;&#9;&#9;});


&#9;&#9;});

&#9;</script>            
<!-- Accordian script end -->




<!-- Coyer start -->
<link rel='stylesheet' href='css/style.css'>
<!-- Coyer end -->

<!-- Mobile navigation start -->
<script type="text/javascript">
jQuery(document).ready(function($){

&#9;/* prepend menu icon */
&#9;$('#nav-wrap').prepend('<div id="menu-icon">Menu</div>');
&#9;
&#9;/* toggle nav */
&#9;$("#menu-icon").on("click", function(){
&#9;&#9;$("#nav").slideToggle();
&#9;&#9;$(this).toggleClass("active");
&#9;});

});
</script>
<!-- Mobile navigation start -->

<!-- Mobile navigation start -->
<link href="css/mobile_navigation.css" rel="stylesheet" type="text/css">
<!-- Mobile navigation end -->

<!-- Swipe style start -->
<link href='css/swipe.css' rel='stylesheet'/>
<!-- Swipe style end -->

</head>

<body>
<!-- Header start -->
&#9;<div id="header"><h3>Heading</h3>
&#9;
&#9;
&#9;
&#9;&#9;<!-- Mobile navigation start -->
&#9;<nav id="nav-wrap">
&#9;<!--<div id="menu-icon">Menu</div>-->

&#9;<ul id="nav">
&#9;
&#9;<table width="90%" border="0" cellspacing="5">
    <tr>
        <td><li><a href="#">1</a></li></td>
        <td><li><a href="#">2</a></li></td>
        <td><li><a href="#">3</a></li></td>
        <td><li><a href="#">4</a></li></td>
        <td><li><a href="#">5</a></li></td>
    </tr>
    <tr>
        <td><li><a href="#">6</a></li></td>
        <td><li><a href="#">7</a></li></td>
        <td><li><a href="#">8</a></li></td>
        <td><li><a href="#">9</a></li></td>
        <td><li><a href="#">10</a></li></td>
    </tr>
</table>
&#9;
&#9;</ul>
&#9;</nav>
&#9;<!-- / Mobile navigation end -->
&#9;</div>
<!-- Header End -->

<!-- Body start -->
<!-- Swipe content start -->

<div id='gallery'>

  <div id='slider' class='swipe'>
    <ul>
      <li style='display:block'><div>ONE</div></li>
      <li style='display:none'><div>TWO</div></li>
      <li style='display:none'><div>THREE</div></li>
    </ul>
  </div>
 
  <nav>
    <a href='#' id='prev' onclick='slider3.prev();return false;'><em>prev</em></a>
    <span id='position'><em class='on'>&bull;</em><em>&bull;</em><em>&bull;</em></span>
    <a href='#' id='next' onclick='slider3.next();return false;'><em>next</em></a>
  </nav>

</div>
<!-- Swipe content end. Must include JS at bottom of CODE. Tried it. http://swipejs.com/ Comment: Place this at the bottom of the page, externally, to verify the page is ready. -->
<br><br>

<!-- Accordion start -->
&#9;<div id="wrapper-250">

&#9;&#9;<ul class="accordion">
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="one" class="files">

&#9;&#9;&#9;&#9;<a href="#one">My Files<span>495</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Dropbox<span>42</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Skydrive<span>87</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>FTP Server<span>366</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>04</em>Dropbox<span>1</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>05</em>Skydrive<span>10</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="two" class="mail">

&#9;&#9;&#9;&#9;<a href="#two">Mail<span>26</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Hotmail<span>9</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Yahoo<span>14</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="three" class="cloud">

&#9;&#9;&#9;&#9;<a href="#three">Cloud<span>58</span></a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Connect<span>12</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Profiles<span>19</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<!-- coyer start -->
&#9;<div id="page-wrap">
&#9;&#9;&#9;&#9;
&#9;&#9;&#9;<div class="module blue">
&#9;&#9;&#9;&#9;<h2><em>03</em>Deaf person's attention <a href="#">1</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Take a step-by-step process.</li>
&#9;&#9;&#9;&#9;   <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
&#9;&#9;&#9;&#9;   <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;&#9;<h2><em>04</em>When is it my turn? <a href="#">2</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Set up a system in the surgery to that a visual indicator will allow a Deaf person to know when he or she is being called.</li>
&#9;&#9;&#9;&#9;   <li>A monitor in the waiting room is a good idea.</li>
&#9;&#9;&#9;&#9;   <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;&#9;<h2><em>05</em>Scheduling appointments <a href="#">3</a></h2>
&#9;&#9;&#9;&#9;<ul>
&#9;&#9;&#9;&#9;   <li>Ensure that email or text messages can be used to make an appointment.</li>
&#9;&#9;&#9;&#9;   <li>Why not try an online booking system?</li>
&#9;&#9;&#9;&#9;   <li>It is important that Deaf people manage their health and can book their own appointments.</li>
&#9;&#9;&#9;&#9;</ul>
&#9;&#9;&#9;</div>
&#9;</div>
<!-- coyer end -->

&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>Options<span>27</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>04</em>Connect<span>12</span></a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>05</em>Profiles<span>19</span></a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>06</em>Options<span>27</span></a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;&#9;
&#9;&#9;&#9;<li id="four" class="sign">

&#9;&#9;&#9;&#9;<a href="#four">Sign Out</a>

&#9;&#9;&#9;&#9;<ul class="sub-menu">
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>01</em>Log Out</a></li>
&#9;&#9;&#9;&#9;&#9;
&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>02</em>Delete Account</a></li>

&#9;&#9;&#9;&#9;&#9;<li><a href="#"><em>03</em>Freeze Account</a></li>

&#9;&#9;&#9;&#9;</ul>

&#9;&#9;&#9;</li>
&#9;&#9;
&#9;&#9;</ul>
&#9;&#9;
&#9;</div>
<!-- Accordion end -->



<!-- Swipe content Start. http://swipejs.com/ Place this at the bottom of the page, externally, to verify the page is ready. -->.
<script src='js/swipe.js'></script>
<script>
new Swipe(document.getElementById('slider'));
new Swipe(document.getElementById('slider2'));
var slider3 = new Swipe(document.getElementById('slider3'));
var slider4 = new Swipe(document.getElementById('slider4'));
</script>
<!-- Swipe content end. Must include JS after slider otherwise it won't work. Tried it. http://swipejs.com/ Comment: Place this at the bottom of the page, externally, to verify the page is ready. -->

<!-- Body end -->

<!-- Footer Start -->&#9;
<div id="footer"></div>
<!-- Footer End -->&#9;
&#9;
</body>

</html>

CSS:
html, body, div, span, object, iframe, h1, h2, h3, h4, h5, h6, p, del, dfn, em, img, ins, kbd, q, samp, small, strong, b, i, dl, dt, dd, ol, ul, li, fieldset, form, label, table, tbody, tfoot, thead, tr, th, td, article, aside, footer, header, nav, section {
  margin:0;
  padding:0;
  border:0;
  outline:0;
  font-size:100%;
  vertical-align:baseline;
  /* background:transparent; */
}
body {
  -webkit-text-size-adjust:none;
  font-family:sans-serif;
}
h1 {
  font-size:36px;
  margin:15px;
  text-align:center;
  color:#666;
}
h2 {
  font-size:14px;
  font-weight:bold;
  color:#3c3c3c;
  margin:20px 10px 10px;
}
small {
  margin:0 10px 30px;
  display:block;
  font-size:12px;
}
a {
  margin:0 0 0 10px;
  font-size:12px;
  color:#3c3c3c;
}
.swipe {
  padding-bottom:20px;
}
.swipe li div, .swipe div div div {
  margin:0 10px;
  padding:50px 10px;
  background:#1db1ff;
  font-weight:bold;
  color:#fff;
  font-size:20px;
  text-align:center;
}

/* ***************** */
#gallery {
  background:#3db8c8;
}
  #slider {
    padding:13px 0;
  }
  #slider li div {
    margin: 0 13px;
    padding: 80px 10px;
    border-radius: 4px;
    border-top: 1px #fff solid;
    background: #F7F9FA;
    -webkit-box-shadow: 0px 1px 2px #0D0F11;
    -moz-box-shadow: 0px 1px 2px #0D0F11;
    box-shadow: 0px 1px 2px #0D0F11;
    color: #DDE1E4;
    font-size: 12px;
    text-align: center;
    text-shadow: 0 1px 0 #fff;
    color: #A4AEB7;
  }
  #gallery nav {
    border-top:1px #3A4146 solid;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#292F34), to(#23282C));
    background-image: -webkit-linear-gradient(top, #292F34, #23282C);
    background-image:    -moz-linear-gradient(top, #292F34, #23282C);
    background-image:     -ms-linear-gradient(top, #292F34, #23282C);
    background-image:      -o-linear-gradient(top, #292F34, #23282C);
    background-image:         linear-gradient(top, #292F34, #23282C);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#292F34', EndColorStr='#23282C'); 
    height:35px;
    position:relative;
  }
    #position {
      text-align:center;
      font-size:27px;
      line-height:1.3;
      color:#697279;
      display:block;
      position:absolute;
      top:0;
      left:50%;
      margin-left:-75px;
      width:150px;
    }
      #position em {
        display:inline-block;
        padding:0 3px;
        font-style:normal;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
        font-family:sans-serif;
      }
      #position em.on {
        color:#fff;
      }
    #prev {
      border-right:1px #232628 solid;
      display:inline-block;
      text-decoration:none;
    }
      #prev em {
        display:block;
        border-right:1px #30373C solid;
        padding:10px 13px 8px;
        font-style:normal;
        font-weight:bold;
        font-size:11px;
        text-transform:uppercase;
        color:#697279;
        letter-spacing:1px;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
      }
    #next {
      border-left:1px #232628 solid;
      display:inline-block;
      text-decoration:none;
      position:absolute;
      right:0;
      top:0;
    }
      #next em {
        display:block;
        border-left:1px #30373C solid;
        padding:10px 13px 8px;
        font-style:normal;
        font-weight:bold;
        font-size:11px;
        text-transform:uppercase;
        color:#697279;
        letter-spacing:1px;
        text-shadow: 0 -1px 0 rgba(0,0,0,.35);
      }

Open in new window


JS:
/*
 * Swipe 1.0
 *
 * Brad Birdsall, Prime
 * Copyright 2011, Licensed GPL & MIT
 *
*/

window.Swipe = function(element, options) {

  // return immediately if element doesn't exist
  if (!element) return null;

  var _this = this;

  // retreive options
  this.options = options || {};
  this.index = this.options.startSlide || 0;
  this.speed = this.options.speed || 300;
  this.callback = this.options.callback || function() {};
  this.delay = this.options.auto || 0;

  // reference dom elements
  this.container = element;
  this.element = this.container.children[0]; // the slide pane

  // static css
  this.container.style.overflow = 'hidden';
  this.element.style.listStyle = 'none';
  this.element.style.margin = 0;

  // trigger slider initialization
  this.setup();

  // begin auto slideshow
  this.begin();

  // add event listeners
  if (this.element.addEventListener) {
    this.element.addEventListener('touchstart', this, false);
    this.element.addEventListener('touchmove', this, false);
    this.element.addEventListener('touchend', this, false);
    this.element.addEventListener('webkitTransitionEnd', this, false);
    this.element.addEventListener('msTransitionEnd', this, false);
    this.element.addEventListener('oTransitionEnd', this, false);
    this.element.addEventListener('transitionend', this, false);
    window.addEventListener('resize', this, false);
  }

};

Swipe.prototype = {

  setup: function() {

    // get and measure amt of slides
    this.slides = this.element.children;
    this.length = this.slides.length;

    // return immediately if their are less than two slides
    if (this.length < 2) return null;

    // determine width of each slide
    this.width = ("getBoundingClientRect" in this.container) ? this.container.getBoundingClientRect().width : this.container.offsetWidth;

    // return immediately if measurement fails
    if (!this.width) return null;

    // hide slider element but keep positioning during setup
    this.container.style.visibility = 'hidden';

    // dynamic css
    this.element.style.width = (this.slides.length * this.width) + 'px';
    var index = this.slides.length;
    while (index--) {
      var el = this.slides[index];
      el.style.width = this.width + 'px';
      el.style.display = 'table-cell';
      el.style.verticalAlign = 'top';
    }

    // set start position and force translate to remove initial flickering
    this.slide(this.index, 0); 

    // show slider element
    this.container.style.visibility = 'visible';

  },

  slide: function(index, duration) {

    var style = this.element.style;

    // fallback to default speed
    if (duration == undefined) {
        duration = this.speed;
    }

    // set duration speed (0 represents 1-to-1 scrolling)
    style.webkitTransitionDuration = style.MozTransitionDuration = style.msTransitionDuration = style.OTransitionDuration = style.transitionDuration = duration + 'ms';

    // translate to given index position
    style.MozTransform = style.webkitTransform = 'translate3d(' + -(index * this.width) + 'px,0,0)';
    style.msTransform = style.OTransform = 'translateX(' + -(index * this.width) + 'px)';

    // set new index to allow for expression arguments
    this.index = index;

  },

  getPos: function() {
    
    // return current index position
    return this.index;

  },

  prev: function(delay) {

    // cancel next scheduled automatic transition, if any
    this.delay = delay || 0;
    clearTimeout(this.interval);

    // if not at first slide
    if (this.index) this.slide(this.index-1, this.speed);

  },

  next: function(delay) {

    // cancel next scheduled automatic transition, if any
    this.delay = delay || 0;
    clearTimeout(this.interval);

    if (this.index < this.length - 1) this.slide(this.index+1, this.speed); // if not last slide
    else this.slide(0, this.speed); //if last slide return to start

  },

  begin: function() {

    var _this = this;

    this.interval = (this.delay)
      ? setTimeout(function() { 
        _this.next(_this.delay);
      }, this.delay)
      : 0;
  
  },
  
  stop: function() {
    this.delay = 0;
    clearTimeout(this.interval);
  },
  
  resume: function() {
    this.delay = this.options.auto || 0;
    this.begin();
  },

  handleEvent: function(e) {
    switch (e.type) {
      case 'touchstart': this.onTouchStart(e); break;
      case 'touchmove': this.onTouchMove(e); break;
      case 'touchend': this.onTouchEnd(e); break;
      case 'webkitTransitionEnd':
      case 'msTransitionEnd':
      case 'oTransitionEnd':
      case 'transitionend': this.transitionEnd(e); break;
      case 'resize': this.setup(); break;
    }
  },

  transitionEnd: function(e) {
    
    if (this.delay) this.begin();

    this.callback(e, this.index, this.slides[this.index]);

  },

  onTouchStart: function(e) {
    
    this.start = {

      // get touch coordinates for delta calculations in onTouchMove
      pageX: e.touches[0].pageX,
      pageY: e.touches[0].pageY,

      // set initial timestamp of touch sequence
      time: Number( new Date() )

    };

    // used for testing first onTouchMove event
    this.isScrolling = undefined;
    
    // reset deltaX
    this.deltaX = 0;

    // set transition time to 0 for 1-to-1 touch movement
    this.element.style.MozTransitionDuration = this.element.style.webkitTransitionDuration = 0;
    
    e.stopPropagation();
  },

  onTouchMove: function(e) {

    // ensure swiping with one touch and not pinching
    if(e.touches.length > 1 || e.scale && e.scale !== 1) return;

    this.deltaX = e.touches[0].pageX - this.start.pageX;

    // determine if scrolling test has run - one time test
    if ( typeof this.isScrolling == 'undefined') {
      this.isScrolling = !!( this.isScrolling || Math.abs(this.deltaX) < Math.abs(e.touches[0].pageY - this.start.pageY) );
    }

    // if user is not trying to scroll vertically
    if (!this.isScrolling) {

      // prevent native scrolling 
      e.preventDefault();

      // cancel slideshow
      clearTimeout(this.interval);

      // increase resistance if first or last slide
      this.deltaX = 
        this.deltaX / 
          ( (!this.index && this.deltaX > 0               // if first slide and sliding left
            || this.index == this.length - 1              // or if last slide and sliding right
            && this.deltaX < 0                            // and if sliding at all
          ) ?                      
          ( Math.abs(this.deltaX) / this.width + 1 )      // determine resistance level
          : 1 );                                          // no resistance if false
      
      // translate immediately 1-to-1
      this.element.style.MozTransform = this.element.style.webkitTransform = 'translate3d(' + (this.deltaX - this.index * this.width) + 'px,0,0)';
      
      e.stopPropagation();
    }

  },

  onTouchEnd: function(e) {

    // determine if slide attempt triggers next/prev slide
    var isValidSlide = 
          Number(new Date()) - this.start.time < 250      // if slide duration is less than 250ms
          && Math.abs(this.deltaX) > 20                   // and if slide amt is greater than 20px
          || Math.abs(this.deltaX) > this.width/2,        // or if slide amt is greater than half the width

    // determine if slide attempt is past start and end
        isPastBounds = 
          !this.index && this.deltaX > 0                          // if first slide and slide amt is greater than 0
          || this.index == this.length - 1 && this.deltaX < 0;    // or if last slide and slide amt is less than 0

    // if not scrolling vertically
    if (!this.isScrolling) {

      // call slide function with slide end value based on isValidSlide and isPastBounds tests
      this.slide( this.index + ( isValidSlide && !isPastBounds ? (this.deltaX < 0 ? 1 : -1) : 0 ), this.speed );

    }
    
    e.stopPropagation();
  }

};

Open in new window

Screen-Shot-2012-08-26-at-04.27..png
0
Comment
Question by:Redscrapbook
  • 3
4 Comments
 
LVL 17

Expert Comment

by:selvol
ID: 38333569
Wow, thats a ton of info.  Seems like you  have done some work.

When you hover over the NEXT & PREV do they respond?
And when you click them do the seem like you are not touching them?

I ask because I have ran a similar problem that was caused by a a top div covering
a div.

Have you tried to add  

z-index:999

Open in new window


to the button css?
0
 

Author Comment

by:Redscrapbook
ID: 38334010
Reaction:
On iOS Simulator, if I click NEXT & PREV it move down instead of next.
On a browser Chrome, it show sign of active link but does nothing.


I've added z-index: 9999; where position:relative; and this is the only position:relative; on CSS.
  #gallery nav {
    border-top:1px #3A4146 solid;
    background-image: -webkit-gradient(linear, left top, left bottom, from(#292F34), to(#23282C));
    background-image: -webkit-linear-gradient(top, #292F34, #23282C);
    background-image:    -moz-linear-gradient(top, #292F34, #23282C);
    background-image:     -ms-linear-gradient(top, #292F34, #23282C);
    background-image:      -o-linear-gradient(top, #292F34, #23282C);
    background-image:         linear-gradient(top, #292F34, #23282C);
    filter: progid:DXImageTransform.Microsoft.gradient(startColorStr='#292F34', EndColorStr='#23282C'); 
    height:35px;
    position:relative;
z-index: 9999;

Open in new window


I've also tried it on JS on HTML. It show the same reaction as above.

<script>
new Swipe(document.getElementById('slider'));
[b]myElement.style.position = "relative"; 
myElement.style.zIndex = "9999";[/b]
//var slider3 = new Swipe(document.getElementById('slider3'));
//var slider4 = new Swipe(document.getElementById('slider4'));
//window.mySwipe = new Swipe(document.getElementById('slider'));
</script>

Open in new window


Did I put z-index: 9999; in a correct place?
0
 

Accepted Solution

by:
Redscrapbook earned 0 total points
ID: 38356148
It is solved.

<script>
// slider
var slider = new Swipe(document.getElementById('slider'), {
      callback: function(e, pos) {
        
        var i = bullets.length;
        while (i--) {
          bullets[i].className = ' ';
        }
        bullets[pos].className = 'on';

      }
    }),
    bullets = document.getElementById('position').getElementsByTagName('em');
</script>

Open in new window

0
 

Author Closing Comment

by:Redscrapbook
ID: 38367146
Solved. After a long trial and error.  I deserve a 500 points?
0

Featured Post

Free Tool: Subnet Calculator

The subnet calculator helps you design networks by taking an IP address and network mask and returning information such as network, broadcast address, and host range.

One of a set of tools we're offering as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

If you are a web developer, you would be aware of the <iframe> tag in HTML. The <iframe> stands for inline frame and is used to embed another document within the current HTML document. The embedded document could be even another website.
A while back, I ran into a situation where I was trying to use the calculated columns feature in SharePoint 2013 to do some simple math using values in two lists. Between certain data types not being accessible, and also with trying to make a one to…
The viewer will learn how to create a basic form using some HTML5 and PHP for later processing. Set up your basic HTML file. Open your form tag and set the method and action attributes.: (CODE) Set up your first few inputs one for the name and …
Want to learn how to record your desktop screen without having to use an outside camera. Click on this video and learn how to use the cool google extension called "Screencastify"! Step 1: Open a new google tab Step 2: Go to the left hand upper corn…
Suggested Courses

831 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question