[tw5] An alternative to reveal widgets and detail elements?

Google Group (Read Only)
#1

Nothing revolutionary here. Just the result of some goofing around with CSS.

Give it a spin at TiddlyWiki.com.


<style>
.ch1 div {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover div {display:block;}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<div style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>

```
2 Likes
#2

Hi Charlie,
how do I get a delay of eg. 2sec to display the details when hover the title?

(didn’t succed with transition-delay: 2s;)

Thanks,
Stefan

#3

Give this sloooooooow crawl a spin:

<style>
.ch1 peekaboo {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover peekaboo {display:block;}
.slow {
animation-name: example;
animation-duration: 5s;}
@keyframes example {
0% {height:0px;}
100% {height:150px;}
}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<peekaboo class="slow" style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>
#4

(Previous version had a little typo in the keyframe height. No impact, but fixed in this iteration.)

And a “hover-over, wee delay before display of details” version:

.ch1 peekaboo {display:none;}
.ch1:hover {background-color:#F5F5F5;border:1px solid gray;}
.ch1:hover peekaboo {display:block;}
.slow {
animation-name: example;
animation-duration: 5s;}
@keyframes example {
0% {height:0px;}
20% {height:0px;}
100% {height:100px;}
}
</style>

<$list filter="[tag[Articles]]">
<div class="ch1">
{{!!title}}<br>
<peekaboo class="slow" style="max-height:100px;overflow:auto;">
<$transclude mode="block">
</div>
</div>
</$list>
1 Like
#5

This is also nice behavior.

But I thought when hovering the link (title) - the content will be shown delayed (eg. 2sec) - of course with upper code. :slight_smile:

Thanks, Stefan

edit: works as expected
Thanks Charlie :+1:

#6

I love how compact this code is, and how it relies on nothing other than css!

Some kind of visible “affordance-cue” seems needed, to invite the hovering. Very slightly tweaked (without any delay), I like:

<style>
.pop div {display:none; ; background-color:#ffd;}
.pop:hover {background-color:#ffa; border-right: 6px solid #ffa;}
.pop:hover div {display:block;}
</style>

<$list filter="[tag[Articles]]">
<div class="pop" style="border-top: 6px solid #ffd; border-left: 6px solid #ffd;">
{{!!title}}
<div style="border-left:2em solid #ffa; padding-left:1em; max-height:100px;overflow:auto;">
<$transclude mode="block">
</div></div>
</$list>
1 Like