Can not select text and all inputs not clickable on mobile screen
2
I am trying to use Xswitch Plugin for my website. But i have a problem with the mobile screen. When i check the developer console mobile screen the inputs or text are not clickable or can not selectible.
Normal desktop screen not have any problem. But when you open developer console to test responsive screen or any other screen, for example you can not select the text. I have also test to add input box but could not be clickable. Where is the problem here, any one can help me please ?
Here is DEMO for checking mobile screen.
* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>javascript jquery html css
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
add a comment |
2
I am trying to use Xswitch Plugin for my website. But i have a problem with the mobile screen. When i check the developer console mobile screen the inputs or text are not clickable or can not selectible.
Normal desktop screen not have any problem. But when you open developer console to test responsive screen or any other screen, for example you can not select the text. I have also test to add input box but could not be clickable. Where is the problem here, any one can help me please ?
Here is DEMO for checking mobile screen.
* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>javascript jquery html css
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
I think you have a problem with jquerytouchstart. It is disabling clickable.
– Azzo
Nov 13 '18 at 15:01
add a comment |
2
2
2
I am trying to use Xswitch Plugin for my website. But i have a problem with the mobile screen. When i check the developer console mobile screen the inputs or text are not clickable or can not selectible.
Normal desktop screen not have any problem. But when you open developer console to test responsive screen or any other screen, for example you can not select the text. I have also test to add input box but could not be clickable. Where is the problem here, any one can help me please ?
Here is DEMO for checking mobile screen.
* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>javascript jquery html css
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
I am trying to use Xswitch Plugin for my website. But i have a problem with the mobile screen. When i check the developer console mobile screen the inputs or text are not clickable or can not selectible.
Normal desktop screen not have any problem. But when you open developer console to test responsive screen or any other screen, for example you can not select the text. I have also test to add input box but could not be clickable. Where is the problem here, any one can help me please ?
Here is DEMO for checking mobile screen.
* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>* {
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;
} <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://www.jqueryscript.net/demo/Touch-enabled-Fullscreen-Page-Slider-Plugin-With-jQuery-XSwitch/js/XSwitch.min.js"></script>
<div id="container" data-xswitch="">
<div class="sections">
<div class="section" id="section0">fdsf fas dafasf asf as fasdf asf asf as fasf saf asf as asf ds fadsf asf asf asf asd fasdf</div>
<div class="section" id="section1"></div>
<div class="section" id="section2"></div>
<div class="section" id="section3"></div>
</div>
<ul class="pages vertical">
<li class="active"></li>
<li></li>
<li></li>
<li></li>
</ul>
</div>javascript jquery html css
javascript jquery html css
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
asked Nov 13 '18 at 14:41
mstfoztrkmstfoztrk
111
111
I think you have a problem with jquerytouchstart. It is disabling clickable.
– Azzo
Nov 13 '18 at 15:01
add a comment |
I think you have a problem with jquerytouchstart. It is disabling clickable.
– Azzo
Nov 13 '18 at 15:01
I think you have a problem with jquery
touchstart . It is disabling clickable.– Azzo
Nov 13 '18 at 15:01
I think you have a problem with jquery
touchstart . It is disabling clickable.– Azzo
Nov 13 '18 at 15:01
add a comment |
0
active
oldest
votes
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283466%2fcan-not-select-text-and-all-inputs-not-clickable-on-mobile-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
0
active
oldest
votes
0
active
oldest
votes
active
oldest
votes
active
oldest
votes
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
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53283466%2fcan-not-select-text-and-all-inputs-not-clickable-on-mobile-screen%23new-answer', 'question_page');
}
);
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Sign up or log in
StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Sign up using Google
Sign up using Facebook
Sign up using Email and Password
Post as a guest
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
Required, but never shown
I think you have a problem with jquery
touchstart. It is disabling clickable.– Azzo
Nov 13 '18 at 15:01