Drop this in a tiddler at tiddlywiki.com. If you use it, remove the
$action-log widgets.
\define nav-out-actions()
<$action-log $$message="nav-out" $$filter="currentTiddler"
event=<<event-type>> />
<$action-setfield $field=btn-class $value=hide />
\end
\define nav-over-actions()
<$action-log $$message="nav-over" $$filter="currentTiddler"
event=<<event-type>> />
<$action-setfield $field=btn-class $value=show />
\end
<$eventcatcher events="mouseover" selector=".pres"
actions-mouseover=<<nav-out-actions>>>
<div class="pres">Presentation</div>
</$eventcatcher>
<$eventcatcher events="mouseover mouseout" selector=".nav"
actions-mouseover=<<nav-over-actions>>
actions-mouseout=<<nav-out-actions>>
>
<div class="nav">
Navigation
<div class="nav-area">
<span class={{!!btn-class}} style="float:right">
<button>prev</button> <button>next</button>
</span>
</div>
</div>
</$eventcatcher>
<style>
.show { visibility:visible; }
.hide { visibility:hidden; }
.nav {
background-color:red;
color:#fff;
height:80px;
padding:30px;
}
.nav {
}
.pres {
background-color:blue;
color:#fff;
min-height:200px
}
</style>
On Tuesday, January 26, 2021 at 11:57:21 AM UTC-6 coda coder wrote:
> On Tuesday, January 26, 2021 at 6:15:48 AM UTC-6 Mohammad wrote:
>
>> One issue I could not resolve yet is to hide nav buttons after a few
>> seconds and appear it on mouse move.
>> If you note while you keep the mouse on the slide the nav buttons are
>> displayed.
>>
>> Hope someone come with a solution (of course without JS)
>>
>
> You could probably get some mileage using $eventcatcher and mouseover. I
> think I would create an area slightly larger than the the nav area and,
> when the mouse hovers that area, show the buttons. When the mouse hovers
> the presentation area, hide the nav buttons. Make sure you don't hide the
> nav area itself, you will not get the buttons back ;)
>
>
>
>
--
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 [email protected].
To view this discussion on the web visit
https://groups.google.com/d/msgid/tiddlywiki/293eb73b-d71c-44ed-a78b-b6ad05b7d571n%40googlegroups.com.
