Comments (5)
well that's easy:
var LiveForm = {
options: { //existing
// vetical screen offset in px for element with error that receives focus after validation. Used when fixed navbar menu which may otherwise obscure the element in focus
focusScreenOffset: 100,
...
elem.focus(); //existing
if(elem.getBoundingClientRect().top < LiveForm.options.focusScreenOffset){/
window.scrollBy (0, elem.getBoundingClientRect().top - LiveForm.options.focusScreenOffset);
}
what do you think?
from live-form-validation.
Focusing the element (on master branch) is done here: https://github.com/Robyer/nette-live-form-validation/blob/master/live-form-validation.js#L705 So yes, you found same line in v1.8.1.
But I don't know how is this usually solved. Browser itself handles scrolling to that element, so you need to either override the browser's default behavior somehow (if that's possible) or scroll manually your +100px lower after the above mentioned line.
Is your scrollTo method working? Also, I think you should scoll only when the item isn't visible on the page already - so maybe remember scroll position, then call focus, then get new scroll position, and if it changed, then scroll down additional 100px?
I don't have time for this, so you let me know when you find reliable solution for this problem. Thanks.
from live-form-validation.
scrollto works fine for me (on FF), tho I'm not sure how cross browser compatible it is. good point about if the element is already in view - i'll look into it when i get some time
from live-form-validation.
this works:
elem.focus(); //existing
if(elem.getBoundingClientRect().top < 100){
window.scrollBy (0, elem.getBoundingClientRect().top - 100);
}
reportedly ie8 and above. i just need to figure out how to pass a default offset value from Liveform optons:[ ]
from live-form-validation.
Slighly changed and commited, thanks ;-)
from live-form-validation.
Related Issues (20)
- Little problem with form validation HOT 13
- Remove form's "hasError" property? HOT 6
- Create NPM package HOT 10
- QA - apply eslint
- toggle not work HOT 2
- E-mail validation
- Validator max & min not working at the same time HOT 1
- Why there is check for validity.valid if all rules came true?
- Support minified version
- Empty messages after hidden inputs HOT 1
- Required date picker HOT 2
- Checkboxlist first input only enable HOT 1
- Roadmap - 2.0.0 HOT 4
- Failed to execute 'insertBefore' on 'Node' HOT 2
- RadioList validation error is removed only when you select the first list item HOT 1
- Using Nette.validateForm for check only HOT 1
- Check if form is valid HOT 2
- Support for Nette 3 HOT 5
- How to pass custom variables with es6 module? HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from live-form-validation.