Swipe works but not buttons PREVIOUS and NEXT
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:
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>
	<title>jQuery Accordion Menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-widt
	<meta name="apple-mobile-web-app
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app
	<link rel="apple-touch-startup-i
	<script src="js/jquery.mobile.js">
	
	<!-- // 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.-->
	<!-- 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 -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></
<script type="text/javascript">
	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
e.preventDefault();
};
	document.addEventListe
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventL
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notifica
	}
</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/ -->
	<link rel="stylesheet" href="css/accordionmenu.cs
	<!-- <style type="text/css">body{backg
<!-- 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/m
<script type="text/javascript">
		$(document).ready(
			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_
			// Open the first tab on load
			// accordion_head.first().add
			// Click function
			accordion_head
				// Disable header links
				
				event.prev
				// Show and hide the tabs on click
				if ($(this).attr('class') != 'active'){
					accord
					$(this
					accord
					$(this
				}else{
$(this).next('.sub-menu').
$(this).removeClass('activ
}
			});
		});
	</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(fun
	/* prepend menu icon */
	$('#nav-wrap').prepend
	
	/* toggle nav */
	$("#menu-icon").on("cl
		$("#nav").slideTog
		$(this).toggleClas
	});
});
</script>
<!-- Mobile navigation start -->
<!-- Mobile navigation start -->
<link href="css/mobile_navigatio
<!-- Mobile navigation end -->
<!-- Swipe style start -->
<link href='css/swipe.css' rel='stylesheet'/>
<!-- Swipe style end -->
</head>
<body>
<!-- Header start -->
	<div id="header"><h3>Heading</h
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-
	<ul id="nav">
	
	<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>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	</div>
<!-- Header End -->
<!-- Body start -->
<!-- Swipe content start -->
<div id='gallery'>
<div id='slider' class='swipe'>
<ul>
<li style='display:block'><div
<li style='display:none'><div>
<li style='display:none'><div>
</ul>
</div>
<nav>
<a href='#' id='prev' onclick='slider3.prev();re
<span id='position'><em class='on'>•</em><em>
<a href='#' id='next' onclick='slider3.next();re
</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 -->
	<div id="wrapper-250">
		<ul class="accordion">
			
			<li id="one" class="files">
				<a href="#one">My Files<span>495</span></a>
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					<li><a
					<li><a
					
					<li><a
				</ul>
			</li>
			
			<li id="two" class="mail">
				<a href="#two">Mail<span>26</
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
				</ul>
			</li>
			
			<li id="three" class="cloud">
				<a href="#three">Cloud<span>5
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					
					
					
					
					
					
					
					<!-- coyer start -->
	<div id="page-wrap">
				
			<div class="module blue">
				<h2><em>03
				<ul>
				 <li>Take a step-by-step process.</li>
				 <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
				 <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
				</ul>
				<h2><em>04
				<ul>
				 <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>
				 <li>A monitor in the waiting room is a good idea.</li>
				 <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
				</ul>
				<h2><em>05
				<ul>
				 <li>Ensure that email or text messages can be used to make an appointment.</li>
				 <li>Why not try an online booking system?</li>
				 <li>It is important that Deaf people manage their health and can book their own appointments.</li>
				</ul>
			</div>
	</div>
<!-- coyer end -->
					
					
					
					
					
					
					
					
					<li><a
					<li><a
					
					<li><a
					<li><a
				</ul>
			</li>
			
			<li id="four" class="sign">
				<a href="#four">Sign Out</a>
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					<li><a
				</ul>
			</li>
		
		</ul>
		
	</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.getElementB
new Swipe(document.getElementB
var slider3 = new Swipe(document.getElementB
var slider4 = new Swipe(document.getElementB
</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 -->	
<div id="footer"></div>
<!-- Footer End -->	
	
</body>
</html>
CSS:
JS:
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> 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>
	<title>jQuery Accordion Menu</title>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-widt
	<meta name="apple-mobile-web-app
	<meta name="robots" content="noindex,follow" />
	<meta name="apple-mobile-web-app
	<link rel="apple-touch-startup-i
	<script src="js/jquery.mobile.js">
	
	<!-- // 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.-->
	<!-- 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 -->
	<script type="text/javascript" charset="utf-8" src="phonegap-1.4.1.js"></
<script type="text/javascript">
	// If you want to prevent dragging, uncomment this section
	/*
	function preventBehavior(e)
	{
e.preventDefault();
};
	document.addEventListe
	*/
	
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	/*
	function handleOpenURL(url)
	{
		// TODO: do something with the url passed in.
	}
	*/
	
	function onBodyLoad()
	{		
		document.addEventL
	}
	
	/* When this function is called, PhoneGap has been initialized and is ready to roll */
	/* If you are supporting your own protocol, the var invokeString will contain any arguments to the app launch.
	see http://iphonedevelopertips.com/cocoa/launching-your-own-application-via-a-custom-url-scheme.html
	for more details -jm */
	function onDeviceReady()
	{
		// do your thing!
		navigator.notifica
	}
</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/ -->
	<link rel="stylesheet" href="css/accordionmenu.cs
	<!-- <style type="text/css">body{backg
<!-- 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/m
<script type="text/javascript">
		$(document).ready(
			// Store variables
			
			var accordion_head = $('.accordion > li > a'),
				accordion_
			// Open the first tab on load
			// accordion_head.first().add
			// Click function
			accordion_head
				// Disable header links
				
				event.prev
				// Show and hide the tabs on click
				if ($(this).attr('class') != 'active'){
					accord
					$(this
					accord
					$(this
				}else{
$(this).next('.sub-menu').
$(this).removeClass('activ
}
			});
		});
	</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(fun
	/* prepend menu icon */
	$('#nav-wrap').prepend
	
	/* toggle nav */
	$("#menu-icon").on("cl
		$("#nav").slideTog
		$(this).toggleClas
	});
});
</script>
<!-- Mobile navigation start -->
<!-- Mobile navigation start -->
<link href="css/mobile_navigatio
<!-- Mobile navigation end -->
<!-- Swipe style start -->
<link href='css/swipe.css' rel='stylesheet'/>
<!-- Swipe style end -->
</head>
<body>
<!-- Header start -->
	<div id="header"><h3>Heading</h
	
	
	
		<!-- Mobile navigation start -->
	<nav id="nav-wrap">
	<!--<div id="menu-icon">Menu</div>-
	<ul id="nav">
	
	<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>
	
	</ul>
	</nav>
	<!-- / Mobile navigation end -->
	</div>
<!-- Header End -->
<!-- Body start -->
<!-- Swipe content start -->
<div id='gallery'>
<div id='slider' class='swipe'>
<ul>
<li style='display:block'><div
<li style='display:none'><div>
<li style='display:none'><div>
</ul>
</div>
<nav>
<a href='#' id='prev' onclick='slider3.prev();re
<span id='position'><em class='on'>•</em><em>
<a href='#' id='next' onclick='slider3.next();re
</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 -->
	<div id="wrapper-250">
		<ul class="accordion">
			
			<li id="one" class="files">
				<a href="#one">My Files<span>495</span></a>
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					<li><a
					<li><a
					
					<li><a
				</ul>
			</li>
			
			<li id="two" class="mail">
				<a href="#two">Mail<span>26</
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
				</ul>
			</li>
			
			<li id="three" class="cloud">
				<a href="#three">Cloud<span>5
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					
					
					
					
					
					
					
					<!-- coyer start -->
	<div id="page-wrap">
				
			<div class="module blue">
				<h2><em>03
				<ul>
				 <li>Take a step-by-step process.</li>
				 <li>Approaching a Deaf person may be enough and your approach may suggest your intention to communicate.</li>
				 <li>You can also wave to get eye contact or tap the person gently on the shoulder.</li>
				</ul>
				<h2><em>04
				<ul>
				 <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>
				 <li>A monitor in the waiting room is a good idea.</li>
				 <li>If an interpreter is present, make sure you call the patient's name and not the interpreter's name.</li>
				</ul>
				<h2><em>05
				<ul>
				 <li>Ensure that email or text messages can be used to make an appointment.</li>
				 <li>Why not try an online booking system?</li>
				 <li>It is important that Deaf people manage their health and can book their own appointments.</li>
				</ul>
			</div>
	</div>
<!-- coyer end -->
					
					
					
					
					
					
					
					
					<li><a
					<li><a
					
					<li><a
					<li><a
				</ul>
			</li>
			
			<li id="four" class="sign">
				<a href="#four">Sign Out</a>
				<ul class="sub-menu">
					
					<li><a
					
					<li><a
					<li><a
				</ul>
			</li>
		
		</ul>
		
	</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.getElementB
new Swipe(document.getElementB
var slider3 = new Swipe(document.getElementB
var slider4 = new Swipe(document.getElementB
</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 -->	
<div id="footer"></div>
<!-- Footer End -->	
	
</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);
}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();
}
};ASKER
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.
I've also tried it on JS on HTML. It show the same reaction as above.
Did I put z-index: 9999; in a correct place?
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;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>Did I put z-index: 9999; in a correct place?
ASKER CERTIFIED SOLUTION
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
ASKER
Solved. After a long trial and error. I deserve a 500 points?
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
Open in new window
to the button css?