Not planned Internal links have an HTML class assigned to them

[Dad.]

Hey there,

In a future release, it would be nice to have all internal links have a class, like InternalLink or something. Because when working with fixed headers, internal links need to the 'jump' from the top to be offset by a -[height of the fixed header]. And this makes it very difficult to do as of now (at least to my knowledge). I cannot figure out a quick way.

If each internal link (including quoting a reply, jumping to a post or a quote, jumping to a category, etc) had a class, a function can be written in jQuery or something that will say something like:

function offsetInternalJump(target, offset) {

    $target = $(target);
    if ($target) {
        $('html, body').scrollTop($target.offset().top - offset,
        function () {
            window.location.hash = target;
        });
    }

}

$(document).ready(function() {

    $('.InternalLink').on('click', function() {
            offsetInternalJump(this.hash, '110'); //where 110 is a style property of fixed nav height
    });

});

Not positive if this will work in all cases, but I don't know how else to get this done and people are wanting fixed navigations.

Thanks,
Mike

 

[Chris D]

One solution is, but it ruins the targeting for things like inline moderation, is to have an invisible span.

So currently we have:

<li id="post-123" class="message" data-author="Audentio">
    Post contents
</li>

What you could have is:

<span id="post-123" class="postAnchor"></span>
<li id="im-post-123" class="message" data-author="Audentio">
    Post contents
</li>

.postAnchor
{
    display: block;
    height: 115px; <!--same height as fixed header-->
    margin-top: -115px; <!--same height as fixed header-->
    visibility: hidden;
}

That would offset the page nicely to account for the fixed header, if you go to a thread link e.g:

http://xenforo.com/community/thread...tml-class-assigned-to-them.62428/#post-662111

What that does mean, however, is potentially a big change in how things such as inline moderation, work. Because the ID #post-123 is used to target inline moderation. For the above to work, it would need to target #im-post-123. Which, actually, knowing how agnostic the inline moderation tools are, it's probably only a small templat edit...

 

[Dad.]

I did look at that solution, wherein I used a pseudo class instead of a span, but the negative margin idea is the same. I couldn't get it work properly in all cases though.

Where all else would this be needed though? Private messages, categories, posts, replying to a quote, these are just some of things where you jump from the top to a position farther down the page. All of these would need a solution like the one you've listed, and I thought it might get a bit messy.

 

[Chris D]

It would if it was a home grown solution, but it might be something for @Mike to consider as an eventual core change but there might be lots of other stuff that make it not workable and ultimately not worth the effort for the core - especially as the core doesn't employ a fixed header in the default style.

 

[Mike]

Actually, just thinking about this, a class does nothing about the page load case. You need extra JS to handle that case.

And then for the internal link case, you can just use the hashchange event: http://caniuse.com/hashchange (basically the same code for hashchange and load)

 

[Chris D]

hashchange event

See this JSFiddle:

http://jsfiddle.net/3afdN/4/

@Stuart Wright

I believe @Audentio implemented some sort of solution into his UI.X framework it might have been based on a similar thing.

 

[Dad.]

Well, Ill test this. But I did implement something like this and there were places it wasn't working correctly. Such as category anchors and the periods in their hrefs. (You have to double escape to select the element but it can be done). I will give it another try, but I already had something like this and there were places it wouldn't work.