54 lines
2.3 KiB
Markdown
54 lines
2.3 KiB
Markdown
I was just hovering over the '...' next to the backlinks on a page on
|
|
<http://ikiwiki.info/>. In terms of the size of my browser window, this was
|
|
towards the bottom-right of the screen.
|
|
|
|
When I hovered over the '...', the additional backlinks float appeared. This
|
|
caused the page length to grow down, meaning a horizontal scrollbar was added
|
|
to the page. This meant the text reflowed, and the '...' moved outside of my
|
|
mouse pointer region.
|
|
|
|
This caused an infinite loop of box appears... text moves, box disappears...
|
|
box re-appears.. which was not very visually pleasant.
|
|
|
|
In general I think that the onhover float is a bit of bad UI. Even a truncated
|
|
list of backlinks looks cluttered due to there being no delimiters. I moved to
|
|
having an always-complete list of backlinks and having them as LI elements
|
|
inside a UL to make it look neater, although I appreciate that would make some
|
|
pages very long indeed.
|
|
|
|
How about doing something a little like [[plugins/toggle]] for the excess
|
|
items instead?
|
|
|
|
-- [[Jon]]
|
|
|
|
----
|
|
|
|
An additional, related issue: if the box expands beyond the bottom of the
|
|
page, you might move your mouse pointer to the scrollbar in order to move
|
|
further down the list, but of course then you are outside the hover region.
|
|
|
|
-- [[Jon]]
|
|
|
|
> I agree, browser handling of this CSS is often not good.
|
|
>
|
|
> A toggle would be the perfect UI, but the heaviness of needing
|
|
> to include 30 lines of javascript to do it, plus then it only working
|
|
> with javascript enabled, is also not optimal.
|
|
>
|
|
> Another idea would be to make the "..." a link to the ikiwiki cgi.
|
|
> The cgi could then have a mode that displays all the backlinks of a page
|
|
> in a list.
|
|
>
|
|
> Yet another idea: Find some more refined CSS for handling a variable
|
|
> size popup.. --[[Joey]]
|
|
|
|
>> The HTML5 "Details" tag would be perfect:
|
|
>> <https://www.w3schools.com/TAGS/tag_details.asp>
|
|
>> <details><summary>example</summary>here's an example</details>
|
|
>> The above works for me on ikiwiki.info which does not have `html5:1`
|
|
>> so far as I can tell *— [[Jon]], 2020-04-21*
|
|
|
|
>>> [[!tag patch]]Patch in my repo, commit f051f84f632c3eaf86c5cff172692ce71ad5375d.
|
|
>>> [[!template id=gitbranch branch=jon/more-backlinks-html5-use-details-tag author="[[Jon]]"]]
|
|
>>> (I must say this looks *much* nicer, IMHO) *—[[Jon]], 2020-10-07*
|