<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Responsive Design - Fehlerhaftes Scrolling auf Android</title>
<meta name="viewport" content='width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=0' />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/normalize/5.0.0/normalize.min.css' />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta.2/css/bootstrap-grid.css' />
<link rel='stylesheet prefetch' href='https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap-theme.min.css' />
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css' />
<style class="cp-pen-styles"> /* Style for our header texts
* --------------------------------------- */
h1{
font-size: 5em;
font-family: arial,helvetica;
color: #fff;
padding:0;
margin: 0;
}
h2{
font-size: 1.3em;
font-family: arial,helvetica;
color: #000;
padding:0 0 10px 0;
margin: 0 0 10px 0;
}
.intro p{
color: #fff;
}
.my-group .form-control{
width:50%;
}
/* Centered texts in each section
* --------------------------------------- */
.section{
text-align:center;
}
input[type=checkbox]:checked ~ .check {
border: 5px solid red;
}
input[type=checkbox]:checked ~ .check::before{
background: red;
}
input[type=checkbox]:checked ~ label{
color: red;
}
#section5 {
background-color:blue;
min-height: 100vh;
padding-top: 20px;
}
#section6 {
background-color:red;
min-height: 100vh;
padding-top: 20px;
}
#section7 {
background-color:blue;
min-height: 100vh;
padding-top: 20px;
}
#section8 {
background-color:red;
min-height: 100vh;
padding-top: 20px;
}
#section9 {
background-color:blue;
min-height: 100vh;
padding-top: 20px;
}
#section15 {
background-color:red;
min-height: 100vh;
padding-top: 20px;
}
.ldBar {
position:relative;
}
.ldBar.label-center > .ldBar-label {
top:50%;
left:50%;
position:absolute;
-webkit-transform:translate(-50%,-50%);
transform:translate(-50%,-50%);
text-shadow:0 0 3px #fff
}
.ldBar-label:after {
display:inline
content:"%";
}
.ldBar.no-percent .ldBar-label:after {
content:""
}
div.c-2 {padding:15px;}
div.c-1 {width:80%; margin:auto;}</style>
</head>
<body>
<form name="bewerbungsformular"
action="#"
enctype="multipart/form-data"
method="post"
id="bewerbungsformular">
<div class="container">
<section id="section5">
<h2>Vorname</h2>
<div class="input-group c-1">
<input type="text"
class="form-control"
name="vorname"
id="vorname" />
<span class="input-group-btn">
<button type="button"
class="btn btn-danger next"
name="vorname"
id="fx">
<span class="input-group-btn">Okay</span>
</button>
</span>
<!-- <span class="input-group-btn">
<button type="button"
class="btn btn-danger previous">
<span class="input-group-btn">prev</span>
</button>
</span> -->
</div>
</section>
<section id="section6">
<h2>Nachname</h2>
<div class="input-group c-1">
<input type="text"
class="form-control"
name="nachname"
id="nachname" />
<span class="input-group-btn">
<button type="button"
class="btn btn-danger next"
name="nachname"
id="gx">
<span class="input-group-btn">Okay</span>
</button>
</span>
<span class="input-group-btn">
<button type="button"
class="btn btn-danger previous">
<span class="input-group-btn">prev</span>
</button>
</span>
</div>
</section>
<section id="section7">
<h2>Geburtsjahr</h2>
<div class="input-group c-1">
<input type="text"
class="form-control"
name="geburtsjahr"
id="geburtsjahr" />
<span class="input-group-btn">
<button type="button"
class="btn btn-danger next"
name="geburtsjahr"
id="hx">
<span class="input-group-btn">Okay</span>
</button>
</span>
<span class="input-group-btn">
<button type="button"
class="btn btn-danger previous">
<span class="input-group-btn">prev</span>
</button>
</span>
</div>
</section>
<section id="section8">
<h2>PLZ deines Wohnorts</h2>
<div class="input-group c-1">
<input type="text"
class="form-control"
name="plz_wohnort"
id="plz_wohnort" />
<span class="input-group-btn">
<button type="button"
class="btn btn-danger next"
onclick="quest9_I()"
name="plz_wohnort"
id="ix">
<span class="input-group-btn">Okay</span>
</button>
</span>
<span class="input-group-btn">
<button type="button"
class="btn btn-danger previous">
<span class="input-group-btn">prev</span>
</button>
</span>
</div>
</section>
<section id="section9">
<h2>Telefonnummer</h2>
<div class="input-group c-1">
<input type="text"
class="form-control"
name="telefon"
id="telefon" />
<span class="input-group-btn">
<button type="button"
class="btn btn-danger next"
name="telefon"
id="jx">
<span class="input-group-btn">Okay</span>
</button>
</span>
<span class="input-group-btn">
<button type="button"
class="btn btn-danger previous">
<span class="input-group-btn">prev</span>
</button>
</span>
</div>
</section>
<section class="section intro container c-2"
id="section15">
<h2>Vielen Dank für deine Angaben!</h2>
<input type="submit"
class="btn btn-lg btn-danger"
value="Daten übermitteln" />
</section>
</div>
</form>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script type="text/javascript" src="https://raw.githubusercontent.com/loadingio/loading-bar/master/dist/loading-bar.js"></script>
<script type="text/javascript" src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/4.0.0-beta/js/bootstrap.min.js"></script>
<script type="text/javascript" charset="UTF-8">
//<![CDATA[
$(function(){
var pagePositon = 0,
sectionsSeclector = 'section',
$scrollItems = $(sectionsSeclector),
offsetTolorence = 30,
pageMaxPosition = $scrollItems.length - 1;
//Map the sections:
$scrollItems.each(function(index,ele) { $(ele).attr("debog",index).data("pos",index); });
// Bind to scroll
$(window).bind('scroll',upPos);
//Move on click:
$('button').click(function(e){
if ($(this).hasClass('next') && pagePositon+1 <= pageMaxPosition) {
pagePositon++;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
}
if ($(this).hasClass('previous') && pagePositon-1 >= 0) {
pagePositon--;
$('html, body').stop().animate({
scrollTop: $scrollItems.eq(pagePositon).offset().top
}, 300);
return false;
}
});
//Update position func:
function upPos(){
var fromTop = $(this).scrollTop();
var $cur = null;
$scrollItems.each(function(index,ele){
if ($(ele).offset().top < fromTop + offsetTolorence) $cur = $(ele);
});
if ($cur != null && pagePositon != $cur.data('pos')) {
pagePositon = $cur.data('pos');
}
}
});
//]]>
</script>
</body></html>
