[TW5] Syntax for including a field value in @@ CSS

[Matthew Petty]

I have some buttons setting a field in a tiddler. The buttons increase and decrease "indent_amount". This part works.

How can I use "indent_amount" as part of some CSS?

Doing this:

@@margin-left:{{!!indent_amount}}px;
<$link><$view field=title /></$link>
@@

...makes the computed CSS:

margin-left:{{!!indent_amount}}px;

instead of:

margin-left:40px;

which is what I want. What is the syntax? Or must I do something else?

-Matt

[Mat]

I think you can make a little circumvention by instead calling a macro that in turn fetches the value;

\define indent_amount() {{!!indent-amount}}

and then

@@margin-left:<<indent_amount>>px;


<$link><$view field=title /></$link>
@@


Now, I don't think you can define the macro in the same tiddler as the styles... (try it) If the styles are just a tiddler-local style block then it should work. Othewise you'll probably have to put it in another tiddler and thus include the tiddler title in the calls.

<:-)

[Matthew Petty]

I've tried that, but it doesn't seem to work.

I've also tried

<$set name="indent_val" value={{!!indent_amount}}>
@@margin-left:<<indent_val>>$px;
<$link><$view field=title /> </$link> <<indent_val>>
@@
</$set>

which also doesn't work - the CSS is just "margin-left:<<indent_val>>$px;"

On Sun, 10 Apr 2016 at 17:17 Mat <matia...@gmail.com> wrote:

I think you can make a little circumvention by instead calling a macro that in turn fetches the value;

/define indent_amout() {{!!indent-amount}}

and then

@@margin-left:<<indent_amount>>px;


<$link><$view field=title /></$link>
@@


Now, I don't think you can define the macro in the same tiddler as the styles... (try it) If the styles are just a tiddler-local style block then it should work. Othewise you'll probably have to put it in another tiddler and thus include the tiddler title in the calls.

<:-)

--
You received this message because you are subscribed to a topic in the Google Groups "TiddlyWiki" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/tiddlywiki/9PszM-7e7EM/unsubscribe.
To unsubscribe from this group and all its topics, send an email to tiddlywiki+...@googlegroups.com.
To post to this group, send email to tiddl...@googlegroups.com.
Visit this group at https://groups.google.com/group/tiddlywiki.
To view this discussion on the web visit https://groups.google.com/d/msgid/tiddlywiki/73a05453-4e79-42f4-b518-9802a015cb22%40googlegroups.com.
For more options, visit https://groups.google.com/d/optout.

[Mat]

This at least works but it feels like there should be something simpler...

\define cc()  
<span style="padding-left:$(xx)$px">
hey
</span>
\end

<$set name="xx" value={{!!indent_amount}}>
<<cc>>
</$set>

<:-)

[Evolena]

This works:

<style>
.indent_field {
margin-left:{{!!indent_amount}}px;
}
</style>

@@.indent_field

<$link><$view field=title /></$link>
@@

Or a variation on Mat solution, with only the style in the macro, not the entire element:

\define m-indent_amount()
margin-left:$(v-indent_amount)$px;
\end

<$set name="v-indent_amount" value={{!!indent_amount}}>
<span style=<<m-indent_amount>>>

<$link><$view field=title /></$link>

</span>
</$set>

The second solution allows to put the macro definition in its own global macro tiddler, to be usable everywhere.

[Mat]

Evolenas solution is clearly superior to mine.

...but I'm proud to say I figured out a possibly better, and completely different, route;

<$image source="" width={{!!indent_amount}} /><$link><$view field=title /></$link>

(width unit is px by default)

<:-)

[Matthew Petty]

Sadly that doesn't work for me either.
This is all taking place inside a list element, so that each item in the list is indented by the correct amount.
It's part of an effort to simulate a nested, indented, task list.

[Mat]

On Sunday, April 10, 2016 at 10:14:07 PM UTC+2, Matthew Petty wrote:

Sadly that doesn't work for me either.
This is all taking place inside a list element, so that each item in the list is indented by the correct amount.
It's part of an effort to simulate a nested, indented, task list.

Well, I do think my last method should work there. I was not clear how to get that invisible pixel to be a tiddler though, so here is such a pixel, as an image. (Really, it's there, just import that tiddler into your tw by drag'n dropping it's title).

You could also try to use it like this without any image (source) at all:

<$image source="" width={{!!indent_amount}} />

... but the missing source shows up as a tiny tiny square, almost like a period dot.

<:-)

[Matthew Petty]

That did work! I thought I could create my own pixel image, but for some reason it wouldn't show up. When I imported yours it worked fine.

Thank you!

[Mat]

Jeez - in reading my first post about the trick to use an image I now note I completely missed to even mention the whole invisible pixel concept. (Or maybe the mere mention of it was also invisible - ooooh!!!)
Anyway, glad you puzzled together my cryptic answers.

<:-)