Feature - Implemented Make stationary buttons stationary
- Thread starter Bale
- Start date
matt.chugg
Moderator
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.
In my day to day job, I tend to use a query string with my CSS file declaration to prevent caching, this means I don't have to update the Filename each time, just change the declaration. Sometimes I also use PHP to automatically update the querystring every day to eliminate this change as well.
In this instance, I'm fairly sure we use use the mafia build version variable, meaning that changes could be made to CSS files without having to rename the file OR update the declaration.
<link rel="stylesheet" type="text/css" href="stationarybuttons.css?v={$mafiaBuildNumber}" />
This should force a refresh on css, every time a new and previously unused build is executed.
Also, (please don't think i'm being patronising in any way, everyone may know this already), I find the chrome "web inspector" incredibly useful for debugging CSS and JS, either hit F12, or right click on something and click inspect element, you can add inline css, turn on and off css to workout what you need without having to refresh on a regular basis. FF and Safari have similar tools, I tend to use chrome for the most part.
Last edited:
Ok, quite far out of my comfort zone here, so asking for someone who knows more to check before committing this.
Attached is a patch that seems to work for me. JQuery seems to be needed in order to handle dynamically changing where the content_ div starts (after the resizable mafiabuttons div). The patch just references the JQuery that the example I copied referenced.
However I note an earlier version of JQuery is referenced in the same page (.min, so maybe has many functions removed, which is why I need to add another?), and I have three version in my /images/scripts directory. I'm not sure of the impact of referencing multiple versions on the same page.
What should we be doing here? Referencing it as I do now, copying and cutting down that version to only what we need, and adding it to relay files?
Attached is a patch that seems to work for me. JQuery seems to be needed in order to handle dynamically changing where the content_ div starts (after the resizable mafiabuttons div). The patch just references the JQuery that the example I copied referenced.
However I note an earlier version of JQuery is referenced in the same page (.min, so maybe has many functions removed, which is why I need to add another?), and I have three version in my /images/scripts directory. I'm not sure of the impact of referencing multiple versions on the same page.
What should we be doing here? Referencing it as I do now, copying and cutting down that version to only what we need, and adding it to relay files?
As I understand it (bearing in mind til yesterday I hadn't heard of jQuery), the commands it uses are jQuery (a javascript library) rather than javascript. Certainly if the jQuery include is removed, it doesn't function.
The reason that it is recommended is that in straight JavaScript you can query the height of an element and it'll give you the height it was given in css, not the current height. As we want to use the actual heights, rather than preset heights, this won't work. Or at least that's how I understand it after banging my head against this particular door for a few hours.
The reason that it is recommended is that in straight JavaScript you can query the height of an element and it'll give you the height it was given in css, not the current height. As we want to use the actual heights, rather than preset heights, this won't work. Or at least that's how I understand it after banging my head against this particular door for a few hours.
xKiv
Active member
This uses jquery:
$ is a funny-named javascript object created by jquery. It's a function (which is why it can be called: "$(parameter goes here)" and returns another jquery/javascript object, which can be chained to do stuff.
$(document) will return jquery object representing (root element of) the entire document.
The "ready" method (actually function, but it's called in an object-oriented manner) is used to delay execution until the entire thing is loaded (to ensure that all DOM objects are already initialized), so the first line there sets up resetPosition (which is a javascript function declared/defined elsewhere) to run when the page is done loading (from memory, I think that includes loading and rendering all top-level javascript, css, images, ...).
The "resize" method is used to setup callback for when DOM's resize event fires on something (in this case, on the entire window).
(you could also use strings with css locators - $('div.content#b') will match any div elements with class "content" and id "b", etc)
Also, jquery has certain advantage in the area of having been developed by many people to work on various browsers with the same syntax ...
ETA: and here's resetPosition, which uses jquery, itself:
That sets the "top" css attribute of element with id "content_" to height of the "mafiabuttons" element. Which is what we need (absolutely positioned elements don't count when allocating space for normal elements, so one has to put in enough margin/padding by hand).
Code:
$(document).ready( resetPosition );
$(window).resize( resetPosition );$ is a funny-named javascript object created by jquery. It's a function (which is why it can be called: "$(parameter goes here)" and returns another jquery/javascript object, which can be chained to do stuff.
$(document) will return jquery object representing (root element of) the entire document.
The "ready" method (actually function, but it's called in an object-oriented manner) is used to delay execution until the entire thing is loaded (to ensure that all DOM objects are already initialized), so the first line there sets up resetPosition (which is a javascript function declared/defined elsewhere) to run when the page is done loading (from memory, I think that includes loading and rendering all top-level javascript, css, images, ...).
The "resize" method is used to setup callback for when DOM's resize event fires on something (in this case, on the entire window).
(you could also use strings with css locators - $('div.content#b') will match any div elements with class "content" and id "b", etc)
Also, jquery has certain advantage in the area of having been developed by many people to work on various browsers with the same syntax ...
ETA: and here's resetPosition, which uses jquery, itself:
Code:
function resetPosition() {
var topbar = $('#mafiabuttons').height();
$('#content_').css( 'top', topbar + 'px' );
}That sets the "top" css attribute of element with id "content_" to height of the "mafiabuttons" element. Which is what we need (absolutely positioned elements don't count when allocating space for normal elements, so one has to put in enough margin/padding by hand).
Last edited:
Thank you!
Now, back to the issue at hand: with the current checked-in code, the stationary buttons overlap with the fight page, every time. That happens with checked-in code and with your patch.
I'm going to make a submit which keeps the btnwrap div, but uses the KoL actionbar css rather than your.
This means the same-old fixed height stationary buttons, but, at least it works for me.
I am sure you'll figure it out. I have to go do some other stuff for a few hours.
Now, back to the issue at hand: with the current checked-in code, the stationary buttons overlap with the fight page, every time. That happens with checked-in code and with your patch.
I'm going to make a submit which keeps the btnwrap div, but uses the KoL actionbar css rather than your.
This means the same-old fixed height stationary buttons, but, at least it works for me.
I am sure you'll figure it out. I have to go do some other stuff for a few hours.
Meh, that suggests that Jquery might not be supported on your Mac browser or something. I think we'll have to set the height of mafiabuttons and top position of content_ as the actionbar one, then when the javascript doesn't change it, if the browser doesn't support it, it'll display better than now.
Can we nail browser developers to their desks til they support html/css/javascript etc the same way ?
Can we nail browser developers to their desks til they support html/css/javascript etc the same way ?
That is the entire purpose of frameworks like jQuery: to offload handling discrepancies in browser implementations to a framework, not the end application developer. Hm.
That's because the resizing javascript isn't working on your browser I guess. Or stationarybuttons.1.js hasn't ended up in \relay?
On Firefox 24.0 on Windows I correctly get this:
What version are you running? Maybe there is a better jQuery build to reference that supports your browser also.
On Firefox 24.0 on Windows I correctly get this:
What version are you running? Maybe there is a better jQuery build to reference that supports your browser also.
Bingo. I can't apply patch files that have CR characters in them, so I manually insert them, piece by piece - which also lets be study exactly what each change is doing - and I neglected to add STATIONARYBUTTONS_JS to RELAY_FILES.
Works fine now. Submit it.
By the way - I want to say that this was nicely done. I am bemused at how many versions of jquery KoL itself uses - not to mention this or that script, and now KoLmafia itself - but I don't think there is anything we can do about that. If User X wants version Y of jquery then, by golly, they can use it.
Thank you for doing this. Can we mark it implemented yet?
Thank you for doing this. Can we mark it implemented yet?