How can we Create Vertical Tabs rotated by 90°

1

Hi @EricShulman - By chance - This opens the Tiddler (for me) in the story river with the destination - - and this is ok - but,…

Just wondering if it will open my Tiddler in,…

  • I have a table that has two cells - left and right (actually - many more - but this is the gist)
  • I have a “tabs tabsList” with a bunch of tabs (to different tiddlers) in the “right” cell
  • I have the button in the “left” cell - that when I click - opens the Tiddler in my story river
  • However - if I have the pre-selected tab (of the destination anchor) - it will display it as well - and also open the Story river

Is there a way to not open the destination (anchored) tiddler in the story river - and just “open” it in the selected tab - even if that tab is not selected? (So - the left side “pushes open” the right-side’s Cell - Tab and Anchor.

Thanks again - - I am trying TiddlyWiki afresh and am just “plowing through”,… - per say - and am actually starting to understand it.

TwN00b

2

@TwN00b - if I understand your description, why would you want “anchor links” for this? What you want are probably regular buttons (these can have any label). A button can set the tabsmacros state value to flip tab.

“Anchor links” are not really a TW native feature (Tiddler Philosophy implies that if it needs a link then it should probably be a tiddler on its own… even if IRL has shown that this is not always the case.)

BTW, your description vaguely reminds of the Tabbed Internal ToC.

3

Hi @twMat - yeah – I saw that - and it’s ok - not quite what I am looking for.

My request is simple - or so I thought:

  1. I have a Table - it has two cells – |Left | Right|
  2. Inside the the Left Cell - I have a bunch of stuff {{Table_Left_Cell_Tiddler}}
  3. Inside the the Right Cell - I have a bunch of stuff {{Table_Right_Cell_Tiddler}}

The Left:

  • Can be anything - tiddlers, etc. - some have links (html example here)
    ** I click on a “link” “html” - - it’s an <a href — who’s destination is on the “Right Cell”

The Right:

  • Can be anything - tiddlers, etc - some have "anchor"s - aka destination points
  • If an item is clicked on the “Left” that points to the “Right” - I would like it to open the item in the “Right” table cell and scroll to the location of the “anchor”

Another example: (if the above is not great)

  • I have “LeftBar Installed” - with an <a href
  • I Click on <a href inside “LeftBar”
  • It would be great if TiddlyWiki can “open” the “anchor” on the “Right” cell and scroll to the anchor

The Table (Left & Right) are not on the LeftBar - but they can be,…

The main point is that Left and Right are on separate tiddlers - shown in separate cells in the table.

I hope this helps.

Here is an example - using a franklin day planner.

I click on a month - and the corresponding month opens.

Left Cell = Jan, Feb, Mar, …
Right Cell = Destination Month

image
image900×701 118 KB

4

Do you mean like the effect shown here:

https://community.sap.com/t5/technology-blogs-by-members/how-to-create-a-manila-folder-like-vertical-tabs-using-css/ba-p/13006348

… where all but the tabs would slide away, but tabs would peek out sideways?

5

Hi @twMat - sure - let me attempt to describe:

I have leftBar installed

There was a response ‘somewhere’ that I saw Tobias respond to someone (I can’t find it :frowning: ) where he added a tiddler and within the tiddler - rotated text 90 degrees.

My hope was to place a <<tabs tabsList:“Tab01 Tab02 ,… TabXX” default:“Tab01” class:“tc-horizontal”>>

In the tiddler - and have the text on each “tab” be rotated.

Think of the old-school Day Planners where the tabs are rotated for you to view.

IF - big iF - I can get this to work - then I can use the leftBar as my “file storage” - - it’s out of the way - but super easy to access - and - - this part is important - I don’t have to ‘remember’ - where I put stuff.

  • IF - this works - I can even use them for more than just storage,…

See the picture below - as an example:

image
image900×701 118 KB

6

Hi @Springer - Yes - this is perfect - and what I am looking for - in terms of:

  • Text - “vertical orientation”
  • Tab-like – so that I can click on the tab - and have it open the (destination)
    ** Assumption is the destination is outside that tiddler - and in another tiddler

Thanks again.

TwN00b

7

Here’s some clues that may help:

Try something like this:

.tc-horizontal { transform-origin:bottom left; transform:rotate(-90deg) translateX(-20em); }

Notes:

  • You will almost certainly want to limit this CSS to your left sidebar content to avoid affecting other tc-horizontal tabsets that may occur outside the left sidebar, so the above CSS rule will need more specificity (e.g., something like: “.myLeftSidebar .tc-horizontal”)
  • The translateX(-20em) is a “brittle hack” based on the unrotated width of your tabset tabs, so you’ll have to experiment a bit to get the placement as you desire
  • The tabs list is rendered from bottom to top, so you’ll probably want to reverse the order the tabs are listed to achieve something closer to the effect you illustrated in your picture.

Let me know how it goes…

enjoy,
-e

8

Thanks @EricShulman - I’ll see if I can figure out how to add this to my tiddlies - since css, html, markup, java, json, etc - - man-o-man.

I’m truly a noob when it comes to TiddlyWiki - but once I determined to “use” it as my primary PIM - I’ve spent many, many, many, many,… hours - to get it to where it’s sort-of usable. Did I mention the many hours spent? Internet searches, google groups, and the many - and tons of resources - ,…

And now - I want to make PIM even better - and am glad TiddlyWiki is evolving and more usable.

Here is my current “main” tiddler: – That I want to change - so that it’s more like a day planner.

image
image1920×1200 150 KB

Anyways - I’ll try and see where/how I can add this - as Stylesheets are still black-boxes to me.

Thanks Again - I do appreciate all the work you guys have done.

  • TwN00b
9

@TwN00b - OK, that’s certainly a complex setup. (And you want the whole display in a single tiddler!?)

Regarding the CSS, this is how to create a stylesheet tiddler, using Erics proposed css:

title: mystylesheet
tags: $:/tags/Stylesheet
type: Static stylesheet (text/css)
text:
.mystyle .tc-horizontal { transform-origin:bottom left; transform:rotate(-90deg) translateX(-20em); }

You must then apply the mystyle to the tabs list which is done like so:

<<tabs ....... class:"tc-horizontal mystyle">>

As for parallel scrolling, some people (possibly even Jeremy?) have created wikis with multiple storyrivers, and I think I’ve seen (but not sure) variants where you click a link in the left column only to have the right column navigate to it. But, again, you’re talking about a single tiddler… even if, come to think of it, a single tiddler can hold multiple story rivers…

Over all, I think you should study CSS. It is actually a tip I got many years ago and it has definitely paid off. I suspect your layout will need a lot of tweaking.

10

If the left cell is only for the months then, again, I say this is the Tabbed Internal ToC. Note that you can style it to be 90° etc.

11

@TwN00b that screenshot is of a dashboard tiddler rite? It looks nice :+1:

12

Thanks @twMat - I can try that later on tonight.

As for the whoile thing in the leftbar - not quite - just my “file storage” - things I need - but won’t reference for a long time - like Franklin Covey Binders.

13

Thanks @twMat ,

Yeah - I am sort-of thinking that as well - I’ll see later on tonight - if I can make it work.

I’ll let you know - hopefully with good news.

-TxN00b

14

Hi @arunnbabu81 - Thanks - and yeah - all TiddlyWiki - and nothing else - :slight_smile:

  • Single Tiddler - that is in a Table
  • Cells are the various other tiddlers

This screenshot is my daily work-screen - since you can see the underlined “date”.

  • All those icons across the top link to other items - different look and feels

Across the top - are search engines - Google, Duck, PagerDuty, Jira, etc - with a drop-down calendar (Google) and a drop-down Tiddly Calendar.

A text box that is stored (like a mini scratch pad) and Flags that create appointments - based on priorities.

Then the icons for many different screens

  • currently showing: Daily Work Screen

Theres, a MasterTask List - for High Tasks, +,…

I a really enjoying TiddyWiki - but only seriously using it for about 8 months - with the last three spent customizing it to my needs.

Thanks Again,

-TwN00b

P.S. I am on-call this week - here is my OnCall Screen (tiddly)

image
image1918×1080 223 KB

15

@TwN00b is there any demo wiki available without any private tiddlers.

Are those icons at the top tabs or buttons?

16

Hi @arunnbabu81 - I am unsure how to do that - (still a n00b in TiddlyWIki) - but I can zoom and show you - and maybe you can help me to create as such? (It’s ok if you are unable to - I just don’t use the “coding” part of TiddlyWiki much - rather, I am a consumer.)

If you want to zoom - let me know a date/time of your preference - I am on on PST8PDT (West Coast US - Pacific) - and am up early on a typical day.

As for the icons - yeah - they are buttons or tabs or links to other tiddlies that “show stuff - other tiddlers” - example:

These are Tabs (<<tabs “,…”>>):

image

These are buttons that create new tiddlers with pre-filled items or links to other tiddlers - or popups showing “stuff”.

image

These are not buttons - but “fields?” (I don’t know the verbiage) and links - Google, etc.
image

Text:

image
image533×366 60.8 KB

This is my “Main” Tiddler - the one I start with:

image
image1667×782 130 KB

And this is how I start my TiddlyWiki:

image
image724×239 90.1 KB

Also - to be honest - I’m not much into html, css, MarkUp, JavaScript, Tiddly, etc. - and only started this when I decided to use TiddlyWiki Full-Time as my PIM.

Hope this helps,

TwN00b

17

Update:

Hi @EricShulman , @twMat & @Springer ,

I tried a few different combination - but not much luck - well - I sort of got them to work - just not something I would use.

I think I will just rotate text - and then link them - unsure - still muddling this over.

Thanks again - unsure at the moment - but will continue to plug away at this.

Thanks Again - TiddlyWiki is pretty awesome!

TwN00b

18

(Edited to revise styles)

If you’re happy with the existing vertical tabs, just rotated, try this.

Create the following tiddler, tag with “$:/tags/Stylesheet” and give it the type “text/css”:

.tc-vertical.tc-rotated button {
transform: rotate(180deg);
writing-mode: vertical-rl;
border-radius: 0 2px 2px 0;
}
.tc-vertical.tc-rotated button.tc-tab-selected {
border-left-color: <<colour tab-background-selected>>;
border-right-color: <<colour tab-border-selected>>;
}

Then add “tc-rotated” to the tabs class list:

<<tabs "[tag[sampletab]]" "SampleTabTwo" "$:/state/tab2" "tc-vertical tc-rotated">>
19

Easiest way is to create a demo wiki in tiddlyhost.

Thanks for sharing the screenshot. I am also in the process of creating a dashboard for easy entry and overview of various data like budget entries, todos, notes. And I love to learn from similar implementation by other people. That’s why I asked for a demo wiki. It’s fine if it’s difficult for you. You have provided enough information for it to be useful for me.

20

Thanks @andrewg_oz - let me give it a shot tonight and I’ll get back to you - this looks promising.

And (just so all are aware) - I actually spend very little time in the “coding” part of Tiddly wiki - and 99%+ of the time as a consumer - where I use this to “be productive” at work/home/school.

I was (and tried for at least 6 months) Opus One (domini and lite), LogSeq, Notion, Evernotes, Good Notes, Google (all), Microsoft (On Note and all), etc. – and with the amount of data I have - they slow/bog down.

TiddlyWiki is the only thing to keep my items snappy and responsive - with near instant search results.

Also, I will admit - that about 8 or so months ago - it was tough - to get to where I am today - but well worth it :slight_smile: .

If you were to ask me today - create me a tiddler with “some feature” - list me something,… I would not know how to do it - and would look through my notes or Google.

I learn (for a short time) just enough to meet my need - then implement it - make a document - and forget it - as I am a consumer of the product - rather than a tinkerer,…

That said - I have been entering my items - over the past 8 months in TiddlyWiki:

  • Projects
  • Todo’s
  • Budgets
  • Notes
  • Documents
  • Daily Agenda
  • Study Notes
  • etc.

My next hurdle is to add my personal study notes - I’ve about 80K into TiddlyWiki - - and am concerned it will slow down. So - I am thinking “how to imbed another TiddlyWiki - within a tiddlywiki” - in an iFrame? ???

Or - what is faster in TiddlyWiki:

  • Tags or no tags on Tiddlers?
  • Short or Long Tiddler?
  • List tiddlers via a search - or just list them out with a transclude (in a tiddler)?
  • ,…

This is an amazing platform!

Thanks Again!

-TwN00b