How can I change styles with macro buttons?

,
#1

I want to make links that are either “display: inline” or “display: none” depending on the class.

#2

If you know html and css you can simply wrap anything in span tags and apply whatever classes or styles you want. Html attributes can also get theirvalues from fields, macros and variables and there is more support now in the latest version.

#3

I need a button to change the styles after they have been established in CSS.
This is what I would normally do in JavaScript:

<span id="alpha" class="button" onclick="alpha()">Alpha</span>
<span id="beta" class="button" onclick="beta()">Beta</span>
<div id='styles'></div>

<script>
var styles = "";
function alpha() {
  styles += "<style>";
  styles += ".alpha { display: inline; }";
  styles += ".beta { display: none; }";
  styles += "</style>";
  document.getElementById("styles").innerHTML = styles;
  styles = "";
}

function beta() {
  styles += "<style>";
  styles += ".alpha { display: none; }";
  styles += ".beta { display: inline; }";
  styles += "</style>";
  document.getElementById("styles").innerHTML = styles;
  styles = "";  
}
</script>

But JavaScript isn’t an option in TW5.

#4

@RedAsset my javascript is not good enough, to make a full evaluation, but perhaps others will reply.

However if your purpose is to conditionally display, and or toggle the display of content, there are a number of ways to do this in wikitext/widgets, the tiddlywiki way.

Some quick examples;

<$list filter="condition true test">display If true</$list>

<$list filter="condition true test" emptyMessage=<<display-condition-false>> >
display If true
</$list>

<$list filter="condition false test" >display If false</$list>

But I think the reveal widget was designed for this purpose, and has a lot more features including animation.

There is also ## Custom styles by data-tags

See also ## HTML in WikiText
 down the page at Attributes AND the new Style Attributes. extension to HTML - tyhe example given is <div style.color="red">Hello</div> but I imagine <div style.display=<<varname>> >Hello</div> may do what you want.

I hope this is sage advice, but “a man with a hammer, sees everything as a nail”, so to “a man with Javascript sees everything as javascript” (reread with your preferred Gender).

1 Like
Story river scrolls when a popup is displayed
#5

Elaborating a bit on @TW_Tones’ answer, here is a piece of working code you can paste on tiddlywiki.com:

<$checkbox field="display" checked="block" unchecked="none" default="none">Visible</$checkbox>
<div style.display={{!!display}}>Here we go</div>

Please note that using the checkbox modifies a field of the tiddler, thus allowing persistent state even through TW version update, but also changes the “dirty” state of the whole TW (changes need to be saved).

Fred

#6

Thanks, this puts me on the right path.
I turned it into a radio button instead. This is what I am trying to do with that code with two radio buttons, however, that broke the code.
How would I get one radio to be checked and the other not?

<$radio field="displayAlpha" checked="block" unchecked="none" default="none">Alpha Visible</$radio>
<$radio field="displayBeta" checked="block" unchecked="none" default="none">Beta Visible</$radio>
<style>
.alpha { display: {{!!displayAlpha}}}
.beta { display: {{!!displayBeta}}
</style>
<div class='alpha'>Alpha Text</div>
<div class='beta'>Beta Text</div>
#7

Commonly setup behaviour:

A group of radio buttons ought to be putting their values in the same field. (i.e. so that when one radio button in the group is selected, it forces all other radio buttons in the group to be “unselected”.)

A group of check boxes ought to be putting their values in distinct fields. (Because check boxes usually means none, one, all, or any combination of them can be selected and unselected independently.)

Having your radio buttons putting their values in distinct fields, you have them setup to work like checkboxes.

I am guessing you need something like this:

<$radio field="displayChoice" value="displayAlpha">Alpha Visible</$radio>
<$radio field="displayChoice" value="displayBeta">Beta Visible</$radio>

BTW: the radio widget does not have “checked” and “unchecked” parameters: Reference for RadioWidget.

#8

Yeah, that would work. Thanks.
This is the code I came up with:

<$radio field="displayChoice" value="alpha">Alpha Visible</$radio>
<$radio field="displayChoice" value="beta">Beta Visible</$radio>
<style>
.alpha, .beta { display: none; }
.{{!!displayChoice}} { display: block; }
</style>
#9

That’s a nice use case for dynamic/conditional/variable (not sure what to call it) styling.

The kind of stuff that would fit nicely in TW documentation.

#10

My preference would be static css and dynamic css classes; but it’s just that - a preference. Example:

<style>
.alpha { color: green;}
.beta { color: blue;}
</style>

<$radio field="css-class" value="alpha">Alpha Visible</$radio>
<$radio field="css-class" value="beta">Beta Visible</$radio>

<div class={{!!css-class}}>
Hi
</div>