Feature - Implemented Make stationary buttons stationary

I've been using KoL's CAB for a long time. Now that I have the preference relayScriptButtonFirst, I can keep my mouse over the script button. I enjoy alternating between clicking "again" and "script" without needing to move my mouse. That's a good thing and it duplicates functionality I have with the CAB. I like the buttons autofilling with the skills I choose to use and the fact that combat has quicker page loads with mafia's buttons, but there are still two features the CAB has which keep me from switching back to using the stationary buttons. This is one of them:


Often after a fight I scroll down the page with my mouse-wheel. This is so that I can see what items I gained from the conflict. Since my script uses macros there are several rounds of combat to look over. Unfortunately when I do this the stationary buttons scroll up off the page so that my mouse is no longer positioned over the "again" button. I have to scroll back up or click the link at the bottom of the page.

It would be great if the stationary buttons stayed in position when I scroll down, just like the CAB does. Is this feasible?

I'm experimenting with this. I looked at the difference between what the CAB generates and what we generate and it just looks like there are a couple of divs surrounding the combat results and it's javascript magic or something.

When I insert comparable divs, my results are erratic.

Pondering.

Yeah, I looked (briefly) at it but got sidetracked by updates. I think it is just html and css rather than javascript, but I could be wrong ....(edit) and am.

Edit again - Ok, maybe not. Just loaded a KoL page into a text editor, and hacking bits out til it stopped working, the relevant CCS is http://images.kingdomofloathing.com/actionbar.6.css. Am now going to try to find out why and how.

Edit the third - Can possibly use (or alter) actionbar.6.css, adding <div id=topbar> around the buttons, and <div class=content id='content_'> around the rest. I guess I'll go try on my computer which has my mafia dev stuff on it.

r13193 has a basic implementation of this. It currently uses the same css files as KOL, so if there is only one row of buttons the space below is a little big. It looks right on Chrome and Firefox when you have two rows of buttons, though. A sophisticated implementation of it would use our own css for it, and would really be nice to work out how to get buttons to wrap into a second line on IE like it does on Chrome and Firefox (though I can't help feeling wrapping tables like that sounds more like a Chrome/Firefox bug than feature, though they work well here).

A thought on the IE not wrapping tables thing. Maybe we should just have all 7xxx range skills on a second row, which would be consistent, and let people configure their number of buttons to make the top row fit well for them ?

Thoughts ? Good? Bad? Have a setting for it (and if so which way to default) ?

Oh, this is fabulous. Yeah, I was beginning to think that making our div be "topbar" rather than "mafiabuttons" (or whatever) was going to be necessary, but I hadn't quite gotten to the point of looking at the .css yet, since I've never learned anything about style sheets.

I've been running with relaySkillButtonCount as 10 for so long that I don't remember what it was like with the default of 5, other than it having the tendency to lose my 5th most used skill when I used my 6th most used skill. In other words, 5 was just not enough. And with 10 skills saved, it always wraps to multiple lines for me.

I recall Storella making a bug report - or, perhaps, just talking on the G-D thread - about how the buttons would not wrap, and it turned out to be an IE thing. The browsers I use - Safari & Firefox - all wrap. And if Chrome and Opera do too, then it looks more and more like an IE bug, not a bug in every other browser. Not that I can really tell; I have a Mac and Microsoft stopped supporting IE on my platform many years ago.

Regarding 7xxx skills on a second line: consider things like arrows from an Obtuse Angel. There are a lot of those - and they have long names. It is not difficult to get multiple lines of 7xxx buttons.

Well, the only thing that makes me thing not an IE bug is that if you make a table, you expect it to stay a table, not to wrap bits of the table over onto the following lines and destroy the formatting. Though in this case this is exactly what we want! Things like the obtuse angel are exactly what I was thinking of, especially as though I might only care about the first skill, if I'm in softcore there might be skills after it I want.

The pain here is that the bit that doesn't scroll is specified as a height, and I'm not sure (as I don't have all my aftercore/softcore toys in hardcore or on alts) how it'd look if the buttons wrap to lower than the piece that doesn't scroll.

Edit - I'll see if there is anything clever that can be done, got some things to try tomorrow.

Ok, I have a fix for the IE issue. We just surround the buttons in a /div which specifies the width as 100% and it forces it to wrap.

I think I should create a css that we use rather than piggybacking on the kol one that is there for another purpose. Do we have a css that is for mafia only (basics.1.css?) that I can add a stationary buttons bit to? Presumably I'd upgrade it to basics.2.css, and change appropriate code, if I did that one?

It doesn't work properly yet (at least in FF, didn't check other browsers):


As you can see it can still cause some buttons to be hidden. The top screenie is how it looks in 13193 (i attached the screenie of how it looked like in build 13185 to the bottom).

Darzil said:

I think I should create a css that we use rather than piggybacking on the kol one that is there for another purpose. Do we have a css that is for mafia only (basics.1.css?) that I can add a stationary buttons bit to? Presumably I'd upgrade it to basics.2.css, and change appropriate code, if I did that one?

Click to expand...

Are you allowed to have multiple style sheets? Then make another one - stationarybuttons.1.css - and include it only when we are putting on stationary buttons.

Regardless, when you are about to submit, make sure that KoLConstants.RELAY_FILES has the new (or version-updated) file; files in that array are served locally and are given Last-Modified and Expires headers to allow the browser to cache them.

Which is also to say, while you are testing, don't add them to RELAY_FILES yet, unless you want to clear your browser cache.

Hmm, stuff to fix - base height of fixed bar on actual content height (requires javascript, but I have a source for that), support buttons on non-fight.php (eg in-line results).

Can't fix til tomorrow, so feel free to back this out for now.

As an additional new bug with this, when using on Internet Explorer with the BatMan relay script, during the first round of combat, the stationary buttons completely disappear. They show up fine in all rounds after that, but... for some reason, during the first round, they're completely off the screen.

I'd also like to point out that the problem with the space at the top not being quite large enough vertically is a bit more general than the obtuse angel. I play in a non-maximized window, so my combat buttons extend over 3 rows normally, and thus I couldn't see all my skills. With the angel out, this can get up to 6 rows or more. I had to revert to 13192 because of it.

I know I'm basically the only person on the internet who browses in a non-maximized window, but this is an issue for me. Not meaning this as a complaint, just pointing out the issue so it gets considered.

There are a couple more divs that are added for the CAB:

<div id='effdiv' style='display: none;'></div>
<div style='overflow: auto;'>

… and associated </div> for that last one. Revision 13197 adds those divs - and inserting Results in-line via ajax doesn't overlap the stationary buttons any more.

Something I did notice, though, is that the "speculation" hover text we put on use links - hover over "[equip]" and we tell you what the effects on modifiers will be, should you click that link - gets truncated at the bottom of the content. That's not new; I'm not sure where I consistently see it - perhaps over the island map when I get the reward from Yossarian, or something - but it is more noticeable now. Take a look at UseLinkDecorator.getSpeculation to see what generates that...

And this is the cause:

<div style='overflow: auto;'>

changing to:

<div style='overflow: visible;'>

makes it work as expected. SInce that is the default, supposedly, I expect that leaving it out would also work. Testing...

It does. Revision 13198 omits it.

Note that this is a difference from the KoL CAB; if you run with that, I expect that "speculation" boxes will get truncated. Perhaps we should munge the 'overflow: auto' into 'overflow: visible' if the KoL CAB is in action...

Very nice!

r13199 should mean button bar expands and contracts to as much space as is needed to display buttons. The buttons should wrap in Internet Explorer now too.

r13200 Added stationarybuttons.css - oops.

Darzil said:

Added stationarybuttons.css.

Click to expand...

No! If you are going to add it to RELAY_FILES, put a version number into the file name so that when we update it, we change the version number and browsers will not use an older cached version. stationarybuttons.1.css

As it turns out, you forgot to do "svn add stationarybuttons.css", so you have time to fix this.

I did that in 13201.