search

soscripted / sox

Stack Overflow Extras: a userscript for the Stack Exchange websites to add a bunch of optional toggle-able features
http://stackapps.com/q/6091/
MIT License
72 stars 15 forks source link

Fix Top Bar Position not fixed in this version #74

Closed fixer1234 closed 7 years ago

fixer1234 commented 8 years ago

Installed Version: 2.0.0 | Environment: undefined

Expected Behavior

How do you expect the feature to work? Top bar position removed from available space so other content posted to the page gets posted below it instead of behind it.

Actual Behavior

How is the feature currently behaving? Content is posted behind the top bar (hidden).

Error Logs

SOX errors are logged to the browser console, if possible, please post those here.

Steps to reproduce

What steps did you take to reproduce the issue? Clicked on a comment from my profile page. When it was rendered in context, the top of the comment was chopped off by the top bar.

top bar error

mezmi commented 8 years ago

Likely a padding issue, I will look into this a bit more tomorrow.

Both @shu8 and I have been extremely busy and unable to work on this much.

mezmi commented 8 years ago

The topbar is fixed and is performing as it should, the reason it looks different is in the new CSS I removed the rule that explicitly set the background color to solid black.

fixer1234 commented 8 years ago

@enki-code, I had to remove v2.0.0 because the constant token nag screen made it impractical to use. So I'm not sure if your comment means that this was working as intended in terms of positioning.

The issue is specific to going directly to a post via a link. In that case, the page is rendered so that the linked post is at the top of the window. The page rendering engine doesn't seem to be aware that the top bar is occupying space that it thinks is available for page content, so the two end up superimposed.

Comments were the main issue because questions and answers have enough padding above them that they tend to still be readable. Two lines of comment get hidden behind the top bar. So even if the top bar background is transparent, all of the top bar content will still make it necessary to scroll comments.

I'll check this again with the next SOX release, but it sounds like this might be just a limitation of what you have to work with?

mezmi commented 8 years ago

Oh, I get what you're saying. I misunderstood what you said. That's my fault, I probably forgot a padding rule or something. I'll get this fixed.

fixer1234 commented 8 years ago

Update for v2.0.1: symptom still the same.

fixer1234 commented 7 years ago

v2.0.1 fixes this issue. I can also confirm that it fixes the related problem with the close dialog box on the review queue (#103).

fixer1234 commented 7 years ago

Spoke too soon. This appears to be another erratic problem. Top Bar works properly most of the time, but not always. When it doesn't work properly, it appears to be repeatable. Console output:

The connection to wss://qa.sockets.stackexchange.com/ was interrupted while the page was loading. full.en.js:1:6864
GET 
http://superuser.com/questions/1131135/how-can-label-an-x-axis-in-excel-with-words-that-correspond-to-a-number-in-the-d#comment1621683_1131135 [HTTP/1.1 200 OK 137ms]
GET 
http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js [HTTP/1.1 304 Not Modified 33ms]
GET 
http://cdn.sstatic.net/Js/stub.en.js [HTTP/1.1 304 Not Modified 15ms]
GET 
http://cdn.sstatic.net/Sites/superuser/all.css [HTTP/1.1 304 Not Modified 17ms]
GET 
https://i.stack.imgur.com/DPd3M.jpg [HTTP/1.1 304 Not Modified 26ms]
GET 
https://www.gravatar.com/avatar/f7e8675f07961b1b044eee1ccd8ff261 [HTTP/2.0 304 Not Modified 18ms]
GET 
http://static.adzerk.net/ados.js [HTTP/1.1 304 Not Modified 20ms]
GET 
https://www.google-analytics.com/analytics.js [HTTP/2.0 304 Not Modified 25ms]
GET 
http://edge.quantserve.com/quant.js [HTTP/1.1 304 Not Modified 34ms]
GET 
http://b.scorecardresearch.com/beacon.js [HTTP/1.1 200 OK 19ms]
GET 
http://cdn.sstatic.net/img/share-sprite-new.svg [HTTP/1.1 304 Not Modified 17ms]
GET 
http://cdn.sstatic.net/Sites/superuser/img/sprites.svg [HTTP/1.1 304 Not Modified 15ms]
GET 
http://cdn.sstatic.net/img/favicons-sprite16.png [HTTP/1.1 304 Not Modified 16ms]
GET 
http://b.scorecardresearch.com/b [HTTP/1.1 204 No Content 27ms]
GET 
http://cdn.sstatic.net/Js/full.en.js [HTTP/1.1 304 Not Modified 19ms]
GET 
http://cdn.sstatic.net/Js/inline-tag-editing.en.js [HTTP/1.1 304 Not Modified 16ms]
XrayWrapper denied access to property "ready" (reason: value is callable). See https://developer.mozilla.org/en-US/docs/Xray_vision for more information. Note that only the first denied property access from a given global object will be reported. sox.common.js:18:0
GET 
http://engine.adzerk.net/ados [HTTP/1.1 200 OK 99ms]
GET 
https://maxcdn.bootstrapcdn.com/font-awesome/4.5.0/css/font-awesome.min.css [HTTP/2.0 304 Not Modified 15ms]
SOX:  initializing SOX dialog sox.common.js:63:17
GET 
https://www.google-analytics.com/collect [HTTP/2.0 200 OK 27ms]
GET 
http://pixel.quantserve.com/pixel;r=460467399;a=p-c1rF4kxgLUzNc;fpan=0;fpa=P0-2087723673-1465952398859;ns=0;ce=1;cm=;je=1;sr=2048x1152x24;enc=n;dst=1;et=1475683123439;tzo=240;ref=http%3A%2F%2Fsuperuser.com%2Fusers%2F364367%2Ffixer1234%3Ftab%3Dactivity;url=http%3A%2F%2Fsuperuser.com%2Fquestions%2F1131135%2Fhow-can-label-an-x-axis-in-excel-with-words-that-correspond-to-a-number-in-the-d%23comment1621683_1131135;ogl=type.website%2Cimage.http%3A%2F%2Fcdn%252Esstatic%252Enet%2FSites%2Fsuperuser%2Fimg%2Fapple-touch-icon%402%252Epng%3Fv%3De869e4459439%2Ctitle.How%20can%20label%20an%20x%20Axis%20in%20excel%20with%20words%20that%20correspond%20to%20a%20number%20in%20the%20d%2Cdescription.For%20example%252C%20I%20want%20to%20create%20a%20bar%20chart%20showing%20employee%20progress%20through%20stag%2Curl.http%3A%2F%2Fsuperuser%252Ecom%2Fquestions%2F1131135%2Fhow-can-label-an-x-axis-in-excel-with-wor [HTTP/1.1 200 OK 42ms]
SOX:  injecting features into dialog sox.common.js:63:17
observe: .inbox-dialog sox.common.js:84:13
observe: .comment sox.common.js:84:13
SOX Access Token: SET sox.common.js:46:1
observe: #wmd-redo-button-1131135 sox.common.js:84:13
observe: #wmd-redo-button sox.common.js:84:13
observe: [id^="wmd-redo-button"] sox.common.js:84:13
observe: .image-upload form sox.common.js:84:13
observe: .share-tip sox.common.js:84:13
GET 
XHR 
https://query.yahooapis.com/v1/public/yql [HTTP/1.1 200 OK 70ms]
GET 
XHR 
https://api.stackexchange.com/2.2/users/648244;364367 [HTTP/1.1 200 OK 82ms]
GET 
XHR 
https://api.stackexchange.com/2.2/questions [HTTP/1.1 400 Bad Request 74ms]
GET 
https://rawgit.com/shu8/SE-Answers_scripts/master/dupeClosedMigratedCSS.css [HTTP/2.0 304 Not Modified 33ms]
GET 
XHR 
https://api.stackexchange.com/users/648244 [HTTP/1.1 400 Bad Request 28ms]
vwof plugin, exception in ScreenWaveMedia: TypeError: video_data is undefined vwof.js:67:0
GET 
http://cdn.sstatic.net/Js/post-validation.en.js [HTTP/1.1 304 Not Modified 16ms]
GET 
http://cdn.sstatic.net/Js/external-editor.en.js [HTTP/1.1 304 Not Modified 18ms]
GET 
XHR 
http://superuser.com/posts/1131135/ivc/77c8 [HTTP/1.1 204 No Content 26ms]
GET 
http://static.adzerk.net/Extensions/adFeedback.js [HTTP/1.1 304 Not Modified 26ms]
GET 
http://static.adzerk.net/Extensions/adFeedback.css [HTTP/1.1 304 Not Modified 40ms]
no element found 77c8:1:1
GET 
http://static.adzerk.net/Advertisers/c3b375f635f64aada31657a8aa71f148.png [HTTP/1.1 304 Not Modified 20ms]
GET 
http://engine.adzerk.net/i.gif [HTTP/1.1 200 OK 57ms]
GET 
https://qa.sockets.stackexchange.com/ [HTTP/1.1 101 Switching Protocols 105ms]
GET 
http://cdn.sstatic.net/Js/wmd.en.js [HTTP/1.1 304 Not Modified 15ms]
fire: #wmd-redo-button sox.common.js:91:29
fire: [id^="wmd-redo-button"] sox.common.js:91:29
GET 
http://cdn.sstatic.net/Sites/superuser/img/wmd-buttons.svg [HTTP/1.1 304 Not Modified 17ms]
GET 
XHR 
https://l.ghostery.com/api/page/ [HTTP/1.1 204 No Content 26ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 31ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 33ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 33ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 38ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 40ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 41ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 50ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 51ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 53ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 59ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 65ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 73ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 81ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 84ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 84ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 92ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 93ms]
GET 
XHR 
https://l.ghostery.com/api/census [HTTP/1.1 204 No Content 102ms]
mutating the [[Prototype]] of an object will cause your code to run very slowly; instead create the object with the correct initial [[Prototype]] value using Object.create panel.js:5816:3
Synchronous XMLHttpRequest on the main thread is deprecated because of its detrimental effects to the end user's experience. For more help http://xhr.spec.whatwg.org/ panel.js:3525:3
not well-formed messages.json:1:1

There are a bunch of Ghostery entries, but the site is whitelisted, so there's no action.

The problem examples have been comment links from the profile page. When they open, most of the comment is hidden behind the top bar.

I do have Favorites Enhancer loaded, which wasn't the case when I previously tested this feature. I disabled Favorites Enhancer and reloaded Firefox, but the problem persists so it looks like the issue isn't related to Favorites Enhancer.

shu8 commented 7 years ago

We'll look into this and other issues when we get some more time again @fixer1234 :)

fixer1234 commented 7 years ago

@shu8 Wasn't sure if this was an issue affected by any of the recent changes. With 2.0.2 DevE, clicking on a comment link is still an issue.

su fix top bar1

On this one, the comment is totally hidden. If this wasn't on the list for these latest rounds, nevermind.

shu8 commented 7 years ago

@fixer1234 yeah, still a known bug. It's annoying because it's only Firefox that it breaks in 😠

this might take a while... :/

Sir-Cumference commented 7 years ago

@shu8 Closest thing I got to a solution:

fixedTopbar: function() {
        // Description: For making the topbar fixed (always stay at top of screen)
        // Written by @IStoleThePies (https://github.com/soscripted/sox/issues/152#issuecomment-267463392) to fix lots of bugs and compatability issues
        // Modified by shu8

        //Add class to page for topbar, calculated for every page for different sites.
        //If the Area 51 popup closes or doesn't exist, $('#notify-table').height() = 0
        var paddingToAdd = ($('#notify-table').length ? $('#notify-table').height() : '') + $('.topbar').height() + 'px';
        GM_addStyle('.fixed-topbar-sox { padding-top: ' + paddingToAdd + '}');

        if (sox.site.type == 'chat') { //For some reason, chats don't need any modification to the body
            $('.topbar').css({
                'position': 'fixed',
                'z-index': '900'
            });
        } else if (!sox.location.on('askubuntu.com')) { //Disable on Ask Ubuntu
            $('body').addClass('fixed-topbar-sox');

            $('.topbar').css({
                'position': 'fixed',
                'z-index': '900',
                'margin-top': '-34px'
            });

            //Area 51 popup:
            $('#notify-table').css({
                'position': 'fixed',
                'z-index': '900',
                'margin-top': '-65px'
            });

            //Fix answers
            $(':target').css({
                'display' : 'block',
                'position' : 'relative',
                'top' : '-' + paddingToAdd,
                'visibility': 'hidden'
            });

            //Ensure that MathJax doesn't screw anything up on comments
            MathJax.Hub.Queue(function () {$('html, body').animate({scrollTop:$("#comment-" + window.location.hash.match(/^#comment(\d+)_/)[1]).offset().top - 34}, 0)});

            sox.helpers.observe('#notify-container,#notify--1', function() { //Area51: https://github.com/soscripted/sox/issues/152#issuecomment-267885889
                $('body').css('padding-top', $('.topbar').height() + 'px');
            });
        }
    },

This seems to fix the problem. However, it somehow keeps setting all the SOX features to default. No idea how to fix that. :/

shu8 commented 7 years ago

@IStoleThePies thanks but unfortunately it doesn't seem to fix this problem :/

BTW, what is the $(':target') selector supposed to reference? I don't think it applies that CSS to anything atm.

And I've fixed that auto-default issue in dev aw..

Sir-Cumference commented 7 years ago

@shu8 It applies to the targeted element in the hash (the stuff in the url after the hashtag). Basically, if you take the url of a page and add "#" and an element's id, it will take you to the element with that id. For example, going to the url https://github.com/soscripted/sox/issues/74#partial-timeline-marker will take you to the element with the id "#partial-timeline-marker".

This is predictable and simple in the case of answers (the target element is denoted as :target in CSS), but strangely, the url does not contain the id of any element when going to comments. It instead contains some keyword like (for example) "#comment15356_4660" when going to a comment with the id "#comment-15356". I assume some JS determines which element the url is referring to.

Anyway, :target wouldn't work for comments since there is some JS going on, so I tried to use regular expressions, but had to come up with something completely different for the comments. Since it's not working anymore, I'll have to try and find another way when I have the time :/

shu8 commented 7 years ago

Ahh that makes sense. I appreciate you taking the time to try and fix this! Thanks!

I'll see if messing around with the margin of the answers works. We could try pushing the answers down if there is a comment hash thing detected in the URL...

On 20 Dec 2016 6:45 p.m., "IStoleThePies" notifications@github.com wrote:

@shu8 https://github.com/shu8 It applies to the targeted element in the hash (the stuff in the url after the hashtag). Basically, if you take the url of a page and add "#" and an element's id, it will take you to the element with that id. For example, going to the url https://github.com/soscripted/sox/issues/74#partial-timeline-marker will take you to the element with the id "#partial-timeline-marker".

This is predictable and simple in the case of answers (the target element is denoted as :target in CSS), but strangely, the url does not contain the id of any element when going to comments. It instead contains some keyword like (for example) "#comment15356_4660" when going to a comment with the id "#comment-15356". I assume some JS determines which element the url is referring to.

Anyway, :target wouldn't work for comments since there is some JS going on, so I tried to use regular expressions, but had to come up with something completely different for the comments. Since it's not working anymore, I'll have to try and find another way when I have the time :/

— You are receiving this because you were mentioned. Reply to this email directly, view it on GitHub https://github.com/soscripted/sox/issues/74#issuecomment-268323690, or mute the thread https://github.com/notifications/unsubscribe-auth/AIcNjkkN5ej89D-HTdvOHJPDsPDw8L2Aks5rKCJOgaJpZM4JDveH .

Sir-Cumference commented 7 years ago

@shu8 I'd suggest Googling "fixed header anchor" and checking out the first few links (like this one). StackOverflow has a lot of different suggestions (none of which I've figured out how to apply).

shu8 commented 7 years ago

@fixer1234 @IStoleThePies I've finally got this fixed in dev ay! :D

If you're curious...:

        function adjust() {
            setTimeout(function() {
                sox.debug('fixedtopbar adjust function running');
                var id = window.location.hash.match(/^#comment(\d+)_/)[1];
                sox.debug('fixedtopbat comment in hash and getBoundingClientRect', $('#comment-' + id)[0], $('#comment-' + id)[0].getBoundingClientRect());
                if ($('#comment-' + id)[0].getBoundingClientRect().top < 30) {
                    window.scrollBy(0, -34);
                    sox.debug('fixedtopbar adjusting');
                }
            }, 10);
        }

        if (location.href.indexOf('#comment') > -1) adjust();
        $(window).bind('hashchange', function() {
            adjust();
        });

A bit hacky, but it does the job 😃

Sir-Cumference commented 7 years ago

@shu8 Hmm...it doesn't seem to work on the answers, and it shifts around on comments when MathJax fully loads (I originally wrong a line to try and fix that). :/

fixer1234 commented 7 years ago

@shu8 Just tried this with a couple of comments and a couple of answers. All worked correctly for me. Interesting, though, that the spacing is different. After loading the page, SOX fine-tunes the positioning, sometimes with several little scrolls. Answers end up tight against the topbar (completely visible but no blank space). Comments end up with a cushion of several blank lines above them. But I'm happy.

shu8 commented 7 years ago

@IStoleThePies hmm, could you post a link to an answer that doesn't work? I can't reproduce that :/

Also, the MathJax section shouldn't be needed (I think) because now I'm just checking for whether the top of the comment is in view...

Sir-Cumference commented 7 years ago

@shu8 Here's an example.

shu8 commented 7 years ago

@IStoleThePies ah -- I thought you meant the problem was it doesn't shift for comments on answers! OK, reproduced, I'm working on a fix now :)

shu8 commented 7 years ago

@IStoleThePies should be fixed in dev az :)

Sir-Cumference commented 7 years ago

@shu8 Almost perfect, but it seems to jump on comments like this. :/

fixer1234 commented 7 years ago

@shu8 I spoke to soon. This works most of the time, but I've run into a few cases where it doesn't. Sometimes, clicking on a comment in the inbox opens the thread, but the comment is positioned covered by the top bar. It isn't consistent. Clicking on the same comment in the inbox will open another time with the comment below the topbar. This may be hard to capture console output for unless I just experiment with a bunch of repetitions and hope that the bug happens one of the times. Comments in the inbox are the only source I've encountered for the bug.