surrounding adventure logs scroll with the table of contents

Frak_Lou_Elmo
Frak_Lou_Elmo

Hello!

A problem I find with the adventure logs when someoen wants to read from the beginning (or even if they just are in the middle and want to click onthe next log) is that they always have to scroll all the way back up to find surrounding logs. By the time they are at the end of the log all the surrounding logs hav dissappeared form the right side, leading only the table of contents:



image

If all the right column stays there with the scroll then readers can at the end of it easily go to the next log up or down without scrolling all the way back up:



image

 

Cheers,

Frak

Comments

  • gastoff
    gastoff
    Posts: 136 edited April 26

    You can use CSS to change the positioning to "fixed" and it will keep the sidebar static on the screen and unaffected by scrolling.

    Post edited by gastoff on

    image

  • gastoff
    gastoff
    Posts: 136

    After playing around with it for a bit, my suggestion won't work so well because of how the TOC interacts with the Adv. Log sidebar. Inspecting the code, it looks like the CSS that is applied to the TOC element changes depending on how far down you scroll. Never knew that was how it operated...there isn't even any reference information for how or why it is applied, so I do not know what can be done to apply that same behavior to the other element.

    image

    image

  • thaen
    thaen
    Posts: 585

    @gastoff, from looking at the code, it looks like the top and position and width are being set by JavaScript directly in the HTML element's style (as opposed to by CSS), when the reader scrolls past a certain point on the page.

    @Frak_Lou_Elmo, I don't think we can just keep the sidebar "fixed" so that it doesn't scroll at all.  On smaller screens/windows, especially with longer Tables of Contents, all of the "surrounding logs" won't fit on the screen, so they wouldn't be clickable since they would be off screen.  But we might be able to make the sidebar scroll up only until its bottom is just off screen, so then the reader would only have to scroll slightly up to bring the sidebar back into view.  Let me know if you see any issues with that.  I'm not 100% sure that it would be a good UI interaction, but it seems reasonable to try.

     

    Obsidian Portal Developer

  • Frak_Lou_Elmo
    Frak_Lou_Elmo
    Posts: 117

    @thaen, I hadn't thought about mobile! Taking a look I see it's below the comment and this is actually a nice place for it as weel for desktop: then you can go straight to the next story in line, up or down:

    I do think that this could be slightly tweaked for better UI, kinds combine the look on the desktop and mobile which would also work on the desktop at the bottom: the desktop has this useful line showing where you are that lacks on mobile, and the logs should only show one up and one down: four with no line as is looks really confusing as where to go next. My MS Paint mockup:



    image



    @gastoff thanks for trying to solve this with CSS, I would also be open to just putting a CSS solution so I can avoid going through every log and adding at the botton "Click here for the next episode"

  • gastoff
    gastoff
    Posts: 136

    @thaen,  Is it possible to add an additional class to the posts that come before and after the current post to make it possible to apply CSS to these elements? Something like class="neighbor-post previous-post" and class="neighbor-post next-post"

    image

    Then, if people wanted to, they could hide the side bar and use CSS to pull those two elements out, modify how they look (like making them display as navigation arrows), and place them on their screen wherever they desired. Is this an option that is easier to implement than altering how far the sidebar scrolls?

    image

  • thaen
    thaen
    Posts: 585

    @gastoff, that seems pretty plausible.  I'll take a look and report back.

    Obsidian Portal Developer

Sign In or Register to comment.