I can not write any value from input on mobile device

I have a problem with touchstart in my jquery code. My jquery code doesn't allow me to click any button, input or other elements when I open the page with a mobile phone.

Please click this DEMO . You can click the inputs and you can write something on there. But open chrome developer console now click the input box so you can see the problem on there. You can not click the input box. you can not write First name and last name.

What is the problem here and how can i fix this problem ? Anyone can help me here please ?

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

I edited my answer to make it a bit more clear

– jrswgtr
Nov 16 '18 at 19:48

You use single letters as variable names and just count up in the alphabet. I would say that is bad practice. If you use descriptive variable names, it makes your code much easier to read and understand. You could use single letters if they are abbreviations like e for event or i for iterator. That it is longer (it's not that much longer anyway) does not matter if you minify your code in production.

– jrswgtr
Nov 27 '18 at 19:56

add a comment |

I have a problem with touchstart in my jquery code. My jquery code doesn't allow me to click any button, input or other elements when I open the page with a mobile phone.

What is the problem here and how can i fix this problem ? Anyone can help me here please ?

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

I edited my answer to make it a bit more clear

– jrswgtr
Nov 16 '18 at 19:48

You use single letters as variable names and just count up in the alphabet. I would say that is bad practice. If you use descriptive variable names, it makes your code much easier to read and understand. You could use single letters if they are abbreviations like e for event or i for iterator. That it is longer (it's not that much longer anyway) does not matter if you minify your code in production.

– jrswgtr
Nov 27 '18 at 19:56

add a comment |

I have a problem with touchstart in my jquery code. My jquery code doesn't allow me to click any button, input or other elements when I open the page with a mobile phone.

What is the problem here and how can i fix this problem ? Anyone can help me here please ?

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

I have a problem with touchstart in my jquery code. My jquery code doesn't allow me to click any button, input or other elements when I open the page with a mobile phone.

What is the problem here and how can i fix this problem ? Anyone can help me here please ?

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

(function(b) 
 b.fn.XSwitch = function(d) 
 return this.each(function() 
 var f = b(this),
 e = f.data("XSwitch");
 if (!e) 
 e = new c(f, d);
 f.data("XSwitch", e);
 
 if (b.type(d) === "string") 
 return e[d]();
 
 );
 ;

 b.fn.XSwitch.defaults = 
 selectors: 
 sections: ".sections",
 section: ".section",
 page: ".pages",
 active: ".active"
 ,
 index: 0,
 easing: "ease",
 duration: 500,
 loop: false,
 pagination: true,
 keyboard: true,
 direction: "vertical",
 callback: ""
 ;

 var a = (function(e) 
 var h = ["webkit", "moz", "o", "ms"],
 g = "";
 for (var f = 0, d = h.length; f < d; f++) 
 g = h[f] + "Transition";
 if (e.style[g] !== undefined) 
 return "-" + h[f].toLowerCase() + "-";
 
 return false;
 
 )(document.createElement("div"));

 var c = (function() 
 function g(j, i) 
 this.settings = b.extend(true, b.fn.XSwitch.defaults, i);
 this.element = j;
 this.init();
 

 g.prototype = 
 init: function() 
 var i = this;
 this.selectors = this.settings.selectors;
 this.sections = this.element.find(this.selectors.sections);
 this.section = this.sections.find(this.selectors.section);
 this.direction = this.settings.direction === "vertical" ? true : false;
 this.pagesCount = this.pagesCount();
 this.index =
 this.settings.index >= 0 && this.settings.index < this.pagesCount ?
 this.settings.index :
 0;
 this.canScroll = true;
 if (!this.direction) 
 d(i);
 
 if (this.settings.pagination) 
 h(i);
 
 f(i);
 ,
 pagesCount: function() 
 return this.section.length;
 ,
 switchLength: function() 
 return this.duration ? this.element.height() : this.element.width();
 ,
 prve: function() 
 var i = this;
 if (this.index > 0) 
 this.index--;
 else 
 if (this.settings.loop) 
 this.index = this.pagesCount - 1;
 
 
 e(i);
 ,
 next: function() 
 var i = this;
 if (this.index < this.pagesCount) 
 this.index++;
 else 
 if (this.settings.loop) 
 this.index = 0;
 
 
 e(i);
 
 ;

 function d(k) 
 var j = k.pagesCount * 100 + "%",
 i = (100 / k.pagesCount).toFixed(2) + "%";
 k.sections.width(j);
 k.section.width(i).css("float", "left");
 

 function h(o) 
 var n = o.selectors.page.substring(1),
 l = '<ul class="' + n + '">';
 o.activeClass = o.selectors.active.substring(1);
 for (var m = 0, k = o.pagesCount; m < k; m++) 
 l += "<li></li>";
 
 l += "</ul>";
 o.element.append(l);
 var j = o.element.find(o.selectors.page);
 o.pageItem = j.find("li");
 o.pageItem.eq(o.index).addClass(o.activeClass);
 o.section.find('.box').removeClass('box_active');
 o.section.eq(o.index).find('.box').addClass('box_active');
 if (o.direction) 
 j.addClass("vertical");
 else 
 j.addClass("horizontal");
 
 

 function f(i) 
 i.element.on("click touchstart", i.selectors.page + " li", function() 
 i.index = b(this).index();
 e(i);
 );
 i.element.on("mousewheel DOMMouseScroll", function(j) );

 i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.one("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 l.preventDefault();
 );

 if (i.settings.keyboard) 
 b(window).on("keydown", function(k) );
 

 b(window).resize(function() 
 var j = i.switchLength(),
 k = i.settings.direction ?
 i.section.eq(i.index).offset().top :
 i.section.eq(i.index).offset().left;
 if (Math.abs(k) > j / 2 && i.index < i.pagesCount - 1) 
 i.index++;
 
 if (i.index) 
 e(i);
 
 );

 i.sections.on("transitionend webkitTransitionEnd oTransitionEnd otransitionend", function() 
 i.canScroll = true;
 if (i.settings.callback && type(i.settings.callback) === "function") 
 i.settings.callback();
 
 );
 

 function e(l) 
 var i = l.section.eq(l.index).position();
 l.section.find('.box').removeClass('box_active');
 l.section.eq(l.index).find('.box').addClass('box_active');

 if (!i) 
 return;
 

 l.canScroll = false;
 if (a) 
 l.sections.css(
 a + "transition",
 "all " + l.settings.duration + "ms " + l.settings.easing
 );
 var j = l.direction ?
 "translateY(-" + i.top + "px)" :
 "translateX(-" + i.left + "px)";
 l.sections.css(a + "transform", j);
 else 
 var k = l.direction ? 
 top: -i.top
 : 
 left: -i.left
 ;
 l.sections.animate(k, l.settings.duration, function() 
 l.canScroll = true;
 if (l.settings.callback && type(l.settings.callback) === "function") 
 l.settings.callback();
 
 );
 
 if (l.settings.pagination) 
 l.pageItem
 .eq(l.index)
 .addClass(l.activeClass)
 .siblings("li")
 .removeClass(l.activeClass);
 
 
 return g;
 )();

 $(function() 
 $("[data-XSwitch]").XSwitch();
 );
)(jQuery);

$("#container").XSwitch(
 duration: 1000
);

* 
 margin: 0;
 padding: 0;


html,
body 
 height: 100%;
 overflow: hidden;


#container,
.sections,
.section 
 position: relative;
 height: 100%;


.section 
 background-color: #000;
 background-size: cover;
 background-position: 50% 50%;


#section0 
 background-image: url(https://unsplash.it/1980/1280?image=1076);


#section1 
 background-image: url(https://unsplash.it/1980/1280?image=1075);


#section2 
 background-image: url(https://unsplash.it/1980/1280?image=1074);


#section3 
 background-image: url(https://unsplash.it/1980/1280?image=1073);


.pages 
 position: fixed;
 right: 10px;
 top: 50%;
 list-style: none;


.pages li 
 width: 8px;
 height: 8px;
 border-radius: 50%;
 background: #fff;
 margin: 15px 0 0 7px;


.pages li.active 
 margin-left: 0;
 width: 14px;
 height: 14px;
 border: 4px solid #FFFFFF;
 background: none;


.form 
 left: 50%;
 margin-left: -400px;
 position: absolute;
 top: 50%;
 width: 800px;
 margin-top: -241px;
 padding: 20px 30px 30px;
 z-index: 5;
 vertical-align: baseline;
 animation: signupFormIntro 0.3s ease-out 0.7s;
 animation-fill-mode: backwards;


.input_box 
 width: 100%;
 display: inline-block;


.wellcome_input 
 width: 100%;
 padding: 15px;
 font-weight: 300;
 font-size: 16px;
 outline: none;
 border: 0px solid transparent;
 color: #444;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="container" data-xswitch="">
 <div class="sections">
 <div class="section box" id="section0">
 <div class="form">
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="First Name"></div>
 <div class="input_box"><input type="text" class="wellcome_input" placeholder="Last Name"></div>
 </div>
 </div>
 <div class="section" id="section1"></div>
 <div class="section" id="section2"></div>
 <div class="section" id="section3"></div>
 </div>
</div>

javascript jquery html

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

edited Nov 23 '18 at 19:51

Rowan Richards

122212

edited Nov 23 '18 at 19:51

Rowan Richards

122212

edited Nov 23 '18 at 19:51

Rowan Richards

122212

asked Nov 14 '18 at 16:51

Azzo

351722

asked Nov 14 '18 at 16:51

Azzo

351722

asked Nov 14 '18 at 16:51

Azzo

351722

I edited my answer to make it a bit more clear

– jrswgtr
Nov 16 '18 at 19:48

You use single letters as variable names and just count up in the alphabet. I would say that is bad practice. If you use descriptive variable names, it makes your code much easier to read and understand. You could use single letters if they are abbreviations like e for event or i for iterator. That it is longer (it's not that much longer anyway) does not matter if you minify your code in production.

– jrswgtr
Nov 27 '18 at 19:56

add a comment |

I edited my answer to make it a bit more clear

– jrswgtr
Nov 16 '18 at 19:48

You use single letters as variable names and just count up in the alphabet. I would say that is bad practice. If you use descriptive variable names, it makes your code much easier to read and understand. You could use single letters if they are abbreviations like e for event or i for iterator. That it is longer (it's not that much longer anyway) does not matter if you minify your code in production.

– jrswgtr
Nov 27 '18 at 19:56

I edited my answer to make it a bit more clear

– jrswgtr
Nov 16 '18 at 19:48

You use single letters as variable names and just count up in the alphabet. I would say that is bad practice. If you use descriptive variable names, it makes your code much easier to read and understand. You could use single letters if they are abbreviations like e for event or i for iterator. That it is longer (it's not that much longer anyway) does not matter if you minify your code in production.

– jrswgtr
Nov 27 '18 at 19:56

add a comment |

2 Answers
2

active

oldest

votes

+50

If you touch the text input, all parent elements are touched too.

In this case i.element is also touched when you touch the text input. l.preventDefault() is preventing the default behavior on i.element and all its children. Resulting in not activating the text input.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.on("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 // l.preventDefault();
);

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

add a comment |

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

add a comment |

Your Answer

StackExchange.ifUsing("editor", function ()
StackExchange.using("externalEditor", function ()
StackExchange.using("snippets", function ()
StackExchange.snippets.init();
);
);
, "code-snippets");

StackExchange.ready(function()
var channelOptions =
tags: "".split(" "),
id: "1"
;
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function()
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled)
StackExchange.using("snippets", function()
createEditor();
);

else
createEditor();

);

function createEditor()
StackExchange.prepareEditor(
heartbeatType: 'answer',
autoActivateHeartbeat: false,
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader:
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
,
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
);

);

draft saved

draft discarded

StackExchange.ready(
function ()
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53305150%2fi-can-not-write-any-value-from-input-on-mobile-device%23new-answer', 'question_page');

);

Post as a guest

Name

Required, but never shown

2 Answers
2

active

oldest

votes

2 Answers
2

active

oldest

votes

+50

If you touch the text input, all parent elements are touched too.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.on("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 // l.preventDefault();
);

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

add a comment |

+50

If you touch the text input, all parent elements are touched too.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.on("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 // l.preventDefault();
);

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

add a comment |

+50

If you touch the text input, all parent elements are touched too.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.on("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 // l.preventDefault();
);

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

If you touch the text input, all parent elements are touched too.

Remove l.preventDefault(). I don't see the need for it in this case anyway.

I copied and edited your CodePen so you can see that it works!

i.element.on("touchstart", function(l) 
 var k = l.originalEvent.changedTouches[0].pageX,
 j = l.originalEvent.changedTouches[0].pageY;
 i.element.on("touchend", function(o) 
 if (!i.canScroll) 
 return;
 
 var n = o.originalEvent.changedTouches[0].pageX,
 m = o.originalEvent.changedTouches[0].pageY,
 p = m - j;
 if (p > 50) 
 i.prve();
 else 
 if (p < -50) 
 i.next();
 
 
 );
 // l.preventDefault();
);

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

edited Nov 17 '18 at 10:01

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

answered Nov 16 '18 at 17:30

jrswgtr

1,18211022

add a comment |

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

add a comment |

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

add a comment |

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

l.preventDefault(); is preventing other default events from firing. If you remove this, your code should work.

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

answered Nov 22 '18 at 7:53

Ajmal Hassan

7619

add a comment |

draft saved

draft discarded

Thanks for contributing an answer to Stack Overflow!

Please be sure to answer the question. Provide details and share your research!

But avoid …

Asking for help, clarification, or responding to other answers.

Making statements based on opinion; back them up with references or personal experience.

To learn more, see our tips on writing great answers.

draft saved

draft discarded

Post as a guest

Name

Required, but never shown

Name

Required, but never shown

Name

Required, but never shown

This page is only for reference, If you need detailed information, please check here

搜尋此網誌

Pfthb