XF 1.2 Floating Top Bar with Anchor Links to posts

[Russ]

This has me stumped and I'm hoping someone else can help with an answer.

I have a floating top bar on a clients site, that works fine however when clicking on an alert to a new post the link takes them to the right post, but hides the top portion of the post due to the floating top bar. This results in users having to scroll up a tiny bit to see the post.

I've played with a few different ideas that simply aren't working and I'm hoping someone can turn the light bulb on for me .

One example is @Chris Deeming 's site(uses UI.X)

http://xenmediagallery.com/threads/some-new-stuff.394/#post-2018

Same problem.

 

[Jake Bunce]

Reminds of:

http://xenforo.com/community/threads/floating-mod-cp.33286/#post-379974

Notice I put a bottom margin on the body to avoid overlap on the bottom of the page. You can try a top margin for your purposes, but I'm not sure that will fix your anchor problem.

 

[Steve F]

I was in a conversation @Audentio with this. We really have change the view port position when loading from an alert.

 

[Dad.]

I've tried multiple things.

.messageList .message:before {
  display: block;
  content: " ";
  margin-top: -{height of fixed header}px;
  height: {height of fixed header}px;
  visibility: hidden;
}

But for some reason its not working. I tried some javascript (if (window.location.hash) {}etc

Ill keep thinking. Its a tough one. I know there are a few fixes on it in the Gumby framework and various others.

 

[Russ]

I've tried multiple things.

.messageList .message:before {
  display: block;
  content: " ";
  margin-top: -{height of fixed header}px;
  height: {height of fixed header}px;
  visibility: hidden;
}

But for some reason its not working. I tried some javascript (if (window.location.hash) {}etc

Ill keep thinking. Its a tough one. I know there are a few fixes on it in the Gumby framework and various others.

Tried that one too with no luck, if you don't mind keep us posted if you find a good fix

 

[TPerry]

One example is @Chris Deeming 's site(uses UI.X)
Same problem.

That's one thing that is keeping me from jumping on that style to modify for one of my sites. Bugs the bejeesus out of me.

 

[Chris D]

You can turn the fixed header off via a style property.

With or without the fixed header the rest of the style is pure awesomeness.

 

[TPerry]

You can turn the fixed header off via a style property.

With or without the fixed header the rest of the style is pure awesomeness.

But the header is the main thing that I REALLY like about it. I may end up getting it JFTHOI.

 

[Dad.]

Heh its the last noteworthy bug imo of the skin. And its an irritation, rather than a bug that gets in the way. And I am working on it, and have been, for quite a while.

I've got it workin with this:

<script>

$(document).ready(function() {
    if (document.location.hash) {
        $('html, body').animate({scrollTop: $(document.location.hash).offset().top - 110}, 2000);
    }
});
</script>

But there are a few issues with it:

1. there is a jump
2. It doesnt work in every scenario where there is a hash, afaik
3. For UI.X, the theme is based on variables. So, as a framework I dont want people to have to change that 110 value (where that is the height of your fixed header), so mine has to be based on relativity and not specific values. :/

ETA: Of course you don't need to use animate() if you don't want it to animate.

 

[Dad.]

$(document).ready(function(){
    var target = '';
   
    if (document.location.hash) {
        target = document.location.hash,
        $target = $(target);
       
        if ($target) {
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 110
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        }
       
    }
    $('a[href^="#"]').on('click',function (e) {
   
        //e.preventDefault();
       
        target = this.hash,
        $target = $(target);
        if ($target) {
            $('html, body').stop().animate({
                'scrollTop': $target.offset().top - 110
            }, 900, 'swing', function () {
                window.location.hash = target;
            });
        }
       
    });
});

This kinda works. Its just that category hrefs start with a period and that throws the script off. Not sure why XenForo does this, but Ill write a check for it.

 

[high1976]

@Mike Creuzer really old thread but still an issue, your code works fine except for hitting the Quote-button on a page. In this case it ignores the top -xy amount and cut the post or on a small display just shows have of the editor. May I ask if you ever fixed/finalized this? Thanks in advance

 

[Dad.]

@Mike Creuzer really old thread but still an issue, your code works fine except for hitting the Quote-button on a page. In this case it ignores the top -xy amount and cut the post or on a small display just shows have of the editor. May I ask if you ever fixed/finalized this? Thanks in advance

We fixed this in UI.X after hours and hours of testing and tweaking. Not a simple fix by any means but we got it. We had to.

 

[high1976]

thanks Mike, good to that there is a solution. Just can't switch to UI.X just for that, by far too many custom changes already.
No problem with buying a license but I fear there is more involved than just a few lines of js-code?

 

[Dad.]

thanks Mike, good to that there is a solution. Just can't switch to UI.X just for that, by far too many custom changes already.
No problem with buying a license but I fear there is more involved than just a few lines of js-code?

The way we have it fixed is integrated with a few other features that we have, as well as our specific implementation of the sticky bar (we have two: userbar and navbar). This integrates with our sticky sidebar, our responsive features, etc.

 

[high1976]

no problem, thanks for clearing that up. Was able to fix the quotes in xf-js files. Not that elegant on the long run but working fine for now.