nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Javascript Trigger doesn't load after pageload

childnode

We are using the documentation Theme but many users complain about the bad user experience and behaviour of the documentation sidebar.

The main problem: When the list of pages in a space grows and there is a page (with subpages) you have to scroll down for in the sidebar, you do this once.
But evertime you once entered such a page, the full page reloads, you have to scroll down the sidebar again to select a sub-page / follow-up-page in the documentation tree.

So I thought I could manage this with a little bit jQuery... but I can't ;/

The problem is, that unfortunately neither AJS.toInit nor AJS.$(document).ready are fired/triggered when the page reload is really done but some (milli)seconds before.

&lt;!-- SCROLL SIDEBAR TO SELECTED SIDE --&gt;
&lt;script type="text/javascript"&gt;
AJS.$(document).ready(function() {
    if (AJS.$("SPAN.plugin_pagetree_children_span[style*=font-weight]").length == 1) {
    AJS.$("#splitter-sidebar")
    .scrollTop(
      AJS.$("SPAN.plugin_pagetree_children_span[style*=font-weight]").offset().top
      -155
    );
  }
});

// onother test:
AJS.toInit(function() { console.log("READY LOADING PAGE Test toInit()") });
&lt;/script&gt;

How can I handle this?! Is there another trigger I can bind this "post-page loaded" event to?

Also discussed in https://support.atlassian.com/browse/CSP-91915

Accepted answers

unknown

As you wish.

Instead of AJS.$(document).ready() which would be triggered when the documents DOM is loaded, use AJS.$(window).load() instead which is triggered "later" when all the page content is fully loaded.

I'm glad I could help you and I accept your apology. :-)

All comments

unknown

As I know it is not a "full page reload" (don't know how to explain it) which would trigger the event.

But isn't it better, to just store the scroll position and reload it after your page reload?
You can find a howto in jQuery forum: http://forum.jquery.com/topic/save-scroll-position

childnode

That would

a) cover the problem if the user browses but not if the user follows a link to another space and page that is "ranked" very deep in hirarchy

b) you'll ran into the same problem as I NEED TO GET HOOKED THE RIGHT TRIGGER. The positioning problem is solved for me with the function above.

c) for me, it a full page reload. The page turns white, network-tab in Firebug will show a new GET (re)loading the wiki

unknown

a) do you mean an expanded hierarchy will be collapsed again after reload?

b) When you apply storing scroll position to a cookie using .click() event? I suggest using $(window).load() to load the scroll position, as it only makes sense to apply it, when the complete page is loaded instead only the documents DOM.

c) There is a difference between fully loading an html document and loading new content into an html content. Both do GET, both may turn the page white, but I doubt both fire document.ready event.

Please verify it and let us know the results.

childnode

ok, an example: https://wiki.childno.de/display/LINUXSERV/SSL+Webserver+Zertifikate

expand all level1 pages in the tree.

You might "force" the problem locally when using this code in the navigation section of the documentation theme but deactivating the checkboxes above for page tree

{livesearch:id=1}
{pagetree:expandCollapseAll=true|startDepth=2|searchBox=false}

This forces the pagetree is rendered with an open level1

nevertheless..

All level1 opened, visiting the above page right?! Now you should see the page you are on is out of screen (when sidebar is scrolled to top).

So scroll down, select the next page to the actual one.

a) NO, The auto collapse of other than your "tree" might be resolved by using the pagetree macro

b) The problem is still: I don't know WHEN to restore it!!!!!!! <<<<<< Try it, fail it. $(window).load() will not help (for me)

c) Please open your Firebug or whatever...INDEED Confluence will do a fully reload!

childnode

- the "checkboxes" are in the backend ....

so I now changed the theme to where the problem is much more prominent.

The collapse is done in the default pagetree...But once again: That's neither the problem nor does it affect the core problem... It will just occur later (much more sites on level1 needed to exceed the sidebar space on your browser vertically)

Dear Carsten: I have to say SORRY

$(window).load() respectively AJS.$(window).load() was the right place but just didn't worked because of another script failure... dough

Now there is just some "screen flickering" when page load is "finished" but ir's ok for me now

unknown

As you wish.

I'm glad I could help you and I accept your apology. :-)

Welcome!

It looks like you're new here. Sign in or register to get started.

Quick Links

Unanswered
Groups
Help

Find more posts tagged with

confluence

custom-field

jql

javascript

usability

ajs