stickyVoteButtons shows glitches at top and bottom

[wgrundlingh]

Installed Version: 2.0.15 Environment: Tampermonkey

Current Behaviour

The stickyVoteButtons feature shows a minor displacement when scrolling from the top of a post, with an on-off glitch at the bottom of the post:

---

SOX Errors logged to the browser console -- F12 (if available)

---

Steps to reproduce

---

Features Enabled

["Appearance-addAuthorNameToInboxNotifications","Appearance-answerTagsSearch","Appearance-colorAnswerer","Appearance-fixedTopbar","Appearance-highlightQuestions","Appearance-isQuestionHot","Appearance-markEmployees","Appearance-metaChatBlogStackExchangeButton","Appearance-scrollToTop","Appearance-spoilerTip","Appearance-standOutDupeCloseMigrated","Appearance-tabularReviewerStats","Appearance-topAnswers","Appearance-unspoil","Comments-autoShowCommentImages","Comments-commentReplies","Comments-commentShortcuts","Comments-confirmNavigateAway","Comments-copyCommentsLink","Comments-moveBounty","Comments-showCommentScores","Comments-hiddenCommentsIndicator","Editing-addSBSBtn","Editing-editComment","Editing-editReasonTooltip","Editing-enhancedEditor","Editing-kbdAndBullets","Editing-titleEditDiff","Editing-inlineEditorEverywhere","Flags-flagOutcomeTime","Flags-flagPercentages","Flags-flagPercentageBar","Sidebar-hideHireMe","Sidebar-linkedToFrom","Chat-chatEasyAccess","Chat-renameChat","Voting-betterCSS","Voting-grayOutVotes","Voting-stickyVoteButtons","Voting-disableOwnPostVoteButtons","Extras-linkedPostsInline","Extras-parseCrossSiteLinks","Extras-quickAuthorInfo","Extras-shareLinksMarkdown","Extras-showMetaReviewCount","Extras-copyCode"]

[mezmi]

Thanks for reminding me. I've known about this for a while just never got around to fixing it. We will add it to the list of things to get done.

[shu8]

@wgrundlingh the shift to the right's been fixed in dev 2.0.16 :) but the on off glitch is still there (for now!)

[Sir-Cumference]

Completely ignore the solution I posted before. Here's something better:

function stickcells() {
        var $votecells = $('.votecell');
        $votecells.css('width', '46px');

        $votecells.each(function() {
            var $topbar = $('.topbar'),
                topbarHeight = $topbar.outerHeight(),
                offset = (sox.location.on('/review') ? 60 : 10);

            if ($topbar.css('position') == 'fixed') offset += topbarHeight;

            var $voteCell = $(this),
                $vote = $voteCell.find('.vote'),
                vcOfset = $voteCell.offset(),
                scrollTop = $(window).scrollTop();

            if ($vote.children().last().length && $vote.length && $voteCell.next().length) { //These values strangely alternate between existing and not existing. This if statement insures we only get their values when they exist, so no errors.
                var realHeight = $vote.children(':not(:hidden, .message-dismissable)').last().offset().top + $vote.children(':not(:hidden, .message-dismissable)').last().height() - $vote.offset().top; //Get the original height; the difference between the last child and the first child's position
                var votePos = $vote.offset().top,
                    endPos = $voteCell.next().offset().top + $voteCell.next().height() - 51; //I think a bit above the end of the post (where the "edit", "delete", etc. buttons lie) is a good place to stop the stickiness.
            }

            if (realHeight + vcOfset.top < endPos - 25 && vcOfset.top - scrollTop - offset <= 0) { //Left condition is to get rid of a sticky zone on extremely short posts. Right condition is for scrolling down into the sticky zone from outside.
                if (endPos - realHeight > votePos || endPos - scrollTop - realHeight - offset >= 0) { //Left condition marks the bottom limit for the sticky zone. Right condition is for scrolling up into the sticky zone from outisde.
                    $vote.css({
                        position: 'fixed',
                        top: offset
                    });
                } else {
                    //Stop stickiness when we've scrolled down past the sticky zone.
                    $vote.css({
                        position: 'absolute',
                        top: endPos - realHeight //Leave the button at its bottommost position
                    });
                }
            } else {
                $vote.removeAttr('style');
            }
        });
    }
},

This should fix a lot more bugs.

The problem was that the height of #vote changed whenever the stickiness started (the amount it changed by depends on the post). As a result, scrolling far enough (outside of the "sticky zone") will make #vote stop being fixed, but its height will immediately decrease as well, meaning it can be in the sticky zone again. I created realHeight, which takes the difference between #vote's position and its last child's positions (this doesn't change), and used that instead.

EDIT: Fixed bugs when editing inline

[shu8]

Thanks, I'll get this added in ASAP! :)

…

On 9 Feb 2017 02:08, "IStoleThePies" ***@***.***> wrote: Completely ignore the solution above, I wrote something better: stickyVoteButtons: function() { // Description: For making the vote buttons stick to the screen as you scroll through a post //shu8/Stack-Overflow-Optional-Features#14: //shu8/Stack-Overflow-Optional-Features#28: Thanks @SnoringFrog for fixing this! stickcells(); $(document).on('sox-new-review-post-appeared', stickcells); $(window).scroll(function() { stickcells(); }); function stickcells() { var $votecells = $('.votecell'); $votecells.css('width', '46px'); $votecells.each(function() { var $topbar = $('.topbar'), topbarHeight = $topbar.outerHeight(), offset = (sox.location.on('/review') ? 60 : 10); if ($topbar.css('position') == 'fixed') offset += topbarHeight; var $voteCell = $(this), $vote = $voteCell.find('.vote'), vcOfset = $voteCell.offset(), scrollTop = $(window).scrollTop(); if ($vote.children().last().length && $vote.length && $voteCell.next().find('.fw').length) { //These values strangely alternate between existing and not existing. This if statement insures we only get their values when they exist, so no errors. var realHeight = $vote.children(':not(:hidden, .message-dismissable)').last().offset().top + $vote.children(':not(:hidden, .message-dismissable)').last().height() - $vote.offset().top; //Get the original height; the difference between the last child and the first child's position var votePos = $vote.offset().top, fwPos = $voteCell.next().find('.fw').offset().top + 17; //I think a bit below .fw (where the "edit", "delete", etc. buttons lie) is a good place to stop the stickiness. } if (realHeight + vcOfset.top < fwPos && vcOfset.top - scrollTop - offset <= 0) { //Left condition is for scrolling down into the sticky zone from outside. Right condition is to get rid of a sticky zone on extremely short posts if (fwPos - realHeight > votePos || fwPos - scrollTop - realHeight - offset >= 0) { //Left condition marks the bottom limit for the sticky zone. Right condition is for scrolling up into the sticky zone from outisde. $vote.css({ position: 'fixed', top: offset }); } else { //Stop stickiness when we've scrolled down past the sticky zone. $vote.css({ position: 'absolute', top: fwPos - realHeight //Leave the button at its bottommost position }); } } else { $vote.removeAttr('style'); } }); } }, This should work a lot better. — You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub <#235 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIcNjth1o5AoxLNqxts_m4pBOs3V2KtLks5ranUYgaJpZM4Lk8P8> .

[calebkleveter]

Will the solution fix this bug?

[shu8]

@calebkleveter I can't repro that... how/when does that bug happen?

[shu8]

@Sir-Cumference thanks sooooo much! I've added it into dev 2.0.22 :)

@wgrundlingh it's fixed! :)

[calebkleveter]

To do this I am using smart zoom on an Apple Magic Mouse.

Go to any answer that is long enough to enable sticky vote buttons. Then smart zoom at the middle of the answer.

[shu8]

Ok thanks, I'll look into it when I get a bit more time :)

…

On 13 Feb 2017 22:20, "Caleb Kleveter" ***@***.***> wrote: To do this I am using smart zoom on an Apple Magic Mouse. Go to any answer that is long enough to enable sticky vote buttons. Then smart zoom at the middle of the answer. — You are receiving this because you modified the open/close state. Reply to this email directly, view it on GitHub <#235 (comment)>, or mute the thread <https://github.com/notifications/unsubscribe-auth/AIcNjq0AilGTwEZnZo4ubaNYSt9hXmmSks5rcNc8gaJpZM4Lk8P8> .