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

Not Planned Internal links have an HTML class assigned to them

Discussion in 'Closed Suggestions' started by Mike Creuzer, Oct 31, 2013.

  1. Mike Creuzer

    Mike Creuzer Well-Known Member

    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.

    AzzidReign, Autonamus and Steve F like this.
  2. Chris D

    Chris D XenForo Developer Staff Member

    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
    What you could have is:

    <span id="post-123" class="postAnchor"></span>
    <li id="im-post-123" class="message" data-author="Audentio">
        Post contents
        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:


    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...
  3. Mike Creuzer

    Mike Creuzer Well-Known Member

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

    Chris D XenForo Developer Staff Member

    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.
  5. Mike

    Mike XenForo Developer Staff Member

    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)
    Rob and Chris D like this.
  6. Chris D

    Chris D XenForo Developer Staff Member

    Rob and Stuart Wright like this.
  7. Mike Creuzer

    Mike Creuzer Well-Known Member

    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.
    Rob likes this.

Share This Page