Click anywhere to close this dialog

Farewell

Great is the art of beginning, but greater is the art of ending
Henry Wadsworth Longfellow

I announce that I cease all development and activity in the programming universe indefinitely. My career has reached the turning point I was not expecting for at least another year, leaving me highly off guard and without laid-out plans for this hobby's continuity. I have begun a 5-year residency program in Neurosurgery which is clearly not compatible, time-wise, with programming.

I gave in all my passion for developing, and you gave me back your loyalty and trust, even when I did not deserve that much. Now it is the time for payback. I release all my present and past work as Open Source software, in the hope some talented developer will continue maintaining and expanding my vision of a modern, sleek forum software. The intrinsic flexibility of MyBB is the true hidden gem of an otherwise outdated codebase; I do hope the project can continue and be updated complying to the latest coding standards.

I hereby thank Euan, kawaii, andrewjs18, Ben, Matt, Omar G., effone, Eric J., Devilshakerz, Wildcard, JordanMussi and all the other team members I have had the opportunity to work with when I was a MyBB team member. I thank Tomm M, my mentor, who inspired me to pick up coding with his piece-of-art plugins. And finally, I thank all of you MyBBoost subscribers who have helped me getting through my toughest university years economically.

Yours sincerely, Filippo

Build a Google-like scroll-to-unlock button for your MyBB privacy policy

11 Aug 2018 Edited
#1
EU's GDPR forced the whole websites world to update privacy policies and let us – the users – decide how our data is stored and used by the Big Brother universe we are used to live in. If you are a forum manager you may already have heard of Amnesia, an extension born to make MyBB forums compliant to EU's regulations; that's what MyBBoost is running at the moment.

Some of you asked me how to replicate that scroll-to-unlock design you can see the very first time you register here on MyBBoost; not only to ensure their users have read the whole policy, but also to add a bit of interactivity and style to their policies. This tutorial is meant to answer the question. The final result:

[Image: auBsVku.gif]

At the end of the day, simplicity is what cares the most. And to achieve such effect is very easy indeed. Here's the JS script I have built: you can add it at the end of the help document you are using with Amnesia, and voilà. You are done.

<script type="text/javascript">
$(document).ready(function() {
    var button = $('#accept');
    button.attr('disabled', true).val('Unlock by scrolling to the bottom');
    $('#policyContainer').on('scroll', function() {
        if($(this).scrollTop() + $(this).innerHeight() + 40 >= $(this)[0].scrollHeight) {
            button.removeAttr('disabled').val('Accept and continue');
        }
    });
});
</script>
Let's break that down to the crucial pieces you'll most likely need to adapt to your theme in order to make it work.

var button = $('#accept');
This is the target button which will change its state when scrolled down to the bottom of the page or DOM element. Either you change it to your actual button's id, or you change the button id to #accept. You decide.

$('#policyContainer')
Unsurprisingly, you will need to set up a scrolling listener and attach it to either the whole document or an element. I have decided to create my own scrollable container to let the button be always visible to the user, so they will actually see the button changing color and text as soon as they reach the end of the container; but you can also attach that to $(document) if you want to change the button's appearance when the whole page is scrolled down.

$(this).scrollTop() + $(this).innerHeight() + 40 >= $(this)[0].scrollHeight
Finally, this is the condition which will detect when the end of the document/element will be reached. 40 is a "safe margin" option I have added to change the button state when the user has scrolled down to the end minus 40 pixels from the real end – because users might not actually reach the true end of the container or page. You can tweak it to an higher or lower number depending on your needs.
Tamil Selvan and phpkiller like this post
Tamil Selvan 27 Mar 2019
#2
sir actually how to add this & in which file have to add this code
Shade 27 Mar 2019
#3
Hello, please read the post carefully. Everything is written there.