How to use the Button Widget as "on click"

#1

The button widget in tiddlywiki allows you to trigger navigation and other actions.

  • The standard navigation is to a tiddler.
  • As I understand it Buttons are effectively include an onclick function
  • Other links using <$link/> or <a href="url">Link name</a> also respond to a click

I would like to use the standard jump to top <a href="#">Top<a>, and other features but put them inside a tiddlywiki button.

Does anyone know how to get a button to trigger a html link or href such as “#” or to an ID anchor?

Thanks in advance

How can I make a "Go to Top" Button for a scrollable widget?
#2

The following is a work around for some cases;

<a href="#" class="bar" style="display: inline-block;" title="Jump to top of story">{{$:/core/images/chevron-up}}</a>

Where the bar class is defined as;

.bar {
 align: centre;
  margin: auto;
  text-align: center;
  width: 100%;
  border: 1px solid gray;
  border-style: dotted;
}

However it does not achieve this Topics intended aim which would allow additional actions to be triggered or make use of other tiddlywiki button widget features.

#3

Works here if you use $eventcatcher

image
image1722×911 90.3 KB

The code…

\define lorem()
<p>Quodsi ipsam honestatem undique pertectam atque absolutam. Eaedem res maneant alio modo. Omnis enim est natura diligens sui. Tu vero, inquam, ducas licet, si sequetur; Mihi quidem Antiochum, quem audis, satis belle videris attendere. Mene ergo et Triarium dignos existimas, apud quos turpiter loquare? At ille pellit, qui permulcet sensum voluptate. Primum Theophrasti, Strato, physicum se voluit;</p>
\end

\define clickactions()
<$action-log $$message=<<dom-href>> event=<<event-type>> />
\end

<a id="#TOP"></a>
<$eventcatcher selector="a" $click=<<clickactions>> stopPropagation=never>
<a href="##BOTTOM" class="bar" style="display: inline-block;" title="Jump to bottom of story">BOTTOM</a>
<<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>>
<<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>><<lorem>>
<a href="##TOP" class="bar" style="display: inline-block;" title="Jump to top of story">TOP</a>
</$eventcatcher>
<a id="#BOTTOM"></a>
1 Like
#4

You can wrap a $button widget around the link.

<$button actions=<<clickactions>> tag="div">
<a href="##TOP" >top</a>
</$button>
#5

Thanks @CodaCoder and @saqimtiaz

The eventcatcher method does address the “onclick” of a general nature and clearly very powerful.

I tried the top of page anchor “#” and it works, without a named anchor.

<$button actions=<<clickactions>> tag="div">
<a href="#" class="bar" style="display: inline-block;" title="Jump to top of story">{{$:/core/images/chevron-up}}</a>
</$button>

Looks Good and Works well.

I may add to this thread a little more on the value of ‘Using the Button Widget as “on click”’ for other “tricks”.

  • Please feel free to add your own compelling uses.