I like the built-in images used for navigation in vanilla TiddlyWiki, so I
decided I'd like to reuse them for some custom navigation applications.
I've run into some problems when trying to resize images.
Here is my code for a button and slider combo for a list of tiddlers:
\define scroll_buttons2(filterlimit: 10000)
<$set name="fivelessthanlimit" filter="[[]eval[$filterlimit$-5]]">
<div style="width: 100%; display: table;">
<div style="display: table-row">
<div style="background-color: red; display: table-cell;">
<$button class="custom_navbutton">
{{$:/core/images/left-arrow}}
<$set name="max_prev_index"filter="[{Draft of
'Scratch_Pad'!!scroll_index}eval[min(title, <<fivelessthanlimit>>)]]">
<$set name="prev_index" filter="[[]eval[max(<<max_prev_index>>-5,0)]]">
<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<prev_index>>/>
<$action-setfield $tiddler="Draft of 'Scratch_Pad'"
scroll_index=<<prev_index>>/>
</$set>
</$set>
</$button>
</div>
<div style="background-color: blue; display: table-cell">
<$range class="custom_range" tiddler="Draft of 'Scratch_Pad'"
field="scroll_index" min="0" max=<<fivelessthanlimit>>
default={{Scratch_Pad!!scroll_index}}/>
</div>
<div style="background-color: red; display: table-cell">
<$button class="custom_navbutton">{{$:/core/images/right-arrow}}
<$set name="next_index" filter="[{Draft of
'Scratch_Pad'!!scroll_index}eval[min(title + 5, <<fivelessthanlimit>>)]]">
<$action-setfield $tiddler="Scratch_Pad" scroll_index=<<next_index>>/>
<$action-setfield $tiddler="Draft of 'Scratch_Pad'"
scroll_index=<<next_index>>/>
</$set>
</$button>
</div>
</div>
</div>
<<end_div>>
\end
Right now, this is the result:
[image: Screenshot.jpg]
The red and blue backgrounds are there to make it easier to see the bounds
of the div's.
I'd like to increase the size of the arrow buttons, and I tried following
the Image Gallery example on the TiddlyWiki site, but that didn't seem to
work for me. I'm not sure if the problem is that the images are in the
button widget or if I'm not understanding CSS all that well.
I tried this previously with regular HTML tables instead of CSS, and could
not increase the size of the arrow buttons to be what I wanted. If anyone
can guide me toward something that'll let me increase the arrow size,
that'd be great!
--
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 tiddlywiki+unsubscr...@googlegroups.com.
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/e4a6f6e9-1722-4788-88b6-9ddae52d52d6%40googlegroups.com.
