Print Page | Close Window

Scroll bar lost after MailChimp form

Printed From: openElement Website
Category:

openElement


Forum Name: openElement General Discussion
Forum Description: A place for general discussion and questions about the software.
URL: https://forums.openelement.uk/en/forum_posts.asp?TID=1875
Printed Date: Jan 25 2022 at 4:45pm
Software Version: Web Wiz Forums 12.04 - http://www.webwizforums.com


Topic: Scroll bar lost after MailChimp form
Posted By: WattJet
Subject: Scroll bar lost after MailChimp form
Date Posted: Sep 30 2021 at 4:57pm
Hi,
I made the site https://personaldatahackathon.com based on the Sensode Black template
I integrated the  tarteaucitron functionality for cookies.
..... and then I tried to integrate a MailChimp form for suscription and automatic management of mail list and marketing automation.

Everything seems to work fine except that the scroll bar and the scroll function are lost after the MailChimp form is closed (whether filling it up or just closing it). If the page is reloaded everything works fine (and the MailChimp form does not apper again), but reloading the page does not come naturaly and the user may perceive the site is blocked and go elsewhere.

Any idea on how to restore the scroll bar and function after the form is closed?

Any guidance will be very welcome
Al_H




Replies:
Posted By: Hobby001
Date Posted: Sep 30 2021 at 5:22pm
Just tested your site and added an email in the screen.  Did not loose scroll bar nor scroll functionnality.

Did you get any error message in the console?


-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: Hobby001
Date Posted: Sep 30 2021 at 5:25pm
Do not forget to clear the browswer's cashe prior to test again

-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: digizar
Date Posted: Sep 30 2021 at 6:05pm
Anyway ...
http://personaldatahackathon.com" rel="nofollow - https://personaldatahackathon.com

I do recommend NOT to use green letters on a dark blue background.
I'm 82 soon, and it is verry hard for me to recognize those green? letters.
So I recommend bright(er) background (perhaps chamois), and dark letters.



-------------
___________________________________
Ask questions only if there is no answer yet.
https://digispics.com/_pers/resger2017.pdf


Posted By: WattJet
Date Posted: Sep 30 2021 at 6:18pm
Thanks for the feedback Digizar


Posted By: WattJet
Date Posted: Sep 30 2021 at 6:19pm
I am clearing the cache beforehand, and I also test it in the private browsing. The point is that I cannot reproduce the error everytime, even if I clear the cache before.

I'll check the console


Posted By: Hobby001
Date Posted: Oct 01 2021 at 1:27pm
Originally posted by digizar digizar wrote:

Anyway ...
http://personaldatahackathon.com" rel="nofollow - https://personaldatahackathon.com

I do recommend NOT to use green letters on a dark blue background.
I'm 82 soon, and it is verry hard for me to recognize those green? letters.
So I recommend bright(er) background (perhaps chamois), and dark letters.


You might also use CSS to add a border around letters

https://css-tricks.com/adding-stroke-to-web-text/" rel="nofollow - https://css-tricks.com/adding-stroke-to-web-text/


-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: WattJet
Date Posted: Oct 01 2021 at 8:31pm
Thanks for the suggestion Hobby001
I'll give it a go!


Posted By: WattJet
Date Posted: Oct 02 2021 at 9:10am
Hobby001,
The effect is great, but it makes it heavier to read.
I understand that the color scheme chosen may lead to some people having trouble to read it. I will add a printable B&W version.

If someone is really interested they will read it. If not, I'd rather keep the "flashy" color scheme chose to attract certain demographics.

In any case, thanks so much for the suggestion



Posted By: WattJet
Date Posted: Oct 02 2021 at 9:15am
Getting back to the scroll blockage I still have not been able to reproduce the issue. It may be linked to the actual process that MailChimp makes to add the contents of the form.

The "funny" thing is that when one clears the cache the tarteaucitron process kicks in properly since it does not find the cookie.....but the mailchimp form does not. I don't know if MailChimp collects the IP or something, but it is a weird behaviour.


Posted By: Hobby001
Date Posted: Oct 02 2021 at 12:38pm
Without access the mailchimp code, it's impossible to understand how they create the issue

-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: WattJet
Date Posted: Oct 02 2021 at 8:35pm
I know... but they just give you a code with a script reference number.....

"<script id="mcjs">!function(c,h,i,m,p){m=c.createElement(h),p=c.getElementsByTagName(h)[0],m.async=1,m.src=i,p.parentNode.insertBefore(m,p)}(document,"script","https://chimpstatic.com/mcjs-connected/js/users/XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX.js");</script>"



Posted By: WattJet
Date Posted: Oct 14 2021 at 3:07pm
Hi again,
I found a way to reproduce the error.
It definitively ocurrs when one closes the mailchimp suscribe window (regardless of having suscribed or not), regardless of filling in the Cookie notice or not

The problem to reproduce the error is that you only get once the mailchimp form. Whether mailchimp achieves this with a tracking pixel  or any other mean, the problem is that once you do it once, you need to clear all browsing data to have it appear again (cleaning session or cookies does not seem to be enough)

I have tried with Chrome, Edge, Firefox and the moment the MailChimp form is closed, the web loses the scroll bar and the ability to scroll down (even with mouse or keyboard). The only way is reloading again the site (and of course this second time there is no form, so no problem)


Posted By: WattJet
Date Posted: Oct 16 2021 at 10:30am
I was thinking that perhaps the issue is due to the location where I placed the script.

I have two external scripts in the site.
- Tarteaucitron: for the cookie consent manager
- Mailchimp:  for the form

The tarteucitron appears as a folder in the same "rank" as the Homepage
The Mailchimp was placed as a script in the head section of the Homepage

Can the issue be that I misplaced the Mailchimp script and that is why it interrumps the scroll?

Any guidance will be very welcome



Posted By: Hobby001
Date Posted: Oct 16 2021 at 10:46am
Try to moving Tarteaucitron before Mailchimp



-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: WattJet
Date Posted: Oct 16 2021 at 11:24am
In the code section, Tarteaucitron is already before Mailchimp:
The order is

- Base >CSS
- Base > CSS-BT-TOP
- preloader > CSS
- Base > Meta mobile
- Base > tarteaucitron
- Maillist-Chimpmail
- Base > JS-BT-TOP



Posted By: Hobby001
Date Posted: Oct 16 2021 at 1:29pm
Tarteaucitron needs to end before mailchimp starts, you will neet to delay mailchimp untill Tarteaucitron ends.
 


-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: Hobby001
Date Posted: Oct 16 2021 at 1:35pm
Maybe starting mailchimp in the use strict

https://www.npmjs.com/package/tarteaucitronjs" rel="nofollow - https://www.npmjs.com/package/tarteaucitronjs



-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: Hobby001
Date Posted: Oct 16 2021 at 1:39pm
https://github.com/AmauriC/tarteaucitron.js/issues/118" rel="nofollow - https://github.com/AmauriC/tarteaucitron.js/issues/118



-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: WattJet
Date Posted: Oct 16 2021 at 2:04pm
Wow!
Thanks so much Hobby001
So.... should I add te code of the issue 118  at the end of the tarteaucitron code?
I basically don't know how to do it... as "holze" says in the Github comments, " it would be cool to have it added to the services"

Anothe additional point,  I installed the tarteaucitron in the Base Layer, and the MailChimp in the Homepage.
Should this be installed in the same layer?


Posted By: Hobby001
Date Posted: Oct 16 2021 at 2:49pm
Sorry but I don't have time to test the solution it may takes hours

Once you publish the site, the layer becomes part of the page.  The difference is that all pages that have the layer attached will receive the code.




-------------
https://denislafrance.net/index.en.htm" rel="nofollow - Anyone who wants to put something online gets hooked by something big


Posted By: WattJet
Date Posted: Oct 16 2021 at 6:06pm
Thanks for the clarification and for all your help.
I'll give it a go and see what happens




Print Page | Close Window

Forum Software by Web Wiz Forums® version 12.04 - http://www.webwizforums.com
Copyright ©2001-2021 Web Wiz Ltd. - https://www.webwiz.net