1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

XF 1.2 Floating Top Bar with Anchor Links to posts

Discussion in 'Styling and Customization Questions' started by Russ, Oct 9, 2013.

  1. Russ

    Russ Well-Known Member

    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.
     
  2. Jake Bunce

    Jake Bunce XenForo Moderator Staff Member

    Steve F likes this.
  3. Steve F

    Steve F Well-Known Member

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

    Mike Creuzer Well-Known Member

    I've tried multiple things.

    Code:
    .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 likes this.
  5. Russ

    Russ Well-Known Member

    Tried that one too with no luck, if you don't mind keep us posted if you find a good fix :D
     
  6. Tracy Perry

    Tracy Perry Well-Known Member

    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.
     
  7. Chris D

    Chris D XenForo Developer Staff Member

    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.
     
    Mike Creuzer and Steve F like this.
  8. Tracy Perry

    Tracy Perry Well-Known Member

    But the header is the main thing that I REALLY like about it. I may end up getting it JFTHOI.
     
    Steve F likes this.
  9. Mike Creuzer

    Mike Creuzer Well-Known Member

    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:

    Code:
    <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.
     
    SimonV and Steve F like this.
  10. Mike Creuzer

    Mike Creuzer Well-Known Member

    Code:
    $(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.
     
  11. high1976

    high1976 Active Member

    @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
     
  12. Mike Creuzer

    Mike Creuzer Well-Known Member

    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.
     
    Enguerran A likes this.
  13. high1976

    high1976 Active Member

    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?
     
  14. Mike Creuzer

    Mike Creuzer Well-Known Member

    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.
     
  15. high1976

    high1976 Active Member

    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.
     

Share This Page