Question about Navigation Tree Above Quick Reply

[Shaliza]

Hello:

I had previously asked a question about duplicating the Navigation Tree and was helped by Retread in this thread.  

support.proboards.com/thread/661128/coding-duplicate-navigation-last-thread

Sorry to be a pain again, but one of my members suggested having the Navigation Tree duplicated above the Quick Reply Box as opposed to below (above the Shoutbox) as it would provide easier access when you're at the bottom of a thread. 

I tried to make this change by replacing "shout box" with "quick-reply" but it didn't work. This is the coding I currently have. 


<script type="text/javascript">
   $(document).ready(function(){
       var navTreeTop = $('#navigation-tree').offset().top + $('#navigation-tree').height();
       $(window).scroll(function(){
           if($(window).scrollTop() > navTreeTop && !$('#navigation-placeholder').length){
               $('#navigation-tree').before('<div id="navigation-placeholder"></div>').insertBefore('.shoutbox.container.full');
               $('#navigation-placeholder').height($('#navigation-tree').height()).css('margin-bottom',$('#navigation-tree').css('margin-bottom'));
           } else if($(window).scrollTop() < navTreeTop && $('#navigation-placeholder').length) {
               $('#navigation-tree').insertAfter('#navigation-placeholder');
               $('#navigation-placeholder').remove();
           }
       });
   });
</script>

Any help is greatly appreciated. Thank you!  

[Retread]

Mar 14, 2020 19:16:26 GMT -8 Shaliza said:

I tried to make this change by replacing "shout box" with "quick-reply" but it didn't work.

You had the right idea but there's a bit more to the puzzle.

Instead of targeting an element which has the three classes assigned to it, shoutbox, container, and full:
.shoutbox.container.full
We'll target an element which has the classes container and quick-reply assigned to it:
.container.quick-reply

So the script will now look like this:

<script type="text/javascript">
    $(document).ready(function(){
        var navTreeTop = $('#navigation-tree').offset().top + $('#navigation-tree').height();
        $(window).scroll(function(){
            if($(window).scrollTop() > navTreeTop && !$('#navigation-placeholder').length){
                $('#navigation-tree').before('<div id="navigation-placeholder"></div>').insertBefore('.container.quick-reply');
                $('#navigation-placeholder').height($('#navigation-tree').height()).css('margin-bottom',$('#navigation-tree').css('margin-bottom'));
            } else if($(window).scrollTop() < navTreeTop && $('#navigation-placeholder').length) {
                $('#navigation-tree').insertAfter('#navigation-placeholder');
                $('#navigation-placeholder').remove();
            }
        });
    });
</script>

This will move the Navigation Tree to before the Quick Reply after its original position has been scrolled off the screen.

Of course, this will only happen on pages which have a Quick Reply.

[Shaliza]

Thanks so much, Retread. That worked perfectly. I really appreciate the help.

I had the container part behind quick reply as opposed to before. But I learned something new today and will put it to good use!

Thanks again! *hugs*

[Retread]

Mar 14, 2020 20:59:22 GMT -8 Shaliza said:

I had the container part behind quick reply as opposed to before.

This works:
.insertBefore('.container.quick-reply');
This also works:
.insertBefore('.quick-reply.container');
This will not work:
.insertBefore('.quick-reply.container.full');

The div containing the Quick Reply does not have the class full assigned to it.

[Shaliza]

Thanks again, Retread. I really appreciate the help.