Thank you Jules,
I’ve seen it. But for some reasons a can’t get result EVERY time, EACH time.
I used the following script:
<script>
jQuery(‘form’).on(‘wpcf7cf_hide_group’, function(e) {
if (e.target.getAttribute(‘data-id’)) {
e.target.scrollIntoView();
}
});
</script>
And it works almost every time but not exactly every time.
Eg., it works in respect of group AnonymYN-sub upon hiding group HUDOCResults, but it doesn’t work in respect of the same group AnonymYN-sub upon hiding groups SubmDate and SubmDateExact:
show [HUDOCResults] if [radio-HUDOCResults] is empty “”
show [AnonymYN-sub] if [radio-HUDOCResults] equals “1”
show [SubmDate] if [radio-SubmDateExact] is empty “”
show [SubmDateExact] if [radio-SubmDateExact] is empty “”
show [AnonymYN-sub] if [date-SubmDate] function “more3m”
and if [radio-SubmDateExact] not empty “”
show [AnonymYN-sub] if [date-SubmDate] function “less3m”
and if [radio-SubmDateExact] equals “3”
I’m almost sure that there is smth wrong with my script and/or conditions but can not undrstand what exactly.
Thank you!
I believe that the problem is the following. Upon hiding a previus group, it scrolls into view of that previuos group but not the new one — shown. As a result, if there were 2 or more groups hidden at the same time, it scrolls to the position on the second previous group which is always not where the new shown group begins (it begins where the privious first group started). What I need is to scroll into view of the new, shown, group upon hiding previous one(s). I don’t want to do it upon showing this new group because sometimes I show a group without hiding the previous one, right after the end one the previuos one, so I don’t need any scrolling (down) since they both represent one continuing question.
Well, the autoscroll thing is an interesting problem I think. I guess I could built this into the plugin as an option.
But to make it understandable I think I should keep it simple. What about this rule:
Whenever a group changes it’s state from hidden to visible, get a collection of all groups that changed their state => let’s say: [A, B, C].
Get the first group in this collection (the one that occurs as first group on the page) => Let’s say A.
Check if A is visible in the viewport. If A is not visible in the viewport, scroll A into view.
Would this solve your problem?
Jules,
Thank you for the response!
Yes, I believe that this problem is worth solving. And maybe a solution shoud not be just an option. Because even if I hide only one group and at the same time open only one another group, and this is the basic operation, BUT my previous ‘question’ (text, question with explanations — content of the group) is large and with a tab (radio, date or smth else) at the bottom, the chances that the next group (or at least the beginning of the next group) will not be visible are great.
As to your question, this solutions solves the genuine problem. It would not give every time the most beautuful result, which is the scrolling to exactly the very beginning of the new-shown group (or the first of them if there are more then one), I belive. Because sometimes the new-shown group would be visible (no need for scrolling to be visible) but in some unpredictable place (a visitor should find on the screen). Is there a chance to scrollIntoView, i.e. to exactly the very beginning of a new group, upon showing it, IF there are no other groups shown? But, again, it solves the real probem — that sometimes, when a hidden group was very extensive and a shown one is quite short, I don’t see this new group on the screen at all (because it’s completely ‘above the screen’).
As a temporary solution I have added many scrips)) Eg. the following one for the described situation with hiding groups SubmDate and SubmDateExact (upon showing AnonymYN-sub it scrolls to the place where SubmDate started but not SubmDateExact — they were hided at the same time):
<script>
jQuery(‘form’).on(‘wpcf7cf_hide_group’, function(e) {
if (e.target.getAttribute(‘data-id’) === ‘SubmDate’) {
e.target.scrollIntoView();
}
});
</script>
What I do not understand is why this doesn’t work (and how to make it work):
[group group-0]Enter some text here, and the form should automatically scroll down to group-1<br>
[text txt][/group]
[group group-1]Group 1[/group]
<script>
jQuery(‘form’).on(‘wpcf7cf_show_group’, function(e) {
if (e.target.getAttribute(‘data-id’) === ‘group-1’) {
e.target.scrollIntoView();
}
});
</script>
show [group-0] if [txt] is empty “”
show [group-1] if [txt] not empty “”
I think the reason is that the show_group event is triggered when the group starts to show, but at that time the previous group is still visible as well. So the group gets scrolled into view, but then the other group disappears, scrolling group-1 out of view again.
The simplest way to fix this is by adding a timeout, so the scrolling only happens after the states of both groups have changed.
[group group-0]Enter some text here, and the form should automatically scroll down to group-1<br>
[text txt][/group]
[group group-1]Group 1[/group]
<script>
jQuery('form').on('wpcf7cf_show_group', function(e) {
if (e.target.getAttribute('data-id') === 'group-1') {
setTimeout(function(){
e.target.scrollIntoView();
}, 500);
}
});
</script>
Working example: https://conditional-fields-cf7.bdwm.be/form-tester/?hash=5511ac8d3933dc0187d4a7f5cabe8a7f
