Skip to content

Commit 506ec54

Browse files
alvarotrigoalvarotrigo
committed
- Fixing touch and click vents propagations and fixing iOS bouncing in
other way alvarotrigo#2338
1 parent 736ac0f commit 506ec54

File tree

4 files changed

+245
-13
lines changed

4 files changed

+245
-13
lines changed

‎examples/demoPage.html

Lines changed: 9 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -52,7 +52,7 @@
5252
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
5353
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
5454

55-
<script type="text/javascript" src="../jquery.fullPage.js"></script>
55+
<script type="text/javascript" src="../jquery.fullPage.js?v=2"></script>
5656
<script type="text/javascript" src="examples.js"></script>
5757
<script type="text/javascript">
5858
$(document).ready(function() {
@@ -63,6 +63,12 @@
6363
scrollingSpeed: 1000
6464
});
6565

66+
var cont = 0;
67+
$(document).on('click', '.pepe', function(){
68+
$(".juan").text("weeeeee" + cont);
69+
cont++;
70+
});
71+
6672
});
6773
</script>
6874

@@ -111,9 +117,10 @@
111117
<h1>fullPage.js</h1>
112118
<input type="hidden" name="id" value="1" />
113119
<p>Create Beautiful Fullscreen Scrolling Websites</p>
120+
<span class="pepe" href="" style="font-size:4em;">GOOGLE</span>
114121
<img src="imgs/fullPage.png" alt="fullPage" />
115122
</div>
116-
<div class="section active" id="section1">
123+
<div class="section" id="section1">
117124
<div class="slide">
118125
<div class="intro">
119126
<h1>Create Sliders</h1>

‎examples/z2.html

Lines changed: 63 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,63 @@
1+
<!doctype html>
2+
<html>
3+
4+
<head>
5+
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
6+
<meta charset="utf-8">
7+
<link href="https://fonts.googleapis.com/css?family=Libre+Baskerville:400i|Raleway:700" rel="stylesheet">
8+
<style>
9+
html,body{
10+
height: 100%;
11+
overflow: hidden;
12+
margin: 0;
13+
padding: 0;
14+
}
15+
.demo{
16+
height: 80%;
17+
width: 100%;
18+
background-color: red;
19+
font-size: 5em;
20+
}
21+
.demo a{
22+
font-size: 0.5em;
23+
position: absolute;
24+
right: 0;
25+
top: 0;
26+
}
27+
</style>
28+
<script src="http://cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.js"></script>
29+
<title>Heureux les curieux</title>
30+
</head>
31+
32+
<body>
33+
<div style="height:120%; transform: translate3d(0, -100px, 0); background: yellow">
34+
<div class="demo">
35+
<span></span>
36+
<a class="pepe" style="position:absolute; top:200px; right: 0;" data-pepe="http://google.com">Google</a>
37+
</div>
38+
</div>
39+
40+
<script src="http://code.jquery.com/jquery-2.2.4.min.js" integrity="sha256-BbhdlvQf/xTY9gja0Dq3HiwQF8LaCRTXxZKRutelT44=" crossorigin="anonymous">
41+
</script>
42+
<script type="text/javascript">
43+
jQuery(document).ready(function($) {
44+
45+
//adding the action to the button
46+
$('.demo').on('click', function() {
47+
$('.demo').find('span').text('Click fired');
48+
});
49+
$('.demo').on('touchstart', function(e) {
50+
$('.demo').find('span').text('Touch fired');
51+
});
52+
53+
$('.demo').on('touchmove', function(e) {
54+
e.preventDefault();
55+
$('.demo').find('span').text('Touch move');
56+
});
57+
58+
59+
});
60+
</script>
61+
</body>
62+
63+
</html>

‎examples/z3.html

Lines changed: 150 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,150 @@
1+
<!DOCTYPE html>
2+
<html xmlns="http://www.w3.org/1999/xhtml">
3+
4+
<head>
5+
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
6+
<title>Vertical navigation dots - fullPage.js</title>
7+
<meta name="author" content="Alvaro Trigo Lopez" />
8+
<meta name="description" content="fullPage full-screen sliders navigation widh dots." />
9+
<meta name="keywords" content="fullpage,jquery,demo,screen,fullscreen,sliders navigation, horizontal navigation,horizontal,navigation,dots" />
10+
<meta name="Resource-type" content="Document" />
11+
12+
13+
<link rel="stylesheet" type="text/css" href="../jquery.fullPage.css" />
14+
<link rel="stylesheet" type="text/css" href="examples.css" />
15+
<style>
16+
17+
/* Style for our header texts
18+
* --------------------------------------- */
19+
h1{
20+
font-size: 5em;
21+
font-family: arial,helvetica;
22+
color: #fff;
23+
margin:0;
24+
}
25+
.intro p{
26+
color: #fff;
27+
}
28+
29+
/* Centered texts in each section
30+
* --------------------------------------- */
31+
.section{
32+
text-align:center;
33+
}
34+
35+
36+
/* Overwriting styles for the navigation dots (to place it where we want)
37+
* --------------------------------------- */
38+
.fp-slidesNav.bottom{
39+
bottom: 25px;
40+
}
41+
42+
/* Bottom menu
43+
* --------------------------------------- */
44+
#infoMenu li a {
45+
color: #fff;
46+
}
47+
48+
#section2 h1{
49+
color: #333;
50+
}
51+
.demo{
52+
width: 200px;
53+
height: 400px;
54+
overflow: scroll;
55+
position: absolute;
56+
top: 100px;
57+
left: 100px;
58+
display: block;
59+
background:red;
60+
}
61+
.demo span{
62+
padding: 30px 0;
63+
margin: 20px 0;
64+
font-size: 3em;
65+
display: block;
66+
}
67+
.pepe{
68+
position: fixed;
69+
top: 200px;
70+
left: 400px;
71+
font-size: 4em;
72+
z-index: 999;
73+
}
74+
75+
</style>
76+
77+
<!--[if IE]>
78+
<script type="text/javascript">
79+
var console = { log: function() {} };
80+
</script>
81+
<![endif]-->
82+
83+
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
84+
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
85+
86+
<script type="text/javascript" src="../vendors/scrolloverflow.js"></script>
87+
88+
<script type="text/javascript" src="../jquery.fullPage.js?v=2"></script>
89+
<script type="text/javascript" src="examples.js"></script>
90+
91+
<script type="text/javascript">
92+
$(document).ready(function() {
93+
$('#fullpage').fullpage({
94+
anchors: ['firstPage', 'secondPage', '3rdPage'],
95+
sectionsColor: ['#8FB98B', '#DE564B', '#EAE1C0'],
96+
slidesNavigation: true,
97+
autoScrolling: true,
98+
normalScrollElements: '.demo'
99+
});
100+
101+
$(document).on('click', '.demo', function(){
102+
$('.pepe').text('clicked');
103+
});
104+
});
105+
</script>
106+
107+
</head>
108+
<body>
109+
110+
<div class="pepe"></div>
111+
<div id="fullpage">
112+
113+
<div class="section " id="section0">
114+
<div class="intro">
115+
<img src="imgs/1.png" alt="1"/>
116+
<div class="demo"><span>Touch me</span><span>Touch me</span><span>Touch me</span><span>Touch me</span><span>Touch me</span><span>Touch me</span><span>Touch me</span></div>
117+
<p>Create a navigation for your landscape sliders</p>
118+
</div>
119+
</div>
120+
<div class="section" id="section1">
121+
<div class="slide" id="slide1" data-anchor="slide1">
122+
<div class="intro">
123+
<h1>Clickable</h1>
124+
<p>
125+
You can even click on the navigation and jump directly to another section.
126+
</p>
127+
</div>
128+
</div>
129+
130+
<div class="slide" id="slide2" data-anchor="slide2">
131+
<h1>Slide 2</h1>
132+
</div>
133+
134+
<div class="slide" id="slide3" data-anchor="slide3">
135+
<h1>Slide 3</h1>
136+
</div> <div class="slide" id="slide3" data-anchor="slide3">
137+
<h1>Slide 4</h1>
138+
</div>
139+
<div class="slide" id="slide3" data-anchor="slide3">
140+
<h1>Slide 5</h1>
141+
</div>
142+
</div>
143+
<div class="section" id="section2">
144+
<div class="intro">
145+
<h1>Enjoy it</h1>
146+
</div>
147+
</div>
148+
</div>
149+
</body>
150+
</html>

‎jquery.fullPage.js

Lines changed: 23 additions & 11 deletions
Original file line numberDiff line numberDiff line change
@@ -1085,6 +1085,16 @@
10851085
}
10861086
}
10871087

1088+
/*
1089+
* Preventing bouncing in iOS #2285
1090+
*/
1091+
function preventBouncing(event){
1092+
var e = event.originalEvent;
1093+
if(options.autoScrolling && isReallyTouch(e)){
1094+
//preventing the easing on iOS devices
1095+
event.preventDefault();
1096+
}
1097+
}
10881098

10891099
var touchStartY = 0;
10901100
var touchStartX = 0;
@@ -1185,13 +1195,6 @@
11851195
* Handler for the touch start event.
11861196
*/
11871197
function touchStartHandler(event){
1188-
//preventing default bouncing in iOS 10 #2285
1189-
event.preventDefault();
1190-
1191-
//allowing to catch click events after preventing default #2338
1192-
//http://stackoverflow.com/q/40094570/1081396
1193-
$(event.target).trigger('click');
1194-
11951198
var e = event.originalEvent;
11961199

11971200
//stopping the auto scroll to adjust to a section
@@ -1466,7 +1469,10 @@
14661469
function performMovement(v){
14671470
// using CSS3 translate functionality
14681471
if (options.css3 && options.autoScrolling && !options.scrollBar) {
1469-
var translate3d = 'translate3d(0px, -' + v.dtop + 'px, 0px)';
1472+
1473+
// The first section can have a negative value in iOS 10. Not quite sure why: -0.0142822265625
1474+
// that's why we round it to 0.
1475+
var translate3d = 'translate3d(0px, -' + Math.round(v.dtop) + 'px, 0px)';
14701476
transformContainer(translate3d, true);
14711477

14721478
//even when the scrollingSpeed is 0 there's a little delay, which might cause the
@@ -2553,6 +2559,8 @@
25532559
//Microsoft pointers
25542560
var MSPointer = getMSPointer();
25552561

2562+
$body.off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, preventBouncing);
2563+
25562564
$(WRAPPER_SEL)
25572565
.off('touchstart ' + MSPointer.down).on('touchstart ' + MSPointer.down, touchStartHandler)
25582566
.off('touchmove ' + MSPointer.move).on('touchmove ' + MSPointer.move, touchMoveHandler);
@@ -2637,15 +2645,19 @@
26372645
* Scrolls silently (with no animation) the page to the given Y position.
26382646
*/
26392647
function silentScroll(top){
2648+
// The first section can have a negative value in iOS 10. Not quite sure why: -0.0142822265625
2649+
// that's why we round it to 0.
2650+
var roundedTop = Math.round(top);
2651+
26402652
if(options.scrollBar){
2641-
container.scrollTop(top);
2653+
container.scrollTop(roundedTop);
26422654
}
26432655
else if (options.css3) {
2644-
var translate3d = 'translate3d(0px, -' + top + 'px, 0px)';
2656+
var translate3d = 'translate3d(0px, -' + roundedTop + 'px, 0px)';
26452657
transformContainer(translate3d, false);
26462658
}
26472659
else {
2648-
container.css('top', -top);
2660+
container.css('top', -roundedTop);
26492661
}
26502662
}
26512663

0 commit comments

Comments
 (0)