Page tree not jumping to current position
Hi,
I'm using the help center theme for our space. When visiting a certain page, the page tree on the left is not scrolling down automatically to the current page. As our space has a lot of pages, one must manually scroll the page tree.
Within confluence, the auto-scrolling of the left page tree works perfectly. Also, the "page tree focus" works correctly in both versions.
Is there any way to activate the auto scrolling?
Thank you in advance
-
Hi,
I don't use this theme, but the solution is simple for Web Help theme. I had the same issue and K15T suggested this:
Add the following to the $('document').ready function:
$('.ht-sidebar-content').scrollTop($('.current').offset().top)The idea is use the scrollTop function to scroll to the desired position calculated using offset().top. I believe the logic would work in the Help Center theme also.
-Amit
-
Hi Steffen,
as Amit said, I added it to the function $('document').ready - at the end. I have found it in theme.main.js.
$(document).ready(function() {
initI18n();
//pageId = $('body').attr('pageid');
/* Set Type of Device */
checkDevice();
/* init Sidebar Functions */
initDragbar();
initSidebar();
checkGrid();
/* init Search Functions */
initSearch();
initButtons();
initFooter();
/* init Keyboard */
initKeyboard();
$('.sp-picker').change(function () {
$(this).closest('form').trigger('submit');
});
$('#ht-error-search-button').bind('click', function (e) {
e.preventDefault();
e.stopPropagation();
openSearch();
});
/* handle links to anchors correctly with the headerbar */
scrollToPosition();
//setTimeout(function() {$('#ht-loader').hide();}, 500);
$('#ht-loader').hide();
// Scroll to navigation sidebar position
$('.ht-sidebar-content').scrollTop($('.current').offset().top);
});Greetings,
Volker
-
Hi Amit,
I wonder if "offset" even (or still) exists in javaSript. I've only found "offsetTop()" (https://www.w3schools.com/jsref/prop_element_offsettop.asp) and had wondered about it when I inserted it. The development tools also say "deprecated".
Uncaught TypeError: $(...).offset() is undefinedBut I don' know how to change it.
Thanks,
Volker
-
Hi Volker & Amit,
thank you both for your support. I'm still waiting myself to receive the editable .jar file from our company's docupedia admins. While reading the documentation of scroll viewport I found this quote:
"- Edit a theme bundled with Scroll Viewport, or a theme that was installed as an add-on. It's not possible to edit these themes – just copy the theme and edit the new copy. Keep in mind that you can't develop a custom theme based on the The Help Center Theme."
But it seems that you are still able to edit the script file of the theme, right? Once I get finally access to the respective files I will let you know if Amit's method works for me.
-
Allow me to share my exact code snippet for this:
I am using setInterval because the toc is not ready immediately and I need to wait before I execute the jump to the currently selected page. Also, note that I am subtracting the my #search.offset to take into account my UI layout. You don't need to do this.
//Move currently opened pages TOC entry to near the top of TOC - when it is originally too low and not visible.
var tocReadyTimer;
tocReadyTimer = setInterval(function () {
if (document.getElementsByClassName("current").length > 0) {
console.log("current heading exists now");
$('.ht-sidebar-content').scrollTop($('.current').offset().top - $('#search').offset().top - 100);
clearInterval(tocReadyTimer);
}
}, 10);On console, you will need to run only:
$('.ht-sidebar-content').scrollTop($('.current').offset().top;
Please sign in to leave a comment.
Comments
11 comments