stevenhaskell/What_Are_You_Lifting_App
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

Fixed Scroll adjusting

Browse Source 
Included jQuery that restores the scroll after leaving the weight input.
This commit is contained in:
Steven Haskell
2018-10-18 13:02:21 -04:00
parent 0e1f7c3009
commit 2306e8aa85
3 changed files with 18 additions and 37 deletions
Download Patch File Download Diff File Expand all files Collapse all files

BIN
.DS_Store vendored
View File

Binary file not shown.

4
index.html
View File

@@ -7,14 +7,12 @@
<meta name="description" content=""> <meta name="description" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1,user-scalable=0"/>
<meta name="apple-mobile-web-app-capable" content="yes"> <meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-title" content="Lift It &#x1F4AA">
<meta name="application-name" content="Lift It &#x1F4AA"> <meta name="application-name" content="Lift It &#x1F4AA">
<link rel="manifest" href="site.webmanifest"> <link rel="manifest" href="site.webmanifest">
<link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png"> <link rel="apple-touch-icon" sizes="180x180" href="images/apple-touch-icon.png">
<link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png"> <link rel="icon" type="image/png" sizes="32x32" href="images/favicon-32x32.png">
<link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png"> <link rel="icon" type="image/png" sizes="16x16" href="images/favicon-16x16.png">
<link rel="manifest" href="/site.webmanifest">
<link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5"> <link rel="mask-icon" href="images/safari-pinned-tab.svg" color="#5bbad5">
<meta name="msapplication-TileColor" content="#cdff00"> <meta name="msapplication-TileColor" content="#cdff00">
<meta name="theme-color" content="#ffffff"> <meta name="theme-color" content="#ffffff">
@@ -93,7 +91,7 @@
<div class="b-calulatorinputs__inputcontainer"> <div class="b-calulatorinputs__inputcontainer">
<div class="b-calulatorinputs__weightinput"> <div class="b-calulatorinputs__weightinput">
<label for="Weight">WEIGHT (LBS)</label> <label for="Weight">WEIGHT (LBS)</label>
<input type="number" onfocus="saveScroll()" onblur="restoreScroll()" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight"> <input type="number" inputmode="numeric" pattern="[0-9]*" class="b-infoentry__input input-element input-weight" name="Weight" placeholder="What are you lifting? (LBS)" id="Weight">
<input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()"> <input type="button" class="b-infoentry__button submit-element input-calculate" name="Calculate" value="LIFT" onclick="startcalc()">
</div> </div>
<a href="#options"> <a href="#options">

49
js/Weight Calculation Script-Edited-Jquery-V4.js
View File

@@ -106,50 +106,33 @@
// The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area // The optional number (800) specifies the number of milliseconds it takes to scroll to the specified area
$('html, body').animate({ $('html, body').animate({
scrollTop: $(hash).offset().top scrollTop: $(hash).offset().top
}, 800, function(){ }, 500, function(){
// Add hash (#) to URL when done scrolling (default click behavior) // Add hash (#) to URL when done scrolling (default click behavior)
window.location.hash = hash; window.location.hash = hash;
}); });
} // End if } // End if
}); });
});
//Saves scroll position on focus and restores //Saves scroll position on focus and restores
var savedScrollTop var savedScrollTop;
function saveScroll() { function saveScroll() {
var savedScrollTop = jQuery(document).scrollTop(); // save scroll position savedScrollTop = jQuery(document).scrollTop();
console.log(savedScrollTop); console.log(savedScrollTop);
} }
function restoreScroll(savedScrollTop){
function restoreScroll(){
jQuery("html, body").animate({ jQuery("html, body").animate({
scrollTop: savedScrollTop scrollTop: savedScrollTop
}, 800).offset().top; }, 250).offset().top;
} }
//Failed scroll restore functions //jQuery event watching
jQuery(".input-weight").on("focus", function(){
// jQuery("#Weight").blur(function(event) { saveScroll();
// $("html, body").animate({ });
// scrollTop: savedScrollTop jQuery(".input-weight").on('blur', function(){
// }, 800).offset().top; restoreScroll()
// }); });
});
/*function restoreScroll() {
$("a").on('click', function(event) {
jQuery(window).scrollTop(savedScrollTop);*/
/* window.scrollTo({
top: "savedScrollTop",
behavior: "smooth"
}); // restore it*/
/*var savedScrollTop = $(document).scrollTop(); // save scroll position
<code that changes focus goes here>
$(document).scrollTop(savedScrollTop ); // restore it*/
// });