Hover / Click sidebar

#1

Hello,

Hover on button grafik should open the sidebar and keep it open, as log the mouse is in this area.

Click on grafik should open it and keep it open (normal behavior).

How can that be done?

Thanks
Stefan

#2

Not a full solution because of lack of time but here’s a start with CSS:

.tc-topbar.tc-topbar-right:not(:hover) ~ .tc-sidebar-scrollable:not(:hover){
display:none;
}
1 Like
#3

This will be not that friendly on mobile I think?

BTW you can use a startup script to control sidebar, like

You can pass this function as callback to button element’s addEventListener('hover', closeSidebar)

#4

Thanks to @telumire and @linonetwo.

I’m using my wiki not on mobile…

I think, at least {{$:/core/ui/TopBar/menu}} has to be triggered when hover the icon.
But I’ve less knowledge to realize it.

#5

Here’s an interesting solution that I’ve stumbled on: MagicSidebar.

I’ve been playing around with it for a little while and have adapted it for my use (at least I’m considering it). Seems to work very well. The hover area, in my TW at least, is not the open/close of the sidebar, but rather below it. It might be because I’m using the menubar.

4 Likes
#6

Hi @HistoryBuff

thats exact what I’m was looking for - thanks a lot! :+1:

1 Like
#7

Glad you found it useful. I’ve decided to use it myself, but with some tweaks. I moved the readme where the settings are to a new settings tab in the control panel. I’ve also added the animation duration and delay to the settings. I translated the Chinese descriptions into English as well.

#8

Will you share the tweaked version? If we get permission, maybe we can host the English-modified version somewhere as well…

#9

@StS http://j.d.whitespace.tiddlyspot.com/ Jd’s whitespace theme also have sidebar which gets displayed on hover. If you don’t want the entire theme, just copy the sidebar template and stylesheet tiddlers from the theme.

#10

Attached are my modified versions along with the config files. These are very similar to the originals (which I think are very similar to the whitespace theme). I’m not sure who originally came up with the idea, but Kudos to them for doing so.

Sidebar Hover Settings.json (2.1 KB)
Sidebar Hover Stylesheet.json (2.9 KB)
Sidebar Hover Template.json (956 Bytes)
$__config_SidebarHover_animation.json (184 Bytes)
$__config_SidebarHover_display.json (177 Bytes)
$__SidebarHover_metrics_delay.json (176 Bytes)
$__SidebarHover_metrics_duration.json (179 Bytes)
$__SidebarHover_metrics_height.json (176 Bytes)
$__SidebarHover_metrics_width.json (175 Bytes)

2 Likes
#11

Hi @arunnbabu81,

thanks for the info - I found this Link yesterday and was preparing it for my needs.
In the evening I got the hint to MagicSidebar from @HistoryBuff - this plugin fulfills all without big additional configuration / different look and feel etc… - I switched to MagicSidbar :slight_smile:

#12

Can you get the search working with JD’s whitespace? It dosn’t dynamically show results in the sidebar search in the latest versions of TW

#13

@Ste_W search doesn’t work in JD sidebar. i use command palette for routine searches and advanced search for more complex searches