Add X of Y creatures to HTML5 page

[Chewett]

Add a basic X of Y thing for the creature page.

[Chewett]

Ann. 3397 - [2015-03-30 03:06:36 - Stage 12] - Permalink - Posted By Chewett
Your current number of creatures, and maximum recruitable are now visible on the HTML5 creature page. This has not been backported to the Flash one since we are moving towards only using the HTML5 one.

[Ary Endleg]

:unsure: I don't see it...

[Chewett]

See:



Its possible this text is hidden by some browsers, behind the creatures. This is a known issue but will be fixed in the future when I have finalised work on HTML5 interface.

[I am Bored]

I'm not certain why your's is showing up with nice spacing below that text, but in Opera Classic, there is no room between the bottom of the text and the top of the creature icons. Adding 20px to the base of the absolute positioning used by the elements should provide the correct spacing.

 

I've attached screenshots of what it looks like currently, what it looks like with 20px spacing (ignore the first column, I was seeing what it looked like with 40px spacing), and a highlighted version showing exactly where the top of the element is with 20px spacing.

[Chewett]

I am using google chrome, latest.

As I said >>This is a known issue but will be fixed in the future when I have finalised work on HTML5 interface.

Its not being fixed now is because im going to have to adjust how it works out the "length" of the page a couple times, and I dont want to waste time doing it each and every single time I modify it all.

[I am Bored]

Well, how about we change it so that it doesn't do absolute positioning then?

 

Some jQuery code to achieve the desired effect:

// Now, on to the main changes.
// First we replace all of the absolute positioned pieces with relative positioned versions.
// The creature holders are inline-block so that they flow appropriately.
$('div[id^="div_allcreatures_holder_"]').attr('style', 'display: inline-block; height: 128px; vertical-align: top;');
$('#div_allbckpids_holder').attr('style', 'text-align: center');

// There is an outermost div that is aligning the content to center by default,
// we need it to align left for things to look right.
$('body > table > tbody > tr > td > div[align="center"]').attr('align', 'left');

// We could just put a div around all the creature holders and set a left margin on that,
// but it's a pain to do via jQuery, so we do it this way instead.
$('div[id^="div_allcreatures_holder_"]').each(function(i, elem)
{
	if (i % 4 == 0)
		elem.style.marginLeft = "8px";
});

// Now we get to remove the padding lines that are added by the current code to
// account for the size of the normal content.
$('body > p:has(> br)').remove();

// Add a blank line after the creature capacity info.
$('#div_allcreatures_holder_1').before('<br />');

And, if you are running that code to test what it looks like, you'll also have to recalculate the size of the pagecontent frame:

// And, lastly, we re-calculate the pagecontent size, because we've changed it.
// This doesn't need to be done in the actual changes.
var pagecontent_ifrm = parent.document.getElementById('pagecontent');
pagecontent_ifrm.style.height = 800; //reset
pagecontent_ifrm.style.height = document.body.scrollHeight; //orig

[Chewett]

Simply put, we are probably not going to use absolute positioning.

 

The code just needs some cleaning, its a throwback from the old old old days. Its never been properly changed and made nice with new stuff.