javascript - Why is my UI scrolling up on the iPhone? -
i'm creating simple javascript app uses mvc , steps user through series of screens using jquery .show() , .hide() elements necessary each view. works great in browser , on ipad, on iphone 4th view shows screen scrolled down top bar invisible. here views
- select workout
- enter weight
- display table
- enter weight <-- here problem
- display table
- ...
i have tried .remove(); of elements, , i've tried window.scrollto(0, 0);, neither seems help. check out app (problem shows on iphone, not tested on other small screens): http://alesh.com/projects/workout/
here whole hairy mess of code:
<!doctype html> <html lang="en"> <head> <meta charset="utf-8"> <title>workoutcalc</title> <meta name="viewport" content="width=device-width, initial-scale=1"> <link href='http://fonts.googleapis.com/css?family=montserrat:400,700' rel='stylesheet' type='text/css'> <link href='http://fonts.googleapis.com/css?family=muli' rel='stylesheet' type='text/css'> <style> * { padding: 0; margin: 0; } body { font-size: 1.4em; } body, textarea, input { font-family: 'muli', sans-serif; background-color: #fff; /*background-color: #cfc;*/ } strong, b, h1 { font-family: 'montserrat', sans-serif; } #wrapper { max-width: 800px; margin-left: auto; margin-right: auto; text-align: center; } form { padding-top: 50px; padding-bottom: 20px; } input { /*border: none;*/ text-align: right; font-size: 1.2em; width: 3em; // don't need if input text, number } input:focus { outline: none; } table, #weightreps, #weightselect { display: inline-block; margin-left: auto; margin-right: auto; border-collapse: collapse; } td { padding: 0 20px; } td:nth-child(2) { font-family: 'montserrat', sans-serif; font-size: 1.6em; background-color: #ff0; } tr { background-color: #ddd; } tr:nth-child(odd) { background-color: #fff; padding: 0; } tr:nth-child(even) > td:nth-child(2) { background-color: #dd0; } tr:first-child { background-color: #444; color: #fff; text-transform: uppercase; /*font-size: .9em;*/ } tr:first-child > td:nth-child(2) { background-color: #330; color: #ff0; } #header { background-color: #009; color: #fff; } h1 { text-align: left; padding: 10px; max-width: 800px; margin-left:auto; margin-right: auto; } #status { float:right; margin: 18px; text-transform: uppercase; font-size: 1.6em; } p { font-size: 1.8em; } table { font-size: 1.4em; } #selectworkout, #workout { margin-top: 50px; width: 100%; } #weigthselect { /*display: inline-block;*/ } #weightselect, #weightreps, #doneexercise { margin-right: auto; margin-left: auto; } .button { display: inline-block; text-align: center; text-transform: uppercase; /*display: inline-block;*/ background-color:#009; color: #fff; border-radius: 10px; padding: 20px 30px; margin: 20px; cursor: pointer; } #donebutton { background-color: #090; padding: 50px 30px; border-radius: 100px; } .wide-button { display: block; } @media screen , (max-width: 600px) { body { font-size: 1em; } #selectworkout, #workout { margin-top: 10px; } #header { font-size: .8em; } } </style> <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script> <script> var model = { // currentworkout: null, // currentexercise: 'sq', // workweight: 230, currentexerciseweights: [], storeexercise: [], // currentexercisesets: [], // currentexercisereps: [], calculatesets: function() { console.log('calculatesets'); switch(this.currentexercise) { case 'sq': this.currentexercisesets = [2, 1, 1, 1, 3]; this.currentexercisereps = [5, 5, 3, 2, 5]; this.currentexerciseweights[0] = 45; this.currentexerciseweights[1] = math.floor(this.workweight * .08) * 5; this.currentexerciseweights[2] = math.floor(this.workweight * .12) * 5; this.currentexerciseweights[3] = math.floor(this.workweight * .16) * 5; this.currentexerciseweights[4] = this.workweight; break; case 'bp': this.currentexercisesets = [2, 1, 1, 1, 3]; this.currentexercisereps = [5, 5, 3, 2, 5]; this.currentexerciseweights[0] = 45; this.currentexerciseweights[1] = math.floor(this.workweight * .1) * 5; this.currentexerciseweights[2] = math.floor(this.workweight * .14) * 5; this.currentexerciseweights[3] = math.floor(this.workweight * .18) * 5; this.currentexerciseweights[4] = this.workweight; break; case 'dl': this.currentexercisesets = [2, 1, 1, 1]; this.currentexercisereps = [5, 3, 2, 5]; this.currentexerciseweights = []; this.currentexerciseweights[0] = math.floor(this.workweight * .08) * 5; this.currentexerciseweights[1] = math.floor(this.workweight * .12) * 5; this.currentexerciseweights[2] = math.floor(this.workweight * .17) * 5; this.currentexerciseweights[3] = this.workweight; break; case 'sp': this.currentexercisesets = [2, 1, 1, 1, 3]; this.currentexercisereps = [5, 5, 3, 2, 5]; this.currentexerciseweights[0] = 45; this.currentexerciseweights[1] = math.floor(this.workweight * .11) * 5; this.currentexerciseweights[2] = math.floor(this.workweight * .14) * 5; this.currentexerciseweights[3] = math.floor(this.workweight * .17) * 5; this.currentexerciseweights[4] = this.workweight; break; case 'pc': this.currentexercisesets = [2, 1, 1, 1, 5]; this.currentexercisereps = [5, 5, 3, 2, 3]; this.currentexerciseweights[0] = 45; this.currentexerciseweights[1] = math.floor(this.workweight * .11) * 5; this.currentexerciseweights[2] = math.floor(this.workweight * .14) * 5; this.currentexerciseweights[3] = math.floor(this.workweight * .17) * 5; this.currentexerciseweights[4] = this.workweight; break; } (var = 0; < this.currentexerciseweights.length; ++) { if (this.currentexerciseweights[i] < 45) { this.currentexerciseweights[i] = 45; } } view.workoutview(); }, currentexercisename: function() { switch (this.currentexercise) { case 'sq': return 'squat'; case 'bp': return 'bench press'; case 'dl': return 'deadlift'; case 'sp': return 'press'; case 'pc': return "power clean"; } }, nextexercise: function() { if (this.currentworkout == 'sqbpdl') { switch (this.currentexercise) { case 'sq': this.currentexercise = 'bp'; break; case 'bp': this.currentexercise = 'dl'; break; case 'dl': this.currentexercise = 'done'; } } else { switch (this.currentexercise) { case 'sq': this.currentexercise = 'sp'; break; case 'sp': this.currentexercise = 'pc'; break; case 'pc': this.currentexercise = 'done'; } } } } // end of model var view = { workoutselectview: function() { $('#workout').hide(); $('#selectworkout').show(); $('#doneexercise').hide(); $('#doneworkout').hide(); }, weightinputview: function() { window.scrollto(0, 0); //resets view on iphone $('#selectworkout').hide(); $('#workout').show(); $('#weightselect').show(); $('#weightinput').focus(); $('#weightreps').hide(); $('#doneexercise').hide(); $('#status').html(model.currentexercisename()); }, workoutview: function() { $('#weightinput').blur(); var setstable = $('<table id="weightrepstable"><tr><td>sets</td><td>weight</td><td>reps</td></tr></table>'); (var = 0; < model.currentexercisesets.length; ++) { setstable.append($('<tr><td>' + model.currentexercisesets[i] + '</td><td>' + model.currentexerciseweights[i] + '</td><td>' + model.currentexercisereps[i] + '</td></tr>')); } $('#weightreps').html(setstable).show(); $('#weightselect').hide(); $('#doneexercise').show(); }, doneworkoutview: function() { $('#selectworkout').hide(); $('#workout').hide(); $('#weightselect').hide(); $('#weightreps').hide(); $('#doneexercise').hide(); $('#status').hide(); $('#doneworkout').show(); console.log(model.storeexercise); } } var controller = { initializeevents: function() { // workout select screen $('#sqbpdl').click(function() { model.currentworkout = 'sqbpdl'; model.currentexercise = 'sq'; controller.doworkout(); }); $('#sqsppc').click(function() { model.currentworkout = 'sqsppc'; model.currentexercise = 'sq'; controller.doworkout(); }); // weight entry screen $('#calculateweightsbutton').click(function() { var weight = $('#weightinput').val(); console.log(weight); if (weight > 0 && weight < 2000) { model.workweight = weight; $('#weightinput').val(null); model.calculatesets(); } }); // weight display screen $('#donebutton').click(function() { model.storeexercise.push({ exercise: model.currentexercise, weight: model.workweight, complete: model.weightok }); model.nextexercise(); if (model.currentexercise == 'done') { view.doneworkoutview(); } else { view.weightinputview(); } }); $('#backbutton').click(function() { $('#weightinput').val(model.workweight); view.weightinputview(); }); // universal // hitting 'return' key trigger whichever button has // class 'default-button' , visible $(window).keypress(function (event) { if (event.which == 13) { $('.default-button:visible').click(); } }); }, doworkout: function() { view.weightinputview(); }, selectworkout: function() { view.workoutselectview(); } } $(function() { var test = false; if (test) { controller.initializeevents(); $('#doneworkout').hide(); model.currentworkout = 'sqbpdl'; model.currentexercise = 'sq'; controller.doworkout(); model.workweight = 240; model.calculatesets(); } else { controller.initializeevents(); controller.selectworkout(); } }); </script> </head> <body> <div id="header"> <div id="status"></div> <h1>warmup calc</h1> </div> <div id="wrapper"> <div id="selectworkout"> <div class="wide-button button" id="sqbpdl">squat · bench press · deadlift</div> <div class="wide-button button" id="sqsppc">squat · press · power clean</div> </div> <div id="workout"> <div id="weightselect"> <p> <input id="weightinput" size="5" step="5" min="45" max="2000"type="number" > lbs. </p> <div class="button default-button" id="calculateweightsbutton">go</div> </div> <div id="weightreps"></div> <div id="doneexercise"> <div class="button" id="backbutton">< back</div> <div class="button default-button" id="donebutton">done</div> <!-- <div class="button" id="doneouchbutton">done: !!</div> --> </div> </div> <div id="doneworkout"> <p>done!</p> </div> </div> </body> </html>
Comments
Post a Comment