Danbooru

CSS trick: scrolling menu and pool

Posted under General

It is hard to explain what I have done, basically, when you scroll down the page, an icon for the menu and the first poll for that page will scroll down as well, so when you finish reading a page, you don't need to scroll up to read the next page in a pool, overall, you will need to scroll a lot less to get to where you want.

More information and the file can be found here: http://userstyles.org/styles/35130

Updated

Nice work. I've tweaked my local copy to be less intrusive (mostly partial-opacity styles, and some adjustments to the hovered header), but there doesn't seem to be a -equivalent in DText, so I'll dmail it and hope it doesn't get too mangled. It would be a [i]lot[/i] easier to adjust if there was an element containing all the status-note banners (and not also containing the whole sidebar), but you'd need JavaScript to do that without a change on the Danbooru end. (Even having them in the #header rather than the #body div would be better; they look like part of it anyway...) Minor oddity: if you do anything AJAXy that produces a result message (favoriting a post, adding a translation note, etc) the floating pool navbar gets pushed down the page by it. It stays pushed down even though the result message is just part of the normal page flow, not fixed-position. Maybe that's a Firefox bug, I dunno.

Well, someone could do the same thing with a Greasemonkey script; that can do much more extensive page rewriting. The downside, of course, is that it's a lot more work to write and properly test such a Greasemonkey script than it is to set up even fairly complex CSS style tweaks...

I have updated the style with kounishin's version, should make the layout of the status boxes look a bit better, and should make reading a whole lot easier if the scrolling pool window goes over the image

as with the ajaxish effect pushing down the pool window, I would assume that is a bug with firefox, hard to tell though, I'll have a look at properly fixing that some time tomorrow(or in a week).

From a bit more testing, it's not just the AJAX messages that do it; anything that pushes down the "natural" position of the pool navbars will have the same effect. (The "upgrade your account" and Janitor-recruitment messages, for instance.) I don't see why that would happen; position:fixed shouldn't do that unless there's a parent element with non-static position, and I can't see one, but maybe I'm missing something about the page structure.

There are also problems with hidden status-notices. For instance, see post #695257 with image samples turned on; the "image has been resized" status-notice is the one that gets the padding, but if you hit "hide this notice", the div and its padding disappear, and the pool navbar overlaps the "has child posts" one. I can't see any way to get around that in straight CSS, though.

kounishin said:
but if you hit "hide this notice", the div and its padding disappear, and the pool navbar overlaps the "has child posts" one.

I made a workaround for that, if there is a resize_notice or samples_disabled, it will give padding to whatever comes next, this will cause a bit of extra space, but that will be hard to avoid.

While I was looking for possible solutions myself, I ended up rewriting parts of the stylesheet to use CSS3 selectors. I was hoping to use the :not pseudoclass, but it didn't play nicely with Stylish; I did, however, simplify things a bit and also get all of the pool navbars floating, not just the first one.

They still overlay any non-pool notices, so I moved them over to the right of the screen. Overlaying the ads is a better option than overlaying things (like the "has children" notice) that you might actually want to click on - it can be taken out easily enough if you don't like it, though. It's just the "right: 2em;" declaration for the pool-specific navbars.

The updated script is at http://pastebin.com/16X4VGqm (and I should have thought of that option when I first revised it...)

I have updated the style again, the pools are now right aligned, and multiple pools will now be fixed to the browser window.

I might have a look at using the options feature of userstyles so people can have a choice of left or right, but for now, I'm thinking having it on the right makes it look neater, and fixes any problems with overlapping divs.

1