CSS help needed, Building top/bottom tiddler for view and edit template

1

Folks,

The following is an in progress package that provides view and editor toolbar buttons to jump to the bottom of the current tiddler, and at the bottom a “button” to jump to the top of the current tiddler. Try it on TiddlyWiki.com

tiddler-anchors.json (904 Bytes)

It actually works really well, it only has one problem;

  • The icons show even when unnecessary because on shorter tiddlers you can see both the top and the bottom.

Solution needed if possible;

  • Is it possible with CSS to determine if something is visible on the page and hide something else if it is?
    • The toolbar down button would be hidden if the jump to top link (known ID) is visible ie we can see the bottom of the tiddler.
    • The jump to top button would be hidden if the “toolbar down button” OR Title (knowable ID) is visible ie we can see the top/title of the tiddler.
  • Basically neither will display if the other “would be visible” in the current view.

Thanks in advance;

2

CSS has conditional rules but they don’t work how you want. Only they work for properties of media and/or based on support CSS features in the browser.

You will need to use javascript to know if a tiddler appears fully in the screen, maybe you could use the Dynaview Plugin.

3

This is the same issue I encountered when working on the scrollbar indicator : to do this with CSS only, we need container mediaqueries. They should be available soon-ish but not yet.

This would be something like

.tc-tiddler-view-frame {
  container-type: size;
  container-name: tiddler-view-frame;
}

.anchor {display:none;}

@container tiddler-view-frame (min-height: 100vh) {
  .anchor {
    display: block;
  }
}
4

Imagine two buttons laying vertically 10 cm apart. You now have a 9cm strip of paper. If the strip covers, say, the top button, then it does not reach to cover the bottom one, and so if you pull it to cover the bottom one then the top button will be revealed. Further, there is no fixed length for a tiddler but there is a fixed distance between a tiddler foot and the next tiddlers “head”. Maybe such a strip could somehow be in position:sticky and kind of move so to reveal underlying buttons?
I have no idea if it would work.

5

@twMat Your comment gave me an idea: what if @TW_Tones position the button in absolute to the tiddler frame, with a min-height set to 100vh, or 100% of the height of the tiddler, whichever is bigger (with the css max() function). We can hide the overflow, this way we will only see the button IF the tiddler is 100vh or bigger. And it works!

https://demos.tiddlyhost.com/#Show%20element%20if%20tiddler%20height%20is%20over%20100vh

demo

The only issue is that in some cases the button might not be fully visible, so it’s not perfect either.

6

Cool! I guess we’ll see if it is enough for Mr. @TW_Tones

@telumire I wonder if it is possible with pure CSS to make something appear/disappear “binarily” from scroll actions, i.e either completely seen or completely gone. For example if some element is scrolled so it suddenly touches the viewport edge or some html element. Can CSS can somehow sense what is fully in or out of the viewport? It seems to require js, based on my very limited research.

7

Thanks all,

@telumire can you possibly please have a look at my included tiddlers and see if you can adapt your solution to those buttons?

  • look at my at bottom button which is also attempting to use vw.
  • Yes, this would be helpful.
  • Back to the OT both buttons would hide if the other was in the view port.
  • If it were not a core CSS feature it should be :nerd_face:

I would love to combine all your thinking to understand CSS and its relationship to tiddlers, their resulting size and position in the view window etc…

  • I am sure this is commonly approached by users/designers but there is a little vacuum in methods, documentation or mechanisms, when in fact it is somewhat fundamental to the tiddler as the key “object” in tiddlywiki’s user interface.
8

It occurs to me that such technology to hide/display an element only if another is/is not visible, (maybe or may be not independent of the window) could be a useful mechanism in other places than just the story.

  • In independent windows
  • Provide a generous floating next page/scroll down button, with keyboard shortcut.
  • Hiding or obscuring content
    • Eg with some custom css active blur all listed titles eg; when doing a public video of a private wiki
9

Here appears to be a js solution

10

This looks promising, My JS may not be strong enough to implement it but it seems to me a small set of display conditionally macros or widget would be helpful. The key consideration is allowing it to be qualified to a given tiddler, although a full page implementation may be useful.

  • I imagine a solution more space saving that a “open tabs bar”
    • top bar that lists buttons to the tiddlers not visible above
    • bottom bar that lists buttons to the tiddlers not visible below
  • A solution to my top/bottom of tiddlers buttons this OT

Another way to look at it may be CSS only, or filter operator that can Query if something is or is not visible on the view window to use with the list and reveal widgets to selectively display content.

11

Binary if/else logic in CSS is possible, with css selector or mediaqueries. There is currently no selector or mediaqueries able to target an overflow, but as I said in my previous post, this will become possible with CSS Container Queries CSS Container Queries - CSS: Cascading Style Sheets | MDN.

It’s possible to get the position of an element with the event catcher widget, see event-fromviewport-posx. This is used for popups, it require an event to trigger but clicking on the button would defeat the point and scrolling does not “bubble up”, so we are a bit stuck.

However, it’s probably possible to reuse the core javascript function to toggle the visibility of the back to the top arrow.

@TW_Tones I do not have the time right now but I will take a look tomorrow :slight_smile:

12

As others have noted, the Dynaview plugin is designed for exactly these kind of use cases.

Here’s a simple example. At the bottom, there’s a yellow box that is being tracked. At the top, there’s a <$text> widget to display the current on/offscreen status of that box. In between there’s a div to make some space. Resizing the window vertically shows 0/1/2 according to the visibility of the yellow box.

To try it out, you’ll need to install the Dynaview plugin (or drop the code into https://tiddlywiki.com/prerelease, which includes Dynaview).

Current State: <$text text={{$:/temp/test-state}}/> (0=offscreen,1=near,2=onscreen)

<div style="height:700px;border:1px solid black;">
This box is here to create vertical space
</div>

<div class="tc-dynaview-track-tiddler-when-visible" data-dynaview-track-tiddler="$:/temp/test-state" style="background:yellow;">
This is the box that is being tracked
</div>
13

Oh! That was cool!

Tip to try it out Jeremys example: On tiddlywiki.com, put this bit as the wiki title.

14

I was not aware at all that the dynaview plugin could be used that way, this is very cool ! @TW_Tones you should use this, it’s much better than the css “hack” I shared

15

Thanks Jeremy,

There is something about the Dynaview plugin that has made it hard for me to visualise its application, so thanks for pointing this out with an example.

  • I will post back here if/when I can produce the end result.

I am now integrating it into my solution, but my case differs as follows;

  • Tracking needs to occur for every tiddler independently in the story
    • Thus I need at least one state tiddler per story tiddler
    • I want two “buttons” to show/hide thus I need two state tiddlers per story tiddler.

How or where do I suggest changes to the Dynaview plugin or documentation please?

16

I didn’t try this but mabye put them in two viewtemplates?

17

Thanks all I now have a working preview especially given @jeremyruston’s notes please try it out and provide feedback;

Functionality

  • Tiddlers which are big enough will
    • If the bottom of that tiddler is not visible, provide a floating down arrow, to the right of the tiddler toolbar. Clicking this scrolls, so the bottom of the tiddler is at the bottom of the view window.
      • This is a link to an anchor on the below “button”.
    • If the top of that tiddler is not visible, provide an up arrow, in the bottom right of the tiddler. Clicking this scrolls, so the title of the tiddler is at the top of the view window.
      • This is a button that uses action navigate to the tiddler.
  • Temp tiddlers are not saved and thus are removed when the wiki is reloaded.

tiddler-anchors.json (41.1 KB)

  • Note" Package includes Dynaview Plugin so you need to save and reload eg; download copy of tiddlywiki.com to test.
18

For those interested in expanding to similar functionality I post my notes here.

Futures;

  • Rename package of tiddlers - what should I call this?
  • Receive your feedback and consider
  • Increase icon sizes?
  • Use a different state tiddler name space not $:/temp or $:/state to keep a permanent record of tiddlers visited.
  • Create a generic solution others can leverage eg a tag driven inclusion of content.
  • See Related functionality

Related functionality
I am not sure but this solution seems “expensive” in so far as the two buttons create a temporary state tiddler each, for any tiddler viewed. However it occurs to me that we can now keep track of tiddlers opened in this session and know if their top or bottom is visible to the user. Perhaps this offers other useful possibilities;

  • Discover tiddlers that when rendered are bigger than the view window
  • Add a next tiddler in the story button, only if its title is not visible?
  • Provide a way to detect when a specific tiddler, or filtered list of tiddlers, is even partially visible on screen and respond ie leverage the Dynaview Plugin functions from the same code.
  • Add a jump to bottom of the story that keeps the last tiddler aligned to the bottom.
  • Any other ideas?