Wow, that is great Riz. I added a link to this page in the Toolmap, in the links section and the navigation misc section, but with the caution that this method overrides core tiddlers.
On Thursday, September 26, 2019 at 10:46:40 AM UTC-5, Riz wrote: > > Hello Community, > > You know at least rarely we have that long tiddler and wish there was a > way to navigate to parts of tiddler same way you navigate to different > tiddlers. Well say no more. > > *How to see it is working?* > 1. Download the 2 JSONs attached > 2. Download TWO empty wikis. Drag and drop "working-example-with-id" to > emptywiki-1 and "working-example-without-id-reccommended" to emptywiki-2 > 3. Refresh both wikis :IMPORTANT: > 4. Open the tiddler named "One" > 5. Click on the links and see if it is moving you correctly to intended > targets. > 6. Now close tiddler name "One" :IMPORTANT: > 7. Open tiddler named "Two" > 8. Click on the link and see if you are correctly navigated to third > heading in tiddler named "One" > 9. Repeat the process in emptywiki-2 > > > *working-example-with-id: How to use it?* > Remember one thing. You should not use it. Coda has very well explained > why TW community should not use it in here > <https://groups.google.com/forum/#!msg/tiddlywikidev/C2JWmchpyaw/czI86aDvAAAJ>. > > > > *Then why are you giving us the "working-example-with-id"?* > Well, funsies. Sometimes we have to do exactly the thing we are told not > to. So who cares if HTML police will come after us? Live precariously and > die while you are still handsome, am I right? > > *Enough. How to actually use it?* > 1. When you are writing a long tiddler and have a part you want linked to, > give it a UNIQUE "id". For eg: > <div id="ultimateIDtheSecond"> Whatcha lookin' at</div> > or > <h2 id="pleasePassMeSomeCurry">Horrified Rabbit</h2> > > > 2. Now you can link it like this > <$link to="mytiddler" scroll="no" anchor="ultimateIDtheSecond">Link to > ultimateIDtheSecond</$link> > <$link to="myOthertiddler" scroll="no" anchor="pleasePassMeSomeCurry">Link > to pleasePassMeSomeCurry</$link> > > > > 3. Note a few important things: > - As you must have guessed, anchor part is where you give the id to > link to. > - scroll="no" is a must. Why is it a must? Well if scroll is set to > yes(which it is by default), TW5 will try to scroll to the title of the > tiddler. > - You can link to the ID from any tiddler, anywhere (Sure, within the > same wiki. This is not magic, after all) > - If you are linking to IDs in the same tiddler, you may drop the "to" > part. > <$link scroll="no" anchor="ultimateIDtheSecond">Link to > ultimateIDtheSecond</$link> > - If you are too lazy to write 'scroll="no"', you may drop it. However > you will have to press down Control when you click. > > *Then how to use working-example-without-id-reccommended* > Well, the same. Except this time, you have to write "data-id" instead of " > id" inside the html tags. So it will be like > <span data-id="tiddloidIsAwesomeGuys">I will admit to nothing</span> > <article data-id="oneLastTimeSomebodyPassMeTheCurry">Have you thought > about how we might be the last few generations of humans to ever exist? > </article> > > Links widget should be used to same way as above. Eg: > <$link to="mytiddler" scroll="no" anchor="tiddloidIsAwesomeGuys">Link to > tiddloidIsAwesomeGuys</$link> > > > > *What happens if two elements have same data-id or we transclude tiddlers > and thus data-ids got duplicated?* > Well, browser will scroll you to whichver instance is at the top most. > > *But the JSON is large!* > Well, the whole feature is under 20 lines of code. Not bad for someone > whose primary language is not JS(pats on the back). However, those 20 lines > appear between some big core tiddlers. So you know how these things are. > The code is here. If anybody want it as a part of core, they have all the > necessary permissions to create a PR. > PS: I swear I could have done it under 15 but VS-Code said it has to look > pretty:/ > > *Can we use both JSONs in same wiki?* > No. Although if you want links targetting both ids, data-ids or you want > to link to things in a more generalised way - say link to a *div with > class "whiteGlobularCap"* or something, it will only require very slight > modifications. > > *There are some edge cases here. What to do?* > I am not promising any support. However if you post it, I might be atleast > curious to see what happened? > > *Credits* > PMario figured out a rather important piece of puzzle here > <https://groups.google.com/forum/#!topic/tiddlywikidev/NcCXnZu-OJE> > > *Are you batman? * > I will neither confirm nor deny that. Only nobody has seen batman and me > in the same room. > > Sincerely, > Riz > > Solving big things in small ways. > -- You received this message because you are subscribed to the Google Groups "TiddlyWiki" group. To unsubscribe from this group and stop receiving emails from it, send an email to [email protected]. To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/9211fd21-f741-4907-a40e-8f0d1402f333%40googlegroups.com.
